import { useEffect, useRef, useState } from 'react';
import { AnimatePresence, motion } from 'motion/react';
import { Brain, Check, ChevronLeft, Coins, Compass, Heart, Infinity as InfinityIcon, Lightbulb, Ruler, Sparkles, Star, Target, ThumbsUp, X, Zap, type LucideIcon } from 'lucide-react';
import { api, ApiError, type AnswerResult, type Hearts, type Question } from '@/api';
import { useAppData } from '@/state/AppData';
import { fetchHome } from '@/state/subject';
import { findNode, findNodeOfLesson, nextLessonOf, unitColor } from '@/state/curriculum';
import { useNav } from '@/nav/Navigator';
import { newIdempotencyKey } from '@/api/http';
import { SeyarMascot } from '@/mascots/SeyarMascot';
import type { SeyarMood } from '@/mascots/seyar';
import { NoHeartsScreen } from '@/components/NoHeartsScreen';
import { Sheet } from '@/components/Sheet';
import { useToast } from '@/components/Toast';
import { ErrorState, InlineError, LoadingState, PrimaryButton, SecondaryButton, Screen } from '@/components/ui';
import { friendlyError } from '@/lib/errors';
import { toFa } from '@/lib/format';
import { MathText } from '@/lib/MathText';
import { Diagram } from '@/diagram';
import { FeedbackBar } from '@/components/FeedbackBar';
import { sounds } from '@/lib/sound';
import { useGateHold } from '@/lib/useAsync';
import { StreakCelebration, StreakFlame } from '@/components/StreakFlame';
import { useCompanion } from '@/state/companion';

type Phase =
  | { kind: 'loading' }
  | { kind: 'error'; error: unknown }
  | { kind: 'playing' }
  | { kind: 'noHearts'; nextRefillAt: string | null; fullRefillAt: string | null }
  | { kind: 'finishing' }
  | { kind: 'finishError'; error: unknown }
  | { kind: 'result'; result: QuizResult };

/** نتیجه‌ی مشترکِ پایانِ درس و پایانِ جزیره. */
interface QuizResult {
  stars: number;
  xpEarned: number;
  coinsEarned: number;
  /** فقط در آزمونِ جزیره. */
  nextNodeId?: string | null;
}

type PlayQuestion = Question & { lessonId?: string };

/**
 * تمرین: سوال به سوال، با قلب، و در پایان ثبتِ نتیجه.
 *
 * دو حالت دارد. با `lessonId` تمرینِ همان یک درس است (هر درس معمولاً فقط یک
 * سوال دارد). بدونِ آن آزمونِ کلِ جزیره است (`/nodes/{id}/quiz`، ۴ سوال از
 * درس‌های مختلف) که با تمام شدنش جزیره تمام و جزیره‌ی بعدی باز می‌شود؛ مسیرِ
 * اصلیِ بازی همین است.
 */
