"use client";

import { memo, useState } from "react";
import type { ToolEvent } from "@/lib/chat-store";

const PREVIEW_LEN = 120;

type ToolStatus = "error" | "pending" | "done";

function statusOf(ev: ToolEvent): ToolStatus {
  if (ev.is_error) return "error";
  if (ev.pending) return "pending";
  return "done";
}

const STATUS_BORDER: Record<ToolStatus, string> = {
  error: "border-red-900 bg-red-950/30",
  pending: "border-amber-900 bg-amber-950/20",
  done: "border-neutral-800 bg-neutral-900/60",
};

const STATUS_LABEL: Record<ToolStatus, string> = {
  error: "失败",
  pending: "执行中…",
  done: "完成",
};

const truncate = (s: string, n: number) =>
  s.length > n ? s.slice(0, n) + "…" : s;

const jsonPreview = (v: unknown) => truncate(JSON.stringify(v) ?? "", 60);

function ToolCallCardImpl({ ev }: { ev: ToolEvent }) {
  const [open, setOpen] = useState(false);
  const status = statusOf(ev);

  const inputPreview = jsonPreview(ev.input);
  const outputPreview = ev.output ? truncate(ev.output, PREVIEW_LEN) : null;

  return (
    <div className={`rounded border text-xs ${STATUS_BORDER[status]}`}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left hover:bg-neutral-800/40"
      >
        <span className="flex items-center gap-2">
          <span className="text-neutral-400">{open ? "▾" : "▸"}</span>
          <span className="font-medium text-neutral-200">{ev.tool}</span>
          <span className="font-mono text-neutral-500 truncate max-w-[40ch]">
            {inputPreview}
          </span>
        </span>
        <span className="text-neutral-500 shrink-0">{STATUS_LABEL[status]}</span>
      </button>

      {open ? (
        <div className="space-y-2 border-t border-neutral-800 px-3 py-2 font-mono text-[11px]">
          <div>
            <div className="text-neutral-500">input</div>
            <pre className="whitespace-pre-wrap break-words text-neutral-200">
              {JSON.stringify(ev.input, null, 2)}
            </pre>
          </div>
          {ev.output ? (
            <div>
              <div className="text-neutral-500">output</div>
              <pre className="whitespace-pre-wrap break-words text-neutral-200 max-h-64 overflow-auto">
                {ev.output}
              </pre>
            </div>
          ) : (
            !ev.pending && <div className="text-neutral-500">(无输出)</div>
          )}
        </div>
      ) : (
        outputPreview && (
          <div className="border-t border-neutral-800 px-3 py-1 font-mono text-[11px] text-neutral-400 truncate">
            → {outputPreview}
          </div>
        )
      )}
    </div>
  );
}

export const ToolCallCard = memo(ToolCallCardImpl);