'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import type { DecisionCallout, VisualizationPhase } from '@/lib/visualizations/types';

interface ExplanationPanelProps {
  explanation: string;
  decision?: DecisionCallout;
  phase: VisualizationPhase;
  className?: string;
}

const PHASE_LABELS: Record<VisualizationPhase, string> = {
  problem: 'Problem',
  intuition: 'Intuition',
  pattern: 'Pattern',
  code: 'Code',
  execution: 'Execution',
};

const PHASE_COLORS: Record<VisualizationPhase, string> = {
  problem: 'bg-error/20 text-error',
  intuition: 'bg-warning/20 text-warning',
  pattern: 'bg-info/20 text-info',
  code: 'bg-primary/20 text-primary',
  execution: 'bg-success/20 text-success',
};

export function ExplanationPanel({
  explanation,
  decision,
  phase,
  className,
}: ExplanationPanelProps) {
  return (
    <div
      className={cn(
        'flex h-28 gap-4 rounded-lg border border-border bg-surface p-3',
        className
      )}
    >
      {/* Left side: phase badge + explanation */}
      <div className="flex flex-1 flex-col overflow-hidden">
        <span
          className={cn(
            'mb-1.5 w-fit rounded-full px-2 py-0.5 text-xs font-medium',
            PHASE_COLORS[phase]
          )}
        >
          {PHASE_LABELS[phase]}
        </span>
        <AnimatePresence mode="wait">
          <motion.p
            key={explanation}
            initial={{ opacity: 0, y: 5 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -5 }}
            transition={{ duration: 0.15 }}
            className="text-sm leading-snug text-foreground"
          >
            {explanation}
          </motion.p>
        </AnimatePresence>
      </div>

      {/* Right side: decision point (full height) */}
      {decision && (
        <motion.div
          key={decision.question}
          initial={{ opacity: 0, x: 10 }}
          animate={{ opacity: 1, x: 0 }}
          className="flex w-72 shrink-0 flex-col justify-center rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-xs"
        >
          <div className="mb-1 font-medium text-primary">Decision Point</div>
          <div className="flex items-center gap-1">
            <span className="text-foreground">{decision.question}</span>
            <span className="font-mono text-primary">{decision.answer}</span>
          </div>
          <div className="mt-0.5 text-success">→ {decision.action}</div>
        </motion.div>
      )}
    </div>
  );
}
