'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Check, X, ArrowRight, Sparkles, RotateCcw } from 'lucide-react';
import Mascot from '../Mascot';
import Confetti from '../Confetti';
import { bn } from '@/lib/bn';

interface DemoQ {
  q: string;
  options: string[];
  correct: number;
  explain: string;
}

// Self-contained sample questions (no API): a taste of the real app.
const QUESTIONS: DemoQ[] = [
  { q: '‘আম’ শব্দটা কোন বর্ণ দিয়ে শুরু?', options: ['আ', 'ই', 'উ', 'এ'], correct: 0, explain: '‘আম’ শুরু হয় ‘আ’ দিয়ে।' },
  { q: '২ + ৩ = কত?', options: ['৪', '৫', '৬', '৭'], correct: 1, explain: '২ আর ৩ মিলে ৫ হয়।' },
  { q: 'দিনের বেলা আকাশে কী দেখা যায়?', options: ['চাঁদ', 'তারা', 'সূর্য', 'বৃষ্টি'], correct: 2, explain: 'দিনে আকাশে সূর্য থাকে।' },
];

export default function LiveDemo({ onCta }: { onCta: () => void }) {
  const [index, setIndex] = useState(0);
  const [picked, setPicked] = useState<number | null>(null);
  const [confetti, setConfetti] = useState(0);
  const [done, setDone] = useState(false);

  const q = QUESTIONS[index];
  const locked = picked !== null;
  const isRight = picked === q.correct;

  function pick(i: number) {
    if (locked) return;
    setPicked(i);
    if (i === q.correct) setConfetti((c) => c + 1);
  }

  function next() {
    if (index + 1 >= QUESTIONS.length) {
      setDone(true);
      return;
    }
    setIndex((n) => n + 1);
    setPicked(null);
  }

  function restart() {
    setIndex(0);
    setPicked(null);
    setDone(false);
  }

  return (
    <div className="relative mx-auto w-full max-w-md rounded-4xl border-[3px] border-ink bg-white p-5 shadow-hard-lg sm:p-6">
      {confetti > 0 && isRight && !done && <Confetti key={`ld-${confetti}`} pieces={20} />}

      {done ? (
        <div className="flex flex-col items-center py-4 text-center">
          {confetti > 0 && <Confetti key={`ldf-${confetti}`} pieces={30} />}
          <Mascot mood="happy" size={80} />
          <h3 className="mt-3 font-heading text-xl font-extrabold text-ink">দারুণ খেলেছ! 🎉</h3>
          <p className="mt-1 text-sm text-ink-soft">এভাবেই বাচ্চা খেলতে খেলতে শিখবে।</p>
          <button
            onClick={onCta}
            className="mt-4 flex items-center justify-center gap-2 rounded-2xl bg-mango-500 px-6 py-3.5 text-base font-bold text-white shadow-pop transition active:scale-[0.98]"
          >
            <Sparkles className="h-5 w-5" /> পুরোটা শুরু করো
          </button>
          <button
            onClick={restart}
            className="mt-2 flex items-center gap-1 text-sm font-semibold text-ink-faint transition hover:text-ink-soft"
          >
            <RotateCcw className="h-4 w-4" /> আবার
          </button>
        </div>
      ) : (
        <>
          <div className="mb-3 flex items-center gap-2.5">
            <Mascot mood={locked ? (isRight ? 'happy' : 'sad') : 'idle'} size={40} />
            <span className="rounded-full bg-cream-100 px-3 py-1 text-xs font-semibold text-ink-soft">
              ছোট্ট ডেমো · {bn(index + 1)}/{bn(QUESTIONS.length)}
            </span>
          </div>

          <h3 className="font-heading text-lg font-bold leading-snug text-ink">{q.q}</h3>

          <div className="mt-4 grid grid-cols-2 gap-2.5">
            {q.options.map((opt, i) => {
              const correct = locked && i === q.correct;
              const wrong = locked && picked === i && i !== q.correct;
              return (
                <motion.button
                  key={i}
                  disabled={locked}
                  onClick={() => pick(i)}
                  whileTap={{ scale: locked ? 1 : 0.96 }}
                  className={`flex min-h-[52px] items-center justify-between gap-1 rounded-2xl border-2 px-4 py-3 text-left text-lg font-semibold transition ${
                    correct
                      ? 'border-leaf-500 bg-leaf-50 text-leaf-700'
                      : wrong
                        ? 'border-mango-500 bg-mango-50 text-mango-700'
                        : 'border-cream-200 bg-cream-50 text-ink hover:border-mango-400'
                  }`}
                >
                  <span>{opt}</span>
                  {correct && <Check className="h-5 w-5 shrink-0 text-leaf-600" />}
                  {wrong && <X className="h-5 w-5 shrink-0 text-mango-600" />}
                </motion.button>
              );
            })}
          </div>

          <div className="mt-4 min-h-[52px]">
            <AnimatePresence mode="wait">
              {locked && (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0 }}
                >
                  <p className={`text-sm font-semibold ${isRight ? 'text-leaf-700' : 'text-sun-600'}`}>
                    {isRight ? 'একদম ঠিক! ⭐' : 'আরেকবার দেখো!'} {q.explain}
                  </p>
                  <button
                    onClick={next}
                    className="mt-2 flex w-full items-center justify-center gap-2 rounded-2xl bg-mango-500 px-5 py-3 font-bold text-white shadow-pop transition active:scale-[0.98]"
                  >
                    {index + 1 >= QUESTIONS.length ? 'শেষ' : 'পরের প্রশ্ন'}
                    <ArrowRight className="h-5 w-5" />
                  </button>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </>
      )}
    </div>
  );
}