"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../../../../../ui/src/components/accordion.mjs';
import { MarkdownContent } from '../../../../../../ui/src/components/markdown-content.mjs';
import { Skeleton } from '../../../../../../ui/src/components/skeleton.mjs';
import { cn } from '../../../../../../ui/src/lib/utils.mjs';
import { Wrench, Loader2, AlertCircle, Check } from 'lucide-react';

function formatToolName(name) {
  return name.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()).trim();
}
function getStatusIcon(state, isLoading) {
  if (isLoading || state === "input-streaming" || state === "input-available") {
    return /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" });
  }
  if (state === "output-error") {
    return /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 text-destructive" });
  }
  if (state === "output-available") {
    return /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" });
  }
  return /* @__PURE__ */ jsx(Wrench, { className: "h-3.5 w-3.5 text-muted-foreground" });
}
function getStatusLabel(state, isLoading) {
  if (isLoading || state === "input-streaming") {
    return "Running...";
  }
  if (state === "input-available") {
    return "Executing...";
  }
  if (state === "output-error") {
    return "Error";
  }
  if (state === "output-available") {
    return "Complete";
  }
  return "Pending";
}
function JsonDisplay({ data, label }) {
  if (data === void 0 || data === null) {
    return null;
  }
  let jsonString;
  try {
    jsonString = JSON.stringify(data, null, 2);
  } catch {
    jsonString = String(data);
  }
  const markdown = `\`\`\`json
${jsonString}
\`\`\``;
  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: label }),
    /* @__PURE__ */ jsx("div", { className: "[&_.markdown-code-block]:my-0 [&_.markdown-code-block]:max-h-48 [&_.markdown-code-block_.code-content]:max-h-40 [&_.markdown-code-block_.code-content]:overflow-y-auto", children: /* @__PURE__ */ jsx(MarkdownContent, { markdown, variant: "chat" }) })
  ] });
}
function ToolCallDisplay({
  toolCallId,
  toolName,
  state,
  input,
  output,
  errorText,
  isLoading
}) {
  const displayName = formatToolName(toolName);
  const statusLabel = getStatusLabel(state, isLoading);
  const statusIcon = getStatusIcon(state, isLoading);
  const isComplete = state === "output-available" || state === "output-error";
  const hasError = state === "output-error";
  return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(
    AccordionItem,
    {
      value: toolCallId,
      className: cn(
        "!border rounded-lg overflow-hidden transition-colors",
        hasError && "border-destructive/50",
        !hasError && isComplete && "border-green-500/30",
        !isComplete && "border-border/50"
      ),
      children: [
        /* @__PURE__ */ jsx(
          AccordionTrigger,
          {
            className: cn("px-3 py-2 hover:no-underline hover:bg-muted/50"),
            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
              /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate text-left", children: displayName }),
              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground shrink-0", children: [
                statusIcon,
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel })
              ] })
            ] })
          }
        ),
        /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border/50 pt-3", children: [
          state === "input-streaming" && !input && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
            /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" })
          ] }),
          input !== void 0 && /* @__PURE__ */ jsx(JsonDisplay, { data: input, label: "Input" }),
          state === "output-available" && output !== void 0 && /* @__PURE__ */ jsx(JsonDisplay, { data: output, label: "Output" }),
          state === "output-error" && errorText && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-destructive uppercase tracking-wide", children: "Error" }),
            /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive bg-destructive/10 p-2 rounded-md", children: errorText })
          ] }),
          (state === "input-available" || state === "input-streaming") && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
            /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground/50 truncate", children: [
            "ID: ",
            toolCallId
          ] })
        ] }) })
      ]
    }
  ) });
}

export { ToolCallDisplay };
