"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { McpToolDetail } from "./McpToolDetail";
import { ToolArgsView } from "./ToolArgsView";
import { ResultView } from "./ResultView";
import { useToolPresentation } from "./tool-presenter";
import { CollapsiblePre } from "./tool-rendering-primitives";
/**
 * Renders the detail panel for a single tool call with category-specific
 * treatments.
 *
 * Arguments render through the shared {@link ToolArgsView} (same component used
 * by {@link ApprovalCard}); results render through {@link ResultView}, driven by
 * `@stigmer/sdk`'s `normalizeToolResult` — so an edit shows a diff, a shell shows
 * a terminal with an exit badge, a search shows a match list, and unknown tools
 * degrade to readable JSON instead of a raw dump.
 *
 * Composition varies by category to avoid redundancy: an edit shows only the
 * diff (which already names the file and quantifies the change); a write shows
 * its input content; a read shows just the path.
 *
 * Importable on its own by platform builders composing custom tool UIs.
 *
 * @example
 * ```tsx
 * <ToolCallDetail toolCall={toolCall} />
 * ```
 */
export function ToolCallDetail({ toolCall, className }) {
    const { category, result } = useToolPresentation(toolCall);
    return (_jsx("div", { className: cn("space-y-2 text-xs", className), children: _jsx(CategoryDetail, { toolCall: toolCall, category: category, result: result }) }));
}
// ---------------------------------------------------------------------------
// Category composition
//
// Each category composes from three parts: MetadataRow (duration, slug),
// ToolArgsView (the input), and ResultView (the effect). The combination is
// chosen to be informative without duplication.
// ---------------------------------------------------------------------------
function CategoryDetail({ toolCall, category, result, }) {
    const args = _jsx(ArgsSection, { toolCall: toolCall });
    switch (category) {
        case "think":
            return _jsx(ThinkToolDetail, { toolCall: toolCall });
        case "mcp":
            return _jsx(McpToolDetail, { toolCall: toolCall });
        case "edit":
            // The diff already names the file and quantifies the change, so it stands
            // alone — showing the new content as an argument would duplicate it.
            return (_jsxs(_Fragment, { children: [_jsx(MetadataRow, { toolCall: toolCall }), _jsx(ResultView, { view: result })] }));
        case "read":
        case "write":
        case "delete":
            // The input is the point (path, or path + written content). Only surface a
            // result body when it carries new information — i.e. an error.
            return (_jsxs(_Fragment, { children: [_jsx(MetadataRow, { toolCall: toolCall }), args, result.type === "error" && _jsx(ResultView, { view: result })] }));
        default:
            // shell, search, list, fetch, web-search, unknown: input + effect.
            return (_jsxs(_Fragment, { children: [_jsx(MetadataRow, { toolCall: toolCall }), args, _jsx(ResultView, { view: result })] }));
    }
}
function ArgsSection({ toolCall }) {
    return (_jsx(ToolArgsView, { toolName: toolCall.name, args: toolCall.args, mcpServerSlug: toolCall.mcpServerSlug }));
}
function ThinkToolDetail({ toolCall }) {
    const thought = toolCall.args?.["thought"] || toolCall.result;
    if (!thought)
        return null;
    return (_jsx("div", { className: "rounded-md border border-border-muted bg-muted-faint p-3", children: _jsx(CollapsiblePre, { content: thought, className: "italic text-muted-foreground whitespace-pre-wrap" }) }));
}
// ---------------------------------------------------------------------------
// Shared sub-components
// ---------------------------------------------------------------------------
function MetadataRow({ toolCall }) {
    const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
    const hasMetadata = toolCall.mcpServerSlug || duration;
    if (!hasMetadata)
        return null;
    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground", children: [toolCall.mcpServerSlug && (_jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono", children: toolCall.mcpServerSlug })), duration && _jsx("span", { children: duration })] }));
}
// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------
/**
 * Returns a human-readable duration string from two ISO 8601 timestamps, or
 * `null` when either timestamp is empty or invalid.
 */
export function formatDuration(startedAt, completedAt) {
    if (!startedAt || !completedAt)
        return null;
    const start = new Date(startedAt).getTime();
    const end = new Date(completedAt).getTime();
    if (Number.isNaN(start) || Number.isNaN(end))
        return null;
    const ms = end - start;
    if (ms < 0)
        return null;
    if (ms < 1000)
        return `${ms}ms`;
    if (ms < 60_000)
        return `${(ms / 1000).toFixed(1)}s`;
    const minutes = Math.floor(ms / 60_000);
    const seconds = Math.round((ms % 60_000) / 1000);
    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
}
//# sourceMappingURL=ToolCallDetail.js.map