"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import useSWR, { mutate } from "swr";
import { useMemo, useState } from "react";
import { Plus, Search, FolderKanban, Brain, BarChart3, Settings, FlaskConical, Columns2, Telescope, Pin, MoreHorizontal, Archive, Trash2, Pencil, FolderInput, PanelLeftClose, LogOut, ChevronDown, ChevronRight, Images } from "lucide-react";
import { fetcher, api } from "@/lib/client/fetcher";
import type { ConversationDTO, ProjectDTO } from "@/lib/client/types";
import { cn, Kbd, toast } from "./ui";
import { Logo } from "./logo";
import { setPrefs } from "@/lib/client/prefs";
import { resetDraft } from "@/lib/client/use-chat";

const NAV = [
  { href: "/compare", label: "Comparer", icon: Columns2 },
  { href: "/research", label: "Recherche approfondie", icon: Telescope },
  { href: "/models", label: "Laboratoire de modèles", icon: FlaskConical },
  { href: "/memory", label: "Mémoire", icon: Brain },
  { href: "/images", label: "Images", icon: Images },
  { href: "/usage", label: "Coûts & usage", icon: BarChart3 },
  { href: "/settings", label: "Réglages", icon: Settings },
];

function group(convs: ConversationDTO[]) {
  const now = new Date(); const d0 = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
  const g: Record<string, ConversationDTO[]> = { "Épinglées": [], "Aujourd'hui": [], "Hier": [], "7 derniers jours": [], "30 derniers jours": [], "Plus ancien": [] };
  for (const c of convs) {
    if (c.pinned) { g["Épinglées"].push(c); continue; }
    const t = new Date(c.last_message_at ?? c.created_at).getTime();
    if (t >= d0) g["Aujourd'hui"].push(c); else if (t >= d0 - 86_400_000) g["Hier"].push(c); else if (t >= d0 - 7 * 86_400_000) g["7 derniers jours"].push(c); else if (t >= d0 - 30 * 86_400_000) g["30 derniers jours"].push(c); else g["Plus ancien"].push(c);
  }
  return Object.entries(g).filter(([, v]) => v.length);
}

export function Sidebar({ onOpenPalette, onNavigate }: { onOpenPalette: () => void; onNavigate?: () => void }) {
  const pathname = usePathname(); const router = useRouter();
  const { data: convData } = useSWR<{ conversations: ConversationDTO[] }>("/api/conversations", fetcher, { refreshInterval: 30_000 });
  const { data: projData } = useSWR<{ projects: ProjectDTO[] }>("/api/projects", fetcher);
  const [projectsOpen, setProjectsOpen] = useState(true);
  const convs = useMemo(() => (convData?.conversations ?? []).filter(c => !c.project_id || true), [convData]);
  const groups = useMemo(() => group(convs), [convs]);
  const current = pathname.startsWith("/c/") ? pathname.slice(3) : null;

  async function newChat() { resetDraft(); router.push("/"); onNavigate?.(); }
  async function logout() { await api("/api/auth/logout", { method: "POST" }); navigator.serviceWorker?.controller?.postMessage("logout"); location.href = "/login"; }

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between px-3 pt-3 pb-2">
        <Link href="/" onClick={() => { resetDraft(); onNavigate?.(); }} className="flex items-center gap-2 rounded-lg px-1 py-1 hover:bg-surface-2"><Logo /><span className="text-[15px] font-semibold tracking-tight">SPBoucher <span className="text-accent-2">AI</span></span></Link>
        <button className="hidden md:inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted hover:bg-surface-2 hover:text-fg" title="Replier (⌘\)" onClick={() => setPrefs({ sidebarCollapsed: true })}><PanelLeftClose className="h-4 w-4" /></button>
      </div>
      <div className="px-3 pb-2 space-y-1">
        <button onClick={newChat} className="flex w-full items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-sm font-medium hover:border-border-strong hover:bg-surface-2 transition-colors"><Plus className="h-4 w-4 text-accent" /> <span className="truncate">Nouvelle conversation</span><span className="ml-auto hidden xl:inline-flex gap-0.5"><Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>O</Kbd></span></button>
        <button onClick={onOpenPalette} className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-fg-2 hover:bg-surface-2 hover:text-fg transition-colors"><Search className="h-4 w-4" /> Rechercher <span className="ml-auto hidden md:inline-flex gap-0.5"><Kbd>⌘</Kbd><Kbd>K</Kbd></span></button>
      </div>
      <nav className="px-3 pb-2">
        {NAV.map(n => <Link key={n.href} href={n.href} onClick={onNavigate} className={cn("flex items-center gap-2 rounded-lg px-3 py-1.5 text-[13px] transition-colors", pathname.startsWith(n.href) ? "bg-surface-2 text-fg" : "text-fg-2 hover:bg-surface-2 hover:text-fg")}><n.icon className="h-4 w-4" />{n.label}</Link>)}
      </nav>
      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
        {/* projects */}
        <div className="mt-1 flex items-center justify-between px-2 py-1">
          <button onClick={() => setProjectsOpen(o => !o)} className="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wider text-muted hover:text-fg">{projectsOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />} Projets</button>
          <Link href="/projects/new" onClick={onNavigate} className="rounded p-0.5 text-muted hover:text-fg" title="Nouveau projet"><Plus className="h-3.5 w-3.5" /></Link>
        </div>
        {projectsOpen && <div className="mb-2">{(projData?.projects ?? []).map(p => <Link key={p.id} href={`/projects/${p.id}`} onClick={onNavigate} className={cn("group flex items-center gap-2 rounded-lg px-3 py-1.5 text-[13px] transition-colors", pathname === `/projects/${p.id}` ? "bg-surface-2 text-fg" : "text-fg-2 hover:bg-surface-2 hover:text-fg")}><span className="h-2 w-2 rounded-full" style={{ background: p.color ?? "var(--accent)" }} /><span className="truncate">{p.name}</span><span className="ml-auto text-[11px] text-muted">{p.conversation_count ?? ""}</span></Link>)}
          {!projData?.projects?.length && <div className="px-3 py-1 text-[12px] text-muted">Aucun projet. <Link href="/projects/new" className="text-accent hover:underline">Créer</Link></div>}</div>}
        {/* history */}
        {groups.map(([label, items]) => (
          <div key={label} className="mt-2">
            <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-wider text-muted">{label}</div>
            {items.map(c => <ConvItem key={c.id} c={c} active={current === c.id} onNavigate={onNavigate} projects={projData?.projects ?? []} />)}
          </div>
        ))}
        {!convs.length && convData && <div className="px-3 py-6 text-center text-[12px] text-muted">Aucune conversation pour l'instant.</div>}
      </div>
      <div className="border-t border-border px-3 py-2 flex items-center justify-between safe-b">
        <Link href="/settings" onClick={onNavigate} className="text-[12px] text-muted hover:text-fg">Réglages</Link>
        <button onClick={logout} className="inline-flex items-center gap-1 text-[12px] text-muted hover:text-danger"><LogOut className="h-3.5 w-3.5" /> Quitter</button>
      </div>
    </div>
  );
}

