"use client";
// Révision de cartes mémoire : file dues + nouvelles, carte retournable (flip 3D),
// 4 boutons de qualité SM-2 (raccourcis 1-4), suspension, favori, création manuelle
// et génération par IA.
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { CheckCircle2, PauseCircle, Plus, Sparkles, Star } from "lucide-react";
import { Badge, Button, Card, EmptyState, Label, Modal, Skeleton, Spinner, Textarea, cn } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { ErrorBanner, fetchJson, postJson } from "./shared";

type CardItem = {
  id: number; type: string; front: string; back: string;
  concept_id: number | null; concept_name: string | null;
  favorite?: number; reps?: number; interval_days?: number;
};
type Stats = { total: number; learned: number; suspended: number };
type ConceptOpt = { slug: string; name: string };

const TYPE_LABELS: Record<string, string> = {
  qa: "Question", definition: "Définition", formula: "Formule",
  error: "Piège", comparison: "Comparaison", calc: "Calcul",
};

const QUALITIES = [
  { q: 2 as const, key: "1", label: "Encore", hint: "Réponse oubliée — revue dans 10 min", cls: "bg-red-600 hover:bg-red-700 text-white" },
  { q: 3 as const, key: "2", label: "Difficile", hint: "Trouvée avec effort", cls: "bg-amber-500 hover:bg-amber-600 text-white" },
  { q: 4 as const, key: "3", label: "Bien", hint: "Trouvée après réflexion", cls: "bg-brand-600 hover:bg-brand-700 text-white" },
  { q: 5 as const, key: "4", label: "Facile", hint: "Réponse immédiate", cls: "bg-emerald-600 hover:bg-emerald-700 text-white" },
];

