"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import useSWR from "swr";
import { Columns2, X, Play, Square, History, Trophy, ArrowRight, Scale, AlertTriangle, Brain, ChevronDown, Code2, Plus } from "lucide-react";
import { useModels, shortName } from "@/lib/client/use-models";
import type { AIModel } from "@/lib/client/types";
import { api, fetcher, readSSE, fmtMs, fmtTokens, fmtUsd, relTime } from "@/lib/client/fetcher";
import { cn, Badge, Button, toast, Spinner, Toggle, Dialog } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";

interface Result { modelId: string; provider?: string; text: string; reasoning?: string; usage?: { input: number; output: number; cached?: number; reasoning?: number } | null; costUsd?: number | null; latencyMs?: number | null; ttftMs?: number | null; error?: string | null; done: boolean }
interface Judge { judgeModel: string; text: string; mapping: Record<string, string>; costUsd: number | null; disclaimer: string; at: string }
interface HistoryItem { id: string; prompt: string; model_ids: string[]; preferred_model: string | null; created_at: string; cost: number | null }
type Effort = "low" | "medium" | "high" | "xhigh" | "max";

const blended = (m: AIModel) => (m.pricing?.input != null && m.pricing?.output != null ? (3 * m.pricing.input + m.pricing.output) / 4 : null);
const firstCode = (t: string) => { const m = t.match(/```([\w+-]+)?\n([\s\S]*?)```/); return m ? { lang: m[1] ?? "", code: m[2] } : null; };

