'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import type { UnionFindNodeState } from '@/lib/visualizations/types';

interface UnionFindNodeProps {
  node: UnionFindNodeState;
  x: number;
  y: number;
  radius?: number;
  className?: string;
}

const STATE_CLASSES = {
  normal: 'fill-[var(--surface-variant)] stroke-[var(--border)]',
  root: 'fill-[var(--primary)]/20 stroke-[var(--primary)]',
  finding: 'fill-[var(--info)]/20 stroke-[var(--info)]',
  compressing: 'fill-[var(--info)]/30 stroke-[var(--info)]',
  merging: 'fill-[var(--warning)]/20 stroke-[var(--warning)]',
  highlighted: 'fill-[var(--primary)]/30 stroke-[var(--primary)]',
  cycle: 'fill-[var(--error)]/20 stroke-[var(--error)]',
} as const;

const TEXT_CLASSES = {
  normal: 'fill-[var(--foreground)]',
  root: 'fill-[var(--primary)]',
  finding: 'fill-[var(--info)]',
  compressing: 'fill-[var(--info)]',
  merging: 'fill-[var(--warning)]',
  highlighted: 'fill-[var(--primary)]',
  cycle: 'fill-[var(--error)]',
} as const;

export function UnionFindNode({
  node,
  x,
  y,
  radius = 24,
  className,
}: UnionFindNodeProps) {
  const isActive = node.state === 'finding' || node.state === 'compressing' || node.state === 'merging';
  const isRoot = node.parentId === null;

  return (
    <motion.g
      initial={false}
      animate={{
        scale: isActive ? 1.1 : 1,
      }}
      transition={{
        type: 'spring',
        stiffness: 300,
        damping: 30,
      }}
      style={{ transformOrigin: `${x}px ${y}px` }}
      className={cn(className)}
    >
      {/* Main circle */}
      <motion.circle
        cx={x}
        cy={y}
        r={radius}
        strokeWidth={isRoot ? 3 : 2}
        className={cn(
          'transition-colors duration-200',
          STATE_CLASSES[node.state]
        )}
        initial={false}
        animate={{
          filter: isActive ? 'drop-shadow(0 0 8px var(--primary))' : 'none',
        }}
        transition={{ duration: 0.2 }}
      />

      {/* Root indicator: inner circle */}
      {isRoot && (
        <motion.circle
          cx={x}
          cy={y}
          r={radius - 6}
          strokeWidth={2}
          fill="none"
          className={cn(
            'transition-colors duration-200',
            STATE_CLASSES[node.state]
          )}
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.2 }}
        />
      )}

      {/* Value label */}
      <text
        x={x}
        y={y}
        textAnchor="middle"
        dominantBaseline="central"
        className={cn(
          'pointer-events-none select-none font-mono text-sm font-medium',
          TEXT_CLASSES[node.state]
        )}
      >
        {node.value}
      </text>

      {/* Rank badge (top-right corner) */}
      <g>
        <circle
          cx={x + radius * 0.7}
          cy={y - radius * 0.7}
          r={10}
          className="fill-[var(--surface)] stroke-[var(--border)]"
          strokeWidth={1}
        />
        <text
          x={x + radius * 0.7}
          y={y - radius * 0.7}
          textAnchor="middle"
          dominantBaseline="central"
          className="pointer-events-none select-none font-mono text-xs fill-[var(--muted-foreground)]"
        >
          {node.rank}
        </text>
      </g>
    </motion.g>
  );
}