function ConvItem({ c, active, onNavigate, projects }: { c: ConversationDTO; active: boolean; onNavigate?: () => void; projects: ProjectDTO[] }) {
  const [menu, setMenu] = useState(false); const [renaming, setRenaming] = useState(false); const [title, setTitle] = useState(c.title); const router = useRouter();
  async function patch(p: Record<string, unknown>) { await api(`/api/conversations/${c.id}`, { method: "PATCH", json: p }); void mutate("/api/conversations"); }
  async function del() { if (!confirm(`Supprimer « ${c.title} » ?`)) return; await api(`/api/conversations/${c.id}`, { method: "DELETE" }); void mutate("/api/conversations"); if (active) router.push("/"); toast("Conversation supprimée", "ok"); }
  return (
    <div className={cn("group relative flex items-center rounded-lg text-[13px] transition-colors", active ? "bg-surface-2 text-fg" : "text-fg-2 hover:bg-surface-2 hover:text-fg")}>
      {renaming ? <form className="flex-1 px-2 py-1" onSubmit={async e => { e.preventDefault(); await patch({ title }); setRenaming(false); }}><input autoFocus value={title} onChange={e => setTitle(e.target.value)} onBlur={() => setRenaming(false)} className="input !py-0.5 !px-1.5 text-[13px]" /></form>
        : <Link href={`/c/${c.id}`} onClick={onNavigate} className="flex min-w-0 flex-1 items-center gap-1.5 px-3 py-1.5">{c.pinned && <Pin className="h-3 w-3 shrink-0 text-accent-2" />}{c.mode === "research" && <Telescope className="h-3 w-3 shrink-0 text-accent" />}<span className="truncate">{c.title}</span></Link>}
      <button onClick={() => setMenu(m => !m)} className={cn("mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted hover:text-fg", menu ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus:opacity-100")} aria-label="Options"><MoreHorizontal className="h-4 w-4" /></button>
      {menu && <><div className="fixed inset-0 z-30" onClick={() => setMenu(false)} /><div className="absolute right-0 top-full z-40 mt-1 w-52 anim-fade-up rounded-xl border border-border bg-bg-elev p-1 shadow-soft text-[13px]" onClick={() => setMenu(false)}>
        <MenuItem icon={Pencil} onClick={() => setRenaming(true)}>Renommer</MenuItem>
        <MenuItem icon={Pin} onClick={() => patch({ pinned: !c.pinned })}>{c.pinned ? "Désépingler" : "Épingler"}</MenuItem>
        <div className="my-1 border-t border-border" />
        <div className="px-2 py-1 text-[11px] uppercase tracking-wider text-muted">Déplacer vers</div>
        <MenuItem icon={FolderInput} onClick={() => patch({ projectId: null })}>Aucun projet</MenuItem>
        {projects.map(p => <MenuItem key={p.id} icon={FolderKanban} onClick={() => patch({ projectId: p.id })}>{p.name}</MenuItem>)}
        <div className="my-1 border-t border-border" />
        <MenuItem icon={Archive} onClick={() => patch({ archived: true })}>Archiver</MenuItem>
        <MenuItem icon={Trash2} onClick={del} danger>Supprimer</MenuItem>
      </div></>}
    </div>
  );
}
function MenuItem({ icon: Icon, children, onClick, danger }: { icon: React.ComponentType<{ className?: string }>; children: React.ReactNode; onClick: () => void; danger?: boolean }) {
  return <button onClick={onClick} className={cn("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-surface-2", danger ? "text-danger" : "text-fg-2 hover:text-fg")}><Icon className="h-3.5 w-3.5" />{children}</button>;
}