"use client";
// Quiz adaptatif : écran de départ (concept optionnel), question (mcq / réponse
// ouverte + confiance), rétroaction riche, synthèse de fin de session.
import Link from "next/link";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { ArrowRight, CheckCircle2, Flag, ListChecks, NotebookPen, XCircle } from "lucide-react";
import { Badge, Button, Card, ProgressBar, Skeleton, Spinner, Textarea, cn } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { DifficultyDots, ErrorBanner, fetchJson, postJson } from "./shared";

type Question = { id: number; type: string; difficulty: number; question: string; options: string[]; conceptId: number | null };
type Feedback = { correct: boolean; expected: string; explanation: string; score: { correct: number; total: number } };
type Summary = { correct: number; total: number; byConcept: { name: string; correct: number; total: number }[] };
type ConceptOpt = { slug: string; name: string };

const TYPE_LABELS: Record<string, string> = {
  mcq: "Choix multiple", short: "Réponse courte", calc: "Calcul", "error-detect": "Détection d'erreur",
  case: "Étude de cas", order: "Mise en ordre", match: "Association",
};

export function QuizApp({ course }: { course: string }) {
  const searchParams = useSearchParams();
  const upper = course.toUpperCase();

  const [phase, setPhase] = useState<"start" | "question" | "feedback" | "summary">("start");
  const [concepts, setConcepts] = useState<ConceptOpt[] | null>(null);
  const [conceptSlug, setConceptSlug] = useState<string>(searchParams.get("concept") ?? "");
  const [sessionId, setSessionId] = useState<number | null>(null);
  const [question, setQuestion] = useState<Question | null>(null);
  const [answer, setAnswer] = useState("");
  const [confidence, setConfidence] = useState(3);
  const [feedback, setFeedback] = useState<Feedback | null>(null);
  const [summary, setSummary] = useState<Summary | null>(null);
  const [answered, setAnswered] = useState(0);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [exhaustedMsg, setExhaustedMsg] = useState<string | null>(null);

  useEffect(() => {
    fetchJson<{ nodes: ConceptOpt[] }>(`/api/learning/${course}/concepts`)
      .then((d) => setConcepts(d.nodes))
      .catch(() => setConcepts([]));
  }, [course]);

  async function start() {
    setBusy(true);
    setError(null);
    try {
      const d = await postJson<{ sessionId: number; question: Question }>("/api/learning/quiz", {
        action: "start", course: upper, conceptSlug: conceptSlug || null,
      });
      setSessionId(d.sessionId);
      setQuestion(d.question);
      setAnswer("");
      setConfidence(3);
      setAnswered(0);
      setExhaustedMsg(null);
      setPhase("question");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Impossible de démarrer le quiz.");
    } finally {
      setBusy(false);
    }
  }

  async function submitAnswer(value: string) {
    if (!sessionId || !question || busy) return;
    setBusy(true);
    setError(null);
    try {
      const d = await postJson<Feedback>("/api/learning/quiz", {
        action: "answer",
        sessionId,
        questionId: question.id,
        answer: value,
        confidence: question.type === "mcq" ? undefined : confidence,
        hintsUsed: 0,
      });
      setFeedback(d);
      setAnswered((n) => n + 1);
      setPhase("feedback");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur d'envoi de la réponse.");
    } finally {
      setBusy(false);
    }
  }

  async function nextQuestion() {
    if (!sessionId || busy) return;
    setBusy(true);
    setError(null);
    try {
      const d = await postJson<{ question: Question | null; message?: string }>("/api/learning/quiz", {
        action: "next", sessionId,
      });
      if (!d.question) {
        setExhaustedMsg(d.message ?? "Banque de questions épuisée pour ce ciblage.");
        await finish();
        return;
      }
      setQuestion(d.question);
      setAnswer("");
      setConfidence(3);
      setFeedback(null);
      setPhase("question");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur de chargement de la question.");
    } finally {
      setBusy(false);
    }
  }

  async function finish() {
    if (!sessionId) return;
    setBusy(true);
    setError(null);
    try {
      const d = await postJson<{ summary: Summary }>("/api/learning/quiz", { action: "finish", sessionId });
      setSummary(d.summary);
      setPhase("summary");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur de clôture de la session.");
    } finally {
      setBusy(false);
    }
  }

  // ---------- Écran de départ ----------
  if (phase === "start") {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-2xl mx-auto w-full">
        <Card className="p-6 animate-fade-up">
          <div className="flex items-center gap-2.5 mb-1">
            <ListChecks size={20} className="text-brand-500" />
            <h2 className="text-lg font-bold text-fg">Quiz adaptatif</h2>
          </div>
          <p className="text-sm text-muted mb-5">
            La difficulté s'ajuste à vos réponses (deux bonnes de suite → plus dur ; une erreur → plus facile).
            Chaque erreur est ajoutée à votre cahier d'erreurs.
          </p>
          <label htmlFor="quiz-concept" className="block text-[13px] font-medium text-fg mb-1.5">
            Concept ciblé (optionnel)
          </label>
          {concepts === null ? (
            <Skeleton className="h-10 w-full" />
          ) : (
            <select
              id="quiz-concept"
              value={conceptSlug}
              onChange={(e) => setConceptSlug(e.target.value)}
              className="w-full h-10 px-3 rounded-lg bg-card border border-app text-sm text-fg outline-none focus:border-brand-400"
            >
              <option value="">Mix intelligent (faiblesses, consolidation, découverte)</option>
              {concepts.map((c) => <option key={c.slug} value={c.slug}>{c.name}</option>)}
            </select>
          )}
          {error && <ErrorBanner message={error} className="mt-4" />}
          <Button onClick={start} disabled={busy} className="w-full justify-center mt-5" size="lg">
            {busy ? <Spinner /> : <>Commencer le quiz <ArrowRight size={16} /></>}
          </Button>
        </Card>
      </main>
    );
  }

  // ---------- Synthèse ----------
  if (phase === "summary") {
    const pct = summary && summary.total > 0 ? Math.round((summary.correct / summary.total) * 100) : 0;
    return (
      <main className="px-4 sm:px-6 py-6 max-w-2xl mx-auto w-full space-y-4">
        <Card className="p-6 text-center animate-fade-up">
          <h2 className="text-lg font-bold text-fg mb-1">Session terminée</h2>
          {exhaustedMsg && <p className="text-[13px] text-muted mb-2">{exhaustedMsg}</p>}
          {summary && summary.total > 0 ? (
            <>
              <p className={cn("text-5xl font-bold my-3", pct >= 70 ? "text-emerald-500" : pct >= 50 ? "text-amber-500" : "text-red-500")}>
                {pct} %
              </p>
              <p className="text-sm text-muted">{summary.correct} bonne{summary.correct > 1 ? "s" : ""} réponse{summary.correct > 1 ? "s" : ""} sur {summary.total}</p>
            </>
          ) : (
            <p className="text-sm text-muted my-3">Aucune question répondue dans cette session.</p>
          )}
        </Card>
        {summary && summary.byConcept.length > 0 && (
          <Card className="p-5">
            <h3 className="text-sm font-semibold text-fg mb-3">Résultat par concept</h3>
            <div className="space-y-3">
              {summary.byConcept.map((c) => (
                <div key={c.name}>
                  <div className="flex justify-between text-[13px] mb-1">
                    <span className="text-fg">{c.name}</span>
                    <span className="text-muted tabular-nums">{c.correct}/{c.total}</span>
                  </div>
                  <ProgressBar value={c.total ? c.correct / c.total : 0} tone={c.correct === c.total ? "green" : "brand"} />
                </div>
              ))}
            </div>
          </Card>
        )}
        {error && <ErrorBanner message={error} />}
        <div className="flex flex-wrap gap-2">
          <Button onClick={() => { setPhase("start"); setSummary(null); setSessionId(null); }} variant="secondary">
            Nouveau quiz
          </Button>
          {summary && summary.correct < summary.total && (
            <Link href={`/apprendre/${course}/erreurs`}>
              <Button variant="primary"><NotebookPen size={15} /> Revoir mes erreurs</Button>
            </Link>
          )}
        </div>
      </main>
    );
  }

  // ---------- Question / rétroaction ----------
  if (!question) return null;
  const isMcq = question.type === "mcq";

  return (
    <main className="px-4 sm:px-6 py-6 max-w-2xl mx-auto w-full space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        <Badge tone="brand">{TYPE_LABELS[question.type] ?? question.type}</Badge>
        <DifficultyDots value={question.difficulty} />
        <span className="ml-auto text-[12.5px] text-muted tabular-nums">
          Question {answered + (phase === "question" ? 1 : 0)}{feedback ? ` · ${feedback.score.correct}/${feedback.score.total} réussie${feedback.score.correct > 1 ? "s" : ""}` : ""}
        </span>
      </div>

      <Card className="p-5 animate-fade-up">
        <Markdown content={question.question} />
      </Card>

      {phase === "question" ? (
        <>
          {isMcq ? (
            <div className="grid gap-2" role="group" aria-label="Options de réponse">
              {question.options.map((opt, i) => (
                <button
                  key={i}
                  onClick={() => submitAnswer(opt)}
                  disabled={busy}
                  className={cn(
                    "text-left border border-app bg-card rounded-xl px-4 py-3 text-sm text-fg transition-colors",
                    "hover:border-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30 disabled:opacity-60"
                  )}
                >
                  <span className="font-semibold text-brand-600 dark:text-brand-300 mr-2">{String.fromCharCode(65 + i)}.</span>
                  <span className="[&_.prose-immbot]:inline"><Markdown content={opt} /></span>
                </button>
              ))}
            </div>
          ) : (
            <form
              onSubmit={(e) => { e.preventDefault(); if (answer.trim()) submitAnswer(answer); }}
              className="space-y-3"
            >
              <Textarea
                value={answer}
                onChange={(e) => setAnswer(e.target.value)}
                rows={4}
                placeholder={question.type === "calc" ? "Votre résultat (avec unités s'il y a lieu)…" : "Votre réponse…"}
                aria-label="Votre réponse"
                autoFocus
              />
              <div>
                <label htmlFor="quiz-conf" className="block text-[13px] font-medium text-fg mb-1">
                  Confiance dans votre réponse : {["très faible", "faible", "moyenne", "élevée", "très élevée"][confidence - 1]}
                </label>
                <input
                  id="quiz-conf" type="range" min={1} max={5} step={1}
                  value={confidence} onChange={(e) => setConfidence(Number(e.target.value))}
                  className="w-full accent-[#1d64b0]"
                />
                <p className="text-[11.5px] text-muted mt-0.5">Déclarer sa confiance améliore le calibrage de la maîtrise estimée.</p>
              </div>
              <div className="flex gap-2">
                <Button type="submit" disabled={busy || !answer.trim()} className="flex-1 justify-center">
                  {busy ? <Spinner /> : "Valider ma réponse"}
                </Button>
                <Button type="button" variant="ghost" onClick={finish} disabled={busy}>
                  <Flag size={14} /> Terminer
                </Button>
              </div>
            </form>
          )}
          {isMcq && (
            <div className="flex justify-end">
              <Button variant="ghost" size="sm" onClick={finish} disabled={busy}>
                <Flag size={14} /> Terminer la session
              </Button>
            </div>
          )}
        </>
      ) : feedback ? (
        <div className="space-y-3 animate-fade-up">
          <div
            className={cn(
              "rounded-xl border px-4 py-3 flex items-center gap-2.5 text-sm font-semibold",
              feedback.correct
                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-700 dark:text-emerald-400"
                : "bg-red-500/10 border-red-500/30 text-red-700 dark:text-red-400"
            )}
            role="status"
          >
            {feedback.correct ? <CheckCircle2 size={18} /> : <XCircle size={18} />}
            {feedback.correct ? "Bonne réponse !" : "Réponse incorrecte — elle a été ajoutée à votre cahier d'erreurs."}
          </div>
          <Card className="p-4">
            <p className="text-[12px] font-semibold text-muted uppercase tracking-wide mb-1.5">Réponse attendue</p>
            <Markdown content={feedback.expected} />
            {feedback.explanation && (
              <>
                <p className="text-[12px] font-semibold text-muted uppercase tracking-wide mt-4 mb-1.5">Explication</p>
                <Markdown content={feedback.explanation} />
              </>
            )}
          </Card>
          <div className="flex gap-2">
            <Button onClick={nextQuestion} disabled={busy} className="flex-1 justify-center">
              {busy ? <Spinner /> : <>Question suivante <ArrowRight size={15} /></>}
            </Button>
            <Button variant="secondary" onClick={finish} disabled={busy}>Terminer</Button>
          </div>
        </div>
      ) : null}

      {error && <ErrorBanner message={error} />}
    </main>
  );
}