"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import useSWR, { mutate } from "swr";
import { Telescope, Play, Square, ExternalLink, FileDown, FileText, Printer, Trash2, CheckCircle2, Circle, Loader2, XCircle, MessageSquare, Link2, ChevronRight } from "lucide-react";
import { api, fetcher, readSSE, fmtUsd, relTime } from "@/lib/client/fetcher";
import { useModels, shortName } from "@/lib/client/use-models";
import type { ProjectDTO } from "@/lib/client/types";
import { Markdown } from "../chat/markdown";
import { cn, Button, Badge, Spinner, toast, Empty } from "../ui";

type Depth = "quick" | "standard" | "deep";
interface Run { id: string; conversation_id: string | null; question: string; model_id: string; status: string; cost_usd: number; created_at: string; completed_at: string | null; source_count?: number }
interface RunFull extends Run { plan: { subquestions: string[]; queries: string[]; evidence_needed?: string[] } | null; steps: { step: string; at: string; detail?: unknown }[]; sources: Source[]; report_md: string | null; error: string | null }
interface Source { n: number; url: string; title: string; snippet?: string; publishedAt?: string; fetched: boolean; evidence?: { claim: string; quote: string; confidence: string }[]; evidenceCount?: number }

const STAGES = [{ id: "plan", label: "Plan" }, { id: "discovery", label: "Découverte" }, { id: "retrieval", label: "Récupération" }, { id: "extraction", label: "Extraction" }, { id: "validation", label: "Validation croisée" }, { id: "synthesis", label: "Synthèse" }, { id: "report", label: "Rapport" }] as const;
const DEPTHS: { id: Depth; label: string; hint: string }[] = [{ id: "quick", label: "Rapide", hint: "≈ 3 requêtes · 4 pages · ~1 min" }, { id: "standard", label: "Standard", hint: "≈ 5 requêtes · 7 pages · 2-4 min" }, { id: "deep", label: "Approfondie", hint: "≈ 8 requêtes · 12 pages · 5-10 min" }];
const STATUS_TONE: Record<string, "ok" | "warn" | "danger" | "accent" | "neutral"> = { complete: "ok", error: "danger", cancelled: "neutral", planning: "accent", searching: "accent", reading: "accent", synthesizing: "accent" };
const STATUS_LABEL: Record<string, string> = { complete: "terminé", error: "erreur", cancelled: "annulé", planning: "planification", searching: "recherche", reading: "lecture", synthesizing: "synthèse" };

interface Live { id?: string; conversationId?: string; model?: string; stage: number; plan?: RunFull["plan"]; sources: Source[]; report: string; cost?: number; error?: string; status: "idle" | "running" | "done" | "error" }
const idle: Live = { stage: -1, sources: [], report: "", status: "idle" };

