"use client";
// Visionneuse interactive des diapositives : navigation par séance et par diapo,
// clavier ←/→, recherche plein texte, boîtes sémantiques rendues en encadrés,
// PDF original, et « poser une question sur cette diapo » directement dans le chat.
import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  ChevronLeft, ChevronRight, FileDown, List, MessageSquareText, Presentation, Search, X,
} from "lucide-react";
import { Badge, Button, Card, Skeleton, cn } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { ErrorBanner } from "./shared";

type Deck = { week: number; title: string; slides: number; sections: number };
type Slide = { ref_number: number; title: string; section_title: string; display_content: string; box_types: string };

const CALLOUTS: Record<string, { label: string; cls: string }> = {
  "Définition": { label: "Définition", cls: "border-brand-500 bg-brand-50 dark:bg-brand-900/30" },
  "Concept": { label: "Concept", cls: "border-brand-500 bg-brand-50 dark:bg-brand-900/30" },
  "Important": { label: "Important", cls: "border-red-500 bg-red-50 dark:bg-red-950/30" },
  "Attention": { label: "Attention", cls: "border-red-500 bg-red-50 dark:bg-red-950/30" },
  "Exemple": { label: "Exemple", cls: "border-emerald-500 bg-emerald-50 dark:bg-emerald-950/30" },
  "Note": { label: "Note", cls: "border-gold-500 bg-gold-500/8 dark:bg-gold-500/10" },
  "Question éclair": { label: "Question éclair", cls: "border-violet-500 bg-violet-50 dark:bg-violet-950/30" },
  "Formule": { label: "Formule", cls: "border-brand-400 bg-surface-1 dark:bg-brand-950/40" },
  "Calcul": { label: "Calcul", cls: "border-brand-400 bg-surface-1 dark:bg-brand-950/40" },
  "Données": { label: "Données", cls: "border-slate-400 bg-surface-1 dark:bg-brand-950/40" },
  "Rappel": { label: "Rappel", cls: "border-gold-500 bg-gold-500/8" },
  "Astuce": { label: "Astuce", cls: "border-emerald-500 bg-emerald-50 dark:bg-emerald-950/30" },
  "Conseil": { label: "Conseil", cls: "border-emerald-500 bg-emerald-50 dark:bg-emerald-950/30" },
  "Information": { label: "Information", cls: "border-brand-400 bg-brand-50 dark:bg-brand-900/30" },
  "Résultat": { label: "Résultat", cls: "border-emerald-600 bg-emerald-50 dark:bg-emerald-950/30" },
  "Énoncé": { label: "Énoncé", cls: "border-slate-400 bg-surface-1" },
  "Travail demandé": { label: "Travail demandé", cls: "border-violet-500 bg-violet-50 dark:bg-violet-950/30" },
  "Réconciliation": { label: "Réconciliation", cls: "border-gold-600 bg-gold-500/8" },
};
const CALLOUT_RE = new RegExp(`^(${Object.keys(CALLOUTS).join("|")})(?:\\s*—\\s*([^:\\n]{0,120}?))?\\s*:\\s*`);

