"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import {
  ChevronDown,
  Search,
  Globe,
  FileText,
  Wrench,
  Loader2,
  Check,
  AlertTriangle,
  Download,
} from "lucide-react";

export interface ToolCallView {
  id: string;
  name: string;
  arguments: Record<string, unknown> | string;
  status: "running" | "done" | "error";
  result?: string;
  error?: string | null;
  meta?: Record<string, unknown> | null;
  durationMs?: number;
}

const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  rechercher_web: Search,
  lire_page: Globe,
  creer_pdf: FileText,
};

const LABELS: Record<string, string> = {
  rechercher_web: "Recherche web",
  lire_page: "Lecture de page",
  creer_pdf: "Génération PDF",
};

function safeParseArgs(args: ToolCallView["arguments"]): Record<string, unknown> {
  if (typeof args === "string") {
    try {
      const v = JSON.parse(args);
      return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
    } catch {
      return {};
    }
  }
  return args ?? {};
}

function shortSummary(name: string, args: Record<string, unknown>): string {
  if (name === "rechercher_web") return String(args.requete ?? "").slice(0, 80);
  if (name === "lire_page") return String(args.url ?? "").slice(0, 80);
  if (name === "creer_pdf") return String(args.titre ?? "").slice(0, 80);
  return JSON.stringify(args).slice(0, 80);
}

export function ToolCallBlock({ call }: { call: ToolCallView }) {
  const [open, setOpen] = React.useState(false);
  const Icon = ICONS[call.name] ?? Wrench;
  const label = LABELS[call.name] ?? call.name;
  const args = safeParseArgs(call.arguments);
  const summary = shortSummary(call.name, args);
  const pdfUrl =
    call.meta && typeof call.meta === "object" && typeof call.meta.pdfUrl === "string"
      ? (call.meta.pdfUrl as string)
      : null;

  const statusEl =
    call.status === "running" ? (
      <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
    ) : call.status === "error" ? (
      <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
    ) : (
      <Check className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
    );

  return (
    <div
      className={cn(
        "my-2 overflow-hidden rounded-xl border bg-muted/30",
        call.status === "error" ? "border-destructive/40" : "border-border",
      )}
    >
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-muted/60"
      >
        <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
        <span className="font-medium">{label}</span>
        {summary && (
          <span className="min-w-0 truncate text-xs text-muted-foreground">— {summary}</span>
        )}
        <span className="ml-auto flex shrink-0 items-center gap-2">
          {call.durationMs !== undefined && call.status !== "running" && (
            <span className="text-[10px] tabular-nums text-muted-foreground">
              {call.durationMs >= 1000
                ? `${(call.durationMs / 1000).toFixed(1)}s`
                : `${call.durationMs}ms`}
            </span>
          )}
          {statusEl}
          <ChevronDown
            className={cn(
              "h-3.5 w-3.5 text-muted-foreground transition-transform",
              open && "rotate-180",
            )}
          />
        </span>
      </button>

      {pdfUrl && call.status === "done" && (
        <div className="border-t border-border bg-background px-3 py-2">
          <a
            href={pdfUrl}
            target="_blank"
            rel="noreferrer"
            className="inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground hover:bg-primary/90"
          >
            <Download className="h-3 w-3" />
            Télécharger le PDF
          </a>
        </div>
      )}

      {open && (
        <div className="border-t border-border bg-background/60 p-3 text-xs">
          {Object.keys(args).length > 0 && (
            <div className="mb-2">
              <div className="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                Arguments
              </div>
              <pre className="overflow-x-auto rounded-md bg-muted/50 p-2 font-mono text-[11px]">
                {JSON.stringify(args, null, 2)}
              </pre>
            </div>
          )}
          {call.status !== "running" && (
            <div>
              <div className="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                {call.error ? "Erreur" : "Résultat"}
              </div>
              <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono text-[11px] leading-relaxed">
                {call.result ?? call.error ?? "—"}
              </pre>
            </div>
          )}
        </div>
      )}
    </div>
  );
}