'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import type { BitManipulationState } from '@/lib/visualizations/types';
import { BitDisplay } from '../primitives/bit-display';

interface BitManipulationViewProps {
  state: BitManipulationState;
  bitWidth?: number;
  className?: string;
}

const OPERATION_SYMBOLS = {
  XOR: '⊕',
  AND: '&',
  OR: '|',
  NOT: '~',
} as const;

export function BitManipulationView({
  state,
  bitWidth = 4,
  className,
}: BitManipulationViewProps) {
  const hasOperation = state.operation && state.operands.length >= 2;
  const hasResult = state.result;

  return (
    <div className={cn('flex flex-col items-center gap-4', className)}>
      {/* Label */}
      {state.label && (
        <span className="text-sm font-medium text-[var(--muted-foreground)]">
          {state.label}
        </span>
      )}

      {/* Operation layout */}
      <div className="flex flex-col items-center gap-2">
        {/* Operands */}
        {state.operands.map((operand, index) => (
          <motion.div
            key={operand.id}
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="flex items-center gap-3"
          >
            {/* Show operation symbol before second operand */}
            {index === 1 && hasOperation && (
              <span className="w-6 text-center text-lg font-bold text-[var(--primary)]">
                {OPERATION_SYMBOLS[state.operation!]}
              </span>
            )}
            {index === 0 && hasOperation && (
              <span className="w-6" /> /* Spacer for alignment */
            )}
            <BitDisplay bit={operand} bitWidth={bitWidth} />
          </motion.div>
        ))}

        {/* Divider line and result */}
        {hasResult && (
          <>
            <motion.div
              initial={{ scaleX: 0 }}
              animate={{ scaleX: 1 }}
              transition={{ delay: 0.2 }}
              className="w-full h-0.5 bg-[var(--border)] my-1"
            />
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="flex items-center gap-3"
            >
              <span className="w-6 text-center text-lg font-bold text-green-500">
                =
              </span>
              <BitDisplay bit={state.result!} bitWidth={bitWidth} />
            </motion.div>
          </>
        )}
      </div>
    </div>
  );
}

interface BitXORSequenceProps {
  states: BitManipulationState[];
  bitWidth?: number;
  className?: string;
}

export function BitXORSequence({
  states,
  bitWidth = 4,
  className,
}: BitXORSequenceProps) {
  return (
    <div className={cn('flex flex-wrap items-start justify-center gap-8', className)}>
      {states.map((state) => (
        <BitManipulationView
          key={state.id}
          state={state}
          bitWidth={bitWidth}
        />
      ))}
    </div>
  );
}

interface BitArrayWithBinaryProps {
  values: Array<{
    value: number;
    bits: string;
    state: 'normal' | 'highlighted' | 'comparing' | 'result' | 'cancelled';
  }>;
  bitWidth?: number;
  label?: string;
  className?: string;
}

export function BitArrayWithBinary({
  values,
  bitWidth = 4,
  label,
  className,
}: BitArrayWithBinaryProps) {
  return (
    <div className={cn('flex flex-col items-center gap-2', className)}>
      {label && (
        <span className="text-sm font-medium text-[var(--muted-foreground)]">
          {label}
        </span>
      )}
      <div className="flex flex-wrap items-end justify-center gap-4">
        {values.map((item, index) => (
          <BitDisplay
            key={index}
            bit={{
              id: `arr-${index}`,
              value: item.value,
              bits: item.bits,
              state: item.state,
            }}
            bitWidth={bitWidth}
            showLabel={false}
          />
        ))}
      </div>
    </div>
  );
}