export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: string }) {
  const { home, companion, summary, refreshHome, refreshSummary } = useAppData();
  const look = useCompanion();
  // زنجیره پیش از این تمرین؛ اگر بعد از ثبت امروز روشن شد، صفحه‌ی «روزِ پیاپی» نشان داده می‌شود.
  const streakBefore = useRef(summary?.streak ?? null);
  const [streakUp, setStreakUp] = useState<{ from: number; to: number } | null>(null);
  const nav = useNav();
  const toast = useToast();

  const [phase, setPhase] = useState<Phase>({ kind: 'loading' });
  const [questions, setQuestions] = useState<PlayQuestion[]>([]);
  const nodeMode = lessonId === undefined;
  const [hearts, setHearts] = useState<Hearts | null>(null);
  const [index, setIndex] = useState(0);
  const [selected, setSelected] = useState<string | null>(null);
  const [answer, setAnswer] = useState<AnswerResult | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [correctCount, setCorrectCount] = useState(0);
  const [confirmExit, setConfirmExit] = useState(false);
  const [reload, setReload] = useState(0);
  // پشتِ هم درست؛ برای «سه تا پشتِ هم!» (حسِ پیشرفت وسطِ آزمون، نه فقط آخرش).
  const [combo, setCombo] = useState(0);
  useGateHold(phase.kind === 'loading');

  // یک کلید برای هر سوال و یکی برای پایانِ درس؛ تکرارِ درخواست دوبار ثبت نمی‌شود.
  const answerKeys = useRef(new Map<string, string>());
  const completeKey = useRef(newIdempotencyKey());

  const ref = findNode(home, nodeId) ?? (lessonId !== undefined ? findNodeOfLesson(home, lessonId) : null);
  const color = ref ? unitColor(ref.unitIndex) : '#ED6956';
  const question = questions[index];
  const isLast = index === questions.length - 1;
  const unlimited = hearts?.isUnlimited ?? false;
  const heartsLeft = hearts?.currentHearts ?? 5;
  const outOfHearts = !unlimited && hearts !== null && heartsLeft <= 0;

  useEffect(() => {
    let alive = true;
    setPhase({ kind: 'loading' });
    const load: Promise<PlayQuestion[]> = nodeMode
      ? api.nodeQuiz(nodeId ?? '').then((r) => r.questions)
      : api.lesson.questions(lessonId);
    Promise.all([load, api.hearts().catch(() => null)])
      .then(([qs, h]) => {
        if (!alive) return;
        setQuestions(qs);
        setHearts(h);
        setIndex(0);
        setSelected(null);
        setAnswer(null);
        setCorrectCount(0);
        setCombo(0);
        answerKeys.current.clear();
        completeKey.current = newIdempotencyKey();
        if (h && !h.isUnlimited && h.currentHearts <= 0) setPhase({ kind: 'noHearts', nextRefillAt: h.nextRefillAt, fullRefillAt: h.fullRefillAt });
        else setPhase({ kind: 'playing' });
      })
      .catch((error: unknown) => {
        if (!alive) return;
        // فصلِ غیرِ اول بی‌اشتراک (۴۰۲)؛ صفحه‌ی خطا معنا ندارد، کاربر یک‌راست به اشتراک‌ها می‌رود.
        if (error instanceof ApiError && error.code === 'subscription_required') nav.replace({ name: 'subscription' });
        else setPhase({ kind: 'error', error });
      });
    return () => {
      alive = false;
    };
  }, [lessonId, nodeId, nodeMode, reload]);

  /** انتخاب فقط گزینه را آبی می‌کند؛ تا «بررسی» نزده، چیزی ثبت یا رو نمی‌شود و می‌شود عوضش کرد. */
  function choose(optionId: string) {
    if (!question || answer || submitting) return;
    if (optionId !== selected) sounds.select();
    setSelected(optionId);
  }

  async function check() {
    if (!question || selected === null || answer || submitting) return;
    const optionId = selected;
    setSubmitting(true);
    let key = answerKeys.current.get(question.id);
    if (!key) {
      key = newIdempotencyKey();
      answerKeys.current.set(question.id, key);
    }
    try {
      const result = await api.lesson.answer(question.id, optionId, key);
      setAnswer(result);
      setHearts((h) => (h ? { ...h, currentHearts: result.heartsRemaining } : h));
      if (result.correct) {
        setCorrectCount((c) => c + 1);
        setCombo(combo + 1);
        if (look.char === 'delta' && combo + 1 >= 2) sounds.combo();
        sounds.correct(look.pitch);
      } else {
        setCombo(0);
        sounds.wrong();
      }
    } catch (err) {
      // گزینه انتخاب‌شده می‌ماند تا کاربر دوباره «بررسی» بزند.
      if (err instanceof ApiError && err.code === 'no_hearts') {
        setPhase({
          kind: 'noHearts',
          nextRefillAt: (err.body.nextRefillAt as string | null) ?? null,
          fullRefillAt: (err.body.fullRefillAt as string | null) ?? null,
        });
      } else {
        toast(friendlyError(err, 'جوابت ثبت نشد، دوباره بزن'), 'error');
      }
    } finally {
      setSubmitting(false);
    }
  }

  async function next() {
    if (outOfHearts && !isLast) {
      const h = await api.hearts().catch(() => null);
      setPhase({
        kind: 'noHearts',
        nextRefillAt: h?.nextRefillAt ?? hearts?.nextRefillAt ?? null,
        fullRefillAt: h?.fullRefillAt ?? hearts?.fullRefillAt ?? null,
      });
      return;
    }
    if (!isLast) {
      setIndex((i) => i + 1);
      setSelected(null);
      setAnswer(null);
      return;
    }
    await finish();
  }

  async function finish() {
    setPhase({ kind: 'finishing' });
    try {
      const payload = { correctCount, totalQuestions: questions.length };
      const result: QuizResult = nodeMode
        ? await api.nodeQuizComplete(nodeId ?? '', payload, completeKey.current)
        : await api.lesson.complete(lessonId, payload, completeKey.current);
      setPhase({ kind: 'result', result });
      sounds.finish();
      // کاغذرنگی به رنگِ همراه؛ امگا («جشن‌ساز») با هر نمره‌ای جشن می‌گیرد، بقیه از دو ستاره.
      if (result.stars >= 2 || look.char === 'tedi') {
        const colors = [look.color, look.light, '#FFD23F', '#ffffff'];
        void import('canvas-confetti').then(({ default: confetti }) =>
          confetti({ particleCount: look.char === 'tedi' ? 140 : 90, spread: look.char === 'tedi' ? 100 : 70, origin: { y: 0.35 }, colors }),
        );
      }
      void refreshHome();
      void refreshSummary();
      const before = streakBefore.current;
      if (before && !before.activeToday) {
        api.summary()
          .then((fresh) => {
            if (fresh.streak.activeToday) setStreakUp({ from: before.current, to: fresh.streak.current });
          })
          .catch((err: unknown) => console.warn('streak check after finish failed', err));
      }
    } catch (error) {
      // سرور پایانِ درس/جزیره را بی‌قلب و بی‌جواب نمی‌پذیرد (۱۴۰۵-۰۷)؛ همان صفحه‌ی انتظار.
      if (error instanceof ApiError && error.code === 'no_hearts') {
        setPhase({
          kind: 'noHearts',
          nextRefillAt: (error.body.nextRefillAt as string | null) ?? null,
          fullRefillAt: (error.body.fullRefillAt as string | null) ?? null,
        });
        return;
      }
      setPhase({ kind: 'finishError', error });
    }
  }

  /**
   * قلب برگشت: آزمون از همان سوال ادامه می‌یابد. قبلاً کلِ آزمون از نو بار می‌شد و سوال و «درست‌ها» صفر می‌شدند؛
   * دانش‌آموزی که وسطِ جزیره قلبش تمام شده بود بعد از ساعت‌ها انتظار باید سوال‌های جواب‌داده را دوباره می‌زد.
   */
  function resume() {
    if (!questions.length) {
      setReload((n) => n + 1);
      return;
    }
    api.hearts().then(
      (h) => {
        setHearts(h);
        if (!h.isUnlimited && h.currentHearts <= 0) setPhase({ kind: 'noHearts', nextRefillAt: h.nextRefillAt, fullRefillAt: h.fullRefillAt });
        else setPhase({ kind: 'playing' });
      },
      (err: unknown) => toast(friendlyError(err, 'وضعیت قلب‌ها معلوم نشد، دوباره بزن'), 'error'),
    );
  }

  const askWhy = () =>
    nav.push({
      name: 'ask',
      lessonId: lessonId ?? (question?.lessonId ? Number(question.lessonId) : undefined),
      questionId: question?.id,
      prompt: 'چرا جوابم غلط بود؟ اشتباهم کجاست؟',
    });

  /* ─── حالت‌های غیرِ بازی ─────────────────────────────────────────────── */

  if (phase.kind === 'loading') return <Screen><LoadingState text="دارم سوال‌ها رو میارم…" /></Screen>;
  if (phase.kind === 'error') {
    return (
      <Screen>
        <div className="flex flex-1 flex-col justify-center">
          <ErrorState error={phase.error} onRetry={() => setReload((n) => n + 1)} />
          <div className="px-8"><SecondaryButton onClick={nav.back}>برگشت</SecondaryButton></div>
        </div>
      </Screen>
    );
  }
  if (phase.kind === 'noHearts') {
    return <NoHeartsScreen nextRefillAt={phase.nextRefillAt} fullRefillAt={phase.fullRefillAt} onRefilled={resume} />;
  }
  if (phase.kind === 'result') return <Result result={phase.result} total={questions.length} correct={correctCount} lessonId={lessonId} nodeId={ref?.node.id ?? nodeId} color={color} streakUp={streakUp} />;
  if (phase.kind === 'finishing' || phase.kind === 'finishError') {
    return (
      <Screen>
        <div className="flex flex-1 flex-col items-center justify-center gap-4 px-8 text-center">
          <SeyarMascot char={companion} mood={phase.kind === 'finishing' ? 'happy' : 'sad'} size={96} />
          {phase.kind === 'finishing' ? (
            <p className="text-sm text-muted">دارم نتیجه‌ت رو ثبت می‌کنم…</p>
          ) : (
            <>
              <InlineError>نتیجه این تمرین ثبت نشد: {friendlyError(phase.error)}</InlineError>
              <PrimaryButton color={color} onClick={() => void finish()}>دوباره ثبت کن</PrimaryButton>
              <SecondaryButton onClick={nav.back}>بی‌خیال، برگرد</SecondaryButton>
            </>
          )}
        </div>
      </Screen>
    );
  }
  if (!question) {
    return (
      <Screen>
        <div className="flex flex-1 flex-col justify-center gap-4 px-8">
          <ErrorState text={nodeMode ? 'این جزیره هنوز سوالی نداره' : 'این درس هنوز سوالی نداره'} />
          <SecondaryButton onClick={nav.back}>برگشت</SecondaryButton>
        </div>
      </Screen>
    );
  }

  /* ─── خودِ بازی ───────────────────────────────────────────────────────── */

  const mood: SeyarMood = !answer ? 'idle' : answer.correct ? 'excited' : outOfHearts ? 'depressed' : 'sad';
  const bubble = !answer
    ? selected === null ? 'جواب درست رو انتخاب کن!' : 'مطمئنی؟ «بررسی» رو بزن.'
    : answer.correct
      ? combo >= 2 ? `${toFa(combo)} تا پشت هم درست! داری عالی پیش می‌ری` : PRAISE[index % PRAISE.length]
      : outOfHearts
        ? 'قلب‌هات تموم شد؛ یه کم استراحت کنیم.'
        : NUDGE[index % NUDGE.length];
  const shortOptions = question.options.every((o) => o.value.length <= 14);

  const optionClass = (id: string) => {
    if (!answer) return selected === id ? 'border-[#84D8FF] bg-[#DDF4FF] text-[#1581BA]' : 'border-line bg-white text-ink';
    if (id === answer.correctOptionId) return 'border-green-400 bg-[#e5fdf0] text-green-700';
    if (id === selected) return 'border-red-300 bg-[#fff0f0] text-red-500';
    return 'border-line bg-white text-faint';
  };

  return (
    <Screen>
      <div className="flex-shrink-0 border-b border-line bg-white px-5 pb-4 pt-safe">
        <div className="flex items-center gap-3 pt-5">
          <button type="button" aria-label="خروج از تمرین" onClick={() => setConfirmExit(true)} className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-soft">
            <X size={15} className="text-coral" />
          </button>
          <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-soft">
            <div className="h-full rounded-full transition-all duration-500" style={{ width: `${((index + (answer ? 1 : 0)) / questions.length) * 100}%`, backgroundColor: color }} />
          </div>
          <TraitChip char={look.char} color={look.color} correct={correctCount} combo={combo} />
          <span className="flex-shrink-0 text-left text-xs font-bold text-muted">
            {/* «۱/۴» در اپِ ریاضی کسر خوانده می‌شد. */}
            {toFa(index + 1)} از {toFa(questions.length)}
          </span>
        </div>
        <HeartsRow hearts={hearts} />
      </div>

      <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-4">
        <div className="flex items-center gap-3">
          <AnimatePresence mode="wait">
            <motion.div key={mood} initial={{ scale: 0.7, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.7, opacity: 0 }} className="rounded-3xl border-2 border-line bg-white p-2">
              <SeyarMascot char={companion} mood={mood} size={64} />
            </motion.div>
          </AnimatePresence>
          <div className={`flex-1 rounded-2xl border px-4 py-3 text-xs font-bold leading-6 ${
            !answer ? 'border-line bg-white text-indigo' : answer.correct ? 'border-green-200 bg-green-50 text-green-700' : 'border-purple-200 bg-purple-50 text-[#5B3FA0]'
          }`}>
            {bubble}
            {answer && <Reaction key={`r${question.id}`} correct={answer.correct} seed={index} />}
            {answer?.correct && answer.xpEarned > 0 && (
              <motion.span
                key={`xp${question.id}`}
                initial={{ opacity: 0, y: 8, scale: 0.8 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                transition={{ type: 'spring', stiffness: 400, damping: 14 }}
                className="mr-2 inline-block rounded-full bg-[#FFF3C4] px-2 py-0.5 text-[11px] font-black text-[#8A5A00]"
              >
                +{toFa(answer.xpEarned)} <Star size={11} className="mb-0.5 inline" fill="#E8A400" color="#E8A400" />
              </motion.span>
            )}
          </div>
        </div>

        <div className="rounded-3xl border border-line bg-white p-5 shadow-sm">
          <div className="mb-2 flex items-center justify-between">
            <span className="text-xs font-medium text-muted">سوال {toFa(index + 1)}</span>
          </div>
          <h2 className="whitespace-pre-line text-base font-bold leading-8 text-ink"><MathText text={question.prompt} display /></h2>
          {question.figure ? <div className="mt-3"><Diagram spec={question.figure} hideCounts /></div> : null}
        </div>

        <div className={shortOptions ? 'grid grid-cols-2 gap-2.5' : 'flex flex-col gap-2.5'}>
          {question.options.map((option) => (
            <motion.button
              key={option.id}
              type="button"
              onClick={() => choose(option.id)}
              disabled={submitting || answer !== null}
              aria-pressed={selected === option.id}
              whileTap={{ scale: answer ? 1 : 0.95 }}
              className={`flex min-h-14 items-center justify-center gap-1.5 rounded-2xl border-2 border-b-4 px-3 py-3 font-black transition-colors ${shortOptions ? 'text-xl' : 'text-base'} ${optionClass(option.id)}`}
            >
              <span><MathText text={option.value} /></span>
              {answer && option.id === answer.correctOptionId && <Check size={16} className="text-green-500" strokeWidth={3} />}
              {answer && option.id === selected && !answer.correct && <X size={16} className="text-red-400" strokeWidth={3} />}
            </motion.button>
          ))}
        </div>

        <FeedbackBar kind="question" id={question.id} />
      </div>

      {answer && !answer.correct && look.char === 'pi' && (
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          className="mx-4 mb-2 flex items-start gap-2 rounded-2xl bg-[#F5F1FF] px-3 py-2.5 text-xs font-bold leading-6 text-[#5B3FA0]"
        >
          <span className="text-base leading-5">π</span>
          <span>{PI_TIPS[index % PI_TIPS.length]}</span>
        </motion.div>
      )}
      <div className="flex flex-shrink-0 flex-col gap-2.5 border-t border-line bg-white px-4 pb-[max(env(safe-area-inset-bottom),1rem)] pt-3">
        {answer ? (
          <>
            {!answer.correct && (
              <button type="button" onClick={askWhy} className="flex items-center justify-center gap-2 rounded-2xl bg-[#F5F1FF] py-3 text-sm font-bold text-[#7857E0]">
                <Brain size={16} /> از {look.name} بپرس چرا غلط شد
              </button>
            )}
            <PrimaryButton color={answer.correct ? '#5FBF8F' : color} onClick={() => void next()}>
              {isLast ? 'پایان تمرین' : 'ادامه'} <ChevronLeft size={18} />
            </PrimaryButton>
          </>
        ) : (
          <PrimaryButton color={color} disabled={selected === null} loading={submitting} onClick={() => void check()}>
            بررسی
          </PrimaryButton>
        )}
      </div>

      <Sheet open={confirmExit} onClose={() => setConfirmExit(false)} title="از تمرین بیرون بری؟">
        <p className="mb-5 text-sm leading-7 text-muted">
          جواب‌هایی که دادی ثبت شده، ولی {nodeMode ? 'این جزیره' : 'این درس'} تا آخرش رو نزنی تموم‌شده حساب نمی‌شه.
        </p>
        <div className="flex flex-col gap-2.5">
          <PrimaryButton color={color} onClick={() => setConfirmExit(false)}>ادامه می‌دم</PrimaryButton>
          <SecondaryButton onClick={() => nav.leave()}>خروج</SecondaryButton>
        </div>
      </Sheet>

    </Screen>
  );
}

function HeartsRow({ hearts }: { hearts: Hearts | null }) {
  if (hearts?.isUnlimited) {
    return (
      <div className="mt-3 flex items-center justify-center gap-1.5 text-xs font-bold text-coral">
        <Heart size={18} fill="#ED6956" /> <InfinityIcon size={18} /> قلب نامحدود
      </div>
    );
  }
  const max = hearts?.maxHearts ?? 5;
  const current = hearts?.currentHearts ?? max;
  return (
    <div className="mt-3 flex items-center justify-center gap-2" aria-label={`${toFa(current)} قلب از ${toFa(max)}`}>
      {Array.from({ length: max }, (_, i) => (
        <span key={i} className="relative h-5 w-5">
          <Heart size={20} className="absolute inset-0 text-[#e5e1f7]" />
          <AnimatePresence>
            {i < current && (
              <motion.span
                className="absolute inset-0"
                exit={{ scale: [1, 1.35, 0], rotate: [0, -22, 18, 0], y: [0, -4, 10], opacity: [1, 1, 0] }}
                transition={{ duration: 0.55 }}
              >
                <Heart size={20} className="text-coral" fill="#ED6956" />
              </motion.span>
            )}
          </AnimatePresence>
        </span>
      ))}
    </div>
  );
}

function Result({
  result, total, correct, lessonId, nodeId, color, streakUp,
}: { result: QuizResult; total: number; correct: number; lessonId?: number; nodeId?: string; color: string; streakUp: { from: number; to: number } | null }) {
  const nav = useNav();
  const { companion, profile } = useAppData();
  const [loadingNext, setLoadingNext] = useState(false);
  // بعد از نتیجه، اگر زنجیره امروز روشن شد، یک صفحه‌ی جشنِ جدا (مثلِ دولینگو) و بعد مقصدِ انتخاب‌شده.
  const [streakThen, setStreakThen] = useState<(() => void) | null>(null);
  const then = (go: () => void) => (streakUp ? setStreakThen(() => go) : go());
  if (streakThen && streakUp) return <StreakCelebration from={streakUp.from} to={streakUp.to} onDone={streakThen} />;

  const nodeMode = lessonId === undefined;
  const nextNode = result.nextNodeId ?? null;

  // بعد از ثبت، نقشه عوض شده؛ درسِ بعدی را از نسخه‌ی تازه‌ی نقشه می‌خوانیم.
  async function goNext() {
    if (nodeMode) {
      if (nextNode) nav.replace({ name: 'quiz', nodeId: nextNode });
      else nav.back();
      return;
    }
    setLoadingNext(true);
    try {
      const fresh = await fetchHome(profile.gradeId);
      const ref = findNode(fresh, nodeId) ?? findNodeOfLesson(fresh, lessonId!);
      const next = ref ? nextLessonOf(ref.node) : null;
      if (ref && ref.node.status !== 'completed' && next != null && next !== lessonId) {
        nav.replace({ name: 'lesson', lessonId: next, nodeId: ref.node.id });
      } else {
        nav.back();
      }
    } catch {
      nav.back();
    }
  }

  return (
    <Screen>
      <div className="flex flex-1 flex-col items-center justify-center gap-5 px-8 text-center">
        <SeyarMascot char={companion} mood={result.stars >= 2 ? 'excited' : 'happy'} size={120} />
        <div className="flex gap-1.5" aria-label={`${toFa(result.stars)} ستاره`}>
          {[1, 2, 3].map((s) => (
            <motion.span key={s} initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2 + s * 0.15, type: 'spring' }}>
              <Star size={40} className={s <= result.stars ? 'text-[#FFC53D]' : 'text-[#e5e1f7]'} fill={s <= result.stars ? '#FFC53D' : '#e5e1f7'} />
            </motion.span>
          ))}
        </div>
        <div>
          <h2 className="text-2xl font-black text-ink">{result.stars === 3 ? 'عالی بود!' : result.stars === 2 ? 'آفرین!' : 'تموم شد!'}</h2>
          {nodeMode && <p className="mt-1 text-sm font-bold" style={{ color }}>این جزیره رو تموم کردی</p>}
          <p className="mt-1 text-sm text-muted">{toFa(correct)} جواب درست از {toFa(total)} سوال</p>
          {/* نمره‌ی کم: تلاش و راه را ستایش کن، نه «باهوشی» را (پژوهش‌های ذهنیتِ رشد)؛ و راهِ بعدی را نشان بده. */}
          {result.stars <= 1 && (
            <p className="mt-2 text-xs leading-6 text-body">
              اشتباه‌ها همون جاهایی‌ان که مغزت داره یاد می‌گیره. هر وقت خواستی از «درس‌ها» دوباره مرورش کن.
            </p>
          )}
        </div>
        {/* «+۰ امتیاز، +۰ سکه» بعد از یک دورِ بد فقط نمک روی زخم بود؛ پاداشِ صفر نشان داده نمی‌شود. */}
        {(result.xpEarned > 0 || result.coinsEarned > 0) && <div className="flex w-full gap-3">
          <div className="flex flex-1 flex-col items-center rounded-2xl border border-line bg-white py-3">
            <Star size={18} className="text-gold" />
            <span dir="ltr" className="mt-1 text-lg font-black text-ink">+{toFa(result.xpEarned)}</span>
            <span className="text-[10px] text-muted">امتیاز</span>
          </div>
          <div className="flex flex-1 flex-col items-center rounded-2xl border border-line bg-white py-3">
            <Coins size={18} className="text-violet" />
            <span dir="ltr" className="mt-1 text-lg font-black text-ink">+{toFa(result.coinsEarned)}</span>
            <span className="text-[10px] text-muted">سکه</span>
          </div>
        </div>}
        <PrimaryButton color={color} loading={loadingNext} onClick={() => then(() => void goNext())}>
          {nodeMode && nextNode ? 'بریم جزیره بعدی' : 'ادامه'} <ChevronLeft size={18} />
        </PrimaryButton>
        {nodeMode && nextNode && (
          <button type="button" onClick={() => then(nav.back)} className="-mt-2 py-2 text-sm font-bold text-muted">
            فعلاً بسه، برگردیم
          </button>
        )}
      </div>
    </Screen>
  );
}