/** Convertit le texte aplati d'une diapo en blocs affichables. */
function parseBlocks(content: string): { kind: "callout" | "text" | "table"; label?: string; title?: string; body: string }[] {
  const out: { kind: "callout" | "text" | "table"; label?: string; title?: string; body: string }[] = [];
  for (const rawBlock of content.split(/\n\n+/)) {
    const block = rawBlock.trim();
    if (!block) continue;
    const m = block.match(CALLOUT_RE);
    const lines = block.split("\n");
    const pipeLines = lines.filter((l) => l.includes(" | "));
    if (m) {
      out.push({ kind: "callout", label: m[1], title: m[2]?.trim(), body: mdify(block.slice(m[0].length)) });
    } else if (pipeLines.length >= 2 && pipeLines.length >= lines.length - 1) {
      out.push({ kind: "table", body: block });
    } else {
      out.push({ kind: "text", body: mdify(block) });
    }
  }
  return out;
}
function mdify(s: string): string {
  return s
    .split("\n")
    .map((l) => (l.trim().startsWith("• ") ? l.replace(/^\s*• /, "- ") : l))
    .join("\n");
}
function TableBlock({ body }: { body: string }) {
  const rows = body.split("\n").filter((l) => l.trim());
  return (
    <div className="overflow-x-auto rounded-lg border border-app">
      <table className="w-full text-[13px]">
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} className={i === 0 ? "bg-surface-2 dark:bg-brand-900/50 font-semibold" : i % 2 ? "bg-surface-1 dark:bg-brand-950/30" : ""}>
              {r.split(" | ").map((c, j) => (
                <td key={j} className="px-3 py-1.5 border-b border-app text-fg whitespace-nowrap sm:whitespace-normal">{c}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function SlidesViewer({ course }: { course: string }) {
  const router = useRouter();
  const search = useSearchParams();
  const [decks, setDecks] = useState<Deck[] | null>(null);
  const [week, setWeek] = useState<number | null>(null);
  const [slides, setSlides] = useState<Slide[] | null>(null);
  const [index, setIndex] = useState(0);
  const [error, setError] = useState<string | null>(null);
  const [panelOpen, setPanelOpen] = useState(false);
  const [query, setQuery] = useState("");
  const mainRef = useRef<HTMLDivElement>(null);
  const courseCode = course.toUpperCase();

  useEffect(() => {
    fetch(`/api/slides/${course}`)
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Chargement impossible"))))
      .then((d) => {
        setDecks(d.decks);
        const w = parseInt(search.get("semaine") ?? "", 10);
        if (d.decks.length) setWeek(Number.isInteger(w) && d.decks.some((x: Deck) => x.week === w) ? w : d.decks[0].week);
      })
      .catch((e) => setError(e.message));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [course]);

  useEffect(() => {
    if (week == null) return;
    setSlides(null);
    setIndex(0);
    fetch(`/api/slides/${course}/${week}`)
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Séance introuvable"))))
      .then((d) => setSlides(d.slides))
      .catch((e) => setError(e.message));
  }, [course, week]);

  const go = useCallback(
    (delta: number) => {
      if (!slides) return;
      setIndex((i) => Math.min(slides.length - 1, Math.max(0, i + delta)));
      mainRef.current?.scrollTo({ top: 0 });
    },
    [slides]
  );

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
      if (e.key === "ArrowRight" || e.key === " ") { e.preventDefault(); go(1); }
      if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
      if (e.key === "Escape") setPanelOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [go]);

  const results = useMemo(() => {
    if (!slides || query.trim().length < 2) return null;
    const q = query.toLowerCase();
    return slides
      .map((s, i) => ({ s, i }))
      .filter(({ s }) => s.title.toLowerCase().includes(q) || s.display_content.toLowerCase().includes(q))
      .slice(0, 30);
  }, [slides, query]);

  if (error) return <main className="px-4 py-6 max-w-5xl mx-auto w-full"><ErrorBanner message={error} /></main>;
  if (!decks) {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-6xl mx-auto w-full space-y-4">
        <Skeleton className="h-10 w-full max-w-lg" />
        <Skeleton className="h-[26rem] w-full" />
      </main>
    );
  }
  if (!decks.length) {
    return (
      <main className="px-4 py-10 text-center text-muted">
        Aucune diapositive indexée pour ce cours — demandez au professeur de lancer l'ingestion.
      </main>
    );
  }

  const slide = slides?.[index];
  const blocks = slide ? parseBlocks(slide.display_content) : [];
  const deck = decks.find((d) => d.week === week);

  return (
    <main className="flex flex-col h-[calc(100dvh-10.5rem)] md:h-[calc(100dvh-7rem)] max-w-7xl mx-auto w-full px-2 sm:px-6 py-2 sm:py-4">
      {/* Barre de la visionneuse */}
      <div className="flex items-center gap-2 pb-2 sm:pb-3">
        <select
          value={week ?? ""}
          onChange={(e) => { const w = parseInt(e.target.value, 10); setWeek(w); router.replace(`?semaine=${w}`, { scroll: false }); }}
          aria-label="Séance"
          className="h-9 rounded-lg border border-app bg-card text-[13px] font-semibold text-fg px-2.5 outline-none focus:border-brand-400 min-w-0 max-w-[55vw] sm:max-w-xs truncate"
        >
          {decks.map((d) => (
            <option key={d.week} value={d.week}>
              S{d.week} — {d.title.replace(/^Séance \d+\s*(—\s*)?/, "") || "Séance"} ({d.slides})
            </option>
          ))}
        </select>
        <button
          onClick={() => setPanelOpen((v) => !v)}
          aria-label="Sommaire et recherche"
          aria-expanded={panelOpen}
          className={cn("h-9 px-2.5 inline-flex items-center gap-1.5 rounded-lg border text-[13px] font-medium transition-colors",
            panelOpen ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40 text-brand-700 dark:text-brand-200" : "border-app bg-card text-muted hover:text-fg")}
        >
          <List size={15} /> <span className="hidden sm:inline">Sommaire</span>
        </button>
        <div className="ml-auto flex items-center gap-1.5">
          {slide && (
            <Link
              href={`/chat?course=${courseCode}&q=${encodeURIComponent(`Explique-moi la diapositive ${slide.ref_number} de la séance ${week} (« ${slide.title} »).`)}`}
              className="h-9 px-2.5 inline-flex items-center gap-1.5 rounded-lg border border-app bg-card text-[13px] font-medium text-muted hover:text-fg hover:border-brand-400 transition-colors"
              title="Poser une question sur cette diapositive dans le chat"
            >
              <MessageSquareText size={14} /> <span className="hidden sm:inline">Demander au chat</span>
            </Link>
          )}
          <a
            href={`/api/slides/${course}/${week}?pdf=1`}
            target="_blank"
            rel="noopener"
            className="h-9 px-2.5 inline-flex items-center gap-1.5 rounded-lg border border-app bg-card text-[13px] font-medium text-muted hover:text-fg hover:border-brand-400 transition-colors"
            title="Ouvrir le PDF original de la séance"
          >
            <FileDown size={14} /> <span className="hidden sm:inline">PDF</span>
          </a>
        </div>
      </div>

      <div className="flex-1 flex gap-3 min-h-0">
        {/* Panneau sommaire / recherche */}
        {panelOpen && (
          <aside className="absolute sm:relative z-30 inset-x-2 sm:inset-auto sm:w-72 shrink-0 bg-card border border-app rounded-xl shadow-lg sm:shadow-none flex flex-col max-h-[70dvh] sm:max-h-none">
            <div className="p-2.5 border-b border-app flex items-center gap-2">
              <Search size={14} className="text-muted shrink-0" />
              <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Rechercher dans la séance…"
                className="w-full bg-transparent text-[13px] text-fg placeholder:text-muted outline-none"
              />
              <button onClick={() => setPanelOpen(false)} className="sm:hidden text-muted p-1" aria-label="Fermer"><X size={15} /></button>
            </div>
            <div className="flex-1 overflow-y-auto p-1.5">
              {(results ?? slides?.map((s, i) => ({ s, i })) ?? []).map(({ s, i }) => (
                <button
                  key={i}
                  onClick={() => { setIndex(i); setPanelOpen(window.innerWidth >= 640); }}
                  className={cn(
                    "w-full text-left px-2.5 py-1.5 rounded-md text-[12.5px] transition-colors flex items-baseline gap-2",
                    i === index ? "bg-brand-100 dark:bg-brand-900/50 text-brand-800 dark:text-brand-200 font-semibold" : "text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/30"
                  )}
                >
                  <span className="text-[11px] tabular-nums w-6 shrink-0 text-right opacity-70">{s.ref_number}</span>
                  <span className="truncate">{s.title}</span>
                </button>
              ))}
              {results && results.length === 0 && <p className="text-[12.5px] text-muted text-center py-6">Aucun résultat.</p>}
            </div>
          </aside>
        )}

        {/* Diapositive */}
        <div className="flex-1 flex flex-col min-w-0">
          <Card className="flex-1 overflow-hidden flex flex-col relative">
            {!slides ? (
              <div className="p-6 space-y-3">
                <Skeleton className="h-7 w-2/3" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-5/6" />
                <Skeleton className="h-24 w-full" />
              </div>
            ) : slide ? (
              <>
                <div className="px-4 sm:px-8 pt-4 sm:pt-6 pb-3 border-b border-app shrink-0">
                  {slide.section_title && (
                    <p className="text-[11px] font-bold uppercase tracking-widest text-gold-600 dark:text-gold-400 mb-1">{slide.section_title}</p>
                  )}
                  <h2 className="text-lg sm:text-2xl font-bold tracking-tight text-brand-800 dark:text-brand-200 text-balance">{slide.title}</h2>
                </div>
                <div ref={mainRef} className="flex-1 overflow-y-auto px-4 sm:px-8 py-4 sm:py-5 space-y-3.5">
                  {blocks.map((b, i) =>
                    b.kind === "callout" ? (
                      <div key={i} className={cn("border-l-[3px] rounded-r-lg px-3.5 sm:px-4 py-2.5", CALLOUTS[b.label!]?.cls ?? "border-app bg-surface-1")}>
                        <p className="text-[11px] font-bold uppercase tracking-wider text-fg/70 mb-1">
                          {b.label}{b.title ? ` — ${b.title}` : ""}
                        </p>
                        <Markdown content={b.body} />
                      </div>
                    ) : b.kind === "table" ? (
                      <TableBlock key={i} body={b.body} />
                    ) : (
                      <Markdown key={i} content={b.body} />
                    )
                  )}
                </div>
                {/* Pied : progression + navigation */}
                <div className="shrink-0 border-t border-app">
                  <div className="h-1 bg-surface-2 dark:bg-brand-900/60">
                    <div className="h-full bg-brand-600 transition-all duration-300" style={{ width: `${((index + 1) / slides.length) * 100}%` }} />
                  </div>
                  <div className="flex items-center justify-between px-3 sm:px-6 py-2">
                    <Button variant="secondary" size="sm" onClick={() => go(-1)} disabled={index === 0} aria-label="Diapositive précédente">
                      <ChevronLeft size={15} /> <span className="hidden sm:inline">Précédente</span>
                    </Button>
                    <span className="text-[12.5px] font-semibold text-muted tabular-nums inline-flex items-center gap-2">
                      <Presentation size={13} className="hidden sm:block" />
                      {slide.ref_number} / {slides.at(-1)?.ref_number ?? slides.length}
                      <Badge tone="brand" className="hidden md:inline-flex">Séance {week}</Badge>
                    </span>
                    <Button variant="secondary" size="sm" onClick={() => go(1)} disabled={index >= slides.length - 1} aria-label="Diapositive suivante">
                      <span className="hidden sm:inline">Suivante</span> <ChevronRight size={15} />
                    </Button>
                  </div>
                </div>
              </>
            ) : null}
          </Card>
          <p className="hidden sm:block text-center text-[11px] text-muted mt-1.5">
            ← → pour naviguer · {deck?.slides ?? 0} diapositives · contenu reconstruit depuis la source du cours — le PDF original reste disponible
          </p>
        </div>
      </div>
    </main>
  );
}