"use client";
// Résumés : liste, génération (semaine / concept / préparation d'examen, 3 styles),
// viewer Markdown avec citations cliquables, copie et téléchargement .md.
import { useCallback, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Check, Copy, Download, FileText, Sparkles } from "lucide-react";
import { Badge, Button, Card, EmptyState, Label, Modal, Skeleton, Spinner, cn } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { CitationPanel, type Citation } from "@/components/chat/citation-panel";
import { ErrorBanner, downloadText, fetchJson, fmtDate, postJson } from "./shared";

type Summary = {
  id: number; scope: "week" | "concept" | "exam-prep"; ref: string; title: string;
  content: string; citations: string; created_by: string; created_at: string;
};
type ConceptOpt = { slug: string; name: string };

const SCOPE_LABELS: Record<Summary["scope"], string> = {
  week: "Semaine", concept: "Concept", "exam-prep": "Préparation d'examen",
};
const STYLES = [
  { key: "ultra-court", label: "Ultra-court", hint: "Une page maximum, l'essentiel en listes serrées." },
  { key: "detaille", label: "Détaillé", hint: "Structuré par sous-thèmes, exemples et erreurs fréquentes." },
  { key: "avec-formules", label: "Avec formules", hint: "Chaque formule en LaTeX, variables définies, mini-exemple chiffré." },
] as const;

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

  const [summaries, setSummaries] = useState<Summary[] | null>(null);
  const [concepts, setConcepts] = useState<ConceptOpt[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [citation, setCitation] = useState<Citation | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  // Génération
  const [genOpen, setGenOpen] = useState(!!conceptParam);
  const [scope, setScope] = useState<Summary["scope"]>(conceptParam ? "concept" : "week");
  const [week, setWeek] = useState(1);
  const [conceptSlug, setConceptSlug] = useState(conceptParam ?? "");
  const [style, setStyle] = useState<(typeof STYLES)[number]["key"]>("detaille");
  const [genBusy, setGenBusy] = useState(false);
  const [genError, setGenError] = useState<string | null>(null);

  const load = useCallback(() => {
    setError(null);
    fetchJson<{ summaries: Summary[] }>(`/api/learning/${course}/summaries`)
      .then((d) => setSummaries(d.summaries))
      .catch((e) => { setSummaries([]); setError(e instanceof Error ? e.message : "Erreur de chargement."); });
  }, [course]);

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

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

  const selected = useMemo(() => summaries?.find((s) => s.id === selectedId) ?? null, [summaries, selectedId]);
  const selectedCitations = useMemo<Citation[]>(() => {
    if (!selected) return [];
    try { return JSON.parse(selected.citations || "[]") as Citation[]; } catch { return []; }
  }, [selected]);

  async function generate(e: React.FormEvent) {
    e.preventDefault();
    setGenBusy(true);
    setGenError(null);
    try {
      const body: Record<string, unknown> = { scope, style };
      if (scope === "week") body.week = week;
      if (scope === "concept") {
        if (!conceptSlug) { setGenError("Choisissez un concept."); setGenBusy(false); return; }
        body.conceptSlug = conceptSlug;
      }
      const d = await postJson<{ id: number }>(`/api/learning/${course}/summaries`, body);
      setGenOpen(false);
      load();
      setSelectedId(d.id);
    } catch (err) {
      setGenError(err instanceof Error ? err.message : "Erreur de génération.");
    } finally {
      setGenBusy(false);
    }
  }

  function copySelected() {
    if (!selected) return;
    navigator.clipboard?.writeText(selected.content).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  }

  return (
    <main className="px-4 sm:px-6 py-6 max-w-5xl 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">Résumés</h2>
          <p className="text-[13px] text-muted">Générés depuis le matériel officiel du cours, avec les diapositives citées.</p>
        </div>
        <Button variant="gold" size="sm" onClick={() => { setGenError(null); setGenOpen(true); }}>
          <Sparkles size={14} /> Générer un résumé
        </Button>
      </div>

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

      {summaries === null ? (
        <div className="grid md:grid-cols-3 gap-4">
          <Skeleton className="h-40" /><Skeleton className="h-40" /><Skeleton className="h-40" />
        </div>
      ) : summaries.length === 0 ? (
        <EmptyState
          icon={<FileText />}
          title="Aucun résumé pour l'instant"
          description="Générez votre premier résumé : par semaine de cours, par concept, ou en préparation d'examen."
          action={
            <Button variant="gold" size="sm" onClick={() => { setGenError(null); setGenOpen(true); }}>
              <Sparkles size={14} /> Générer un résumé
            </Button>
          }
        />
      ) : (
        <div className="grid md:grid-cols-[280px_1fr] gap-5 items-start">
          {/* Liste */}
          <div className="space-y-2 md:max-h-[70vh] md:overflow-y-auto md:pr-1">
            {summaries.map((s) => (
              <button
                key={s.id}
                onClick={() => setSelectedId(s.id)}
                className={cn(
                  "w-full text-left border rounded-xl px-3.5 py-3 transition-colors",
                  selectedId === s.id
                    ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40"
                    : "border-app bg-card hover:border-brand-300"
                )}
              >
                <p className="text-[13.5px] font-semibold text-fg line-clamp-2">{s.title}</p>
                <div className="flex flex-wrap items-center gap-1.5 mt-1.5">
                  <Badge tone="brand">{SCOPE_LABELS[s.scope] ?? s.scope}</Badge>
                  <span className="text-[11px] text-muted">{fmtDate(s.created_at)}</span>
                </div>
              </button>
            ))}
          </div>

          {/* Viewer */}
          {selected ? (
            <Card className="p-5 sm:p-6 animate-fade-up">
              <div className="flex flex-wrap items-center gap-2 mb-4 pb-4 border-b border-app">
                <h3 className="font-bold text-fg flex-1 min-w-0">{selected.title}</h3>
                <Button variant="secondary" size="sm" onClick={copySelected} title="Copier le Markdown">
                  {copied ? <Check size={14} className="text-emerald-500" /> : <Copy size={14} />} {copied ? "Copié" : "Copier"}
                </Button>
                <Button
                  variant="secondary" size="sm"
                  onClick={() => downloadText(`${selected.title.replace(/[^\p{L}\p{N} -]/gu, "").trim().replace(/\s+/g, "-").toLowerCase() || "resume"}.md`, `# ${selected.title}\n\n${selected.content}`)}
                  title="Télécharger en .md"
                >
                  <Download size={14} /> .md
                </Button>
              </div>
              <Markdown
                content={selected.content}
                onCitationClick={(index) => {
                  const c = selectedCitations.find((x) => x.index === index);
                  if (c) setCitation(c);
                }}
              />
              {selectedCitations.length > 0 && (
                <div className="mt-5 pt-4 border-t border-app flex flex-wrap items-center gap-1.5">
                  <span className="text-[11.5px] text-muted font-medium">Sources :</span>
                  {selectedCitations.map((c) => (
                    <button key={c.tag} className="citation-chip" onClick={() => setCitation(c)} title={c.refLabel}>
                      {c.tag}
                    </button>
                  ))}
                </div>
              )}
            </Card>
          ) : (
            <Card className="p-10 hidden md:flex items-center justify-center">
              <p className="text-sm text-muted">Choisissez un résumé dans la liste, ou générez-en un nouveau.</p>
            </Card>
          )}
        </div>
      )}

      {/* Modale de génération */}
      <Modal open={genOpen} onClose={() => setGenOpen(false)} title="Générer un résumé">
        <form onSubmit={generate} className="space-y-4">
          <div>
            <Label>Portée</Label>
            <div className="grid grid-cols-3 gap-2" role="group" aria-label="Portée du résumé">
              {(Object.keys(SCOPE_LABELS) as Summary["scope"][]).map((s) => (
                <button
                  key={s}
                  type="button"
                  aria-pressed={scope === s}
                  onClick={() => setScope(s)}
                  className={cn(
                    "h-10 rounded-lg text-[12.5px] font-medium border transition-colors px-1",
                    scope === s ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40 text-brand-700 dark:text-brand-300" : "border-app bg-card text-muted hover:text-fg"
                  )}
                >
                  {SCOPE_LABELS[s]}
                </button>
              ))}
            </div>
          </div>
          {scope === "week" && (
            <div>
              <Label htmlFor="sum-week">Semaine de cours</Label>
              <select
                id="sum-week" value={week} onChange={(e) => setWeek(Number(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"
              >
                {Array.from({ length: 14 }, (_, i) => i + 1).map((w) => <option key={w} value={w}>Semaine {w}</option>)}
              </select>
            </div>
          )}
          {scope === "concept" && (
            <div>
              <Label htmlFor="sum-concept">Concept</Label>
              <select
                id="sum-concept" value={conceptSlug} onChange={(e) => setConceptSlug(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>Style</Label>
            <div className="space-y-2">
              {STYLES.map((s) => (
                <button
                  key={s.key}
                  type="button"
                  aria-pressed={style === s.key}
                  onClick={() => setStyle(s.key)}
                  className={cn(
                    "w-full text-left border rounded-xl px-3.5 py-2.5 transition-colors",
                    style === s.key ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40" : "border-app bg-card hover:border-brand-300"
                  )}
                >
                  <p className="text-[13px] font-semibold text-fg">{s.label}</p>
                  <p className="text-[11.5px] text-muted mt-0.5">{s.hint}</p>
                </button>
              ))}
            </div>
          </div>
          {genError && <ErrorBanner message={genError} />}
          <Button type="submit" variant="gold" disabled={genBusy} className="w-full justify-center">
            {genBusy ? <><Spinner /> Génération en cours (peut prendre une minute)…</> : "Générer"}
          </Button>
        </form>
      </Modal>

      <CitationPanel citation={citation} onClose={() => setCitation(null)} />
    </main>
  );
}