export function FlashcardsApp({ course }: { course: string }) {
  const searchParams = useSearchParams();
  const conceptFilter = searchParams.get("concept");

  const [queue, setQueue] = useState<CardItem[] | null>(null);
  const [initialCount, setInitialCount] = useState(0);
  const [doneCount, setDoneCount] = useState(0);
  const [stats, setStats] = useState<Stats | null>(null);
  const [revealed, setRevealed] = useState(false);
  const [posting, setPosting] = useState(false);
  const [favorites, setFavorites] = useState<Record<number, boolean>>({});
  const [error, setError] = useState<string | null>(null);
  const [concepts, setConcepts] = useState<ConceptOpt[]>([]);

  // Modales
  const [createOpen, setCreateOpen] = useState(false);
  const [generateOpen, setGenerateOpen] = useState(false);
  const [form, setForm] = useState({ conceptSlug: "", type: "qa", front: "", back: "" });
  const [genForm, setGenForm] = useState({ conceptSlug: "", count: 5 });
  const [modalBusy, setModalBusy] = useState(false);
  const [modalMsg, setModalMsg] = useState<string | null>(null);

  const load = useCallback(async () => {
    setQueue(null);
    setError(null);
    setRevealed(false);
    setDoneCount(0);
    try {
      const url = `/api/learning/${course}/flashcards${conceptFilter ? `?concept=${encodeURIComponent(conceptFilter)}` : ""}`;
      const d = await fetchJson<{ due: CardItem[]; fresh: CardItem[]; stats: Stats }>(url);
      const q = [...d.due, ...d.fresh];
      setQueue(q);
      setInitialCount(q.length);
      setStats(d.stats);
      const fav: Record<number, boolean> = {};
      for (const c of d.due) fav[c.id] = !!c.favorite;
      setFavorites(fav);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur de chargement.");
      setQueue([]);
    }
  }, [course, conceptFilter]);

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

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

  const current = queue?.[0] ?? null;

  const rate = useCallback(async (q: 2 | 3 | 4 | 5) => {
    if (!current || posting) return;
    setPosting(true);
    setError(null);
    try {
      await postJson("/api/learning/flashcards/review", {
        cardId: current.id, q, favorite: !!favorites[current.id],
      });
      setQueue((prev) => (prev ? prev.slice(1) : prev));
      setDoneCount((n) => n + 1);
      setRevealed(false);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur d'enregistrement.");
    } finally {
      setPosting(false);
    }
  }, [current, posting, favorites]);

  async function suspendCurrent() {
    if (!current || posting) return;
    setPosting(true);
    setError(null);
    try {
      await postJson("/api/learning/flashcards/review", {
        cardId: current.id, q: 3, suspend: true, favorite: !!favorites[current.id],
      });
      setQueue((prev) => (prev ? prev.slice(1) : prev));
      setDoneCount((n) => n + 1);
      setStats((s) => (s ? { ...s, suspended: s.suspended + 1 } : s));
      setRevealed(false);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur d'enregistrement.");
    } finally {
      setPosting(false);
    }
  }

  // Raccourcis clavier : espace = retourner, 1-4 = qualité
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      if (createOpen || generateOpen || target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.tagName === "SELECT") return;
      if (e.key === " " || e.key === "Enter") {
        if (current) { e.preventDefault(); setRevealed((r) => !r); }
      }
      if (revealed && ["1", "2", "3", "4"].includes(e.key)) {
        e.preventDefault();
        const qb = QUALITIES.find((x) => x.key === e.key);
        if (qb) rate(qb.q);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [current, revealed, rate, createOpen, generateOpen]);

  async function submitCreate(e: React.FormEvent) {
    e.preventDefault();
    setModalBusy(true);
    setModalMsg(null);
    try {
      await postJson(`/api/learning/${course}/flashcards`, {
        action: "create",
        conceptSlug: form.conceptSlug || null,
        type: form.type,
        front: form.front,
        back: form.back,
      });
      setCreateOpen(false);
      setForm({ conceptSlug: "", type: "qa", front: "", back: "" });
      load();
    } catch (err) {
      setModalMsg(err instanceof Error ? err.message : "Erreur de création.");
    } finally {
      setModalBusy(false);
    }
  }

  async function submitGenerate(e: React.FormEvent) {
    e.preventDefault();
    if (!genForm.conceptSlug) { setModalMsg("Choisissez un concept."); return; }
    setModalBusy(true);
    setModalMsg(null);
    try {
      const d = await postJson<{ created: number }>(`/api/learning/${course}/flashcards`, {
        action: "generate", conceptSlug: genForm.conceptSlug, count: genForm.count,
      });
      setModalMsg(`${d.created} carte${d.created > 1 ? "s" : ""} créée${d.created > 1 ? "s" : ""} à partir du matériel du cours.`);
      load();
    } catch (err) {
      setModalMsg(err instanceof Error ? err.message : "Erreur de génération.");
    } finally {
      setModalBusy(false);
    }
  }

  const conceptName = useMemo(
    () => concepts.find((c) => c.slug === conceptFilter)?.name ?? conceptFilter,
    [concepts, conceptFilter]
  );

  const cardRef = useRef<HTMLButtonElement>(null);

  return (
    <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full">
      <div className="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div>
          <h2 className="text-lg font-bold text-fg">Cartes mémoire</h2>
          <p className="text-[13px] text-muted">
            {conceptFilter ? <>Ciblage : <span className="font-medium text-fg">{conceptName}</span> · </> : null}
            Répétition espacée — notez honnêtement, l'algorithme fait le reste.
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="secondary" size="sm" onClick={() => { setModalMsg(null); setCreateOpen(true); }}>
            <Plus size={14} /> Créer
          </Button>
          <Button variant="gold" size="sm" onClick={() => { setModalMsg(null); setGenerateOpen(true); }}>
            <Sparkles size={14} /> Générer par IA
          </Button>
        </div>
      </div>

      {/* Stats */}
      {stats && (
        <div className="flex flex-wrap gap-1.5 mb-4">
          <Badge tone="neutral">{stats.total} carte{stats.total > 1 ? "s" : ""} au total</Badge>
          <Badge tone="green">{stats.learned} apprise{stats.learned > 1 ? "s" : ""}</Badge>
          <Badge tone="amber">{stats.suspended} suspendue{stats.suspended > 1 ? "s" : ""}</Badge>
          {initialCount > 0 && (
            <Badge tone="brand" className="ml-auto">Session : {Math.min(doneCount + 1, initialCount)}/{initialCount}</Badge>
          )}
        </div>
      )}

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

      {queue === null ? (
        <div className="space-y-3">
          <Skeleton className="h-64 w-full" />
          <Skeleton className="h-10 w-full" />
        </div>
      ) : !current ? (
        <EmptyState
          icon={<CheckCircle2 />}
          title={doneCount > 0 ? "Session terminée — bravo !" : "Tout est à jour !"}
          description={
            doneCount > 0
              ? `${doneCount} carte${doneCount > 1 ? "s" : ""} revue${doneCount > 1 ? "s" : ""}. Les prochaines échéances arriveront selon vos notes.`
              : "Aucune carte due pour l'instant. Revenez demain, ou créez / générez de nouvelles cartes pour apprendre davantage."
          }
          action={
            <div className="flex gap-2">
              <Button variant="secondary" size="sm" onClick={load}>Actualiser</Button>
              <Button variant="gold" size="sm" onClick={() => { setModalMsg(null); setGenerateOpen(true); }}>
                <Sparkles size={14} /> Générer par IA
              </Button>
            </div>
          }
        />
      ) : (
        <div className="space-y-4">
          {/* Métadonnées de la carte */}
          <div className="flex flex-wrap items-center gap-1.5">
            <Badge tone="brand">{TYPE_LABELS[current.type] ?? current.type}</Badge>
            {current.concept_name && <Badge tone="neutral">{current.concept_name}</Badge>}
            {current.reps == null && <Badge tone="gold">Nouvelle carte</Badge>}
            <div className="ml-auto flex items-center gap-1">
              <button
                title={favorites[current.id] ? "Retirer des favoris" : "Marquer comme favori"}
                aria-label="Favori"
                onClick={() => setFavorites((f) => ({ ...f, [current.id]: !f[current.id] }))}
                className={cn("p-1.5 rounded-md transition-colors", favorites[current.id] ? "text-gold-500" : "text-muted hover:text-gold-500")}
              >
                <Star size={16} className={favorites[current.id] ? "fill-gold-500" : ""} />
              </button>
              <button
                title="Suspendre cette carte (ne plus la proposer)"
                aria-label="Suspendre"
                onClick={suspendCurrent}
                disabled={posting}
                className="p-1.5 rounded-md text-muted hover:text-amber-500 transition-colors disabled:opacity-50"
              >
                <PauseCircle size={16} />
              </button>
            </div>
          </div>

          {/* Carte retournable */}
          <button
            ref={cardRef}
            onClick={() => setRevealed((r) => !r)}
            className="w-full text-left [perspective:1200px] focus-visible:outline-2 rounded-2xl"
            aria-label={revealed ? "Verso de la carte — cliquer pour revoir le recto" : "Recto de la carte — cliquer ou appuyer sur Espace pour révéler"}
          >
            <div
              className={cn(
                "relative w-full min-h-64 transition-transform duration-500 [transform-style:preserve-3d]",
                revealed && "[transform:rotateY(180deg)]"
              )}
            >
              <Card className="absolute inset-0 p-6 flex flex-col [backface-visibility:hidden] overflow-y-auto">
                <span className="text-[11px] font-semibold text-muted uppercase tracking-wider mb-3">Recto</span>
                <div className="flex-1 flex items-center">
                  <div className="w-full"><Markdown content={current.front} /></div>
                </div>
                <p className="text-[11.5px] text-muted mt-4 text-center">Cliquez ou appuyez sur Espace pour révéler la réponse</p>
              </Card>
              <Card className="absolute inset-0 p-6 flex flex-col [backface-visibility:hidden] [transform:rotateY(180deg)] overflow-y-auto border-brand-300 dark:border-brand-700">
                <span className="text-[11px] font-semibold text-brand-600 dark:text-brand-300 uppercase tracking-wider mb-3">Verso</span>
                <div className="flex-1 flex items-center">
                  <div className="w-full"><Markdown content={current.back} /></div>
                </div>
              </Card>
            </div>
          </button>

          {/* Boutons de qualité */}
          {revealed ? (
            <div className="grid grid-cols-4 gap-2" role="group" aria-label="Évaluer votre réponse">
              {QUALITIES.map((b) => (
                <button
                  key={b.q}
                  onClick={() => rate(b.q)}
                  disabled={posting}
                  title={`${b.hint} (touche ${b.key})`}
                  className={cn(
                    "h-12 rounded-xl text-sm font-semibold transition-colors disabled:opacity-60 flex flex-col items-center justify-center gap-0",
                    b.cls
                  )}
                >
                  {posting ? <Spinner /> : (
                    <>
                      <span>{b.label}</span>
                      <span className="text-[10px] font-normal opacity-80">{b.key}</span>
                    </>
                  )}
                </button>
              ))}
            </div>
          ) : (
            <Button variant="secondary" className="w-full justify-center" onClick={() => setRevealed(true)}>
              Révéler la réponse (Espace)
            </Button>
          )}
        </div>
      )}

      {/* Modale : créer une carte */}
      <Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Créer une carte">
        <form onSubmit={submitCreate} className="space-y-3.5">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label htmlFor="fc-concept">Concept (optionnel)</Label>
              <select
                id="fc-concept"
                value={form.conceptSlug}
                onChange={(e) => setForm((f) => ({ ...f, conceptSlug: 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="">— Aucun —</option>
                {concepts.map((c) => <option key={c.slug} value={c.slug}>{c.name}</option>)}
              </select>
            </div>
            <div>
              <Label htmlFor="fc-type">Type</Label>
              <select
                id="fc-type"
                value={form.type}
                onChange={(e) => setForm((f) => ({ ...f, type: 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"
              >
                {Object.entries(TYPE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
          </div>
          <div>
            <Label htmlFor="fc-front">Recto (question) — Markdown et LaTeX acceptés</Label>
            <Textarea id="fc-front" rows={3} required minLength={3} maxLength={2000}
              value={form.front} onChange={(e) => setForm((f) => ({ ...f, front: e.target.value }))}
              placeholder="Ex. : Quelle est la formule du taux global d'actualisation ?" />
          </div>
          <div>
            <Label htmlFor="fc-back">Verso (réponse)</Label>
            <Textarea id="fc-back" rows={4} required maxLength={4000}
              value={form.back} onChange={(e) => setForm((f) => ({ ...f, back: e.target.value }))}
              placeholder="La réponse, avec formules $...$ au besoin." />
          </div>
          {modalMsg && <ErrorBanner message={modalMsg} />}
          <Button type="submit" disabled={modalBusy} className="w-full justify-center">
            {modalBusy ? <Spinner /> : "Créer la carte"}
          </Button>
        </form>
      </Modal>

      {/* Modale : génération IA */}
      <Modal open={generateOpen} onClose={() => setGenerateOpen(false)} title="Générer des cartes par IA">
        <form onSubmit={submitGenerate} className="space-y-3.5">
          <p className="text-[13px] text-muted">
            Les cartes sont produites à partir du matériel officiel du cours, pour vous seulement. Vérifiez-les avant de vous y fier.
          </p>
          <div>
            <Label htmlFor="gen-concept">Concept ciblé</Label>
            <select
              id="gen-concept"
              value={genForm.conceptSlug}
              onChange={(e) => setGenForm((f) => ({ ...f, conceptSlug: e.target.value }))}
              required
              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="">— Choisir un concept —</option>
              {concepts.map((c) => <option key={c.slug} value={c.slug}>{c.name}</option>)}
            </select>
          </div>
          <div>
            <Label htmlFor="gen-count">Nombre de cartes : {genForm.count}</Label>
            <input
              id="gen-count" type="range" min={2} max={10} step={1}
              value={genForm.count}
              onChange={(e) => setGenForm((f) => ({ ...f, count: Number(e.target.value) }))}
              className="w-full accent-[#1d64b0]"
            />
          </div>
          {modalMsg && (
            modalMsg.includes("créée")
              ? <p className="text-sm text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/25 rounded-xl px-4 py-3">{modalMsg}</p>
              : <ErrorBanner message={modalMsg} />
          )}
          <Button type="submit" variant="gold" disabled={modalBusy} className="w-full justify-center">
            {modalBusy ? <><Spinner /> Génération en cours…</> : "Générer"}
          </Button>
        </form>
      </Modal>
    </main>
  );
}