export function ResearchView() {
  const sp = useSearchParams(); const printId = sp.get("print") === "1" ? sp.get("id") : null;
  const { chat } = useModels();
  const { data: runsData } = useSWR<{ runs: Run[] }>("/api/research", fetcher, { refreshInterval: 20_000 });
  const { data: projData } = useSWR<{ projects: ProjectDTO[] }>("/api/projects", fetcher);
  const [question, setQuestion] = useState(sp.get("q") ?? ""); const [modelId, setModelId] = useState(""); const [depth, setDepth] = useState<Depth>("standard"); const [projectId, setProjectId] = useState("");
  const [live, setLive] = useState<Live>(idle); const [selected, setSelected] = useState<string | null>(sp.get("id")); const abortRef = useRef<AbortController | null>(null);
  const { data: selData, isLoading: selLoading } = useSWR<{ run: RunFull }>(selected && live.status !== "running" ? `/api/research/${selected}` : null, fetcher);

  const defaultModel = useMemo(() => chat.find(m => /fable-5-1|opus-5-5/.test(m.id))?.id ?? chat.find(m => /^gpt-6-astra|^gpt-5\.5$/.test(m.id))?.id ?? chat.find(m => /opus|gpt-6|gpt-5/.test(m.id))?.id ?? chat[0]?.id ?? "", [chat]);
  const effModel = modelId || defaultModel;

  useEffect(() => { if (printId && selData?.run?.report_md) { const t = setTimeout(() => window.print(), 400); return () => clearTimeout(t); } }, [printId, selData]);

  async function start() {
    if (question.trim().length < 5 || !effModel) return;
    const abort = new AbortController(); abortRef.current = abort;
    setSelected(null); setLive({ ...idle, status: "running", stage: 0 });
    try {
      const res = await fetch("/api/research", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ question, modelId: effModel, projectId: projectId || null, depth }), signal: abort.signal, credentials: "same-origin" });
      for await (const { event, data } of readSSE(res)) {
        const d = data as Record<string, unknown>;
        if (event === "start") setLive(l => ({ ...l, id: d.id as string, conversationId: d.conversationId as string, model: d.model as string }));
        else if (event === "step") { const step = d.step as string; const idx = { plan: 1, discovery: 2, retrieval: 3, extraction: 4 }[step] ?? 0; setLive(l => ({ ...l, stage: Math.max(l.stage, idx), plan: step === "plan" ? (d.detail as RunFull["plan"]) : l.plan })); if (step === "extraction") setTimeout(() => setLive(l => ({ ...l, stage: Math.max(l.stage, 5) })), 800); }
        else if (event === "source") setLive(l => ({ ...l, sources: [...l.sources.filter(s => s.n !== d.n), { n: d.n as number, url: d.url as string, title: d.title as string, fetched: !!d.fetched }].sort((a, b) => a.n - b.n) }));
        else if (event === "evidence") setLive(l => ({ ...l, sources: l.sources.map(s => s.n === d.n ? { ...s, evidenceCount: d.count as number } : s) }));
        else if (event === "text") setLive(l => ({ ...l, stage: Math.max(l.stage, 5), report: l.report + (d.delta as string) }));
        else if (event === "done") setLive(l => ({ ...l, stage: 6, status: "done", cost: d.costUsd as number, conversationId: (d.conversationId as string) ?? l.conversationId }));
        else if (event === "error") setLive(l => ({ ...l, status: "error", error: d.message as string }));
      }
    } catch (e) { if ((e as Error).name !== "AbortError") { setLive(l => ({ ...l, status: "error", error: (e as Error).message })); toast((e as Error).message, "error"); } else setLive(l => ({ ...l, status: "error", error: "Annulé" })); }
    finally { abortRef.current = null; void mutate("/api/research"); }
  }
  function stop() { abortRef.current?.abort(); }
  async function del(id: string) { if (!confirm("Supprimer ce rapport ?")) return; await api(`/api/research/${id}`, { method: "DELETE" }); if (selected === id) setSelected(null); void mutate("/api/research"); }

  // ---- print mode: report only
  if (printId) {
    const r = selData?.run;
    return <div className="mx-auto max-w-3xl p-8">{!r ? <Spinner /> : <><h1 className="mb-1 text-2xl font-semibold">{r.question}</h1><p className="mb-6 text-sm text-muted">Rapport de recherche · {r.model_id} · {new Date(r.created_at).toLocaleString("fr-CA")} · {r.sources?.length ?? 0} sources</p><Markdown text={r.report_md ?? ""} /></>}</div>;
  }

  const view: { run?: RunFull; live?: Live } = live.status !== "idle" ? { live } : selData ? { run: selData.run } : {};
  const report = view.live ? view.live.report : view.run?.report_md ?? "";
  const sources = view.live ? view.live.sources : view.run?.sources ?? [];
  const plan = view.live ? view.live.plan : view.run?.plan;
  const stage = view.live ? view.live.stage : view.run ? (view.run.status === "complete" ? 6 : view.run.status === "error" ? -1 : ({ planning: 0, searching: 1, reading: 3, synthesizing: 5 }[view.run.status] ?? 0)) : -1;
  const runId = view.live?.id ?? view.run?.id; const convId = view.live?.conversationId ?? view.run?.conversation_id;
  const cost = view.live?.cost ?? view.run?.cost_usd;
  const running = live.status === "running";

  return (
    <div className="flex min-h-0 flex-1">
      {/* history */}
      <aside className="hidden w-72 shrink-0 flex-col border-r border-border lg:flex">
        <div className="border-b border-border px-4 py-3 text-[12px] font-semibold uppercase tracking-wider text-muted">Rapports</div>
        <div className="min-h-0 flex-1 overflow-y-auto p-2">
          {(runsData?.runs ?? []).map(r => <button key={r.id} onClick={() => { if (running) return; setLive(idle); setSelected(r.id); }} className={cn("group mb-1 flex w-full flex-col gap-1 rounded-lg px-3 py-2 text-left hover:bg-surface-2", selected === r.id && !running && "bg-surface-2")}><span className="truncate-2 text-[13px]">{r.question}</span><span className="flex items-center gap-2 text-[11px] text-muted"><Badge tone={STATUS_TONE[r.status] ?? "neutral"}>{STATUS_LABEL[r.status] ?? r.status}</Badge>{relTime(r.created_at)} · {fmtUsd(Number(r.cost_usd), 3)}<span onClick={e => { e.stopPropagation(); void del(r.id); }} className="ml-auto hidden text-muted hover:text-danger group-hover:inline"><Trash2 className="h-3 w-3" /></span></span></button>)}
          {runsData && !runsData.runs.length && <div className="px-3 py-6 text-center text-[12px] text-muted">Aucun rapport pour l'instant.</div>}
        </div>
      </aside>

      <div className="min-h-0 flex-1 overflow-y-auto">
        <div className="mx-auto w-full max-w-4xl px-4 py-5 md:px-6 space-y-5">
          <div><h1 className="flex items-center gap-2 text-xl font-semibold tracking-tight"><Telescope className="h-5 w-5 text-accent" /> Recherche approfondie</h1><p className="mt-0.5 text-[13px] text-muted">Plan → découverte web → lecture des sources → extraction d'indices → validation croisée → synthèse citée. Les preuves viennent des sources citées ; l'interprétation et la spéculation sont celles du modèle et sont étiquetées comme telles.</p></div>

          {/* form */}
          <section className="card p-4 space-y-3">
            <textarea value={question} onChange={e => setQuestion(e.target.value)} rows={3} disabled={running} placeholder="Question de recherche — ex. : Quel est l'impact des taux hypothécaires de 2025-2026 sur les prix des plex à Gatineau ?" className="input text-[15px]" />
            <div className="flex flex-wrap items-center gap-2">
              <select value={effModel} onChange={e => setModelId(e.target.value)} disabled={running} className="input !w-auto max-w-64 !py-1.5 text-[13px]">{chat.map(m => <option key={m.id} value={m.id}>{m.displayName}{m.pricing?.output != null ? ` · ${m.pricing.input} $/${m.pricing.output} $` : ""}</option>)}</select>
              <select value={projectId} onChange={e => setProjectId(e.target.value)} disabled={running} className="input !w-auto max-w-48 !py-1.5 text-[13px]"><option value="">Sans projet</option>{(projData?.projects ?? []).map(p => <option key={p.id} value={p.id}>{p.name}</option>)}</select>
              <div className="inline-flex rounded-lg border border-border bg-surface p-0.5">{DEPTHS.map(d => <button key={d.id} disabled={running} onClick={() => setDepth(d.id)} title={d.hint} className={cn("rounded-md px-2.5 py-1 text-[12px] font-medium", depth === d.id ? "bg-surface-2 text-fg" : "text-muted hover:text-fg")}>{d.label}</button>)}</div>
              <span className="text-[11px] text-muted">{DEPTHS.find(d => d.id === depth)!.hint}</span>
              <div className="flex-1" />
              {running ? <Button variant="danger" onClick={stop}><Square className="h-3.5 w-3.5" /> Arrêter</Button> : <Button variant="primary" onClick={start} disabled={question.trim().length < 5 || !effModel}><Play className="h-3.5 w-3.5" /> Lancer</Button>}
            </div>
          </section>

          {(view.live || view.run || selLoading) && (
            <>
              {/* pipeline */}
              <section className="card p-4">
                <ol className="flex flex-wrap items-center gap-1 text-[12px]">
                  {STAGES.map((s, i) => { const done = stage > i || stage === 6; const cur = stage === i && running; return <li key={s.id} className="flex items-center gap-1"><span className={cn("inline-flex items-center gap-1.5 rounded-md px-2 py-1", done ? "text-ok" : cur ? "bg-accent/10 text-accent" : "text-muted")}>{done ? <CheckCircle2 className="h-3.5 w-3.5" /> : cur ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Circle className="h-3.5 w-3.5" />}{s.label}</span>{i < STAGES.length - 1 && <ChevronRight className="h-3 w-3 text-muted/50" />}</li>; })}
                </ol>
                {(view.live?.error || view.run?.error) && <div className="mt-3 flex items-center gap-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-[13px] text-danger"><XCircle className="h-4 w-4" /> {view.live?.error ?? view.run?.error}</div>}
              </section>

              <div className="grid gap-4 lg:grid-cols-3">
                {/* plan */}
                <section className="card p-4 text-[13px]">
                  <h2 className="mb-2 text-[14px] font-medium">Plan</h2>
                  {plan ? <><div className="mb-1 text-[11px] uppercase tracking-wider text-muted">Sous-questions</div><ol className="list-decimal space-y-1 pl-4 text-fg-2">{plan.subquestions?.map((q, i) => <li key={i}>{q}</li>)}</ol><div className="mb-1 mt-3 text-[11px] uppercase tracking-wider text-muted">Requêtes</div><ul className="space-y-1">{plan.queries?.map((q, i) => <li key={i} className="rounded-md bg-surface-2 px-2 py-1 text-[12px] text-fg-2">{q}</li>)}</ul></> : <div className="flex items-center gap-2 text-muted"><Spinner /> Planification…</div>}
                </section>
                {/* sources */}
                <section className="card p-4 text-[13px] lg:col-span-2">
                  <h2 className="mb-2 flex items-center justify-between text-[14px] font-medium">Sources <span className="text-[11px] font-normal text-muted">{sources.filter(s => s.fetched).length} lues / {sources.length}</span></h2>
                  {sources.length ? <ul className="max-h-80 space-y-1 overflow-y-auto pr-1">{sources.map(s => { const ev = s.evidenceCount ?? s.evidence?.length; return <li key={s.n} className="flex items-start gap-2 rounded-lg px-2 py-1.5 hover:bg-surface-2"><span className="mt-0.5 w-6 shrink-0 text-right text-[11px] tabular-nums text-muted">[{s.n}]</span><span className="min-w-0 flex-1"><a href={s.url} target="_blank" rel="noopener noreferrer" className="block truncate font-medium hover:text-accent">{s.title || s.url}</a><span className="block truncate text-[11px] text-muted">{s.url}</span></span>{s.fetched ? <Badge tone={ev ? "ok" : "neutral"}>{ev != null ? `${ev} indice${ev > 1 ? "s" : ""}` : "lue"}</Badge> : <Badge>non lue</Badge>}<a href={s.url} target="_blank" rel="noopener noreferrer" className="text-muted hover:text-fg"><ExternalLink className="h-3.5 w-3.5" /></a></li>; })}</ul> : <div className="flex items-center gap-2 text-muted">{running ? <><Spinner /> Recherche en cours…</> : "Aucune source."}</div>}
                </section>
              </div>

              {/* report */}
              <section className="card p-5 md:p-7">
                <div className="mb-4 flex flex-wrap items-center gap-2 no-print">
                  <h2 className="text-[14px] font-medium">Rapport</h2>
                  {view.live?.model || view.run?.model_id ? <Badge tone="accent">{shortName(chat.find(m => m.id === (view.live?.model ?? view.run?.model_id)), view.live?.model ?? view.run?.model_id)}</Badge> : null}
                  {cost != null && <span className="text-[12px] text-muted">{fmtUsd(Number(cost), 3)}</span>}
                  <div className="flex-1" />
                  {runId && report && !running && <>
                    <a href={`/api/research/${runId}?format=md`} className="inline-flex items-center gap-1 rounded-lg border border-border px-2.5 py-1 text-[12px] hover:bg-surface-2"><FileText className="h-3.5 w-3.5" /> MD</a>
                    <a href={`/api/research/${runId}?format=docx`} className="inline-flex items-center gap-1 rounded-lg border border-border px-2.5 py-1 text-[12px] hover:bg-surface-2"><FileDown className="h-3.5 w-3.5" /> DOCX</a>
                    <a href={`/research?id=${runId}&print=1`} target="_blank" rel="noopener" className="inline-flex items-center gap-1 rounded-lg border border-border px-2.5 py-1 text-[12px] hover:bg-surface-2"><Printer className="h-3.5 w-3.5" /> PDF</a>
                    {convId && <a href={`/c/${convId}`} className="inline-flex items-center gap-1 rounded-lg border border-border px-2.5 py-1 text-[12px] hover:bg-surface-2"><MessageSquare className="h-3.5 w-3.5" /> Ouvrir la conversation</a>}
                  </>}
                </div>
                {report ? <Markdown text={report} /> : running ? <div className="flex items-center gap-2 py-6 text-sm text-muted"><Spinner /> {stage < 5 ? "Collecte des preuves…" : "Rédaction de la synthèse…"}</div> : selLoading ? <div className="skeleton h-40 rounded-xl" /> : <div className="py-6 text-sm text-muted">Pas de rapport.</div>}
                {report && <p className="mt-6 flex items-start gap-2 border-t border-border pt-3 text-[11px] text-muted"><Link2 className="mt-0.5 h-3 w-3 shrink-0" /> Les affirmations suivies de [n] s'appuient sur les sources numérotées ci-dessus. Les passages étiquetés « Interprétation » ou « Spéculation » sont des jugements du modèle, pas des faits observés.</p>}
              </section>
            </>
          )}
          {!view.live && !view.run && !selLoading && <Empty icon={<Telescope className="h-8 w-8" />} title="Lance une recherche ou ouvre un rapport" hint="Les rapports incluent des sources vérifiables et distinguent preuves, interprétation et spéculation." />}
        </div>
      </div>
    </div>
  );
}