"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
import { formatTokenCount } from "./UsageWidget.js";
/**
 * Collapsible badge showing summarization event history for an execution.
 *
 * Collapsed state shows a count badge ("2 summarizations").
 * Expanded state lists each event with before/after token counts,
 * compression ratio, duration, and cost.
 *
 * Returns `null` when there are no events.
 *
 * All visual properties flow through `--stgm-*` tokens.
 * Accessible via `role="group"` and keyboard-expandable.
 *
 * @example
 * ```tsx
 * const ctx = useContextWindow(execution);
 * <SummarizationBadge events={ctx.summarizationEvents} />
 * ```
 *
 * @see {@link useContextWindow} - data source for summarization events
 */
export const SummarizationBadge = memo(function SummarizationBadge({ events, className, }) {
    const [expanded, setExpanded] = useState(false);
    const toggle = useCallback(() => setExpanded((v) => !v), []);
    if (events.length === 0)
        return null;
    return (_jsxs("div", { role: "group", "aria-label": "Summarization history", className: cn("flex flex-col gap-1", className), children: [_jsxs("button", { type: "button", onClick: toggle, "aria-expanded": expanded, className: cn("inline-flex items-center gap-1.5 rounded px-1.5 py-0.5", "text-xs text-muted-foreground", "hover:bg-muted/50 transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"), children: [_jsx(SummarizationIcon, {}), _jsxs("span", { className: "tabular-nums", children: [events.length, " ", events.length === 1 ? "summarization" : "summarizations"] }), _jsx(ChevronIcon, { expanded: expanded })] }), expanded && (_jsx("div", { role: "list", "aria-label": "Summarization events", className: "flex flex-col gap-1 pl-2", children: events.map((event, i) => (_jsx(EventRow, { event: event, index: i }, event.timestamp || i))) }))] }));
});
const EventRow = memo(function EventRow({ event, index, }) {
    const reduction = Math.round(event.compressionRatio * 100);
    return (_jsxs("div", { role: "listitem", className: "flex flex-col gap-0.5 rounded border border-border/50 px-2 py-1.5", children: [_jsxs("div", { className: "flex items-baseline justify-between text-xs text-muted-foreground", children: [_jsxs("span", { className: "font-medium", children: ["#", index + 1] }), event.timestamp && (_jsx("time", { dateTime: event.timestamp, className: "tabular-nums", children: formatTime(event.timestamp) }))] }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [formatTokenCount(event.tokensBefore), " \u2192", " ", formatTokenCount(event.tokensAfter), " tokens (", reduction, "% reduction)"] }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [event.durationMs > 0 && _jsx(_Fragment, { children: formatDurationMs(event.durationMs) }), event.model && (_jsxs(_Fragment, { children: [event.durationMs > 0 && " · ", event.model] })), event.costUsd > 0 && (_jsxs(_Fragment, { children: [" · ", "$", event.costUsd < 0.01 ? event.costUsd.toFixed(4) : event.costUsd.toFixed(2)] }))] })] }));
});
function formatTime(iso) {
    try {
        const d = new Date(iso);
        return d.toLocaleTimeString(undefined, {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        });
    }
    catch {
        return iso;
    }
}
function formatDurationMs(ms) {
    if (ms < 1000)
        return `${ms}ms`;
    return `${(ms / 1000).toFixed(1)}s`;
}
function SummarizationIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M2 3h8M2 6h5M2 9h3" }) }));
}
function ChevronIcon({ expanded }) {
    return (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: cn("transition-transform", expanded && "rotate-180"), children: _jsx("path", { d: "M2.5 4L5 6.5L7.5 4" }) }));
}
//# sourceMappingURL=SummarizationBadge.js.map