"use client";
// Examens blancs : liste avec tentatives passées, choix du mode (chronométré /
// pratique), interface d'examen (navigation, compte à rebours, remise auto),
// écran de résultats avec analyse par concept et par axe.
import { useCallback, useEffect, useRef, useState } from "react";
import {
  AlertTriangle, CheckCircle2, ChevronLeft, ChevronRight, Clock3, FileCheck2,
  GraduationCap, Send, Timer, XCircle,
} from "lucide-react";
import { Badge, Button, Card, EmptyState, Modal, ProgressBar, Skeleton, Spinner, Textarea, cn } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { DifficultyDots, ErrorBanner, fetchJson, fmtDateTime, postJson } from "./shared";

type Exam = { id: number; kind: string; title: string; description: string; duration_minutes: number; questionCount: number };
type Attempt = { id: number; exam_id: number; mode: string; started_at: string; finished_at: string | null; score: number | null; total: number | null };
type ExamQuestion = { id: number; type: string; difficulty: number; question: string; options: string[] };
type SubmitResult = {
  score: number;
  total: number;
  detail: Record<string, { answer: string; correct: boolean; expected: string; explanation: string }>;
  analysis: {
    byConcept: { name: string; correct: number; total: number }[];
    byAxis: { axis: string; correct: number; total: number }[];
    weakest: string[];
    recommendation: string;
  };
  previous: { score: number; total: number; finished_at: string }[];
};

const KIND_LABELS: Record<string, { label: string; tone: "brand" | "gold" | "neutral" }> = {
  intra: { label: "Intra", tone: "brand" },
  final: { label: "Final", tone: "gold" },
  thematic: { label: "Thématique", tone: "neutral" },
};
const AXIS_LABELS: Record<string, string> = {
  connaissances: "Connaissances",
  calcul: "Calcul",
  interpretation: "Interprétation",
  jugement: "Jugement professionnel",
  communication: "Communication",
};

