"use client";
import { useState } from "react";
import { ChevronRight, Globe, Code2, FileSearch, Image as ImageIcon, Brain, Loader2, CheckCircle2, XCircle, ShieldAlert, Wrench } from "lucide-react";
import type { Part } from "@/lib/client/types";
import { cn, Button } from "../ui";

const ICONS: Record<string, React.ComponentType<{ className?: string }>> = { web_search: Globe, fetch_page: Globe, python: Code2, search_documents: FileSearch, generate_image: ImageIcon, save_memory: Brain };
const LABELS: Record<string, (i: Record<string, unknown>) => string> = {
  web_search: i => `Recherche web : « ${i.query} »`, fetch_page: i => `Lecture de ${String(i.url).replace(/^https?:\/\//, "").slice(0, 60)}`, python: () => "Exécution Python", search_documents: i => `Recherche dans les documents : « ${i.query} »`, generate_image: i => `Génération d'image : « ${String(i.prompt).slice(0, 60)} »`, save_memory: i => `Mémoire proposée : « ${String(i.content).slice(0, 60)} »`,
};

export function ToolCallCard({ part, onApprove }: { part: Extract<Part, { type: "tool_call" }>; onApprove?: (approve: boolean) => void }) {
  const [open, setOpen] = useState(false);
  const Icon = ICONS[part.name] ?? Wrench;
  const input = (part.input ?? {}) as Record<string, unknown>;
  const label = LABELS[part.name]?.(input) ?? part.name;
  const out = part.output as Record<string, unknown> | string | undefined;
  return (
    <div className={cn("my-2 rounded-xl border text-[13px]", part.status === "error" ? "border-danger/30 bg-danger/5" : part.status === "pending_approval" ? "border-warn/40 bg-warn/5" : "border-border bg-surface")}>
      <button type="button" onClick={() => setOpen(o => !o)} className="flex w-full items-center gap-2 px-3 py-2 text-left">
        <Icon className="h-4 w-4 shrink-0 text-accent" />
        <span className="min-w-0 flex-1 truncate text-fg-2">{label}</span>
        {part.status === "running" && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted" />}
        {part.status === "ok" && <CheckCircle2 className="h-3.5 w-3.5 text-ok" />}
        {part.status === "error" && <XCircle className="h-3.5 w-3.5 text-danger" />}
        {part.status === "denied" && <XCircle className="h-3.5 w-3.5 text-muted" />}
        {part.status === "pending_approval" && <ShieldAlert className="h-3.5 w-3.5 text-warn" />}
        {part.durationMs != null && <span className="text-[11px] text-muted">{(part.durationMs / 1000).toFixed(1)} s</span>}
        <ChevronRight className={cn("h-3.5 w-3.5 text-muted transition-transform", open && "rotate-90")} />
      </button>
      {part.status === "pending_approval" && onApprove && <div className="flex items-center gap-2 border-t border-border px-3 py-2"><span className="flex-1 text-[12px] text-fg-2">Cet outil requiert ton approbation.</span><Button size="sm" variant="primary" onClick={() => onApprove(true)}>Autoriser</Button><Button size="sm" variant="ghost" onClick={() => onApprove(false)}>Refuser</Button></div>}
      {open && (
        <div className="border-t border-border px-3 py-2 space-y-2">
          <div><div className="mb-1 text-[11px] uppercase tracking-wider text-muted">Entrée</div>{part.name === "python" ? <pre className="max-h-64 overflow-auto rounded-lg bg-[#0d1117] p-2 text-[12px] text-fg-2"><code>{String(input.code ?? "")}</code></pre> : <pre className="max-h-40 overflow-auto rounded-lg bg-surface-2 p-2 text-[12px] text-fg-2">{JSON.stringify(input, null, 2)}</pre>}</div>
          {part.error && <div className="rounded-lg bg-danger/10 p-2 text-[12px] text-danger">{part.error}</div>}
          {out !== undefined && <div><div className="mb-1 text-[11px] uppercase tracking-wider text-muted">Résultat</div><ToolOutput name={part.name} out={out} /></div>}
        </div>
      )}
    </div>
  );
}

function ToolOutput({ name, out }: { name: string; out: Record<string, unknown> | string }) {
  if (typeof out === "string") return <pre className="max-h-64 overflow-auto rounded-lg bg-surface-2 p-2 text-[12px]">{out}</pre>;
  if (name === "web_search" && Array.isArray(out.results)) return <ul className="space-y-1.5">{(out.results as { title: string; url: string; snippet: string }[]).map((r, i) => <li key={i} className="rounded-lg bg-surface-2 p-2"><a href={r.url} target="_blank" rel="noopener noreferrer" className="font-medium text-accent hover:underline">{r.title}</a><div className="truncate text-[11px] text-muted">{r.url}</div><div className="mt-0.5 text-[12px] text-fg-2 truncate-2">{r.snippet}</div></li>)}</ul>;
  if (name === "python") return <div className="space-y-1">{!!out.stdout && <pre className="max-h-64 overflow-auto rounded-lg bg-[#0d1117] p-2 text-[12px]">{String(out.stdout)}</pre>}{!!out.stderr && <pre className="max-h-40 overflow-auto rounded-lg bg-danger/10 p-2 text-[12px] text-danger">{String(out.stderr)}</pre>}<div className="text-[11px] text-muted">code de sortie {String(out.exitCode)} · {String(out.durationMs)} ms{out.timedOut ? " · délai dépassé" : ""}</div></div>;
  if (name === "search_documents" && Array.isArray(out.passages)) return <ul className="space-y-1.5">{(out.passages as { file: string; page: number | null; score: number; text: string }[]).map((p, i) => <li key={i} className="rounded-lg bg-surface-2 p-2"><div className="text-[11px] text-muted">{p.file}{p.page ? ` · p. ${p.page}` : ""} · score {p.score}</div><div className="mt-0.5 text-[12px] text-fg-2 truncate-2">{p.text}</div></li>)}</ul>;
  if (name === "fetch_page" && typeof out.text === "string") return <div className="rounded-lg bg-surface-2 p-2 text-[12px] text-fg-2"><div className="mb-1 truncate text-[11px] text-muted">{String(out.title ?? out.url)}</div><div className="max-h-40 overflow-auto whitespace-pre-wrap">{(out.text as string).slice(0, 3000)}{(out.text as string).length > 3000 ? "…" : ""}</div></div>;
  return <pre className="max-h-64 overflow-auto rounded-lg bg-surface-2 p-2 text-[12px] text-fg-2">{JSON.stringify(out, null, 2).slice(0, 6000)}</pre>;
}