/**
 * پیامِ بعد از جواب. یک جمله‌ی ثابت بعد از چند بار دیگر خوانده نمی‌شود؛ چند تا به نوبت. برای جوابِ غلط
 * تلاش و راه ستایش می‌شود و قدمِ بعدی گفته می‌شود، نه این‌که «اشکالی نداره» تنها بماند.
 */
const PRAISE = ['آفرین! درست بود', 'دقیقاً همینه!', 'عالی! خوب فکر کردی', 'درسته! داری راه میفتی'];
const NUDGE = ['نزدیک بودی! جواب درست رو ببین.', 'اشکالی نداره؛ از همین اشتباه یاد می‌گیریم.', 'این یکی سخت بود؛ جواب درست سبز شده.'];

/** «راهنمای مهربون»ِ پی: نکته‌ی عمومیِ کوتاه بعد از جوابِ غلط؛ نه جوابِ سوال، فقط عادتِ خوبِ حل کردن. */
const PI_TIPS = [
  'صورت سوال رو یه بار دیگه آروم بخون؛ کلمه «نیست» یا «بیشترین» زیاد جا می‌مونه.',
  'علامت منفی‌ها رو یه بار دیگه چک کن.',
  'اول داخل پرانتز، بعد ضرب و تقسیم، آخرش جمع و تفریق.',
  'جوابت رو بذار توی سوال؛ اگه درست درنیومد یه جا اشتباه شده.',
];