export function ExamsApp({ course }: { course: string }) {
  const upper = course.toUpperCase();

  const [exams, setExams] = useState<Exam[] | null>(null);
  const [attempts, setAttempts] = useState<Attempt[]>([]);
  const [error, setError] = useState<string | null>(null);

  // Choix du mode
  const [modeFor, setModeFor] = useState<Exam | null>(null);
  const [busy, setBusy] = useState(false);

  // Tentative en cours
  const [attempt, setAttempt] = useState<{ attemptId: number; title: string; mode: "timed" | "practice"; durationMinutes: number; questions: ExamQuestion[] } | null>(null);
  const [answers, setAnswers] = useState<Record<string, string>>({});
  const [idx, setIdx] = useState(0);
  const [deadline, setDeadline] = useState<number | null>(null);
  const [remaining, setRemaining] = useState<number | null>(null);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const submittedRef = useRef(false);

  // Résultats
  const [result, setResult] = useState<SubmitResult | null>(null);
  const [openDetail, setOpenDetail] = useState<Record<string, boolean>>({});

  const load = useCallback(() => {
    setError(null);
    fetchJson<{ exams: Exam[]; attempts: Attempt[] }>(`/api/learning/exams?course=${upper}`)
      .then((d) => { setExams(d.exams); setAttempts(d.attempts); })
      .catch((e) => { setExams([]); setError(e instanceof Error ? e.message : "Erreur de chargement."); });
  }, [upper]);

  useEffect(() => { load(); }, [load]);

  async function start(exam: Exam, mode: "timed" | "practice") {
    setBusy(true);
    setError(null);
    try {
      const d = await postJson<{ attemptId: number; durationMinutes: number; title: string; questions: ExamQuestion[] }>(
        "/api/learning/exams",
        { action: "start", examId: exam.id, mode }
      );
      submittedRef.current = false;
      setAttempt({ ...d, mode });
      setAnswers({});
      setIdx(0);
      setResult(null);
      setModeFor(null);
      setDeadline(mode === "timed" ? Date.now() + d.durationMinutes * 60_000 : null);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Impossible de démarrer l'examen.");
    } finally {
      setBusy(false);
    }
  }

  const submit = useCallback(async (auto = false) => {
    if (!attempt || submittedRef.current) return;
    submittedRef.current = true;
    setBusy(true);
    setConfirmOpen(false);
    setError(null);
    try {
      const d = await postJson<SubmitResult>("/api/learning/exams", {
        action: "submit", attemptId: attempt.attemptId, answers,
      });
      setResult(d);
      setAttempt(null);
      setDeadline(null);
      load();
      if (auto) setError(null);
    } catch (e) {
      submittedRef.current = false;
      setError(e instanceof Error ? e.message : "Erreur lors de la remise.");
    } finally {
      setBusy(false);
    }
  }, [attempt, answers, load]);

  // Compte à rebours + remise automatique à 0:00
  useEffect(() => {
    if (!deadline) { setRemaining(null); return; }
    const tick = () => {
      const r = Math.max(0, Math.round((deadline - Date.now()) / 1000));
      setRemaining(r);
      if (r <= 0) submit(true);
    };
    tick();
    const t = setInterval(tick, 1000);
    return () => clearInterval(t);
  }, [deadline, submit]);

  const answeredCount = attempt ? attempt.questions.filter((q) => (answers[String(q.id)] ?? "").trim() !== "").length : 0;

  // ---------- Interface d'examen ----------
  if (attempt) {
    const q = attempt.questions[idx];
    const total = attempt.questions.length;
    const mins = remaining != null ? Math.floor(remaining / 60) : null;
    const secs = remaining != null ? remaining % 60 : null;
    const low = remaining != null && remaining < 300;
    return (
      <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full space-y-4">
        <div className="flex flex-wrap items-center gap-3">
          <h2 className="font-bold text-fg">{attempt.title}</h2>
          <Badge tone={attempt.mode === "timed" ? "amber" : "neutral"}>
            {attempt.mode === "timed" ? "Chronométré" : "Mode pratique"}
          </Badge>
          {remaining != null && (
            <span
              className={cn(
                "ml-auto inline-flex items-center gap-1.5 font-mono font-semibold text-[15px] tabular-nums px-2.5 py-1 rounded-lg",
                low ? "text-red-600 dark:text-red-400 bg-red-500/10 animate-pulse-soft" : "text-fg bg-surface-2 dark:bg-brand-900/50"
              )}
              role="timer"
              aria-label="Temps restant"
            >
              <Timer size={15} /> {mins}:{String(secs).padStart(2, "0")}
            </span>
          )}
        </div>

        {/* Grille de navigation */}
        <div className="flex flex-wrap gap-1.5" role="group" aria-label="Navigation entre les questions">
          {attempt.questions.map((qq, i) => {
            const done = (answers[String(qq.id)] ?? "").trim() !== "";
            return (
              <button
                key={qq.id}
                onClick={() => setIdx(i)}
                aria-label={`Question ${i + 1}${done ? " (répondue)" : ""}`}
                aria-current={i === idx}
                className={cn(
                  "w-8 h-8 rounded-lg text-[12.5px] font-semibold border transition-colors",
                  i === idx
                    ? "border-brand-500 bg-brand-600 text-white"
                    : done
                      ? "border-emerald-500/40 bg-emerald-500/12 text-emerald-700 dark:text-emerald-400"
                      : "border-app bg-card text-muted hover:text-fg"
                )}
              >
                {i + 1}
              </button>
            );
          })}
        </div>

        <Card className="p-5 animate-fade-up">
          <div className="flex items-center gap-2 mb-3">
            <span className="text-[12.5px] font-semibold text-muted">Question {idx + 1} / {total}</span>
            <DifficultyDots value={q.difficulty} />
          </div>
          <Markdown content={q.question} />
          <div className="mt-4">
            {q.type === "mcq" ? (
              <div className="grid gap-2" role="radiogroup" aria-label="Options">
                {q.options.map((opt, i) => {
                  const chosen = answers[String(q.id)] === opt;
                  return (
                    <button
                      key={i}
                      role="radio"
                      aria-checked={chosen}
                      onClick={() => setAnswers((a) => ({ ...a, [String(q.id)]: chosen ? "" : opt }))}
                      className={cn(
                        "text-left border rounded-xl px-4 py-2.5 text-sm transition-colors",
                        chosen
                          ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40 text-fg"
                          : "border-app bg-card text-fg hover:border-brand-300"
                      )}
                    >
                      <span className="font-semibold text-brand-600 dark:text-brand-300 mr-2">{String.fromCharCode(65 + i)}.</span>
                      {opt}
                    </button>
                  );
                })}
              </div>
            ) : (
              <Textarea
                value={answers[String(q.id)] ?? ""}
                onChange={(e) => setAnswers((a) => ({ ...a, [String(q.id)]: e.target.value }))}
                rows={4}
                placeholder="Votre réponse…"
                aria-label={`Réponse à la question ${idx + 1}`}
              />
            )}
          </div>
        </Card>

        {error && <ErrorBanner message={error} />}

        <div className="flex items-center gap-2">
          <Button variant="secondary" size="sm" onClick={() => setIdx((i) => Math.max(0, i - 1))} disabled={idx === 0}>
            <ChevronLeft size={15} /> Précédente
          </Button>
          <Button variant="secondary" size="sm" onClick={() => setIdx((i) => Math.min(total - 1, i + 1))} disabled={idx === total - 1}>
            Suivante <ChevronRight size={15} />
          </Button>
          <span className="ml-auto text-[12.5px] text-muted tabular-nums">{answeredCount}/{total} répondue{answeredCount > 1 ? "s" : ""}</span>
          <Button onClick={() => setConfirmOpen(true)} disabled={busy}>
            {busy ? <Spinner /> : <><Send size={14} /> Remettre</>}
          </Button>
        </div>

        <Modal open={confirmOpen} onClose={() => setConfirmOpen(false)} title="Remettre l'examen ?">
          <div className="space-y-4">
            <p className="text-sm text-fg">
              Vous avez répondu à <strong>{answeredCount}</strong> question{answeredCount > 1 ? "s" : ""} sur <strong>{total}</strong>.
              {answeredCount < total && " Les questions sans réponse seront comptées comme incorrectes."}
            </p>
            <div className="flex gap-2 justify-end">
              <Button variant="secondary" onClick={() => setConfirmOpen(false)}>Continuer l'examen</Button>
              <Button onClick={() => submit()} disabled={busy}>{busy ? <Spinner /> : "Remettre maintenant"}</Button>
            </div>
          </div>
        </Modal>
      </main>
    );
  }

  // ---------- Résultats ----------
  if (result) {
    const pct = result.total ? Math.round((result.score / result.total) * 100) : 0;
    return (
      <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full space-y-5">
        <Card className="p-6 text-center animate-fade-up">
          <h2 className="text-lg font-bold text-fg">Résultats de l'examen</h2>
          <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">{result.score} / {result.total} bonne{result.score > 1 ? "s" : ""} réponse{result.score > 1 ? "s" : ""}</p>
          {result.previous.length > 0 && (
            <p className="text-[12.5px] text-muted mt-2">
              Tentatives précédentes : {result.previous.map((p) => `${p.total ? Math.round((p.score / p.total) * 100) : 0} %`).join(" · ")}
              {result.previous[0] && result.previous[0].total ? (
                pct > Math.round((result.previous[0].score / result.previous[0].total) * 100)
                  ? " — en progression, bravo !"
                  : ""
              ) : ""}
            </p>
          )}
        </Card>

        <Card className="p-5">
          <h3 className="text-sm font-semibold text-fg mb-1.5">Recommandation</h3>
          <p className="text-sm text-fg">{result.analysis.recommendation}</p>
          {result.analysis.weakest.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-2.5">
              {result.analysis.weakest.map((w) => <Badge key={w} tone="amber"><AlertTriangle size={11} /> {w}</Badge>)}
            </div>
          )}
        </Card>

        <div className="grid sm:grid-cols-2 gap-4">
          <Card className="p-5">
            <h3 className="text-sm font-semibold text-fg mb-3">Par concept</h3>
            <div className="space-y-3">
              {result.analysis.byConcept.map((c) => (
                <div key={c.name}>
                  <div className="flex justify-between text-[12.5px] mb-1">
                    <span className="text-fg truncate mr-2">{c.name}</span>
                    <span className="text-muted tabular-nums shrink-0">{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>
          <Card className="p-5">
            <h3 className="text-sm font-semibold text-fg mb-3">Par axe de compétence</h3>
            <div className="space-y-3">
              {result.analysis.byAxis.map((a) => (
                <div key={a.axis}>
                  <div className="flex justify-between text-[12.5px] mb-1">
                    <span className="text-fg">{AXIS_LABELS[a.axis] ?? a.axis}</span>
                    <span className="text-muted tabular-nums">{a.correct}/{a.total}</span>
                  </div>
                  <ProgressBar value={a.total ? a.correct / a.total : 0} tone={a.correct === a.total ? "green" : "brand"} />
                </div>
              ))}
            </div>
          </Card>
        </div>

        <section aria-label="Détail par question">
          <h3 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Détail par question</h3>
          <div className="space-y-2">
            {Object.entries(result.detail).map(([qid, d], i) => (
              <Card key={qid} className="overflow-hidden">
                <button
                  onClick={() => setOpenDetail((o) => ({ ...o, [qid]: !o[qid] }))}
                  className="w-full flex items-center gap-2.5 px-4 py-3 text-left"
                  aria-expanded={!!openDetail[qid]}
                >
                  {d.correct
                    ? <CheckCircle2 size={17} className="text-emerald-500 shrink-0" />
                    : <XCircle size={17} className="text-red-500 shrink-0" />}
                  <span className="text-sm font-medium text-fg">Question {i + 1}</span>
                  <span className="text-[12px] text-muted ml-auto">{d.correct ? "Réussie" : d.answer ? "Incorrecte" : "Sans réponse"}</span>
                </button>
                {openDetail[qid] && (
                  <div className="px-4 pb-4 space-y-3 border-t border-app pt-3">
                    <div>
                      <p className="text-[11.5px] font-semibold text-muted uppercase tracking-wide mb-1">Votre réponse</p>
                      <p className="text-sm text-fg whitespace-pre-wrap">{d.answer || "—"}</p>
                    </div>
                    <div>
                      <p className="text-[11.5px] font-semibold text-muted uppercase tracking-wide mb-1">Réponse attendue</p>
                      <Markdown content={d.expected} />
                    </div>
                    {d.explanation && (
                      <div>
                        <p className="text-[11.5px] font-semibold text-muted uppercase tracking-wide mb-1">Explication</p>
                        <Markdown content={d.explanation} />
                      </div>
                    )}
                  </div>
                )}
              </Card>
            ))}
          </div>
        </section>

        <Button variant="secondary" onClick={() => setResult(null)}>Retour aux examens</Button>
      </main>
    );
  }

  // ---------- Liste des examens ----------
  return (
    <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full">
      <div className="mb-5">
        <h2 className="text-lg font-bold text-fg">Examens blancs</h2>
        <p className="text-[13px] text-muted">Simulez les conditions réelles (chronométré) ou entraînez-vous sans pression (pratique).</p>
      </div>

      {error && <ErrorBanner message={error} className="mb-4" />}

      {exams === null ? (
        <div className="space-y-3">
          <Skeleton className="h-28 w-full" />
          <Skeleton className="h-28 w-full" />
        </div>
      ) : exams.length === 0 ? (
        <EmptyState
          icon={<GraduationCap />}
          title="Aucun examen blanc"
          description="Les examens blancs de ce cours n'ont pas encore été publiés."
        />
      ) : (
        <div className="space-y-3">
          {exams.map((e) => {
            const past = attempts.filter((a) => a.exam_id === e.id && a.finished_at);
            const kind = KIND_LABELS[e.kind] ?? { label: e.kind, tone: "neutral" as const };
            return (
              <Card key={e.id} className="p-5 animate-fade-up">
                <div className="flex flex-wrap items-start gap-3">
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2 mb-1">
                      <h3 className="font-semibold text-fg">{e.title}</h3>
                      <Badge tone={kind.tone}>{kind.label}</Badge>
                    </div>
                    {e.description && <p className="text-[13px] text-muted mb-2">{e.description}</p>}
                    <div className="flex flex-wrap gap-3 text-[12.5px] text-muted">
                      <span className="inline-flex items-center gap-1"><Clock3 size={13} /> {e.duration_minutes} min</span>
                      <span className="inline-flex items-center gap-1"><FileCheck2 size={13} /> {e.questionCount} questions</span>
                    </div>
                  </div>
                  <Button size="sm" onClick={() => setModeFor(e)}>Commencer</Button>
                </div>
                {past.length > 0 && (
                  <div className="mt-3 pt-3 border-t border-app flex flex-wrap gap-1.5" aria-label="Tentatives passées">
                    {past.slice(0, 6).map((a) => {
                      const p = a.total ? Math.round(((a.score ?? 0) / a.total) * 100) : 0;
                      return (
                        <Badge key={a.id} tone={p >= 70 ? "green" : p >= 50 ? "amber" : "red"} className="tabular-nums">
                          {p} % · {fmtDateTime(a.finished_at!)}
                        </Badge>
                      );
                    })}
                  </div>
                )}
              </Card>
            );
          })}
        </div>
      )}

      {/* Choix du mode */}
      <Modal open={!!modeFor} onClose={() => setModeFor(null)} title={modeFor ? `Démarrer : ${modeFor.title}` : undefined}>
        {modeFor && (
          <div className="space-y-3">
            <button
              onClick={() => start(modeFor, "timed")}
              disabled={busy}
              className="w-full text-left border border-app rounded-xl p-4 hover:border-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30 transition-colors disabled:opacity-60"
            >
              <div className="flex items-center gap-2 font-semibold text-fg text-sm mb-0.5">
                <Timer size={16} className="text-amber-500" /> Mode chronométré — {modeFor.duration_minutes} min
              </div>
              <p className="text-[12.5px] text-muted">
                Conditions réelles : compte à rebours visible, remise automatique à 0:00. Recommandé avant l'examen.
              </p>
            </button>
            <button
              onClick={() => start(modeFor, "practice")}
              disabled={busy}
              className="w-full text-left border border-app rounded-xl p-4 hover:border-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30 transition-colors disabled:opacity-60"
            >
              <div className="flex items-center gap-2 font-semibold text-fg text-sm mb-0.5">
                <GraduationCap size={16} className="text-brand-500" /> Mode pratique — sans limite de temps
              </div>
              <p className="text-[12.5px] text-muted">
                Prenez le temps de réfléchir à chaque question. Idéal pour une première tentative.
              </p>
            </button>
            {busy && <div className="flex justify-center py-1"><Spinner /></div>}
            {error && <ErrorBanner message={error} />}
          </div>
        )}
      </Modal>
    </main>
  );
}