"use client";
import useSWR from "swr";
import { Settings } from "lucide-react";
import { api, fetcher } from "@/lib/client/fetcher";
import { Spinner, toast } from "@/components/ui";
import { MemoryToggles } from "@/components/memory/memory-shared";
import { AppearanceSection, ModelsSection, SpendingSection, ToolsSection, IntegrationsSection, SecuritySection, InstallHint, Section, type Spending, type ToolInfo } from "@/components/settings/sections";

interface Resp {
  settings: { memory?: Record<string, unknown>; spending?: Spending; routing?: { defaultMode?: string }; appearance?: Record<string, unknown>; registry?: { refreshedAt?: string; live?: number } };
  owner: { username: string; createdAt: string; totp: boolean } | null;
  tools: ToolInfo[];
  integrations: { openai: boolean; anthropic: boolean; tavily: boolean };
}

const NAV = [["apparence", "Apparence"], ["modeles", "Modèles"], ["depenses", "Dépenses"], ["memoire", "Mémoire"], ["outils", "Outils"], ["integrations", "Intégrations"], ["securite", "Sécurité"], ["apropos", "À propos"]];

export default function SettingsPage() {
  const { data, mutate } = useSWR<Resp>("/api/settings", fetcher);
  async function save(key: string, value: unknown) { try { await api("/api/settings", { method: "PATCH", json: { key, value } }); toast("Réglages enregistrés", "ok"); void mutate(); } catch (e) { toast((e as Error).message, "error"); } }
  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="mx-auto flex w-full max-w-5xl gap-8 px-4 py-6 md:px-8">
        <nav className="sticky top-6 hidden w-40 shrink-0 self-start lg:block">{NAV.map(([id, l]) => <a key={id} href={`#${id}`} className="block rounded-lg px-3 py-1.5 text-[13px] text-fg-2 hover:bg-surface-2 hover:text-fg">{l}</a>)}</nav>
        <div className="min-w-0 flex-1 space-y-8">
          <div><h1 className="flex items-center gap-2 text-xl font-semibold tracking-tight"><Settings className="h-5 w-5 text-accent" /> Réglages</h1><p className="mt-1 text-[13px] text-muted">Apparence, modèles, dépenses, mémoire, outils et sécurité.</p></div>
          <InstallHint />
          {!data && <Spinner className="h-5 w-5" />}
          <AppearanceSection />
          {data && <ModelsSection routing={data.settings.routing ?? {}} onSave={save} />}
          {data && <SpendingSection value={data.settings.spending ?? { dailyLimitUsd: 10, monthlyLimitUsd: 150, alertAtPercent: 80 }} onSave={save} />}
          <Section id="memoire" title="Mémoire" hint="Les mêmes réglages que la page Mémoire. Les souvenirs restent visibles, modifiables et supprimables à tout moment."><MemoryToggles compact /><div className="text-[12px] text-muted">Gérer les souvenirs : <a href="/memory" className="text-accent hover:underline">Mémoire</a>.</div></Section>
          {data && <ToolsSection tools={data.tools} />}
          {data && <IntegrationsSection integrations={data.integrations} />}
          {data && <SecuritySection owner={data.owner} />}
          <Section id="apropos" title="À propos">
            <div className="space-y-1.5 text-[13px] text-fg-2">
              <div><span className="font-medium text-fg">Chat SPBoucher AI</span> · version 0.1.0</div>
              <div>Interface privée multi-fournisseurs (OpenAI, Anthropic ; MacLustr local à venir). Toutes les données — conversations, documents, mémoire, journaux d'outils — sont stockées localement sur le cluster MacLustr, jamais chez un tiers autre que les fournisseurs de modèles interrogés.</div>
              {data?.settings.registry?.refreshedAt && <div>Registre des modèles rafraîchi le {new Date(data.settings.registry.refreshedAt).toLocaleString("fr-CA")} ({data.settings.registry.live} identifiants listés).</div>}
              <div><a href="/models" className="text-accent hover:underline">Laboratoire de modèles et rapport de benchmark →</a></div>
            </div>
          </Section>
        </div>
      </div>
    </div>
  );
}