"use client";
// Bibliothèque personnelle : filtres par type, aperçus, viewer Markdown en modale,
// copie, téléchargement et suppression.
import { useCallback, useEffect, useMemo, useState } from "react";
import { Bookmark, Copy, Download, Library, Trash2 } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Card, EmptyState, Modal, Skeleton, Tabs } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { ErrorBanner, downloadText, fetchJson, fmtDate } from "./shared";

type SavedItem = {
  id: number; kind: "note" | "answer" | "summary" | "quiz" | "plan";
  course_code: string | null; title: string; content: string; meta: string | null; created_at: string;
};

const KIND_LABELS: Record<string, string> = {
  note: "Note", answer: "Réponse", summary: "Résumé", quiz: "Quiz", plan: "Plan",
};

export function LibraryApp() {
  const [items, setItems] = useState<SavedItem[] | null>(null);
  const [filter, setFilter] = useState("tous");
  const [viewing, setViewing] = useState<SavedItem | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(() => {
    setError(null);
    fetchJson<{ items: SavedItem[] }>("/api/library")
      .then((d) => setItems(d.items))
      .catch((e) => { setItems([]); setError(e instanceof Error ? e.message : "Erreur de chargement."); });
  }, []);

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

  async function remove(id: number) {
    if (!confirm("Supprimer définitivement cet élément ?")) return;
    setError(null);
    try {
      const res = await fetch("/api/library", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        throw new Error((d as { error?: string }).error ?? `Erreur ${res.status}`);
      }
      setItems((xs) => (xs ? xs.filter((x) => x.id !== id) : xs));
      setViewing((v) => (v?.id === id ? null : v));
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur de suppression.");
    }
  }

  const kinds = useMemo(() => {
    const present = new Set((items ?? []).map((i) => i.kind));
    return ["tous", ...Object.keys(KIND_LABELS).filter((k) => present.has(k as SavedItem["kind"]))];
  }, [items]);

  const filtered = useMemo(
    () => (items ?? []).filter((i) => filter === "tous" || i.kind === filter),
    [items, filter]
  );

  return (
    <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full">
      <PageHeader
        title="Bibliothèque"
        subtitle="Vos réponses sauvegardées, notes et résumés — retrouvables en tout temps."
      />

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

      {items === null ? (
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <Skeleton className="h-40" /><Skeleton className="h-40" /><Skeleton className="h-40" />
        </div>
      ) : items.length === 0 ? (
        <EmptyState
          icon={<Bookmark />}
          title="Bibliothèque vide"
          description="Dans le chat, utilisez l'icône signet sous une réponse pour la conserver ici."
        />
      ) : (
        <>
          {kinds.length > 2 && (
            <Tabs
              className="mb-4"
              active={filter}
              onChange={setFilter}
              tabs={kinds.map((k) => ({ key: k, label: k === "tous" ? `Tous (${items.length})` : KIND_LABELS[k] ?? k }))}
            />
          )}
          {filtered.length === 0 ? (
            <EmptyState icon={<Library />} title="Rien dans ce filtre" />
          ) : (
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {filtered.map((item) => (
                <Card key={item.id} className="p-4 flex flex-col animate-fade-up hover:border-brand-300 transition-colors">
                  <button onClick={() => setViewing(item)} className="text-left flex-1">
                    <div className="flex flex-wrap items-center gap-1.5 mb-2">
                      <Badge tone="brand">{KIND_LABELS[item.kind] ?? item.kind}</Badge>
                      {item.course_code && <Badge tone="neutral">{item.course_code}</Badge>}
                    </div>
                    <h3 className="text-sm font-semibold text-fg line-clamp-2 mb-1.5">{item.title}</h3>
                    <p className="text-[12.5px] text-muted line-clamp-4 whitespace-pre-wrap">{item.content.slice(0, 320)}</p>
                  </button>
                  <div className="flex items-center justify-between mt-3 pt-3 border-t border-app">
                    <span className="text-[11px] text-muted">{fmtDate(item.created_at)}</span>
                    <button
                      onClick={() => remove(item.id)}
                      title="Supprimer" aria-label="Supprimer"
                      className="p-1.5 rounded-md text-muted hover:text-red-500 transition-colors"
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </>
      )}

      {/* Viewer */}
      <Modal open={!!viewing} onClose={() => setViewing(null)} title={viewing?.title} wide>
        {viewing && (
          <div>
            <div className="flex flex-wrap items-center gap-2 mb-4">
              <Badge tone="brand">{KIND_LABELS[viewing.kind] ?? viewing.kind}</Badge>
              {viewing.course_code && <Badge tone="neutral">{viewing.course_code}</Badge>}
              <span className="text-[11.5px] text-muted">{fmtDate(viewing.created_at)}</span>
              <div className="ml-auto flex gap-1">
                <button
                  onClick={() => navigator.clipboard?.writeText(viewing.content)}
                  title="Copier" aria-label="Copier"
                  className="p-2 rounded-lg text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/40"
                >
                  <Copy size={15} />
                </button>
                <button
                  onClick={() => downloadText(`${viewing.title.slice(0, 60).replace(/\s+/g, "-").toLowerCase()}.md`, `# ${viewing.title}\n\n${viewing.content}`)}
                  title="Télécharger en .md" aria-label="Télécharger"
                  className="p-2 rounded-lg text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/40"
                >
                  <Download size={15} />
                </button>
                <button
                  onClick={() => remove(viewing.id)}
                  title="Supprimer" aria-label="Supprimer"
                  className="p-2 rounded-lg text-muted hover:text-red-500 hover:bg-surface-2 dark:hover:bg-brand-900/40"
                >
                  <Trash2 size={15} />
                </button>
              </div>
            </div>
            <Markdown content={viewing.content} />
          </div>
        )}
      </Modal>
    </main>
  );
}