/**
 * ویژگیِ همراه کنارِ نوارِ پیشرفتِ آزمون: سیگما جمعِ جوابای درست (Σ)، دلتا شعله‌ی جوابای پشتِ هم. پی و امگا
 * ویژگی‌شان جای دیگری است (نکته بعد از غلط، جشنِ پایان)، پس این‌جا چیزی نشان نمی‌دهند.
 */
function TraitChip({ char, color, correct, combo }: { char: string; color: string; correct: number; combo: number }) {
  if (char === 'sigma') {
    return (
      <motion.span key={correct} initial={{ scale: 1.4 }} animate={{ scale: 1 }} className="flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-black text-white" style={{ backgroundColor: color }}>
        Σ {toFa(correct)}
      </motion.span>
    );
  }
  if (char === 'delta' && combo >= 2) {
    return (
      <motion.span key={combo} initial={{ scale: 0.4, rotate: -12 }} animate={{ scale: 1, rotate: 0 }} transition={{ type: 'spring', stiffness: 500, damping: 12 }} className="flex flex-shrink-0 items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-black text-white" style={{ backgroundColor: color }}>
        <StreakFlame state="lit" size={11} className="[&_path]:fill-white" /> ×{toFa(combo)}
      </motion.span>
    );
  }
  return null;
}

/** آیکنِ کوچکِ بعد از جواب (همان خانواده‌ی آیکنِ اپ، نه ایموجیِ کیبورد)؛ هر سوال یکی از مجموعه، با یک تکانِ کوتاه. */
const WIN: [LucideIcon, string][] = [[Brain, '#9B7BFF'], [Zap, '#E8A400'], [Target, '#ED6956'], [ThumbsUp, '#3E9E73'], [Sparkles, '#4C5FD5']];
const MISS: [LucideIcon, string][] = [[Lightbulb, '#E8A400'], [Ruler, '#4C5FD5'], [Compass, '#9B7BFF']];
function Reaction({ correct, seed }: { correct: boolean; seed: number }) {
  const set = correct ? WIN : MISS;
  const [Icon, color] = set[seed % set.length];
  return (
    <motion.span
      aria-hidden
      className="mr-1.5 inline-block align-middle"
      initial={{ scale: 0.4, rotate: 0 }}
      animate={{ scale: 1, rotate: [0, -14, 14, -8, 8, 0] }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
    >
      <Icon size={18} color={color} strokeWidth={2.4} />
    </motion.span>
  );
}