export function CompareView() {
  const { chat, byId, isLoading } = useModels(); const router = useRouter(); const sp = useSearchParams();
  const [selected, setSelected] = useState<string[]>([]); const [prompt, setPrompt] = useState(sp.get("prompt") ?? ""); const [system, setSystem] = useState(""); const [showSystem, setShowSystem] = useState(false); const [effort, setEffort] = useState<Effort | "">("");
  const [results, setResults] = useState<Record<string, Result>>({}); const [order, setOrder] = useState<string[]>([]); const [running, setRunning] = useState(false); const [cmpId, setCmpId] = useState<string | null>(null); const [preferred, setPreferred] = useState<string | null>(null); const [readOnly, setReadOnly] = useState(false);
  const [judge, setJudge] = useState<Judge | null>(null); const [judgeModel, setJudgeModel] = useState<string>(""); const [judging, setJudging] = useState(false);
  const [codeSide, setCodeSide] = useState(false); const [histOpen, setHistOpen] = useState(false); const [pickerOpen, setPickerOpen] = useState(false); const [pickerQ, setPickerQ] = useState("");
  const abortRef = useRef<AbortController | null>(null);
  const { data: hist, mutate: mutateHist } = useSWR<{ comparisons: HistoryItem[] }>("/api/compare", fetcher);
  const initDone = useRef(false);

  useEffect(() => {
    if (initDone.current || !chat.length) return; initDone.current = true;
    const fromUrl = (sp.get("models") ?? "").split(",").filter(id => chat.some(m => m.id === id));
    setSelected(fromUrl.length ? fromUrl.slice(0, 6) : [...chat.filter(m => m.favorite).slice(0, 3).map(m => m.id)]);
    const anth = chat.filter(m => m.provider === "anthropic" && m.kind === "chat").sort((a, b) => (blended(b) ?? -1) - (blended(a) ?? -1));
    setJudgeModel(anth[0]?.id ?? chat[0]?.id ?? "");
  }, [chat, sp]);

  const items = useMemo(() => order.map(id => results[id]).filter(Boolean), [order, results]);
  const codeItems = useMemo(() => items.map(r => ({ r, c: firstCode(r.text) })).filter(x => x.c), [items]);
  const canRun = selected.length >= 2 && selected.length <= 6 && prompt.trim().length > 0 && !running;

  async function run() {
    if (!canRun) return;
    const ctrl = new AbortController(); abortRef.current = ctrl;
    setRunning(true); setReadOnly(false); setJudge(null); setPreferred(null); setCmpId(null); setCodeSide(false);
    const init: Record<string, Result> = {}; for (const id of selected) init[id] = { modelId: id, provider: byId(id)?.provider, text: "", done: false };
    setResults(init); setOrder([...selected]);
    const bufs: Record<string, { text: string; reasoning: string }> = {}; let raf = 0;
    const flush = () => { raf = 0; setResults(prev => { const n = { ...prev }; for (const [id, b] of Object.entries(bufs)) if (n[id]) n[id] = { ...n[id], text: b.text, reasoning: b.reasoning || n[id].reasoning }; return n; }); };
    const schedule = () => { if (!raf) raf = requestAnimationFrame(flush); };
    try {
      const res = await fetch("/api/compare", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ prompt, modelIds: selected, system: system.trim() || undefined, settings: effort ? { effort } : undefined }), signal: ctrl.signal, credentials: "same-origin" });
      for await (const { event, data } of readSSE(res)) {
        const d = data as Record<string, unknown>;
        if (event === "start") setCmpId(d.id as string);
        else if (event === "text") { const id = d.model as string; (bufs[id] ??= { text: "", reasoning: "" }).text += d.delta as string; schedule(); }
        else if (event === "reasoning") { const id = d.model as string; (bufs[id] ??= { text: "", reasoning: "" }).reasoning += d.delta as string; schedule(); }
        else if (event === "model_error") setResults(p => ({ ...p, [d.model as string]: { ...p[d.model as string], error: d.message as string, done: true } }));
        else if (event === "model_done") { const r = d as unknown as Result; flush(); setResults(p => ({ ...p, [r.modelId]: { ...p[r.modelId], ...r, text: r.text || p[r.modelId]?.text || "", done: true } })); }
        else if (event === "done") { setCmpId(d.id as string); void mutateHist(); }
        else if (event === "error") toast(String(d.message), "error");
      }
    } catch (e) { if ((e as Error).name !== "AbortError") toast((e as Error).message, "error"); }
    finally { if (raf) cancelAnimationFrame(raf); flush(); setRunning(false); abortRef.current = null; setResults(p => { const n = { ...p }; for (const k of Object.keys(n)) n[k] = { ...n[k], done: true }; return n; }); }
  }
  function stop() { abortRef.current?.abort(); }
  async function prefer(id: string) { setPreferred(id); if (cmpId) { try { await api("/api/compare", { method: "PATCH", json: { id: cmpId, preferredModel: id } }); void mutateHist(); toast(`${shortName(byId(id), id)} marqué comme réponse préférée`, "ok"); } catch (e) { toast((e as Error).message, "error"); } } }
  async function continueWith(id: string) {
    try {
      const r = await api<{ conversation: { id: string } }>("/api/conversations", { method: "POST", json: { modelId: id, title: prompt.trim().slice(0, 60) || "Suite de comparaison" } });
      void fetch("/api/chat", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ conversationId: r.conversation.id, text: prompt, modelId: id, routingMode: "manual" }), credentials: "same-origin", keepalive: true });
      router.push(`/c/${r.conversation.id}`);
    } catch (e) { toast((e as Error).message, "error"); }
  }
  async function runJudge() {
    if (!cmpId || !judgeModel) return; setJudging(true);
    try { const r = await api<{ judge: Judge }>("/api/compare/judge", { method: "POST", json: { id: cmpId, judgeModel } }); setJudge(r.judge); } catch (e) { toast((e as Error).message, "error"); } finally { setJudging(false); }
  }
  async function loadHistory(id: string) {
    try {
      const r = await api<{ comparison: { id: string; prompt: string; model_ids: string[]; results: Result[]; judge: Judge | null; preferred_model: string | null } | null }>(`/api/compare?id=${id}`);
      if (!r.comparison) return; const c = r.comparison;
      setPrompt(c.prompt); setSelected(c.model_ids.filter(m => chat.some(x => x.id === m)).slice(0, 6)); setCmpId(c.id); setPreferred(c.preferred_model); setJudge(c.judge); setReadOnly(true); setCodeSide(false);
      const rs: Record<string, Result> = {}; for (const x of c.results) rs[x.modelId] = { ...x, done: true }; setResults(rs); setOrder(c.results.map(x => x.modelId)); setHistOpen(false);
    } catch (e) { toast((e as Error).message, "error"); }
  }
  const pickerList = chat.filter(m => !selected.includes(m.id) && (!pickerQ || m.id.includes(pickerQ.toLowerCase()) || m.displayName.toLowerCase().includes(pickerQ.toLowerCase())));
  const cols = items.length <= 1 ? "grid-cols-1" : items.length === 2 ? "md:grid-cols-2" : "md:grid-cols-2 xl:grid-cols-3";
  const labelOf = (id: string) => Object.entries(judge?.mapping ?? {}).find(([, m]) => m === id)?.[0];

  return (
    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
      <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-6">
        <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"><Columns2 className="h-5 w-5 text-accent" /> Comparaison multi-modèles</h1><p className="mt-1 text-sm text-muted">Même invite envoyée simultanément à 2 à 6 modèles vérifiés ; réponses, latence, jetons et coût côte à côte.</p></div>
          <Button variant="outline" onClick={() => setHistOpen(true)}><History className="h-4 w-4" /> Historique{hist?.comparisons.length ? ` (${hist.comparisons.length})` : ""}</Button>
        </div>

        {/* setup */}
        <div className="card mb-5 p-4">
          <div className="mb-2 flex flex-wrap items-center gap-1.5">
            <span className="mr-1 text-[12px] font-medium uppercase tracking-wider text-muted">Modèles</span>
            {selected.map(id => { const m = byId(id); return <span key={id} className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-2 py-1 text-[13px]"><span className={cn("h-2 w-2 rounded-full", m?.provider === "anthropic" ? "bg-accent-2" : "bg-accent")} />{shortName(m, id)}{!readOnly && <button onClick={() => setSelected(s => s.filter(x => x !== id))} className="text-muted hover:text-fg" aria-label="Retirer"><X className="h-3 w-3" /></button>}</span>; })}
            {!readOnly && selected.length < 6 && <button onClick={() => setPickerOpen(true)} className="inline-flex items-center gap-1 rounded-lg border border-dashed border-border-strong px-2 py-1 text-[13px] text-fg-2 hover:bg-surface-2 hover:text-fg"><Plus className="h-3.5 w-3.5" /> Ajouter</button>}
            {isLoading && <Spinner />}
            <span className="ml-auto text-[11px] text-muted">{selected.length}/6 · minimum 2</span>
          </div>
          <textarea value={prompt} onChange={e => setPrompt(e.target.value)} readOnly={readOnly} rows={4} placeholder="Invite commune à tous les modèles…" className="input mt-2 text-[15px]" onKeyDown={e => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") run(); }} />
          {showSystem && <textarea value={system} onChange={e => setSystem(e.target.value)} readOnly={readOnly} rows={3} placeholder="Instructions système optionnelles (ajoutées au contexte de chaque modèle)" className="input mt-2 text-[13px]" />}
          <div className="mt-2 flex flex-wrap items-center gap-3 text-[13px]">
            <button onClick={() => setShowSystem(s => !s)} className="text-fg-2 hover:text-fg">{showSystem ? "Masquer" : "Instructions système"}</button>
            <label className="flex items-center gap-2 text-fg-2">Effort <select value={effort} onChange={e => setEffort(e.target.value as Effort | "")} disabled={readOnly} className="input !w-auto !py-1 !px-2 text-[12px]"><option value="">par défaut</option><option value="low">faible</option><option value="medium">moyen</option><option value="high">élevé</option><option value="xhigh">très élevé</option><option value="max">maximal</option></select></label>
            <div className="flex-1" />
            {readOnly && <Button variant="ghost" onClick={() => { setReadOnly(false); setCmpId(null); setJudge(null); }}>Modifier et relancer</Button>}
            {running ? <Button variant="danger" onClick={stop}><Square className="h-3.5 w-3.5 fill-current" /> Arrêter</Button> : <Button variant="primary" onClick={run} disabled={!canRun || readOnly}><Play className="h-4 w-4" /> Lancer <span className="ml-1 hidden text-[11px] opacity-70 sm:inline">⌘↵</span></Button>}
          </div>
        </div>

        {/* results */}
        {items.length > 0 && (
          <>
            <div className="mb-3 flex flex-wrap items-center gap-3 text-[13px]">
              <span className="text-muted">{items.filter(r => r.done).length}/{items.length} terminés{cmpId ? ` · ${fmtUsd(items.reduce((s, r) => s + (r.costUsd ?? 0), 0))} total` : ""}</span>
              {codeItems.length >= 2 && <label className="flex items-center gap-2 text-fg-2"><Code2 className="h-3.5 w-3.5" /> Code côte à côte <Toggle checked={codeSide} onChange={setCodeSide} /></label>}
            </div>
            <div className={cn("grid gap-3", cols)}>
              {items.map(r => { const m = byId(r.modelId); const lbl = labelOf(r.modelId); const code = codeSide ? firstCode(r.text) : null; return (
                <div key={r.modelId} className={cn("card flex min-h-[280px] flex-col overflow-hidden", preferred === r.modelId && "ring-1 ring-accent-2/60")}>
                  <div className="flex items-center gap-2 border-b border-border px-3 py-2">
                    <span className={cn("h-2 w-2 rounded-full", m?.provider === "anthropic" ? "bg-accent-2" : "bg-accent")} />
                    <span className="min-w-0 flex-1 truncate text-[13px] font-medium">{shortName(m, r.modelId)}</span>
                    {lbl && <Badge tone="neutral">réponse {lbl}</Badge>}
                    {preferred === r.modelId && <Badge tone="amber"><Trophy className="h-3 w-3" /> préférée</Badge>}
                    {!r.done && <Spinner />}
                  </div>
                  <div className="min-h-0 flex-1 overflow-auto px-4 py-3" style={{ maxHeight: "60vh" }}>
                    {r.reasoning && <Reasoning text={r.reasoning} live={!r.done && !r.text} />}
                    {r.error && <div className="flex items-start gap-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-[13px] text-danger"><AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />{r.error}</div>}
                    {code ? <div className="prose-ai"><div className="code-head"><span>{code.lang || "code"}</span></div><pre><code>{code.code}</code></pre></div> : r.text ? <Markdown text={r.text} /> : !r.done && !r.reasoning ? <div className="flex items-center gap-1 py-2"><span className="typing-dot" /><span className="typing-dot" /><span className="typing-dot" /></div> : !r.error && r.done && !r.text ? <div className="text-[13px] text-muted">Réponse vide.</div> : null}
                  </div>
                  <div className="border-t border-border px-3 py-2">
                    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] tabular-nums text-muted">
                      <span title="Latence totale">{fmtMs(r.latencyMs)}</span>{r.ttftMs != null && <span title="Premier jeton">1er jeton {fmtMs(r.ttftMs)}</span>}
                      {r.usage && <span title={`entrée ${r.usage.input} · sortie ${r.usage.output}${r.usage.reasoning ? ` · raisonnement ${r.usage.reasoning}` : ""}`}>{fmtTokens(r.usage.input)} → {fmtTokens(r.usage.output)}</span>}
                      <span className={cn(r.costUsd == null && r.done && "italic")} title="Coût estimé d'après les prix vérifiés">{r.done ? (r.costUsd != null ? fmtUsd(r.costUsd) : "coût inconnu") : "…"}</span>
                    </div>
                    {r.done && !r.error && <div className="mt-1.5 flex items-center gap-1">
                      <button onClick={() => prefer(r.modelId)} disabled={preferred === r.modelId} className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[12px] text-fg-2 hover:bg-surface-2 hover:text-fg disabled:opacity-50"><Trophy className="h-3.5 w-3.5" /> Préférer</button>
                      <button onClick={() => continueWith(r.modelId)} className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[12px] text-fg-2 hover:bg-surface-2 hover:text-fg"><ArrowRight className="h-3.5 w-3.5" /> Continuer avec ce modèle</button>
                    </div>}
                  </div>
                </div>); })}
            </div>

            {/* judge */}
            <div className="card mt-5 p-4">
              <div className="flex flex-wrap items-center gap-3">
                <h2 className="flex items-center gap-2 text-[15px] font-semibold"><Scale className="h-4 w-4 text-accent" /> Évaluation assistée par IA</h2>
                <Badge tone="warn"><AlertTriangle className="h-3 w-3" /> Opinion générée par un modèle, pas une vérité objective</Badge>
                <div className="flex-1" />
                <select value={judgeModel} onChange={e => setJudgeModel(e.target.value)} className="input !w-auto !py-1.5 text-[13px]">{chat.filter(m => m.kind !== "chat-pro").map(m => <option key={m.id} value={m.id}>{m.displayName}</option>)}</select>
                <Button onClick={runJudge} loading={judging} disabled={!cmpId || running || items.filter(r => r.done && !r.error && r.text).length < 2}>{judge ? "Réévaluer" : "Évaluer les réponses"}</Button>
              </div>
              {!cmpId && !running && <p className="mt-2 text-[12px] text-muted">L'évaluation est disponible une fois la comparaison enregistrée.</p>}
              {judge && <div className="mt-4 border-t border-border pt-4">
                <div className="mb-2 flex flex-wrap gap-2 text-[12px] text-muted"><span>Juge : {shortName(byId(judge.judgeModel), judge.judgeModel)}</span><span>· {fmtUsd(judge.costUsd)}</span><span>· {Object.entries(judge.mapping).map(([l, m]) => `${l} = ${shortName(byId(m), m)}`).join(" · ")}</span></div>
                <div className="rounded-xl border border-warn/30 bg-warn/5 px-4 py-3"><Markdown text={judge.text} /></div>
                <p className="mt-2 text-[12px] text-muted">{judge.disclaimer}</p>
              </div>}
            </div>
          </>
        )}
        {!items.length && !isLoading && <div className="py-12 text-center text-sm text-muted">Choisis au moins deux modèles, écris une invite et lance la comparaison.</div>}
      </div>

      {/* model picker */}
      <Dialog open={pickerOpen} onClose={() => setPickerOpen(false)} title="Ajouter des modèles" width="max-w-lg">
        <div className="p-3">
          <input autoFocus value={pickerQ} onChange={e => setPickerQ(e.target.value)} placeholder="Filtrer…" className="input mb-2" />
          <div className="max-h-[55dvh] overflow-y-auto">
            {pickerList.map(m => <button key={m.id} onClick={() => { setSelected(s => s.length < 6 ? [...s, m.id] : s); if (selected.length + 1 >= 6) setPickerOpen(false); }} className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left hover:bg-surface">
              <span className={cn("h-2 w-2 rounded-full", m.provider === "anthropic" ? "bg-accent-2" : "bg-accent")} />
              <span className="min-w-0 flex-1"><span className="flex items-center gap-2 text-[13px] font-medium"><span className="truncate">{m.displayName}</span>{m.kind === "chat-pro" && <Badge tone="amber">pro · lent</Badge>}</span><span className="block text-[11px] text-muted">{m.benchmark?.qualityScore != null ? `${m.benchmark.qualityScore} % · ` : ""}{m.benchmark?.p50LatencyMs != null ? `${m.benchmark.p50LatencyMs} ms · ` : ""}{m.pricing?.input != null && m.pricing?.output != null ? `${m.pricing.input} $ / ${m.pricing.output} $ par M` : "prix non vérifié"}</span></span>
            </button>)}
            {!pickerList.length && <div className="py-6 text-center text-sm text-muted">Aucun autre modèle vérifié.</div>}
          </div>
        </div>
      </Dialog>

      {/* history drawer */}
      {histOpen && <div className="fixed inset-0 z-50" onClick={() => setHistOpen(false)}><div className="absolute inset-0 bg-black/55" /><aside onClick={e => e.stopPropagation()} className="absolute inset-y-0 right-0 flex w-[92vw] max-w-md flex-col border-l border-border bg-bg-elev shadow-soft anim-fade-up">
        <div className="flex items-center justify-between border-b border-border px-4 py-3"><h2 className="flex items-center gap-2 text-[15px] font-semibold"><History className="h-4 w-4" /> Comparaisons passées</h2><button onClick={() => setHistOpen(false)} className="rounded-lg p-1.5 text-fg-2 hover:bg-surface-2"><X className="h-4 w-4" /></button></div>
        <div className="min-h-0 flex-1 overflow-y-auto p-2">
          {!hist?.comparisons.length && <div className="py-10 text-center text-sm text-muted">Aucune comparaison enregistrée.</div>}
          {hist?.comparisons.map(h => <button key={h.id} onClick={() => loadHistory(h.id)} className={cn("mb-1 flex w-full flex-col gap-1 rounded-xl px-3 py-2.5 text-left hover:bg-surface", h.id === cmpId && "bg-surface-2")}>
            <span className="truncate-2 text-[13px]">{h.prompt}</span>
            <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted"><span>{relTime(h.created_at)}</span><span>· {h.model_ids.length} modèles</span>{h.cost != null && <span>· {fmtUsd(Number(h.cost))}</span>}{h.preferred_model && <span className="inline-flex items-center gap-1 text-accent-2"><Trophy className="h-3 w-3" />{shortName(byId(h.preferred_model), h.preferred_model)}</span>}</span>
          </button>)}
        </div>
      </aside></div>}
    </div>
  );
}

function Reasoning({ text, live }: { text: string; live: boolean }) {
  const [open, setOpen] = useState(false);
  return <div className="mb-2"><button onClick={() => setOpen(o => !o)} className="inline-flex items-center gap-1.5 text-[12px] text-muted hover:text-fg"><Brain className="h-3.5 w-3.5" /> Raisonnement {live ? "en cours…" : "résumé"} <ChevronDown className={cn("h-3 w-3 transition-transform", (open || live) && "rotate-180")} /></button>{(open || live) && <div className="mt-1.5 max-h-48 overflow-y-auto whitespace-pre-wrap rounded-xl border border-border bg-surface-2/50 px-3 py-2 text-[12.5px] leading-relaxed text-fg-2">{text}</div>}</div>;
}