"use client";
import { useMemo, useState } from "react";
import useSWR from "swr";
import { Brain, Plus, Search, Download, ShieldCheck } from "lucide-react";
import { fetcher } from "@/lib/client/fetcher";
import type { MemoryDTO } from "@/lib/client/types";
import { Button, Empty, Spinner, cn } from "@/components/ui";
import { MemoryCard } from "@/components/memory/memory-card";
import { AddMemoryDialog } from "@/components/memory/add-memory-dialog";
import { CATEGORIES, MemoryToggles, categoryLabel } from "@/components/memory/memory-shared";

interface Resp { memories: MemoryDTO[]; stats: { status: string; n: number }[] }

export default function MemoryPage() {
  const [q, setQ] = useState(""); const [cat, setCat] = useState<string | null>(null); const [add, setAdd] = useState(false);
  const { data, isLoading, mutate } = useSWR<Resp>(`/api/memories${q ? `?q=${encodeURIComponent(q)}` : ""}`, fetcher, { keepPreviousData: true });
  const stat = (s: string) => data?.stats.find(x => x.status === s)?.n ?? 0;
  const candidates = useMemo(() => (data?.memories ?? []).filter(m => m.status === "candidate"), [data]);
  const grouped = useMemo(() => {
    const list = (data?.memories ?? []).filter(m => m.status !== "candidate" && (!cat || m.category === cat));
    const g = new Map<string, MemoryDTO[]>();
    for (const c of CATEGORIES) g.set(c.id, []);
    for (const m of list) { if (!g.has(m.category)) g.set(m.category, []); g.get(m.category)!.push(m); }
    return [...g.entries()].filter(([, v]) => v.length);
  }, [data, cat]);
  const refresh = () => void mutate();

  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="mx-auto w-full max-w-4xl px-4 py-6 md:px-8">
        <div className="mb-5 flex flex-wrap items-start justify-between gap-3">
          <div>
            <h1 className="flex items-center gap-2 text-xl font-semibold tracking-tight"><Brain className="h-5 w-5 text-accent-2" /> Mémoire</h1>
            <p className="mt-1 text-[13px] text-muted">Faits durables réutilisés dans tes conversations. Tu vois tout, tu contrôles tout : rien n'est stocké en silence.</p>
          </div>
          <div className="flex gap-2">
            <a href="/api/memories/export?format=md" className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-border px-3 text-sm text-fg-2 hover:bg-surface-2 hover:text-fg"><Download className="h-4 w-4" /> Markdown</a>
            <a href="/api/memories/export?format=json" className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-border px-3 text-sm text-fg-2 hover:bg-surface-2 hover:text-fg"><Download className="h-4 w-4" /> JSON</a>
            <Button variant="primary" onClick={() => setAdd(true)}><Plus className="h-4 w-4" /> Ajouter</Button>
          </div>
        </div>

        <div className="mb-4 grid grid-cols-3 gap-2">
          {[{ l: "Actifs", v: stat("active"), tone: "text-ok" }, { l: "Candidats", v: stat("candidate"), tone: "text-warn" }, { l: "Désactivés", v: stat("disabled"), tone: "text-muted" }].map(t => (
            <div key={t.l} className="rounded-xl border border-border bg-surface px-4 py-3"><div className={cn("text-2xl font-semibold tabular-nums", t.tone)}>{t.v}</div><div className="text-[12px] text-muted">{t.l}</div></div>
          ))}
        </div>
        <div className="mb-6"><MemoryToggles /></div>

        {candidates.length > 0 && (
          <section className="mb-6">
            <h2 className="mb-2 flex items-center gap-2 text-[13px] font-semibold uppercase tracking-wider text-warn"><ShieldCheck className="h-4 w-4" /> Candidats à approuver · {candidates.length}</h2>
            <div className="space-y-2">{candidates.map(m => <MemoryCard key={m.id} m={m} candidate onChanged={refresh} />)}</div>
          </section>
        )}

        <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center">
          <div className="relative flex-1"><Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted" /><input value={q} onChange={e => setQ(e.target.value)} placeholder="Rechercher dans la mémoire…" className="input !pl-8" /></div>
          {isLoading && <Spinner />}
        </div>
        <div className="mb-4 flex flex-wrap gap-1.5">
          <button onClick={() => setCat(null)} className={cn("rounded-lg border px-2.5 py-1 text-[12px]", !cat ? "border-accent bg-accent/10 text-accent" : "border-border text-fg-2 hover:bg-surface-2")}>Toutes</button>
          {CATEGORIES.map(c => <button key={c.id} onClick={() => setCat(cat === c.id ? null : c.id)} className={cn("rounded-lg border px-2.5 py-1 text-[12px]", cat === c.id ? "border-accent bg-accent/10 text-accent" : "border-border text-fg-2 hover:bg-surface-2")}>{c.label}</button>)}
        </div>

        {data && !grouped.length && <Empty icon={<Brain className="h-8 w-8" />} title={q ? "Aucun souvenir ne correspond" : "Aucun souvenir pour l'instant"} hint="Les souvenirs apparaissent au fil des conversations (extraction automatique) ou quand tu en ajoutes un." action={<Button onClick={() => setAdd(true)}><Plus className="h-4 w-4" /> Ajouter un souvenir</Button>} />}
        {grouped.map(([c, items]) => (
          <section key={c} className="mb-6">
            <h2 className="mb-2 text-[12px] font-semibold uppercase tracking-wider text-muted">{categoryLabel(c)} · {items.length}</h2>
            <div className="space-y-2">{items.map(m => <MemoryCard key={m.id} m={m} onChanged={refresh} />)}</div>
          </section>
        ))}
      </div>
      <AddMemoryDialog open={add} onClose={() => setAdd(false)} onAdded={refresh} />
    </div>
  );
}