"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { formatCost } from "../execution/UsageWidget";
/**
 * Renders a ranked list of agents by cost with proportional cost bars.
 *
 * Each row shows the agent name, execution count, token usage,
 * billable cost, and a visual bar representing cost as a percentage
 * of the organization total.
 */
export function AgentBreakdownList({ agents, totalBillableCostMicros, agentHref, className, }) {
    if (agents.length === 0)
        return null;
    const totalCost = Number(totalBillableCostMicros);
    const maxCost = agents.length > 0 ? Number(agents[0].billableCostMicros) : 0;
    return (_jsxs("div", { className: className, children: [_jsx("h3", { className: "mb-2 text-xs font-semibold text-foreground", children: "Top Agents by Cost" }), _jsxs("div", { className: "rounded-lg border border-border bg-card", role: "table", "aria-label": "Agent cost breakdown", children: [_jsxs("div", { role: "row", className: "grid grid-cols-[1fr_auto_auto_auto] gap-x-4 border-b border-border px-3.5 py-2 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground", children: [_jsx("span", { role: "columnheader", children: "Agent" }), _jsx("span", { role: "columnheader", className: "text-right", children: "Runs" }), _jsx("span", { role: "columnheader", className: "text-right", children: "Tokens" }), _jsx("span", { role: "columnheader", className: "text-right", children: "Cost" })] }), agents.map((agent) => {
                        const cost = Number(agent.billableCostMicros);
                        const pct = totalCost > 0 ? (cost / totalCost) * 100 : 0;
                        const barWidth = maxCost > 0 ? (cost / maxCost) * 100 : 0;
                        const NameTag = agentHref ? "a" : "span";
                        const nameProps = agentHref
                            ? { href: agentHref(agent.agentId) }
                            : {};
                        return (_jsxs("div", { className: "border-b border-border-muted px-3.5 py-2 last:border-b-0", children: [_jsxs("div", { role: "row", className: "grid grid-cols-[1fr_auto_auto_auto] gap-x-4", children: [_jsx("div", { role: "cell", className: "min-w-0", children: _jsx(NameTag, { ...nameProps, className: cn("block truncate text-xs font-medium", agentHref
                                                    ? "text-primary hover:underline"
                                                    : "text-foreground"), children: agent.agentName || agent.agentId }) }), _jsx("span", { role: "cell", className: "self-center text-right text-xs tabular-nums text-muted-foreground", children: agent.executionCount }), _jsx("span", { role: "cell", className: "self-center text-right text-xs tabular-nums text-muted-foreground", children: formatCompactTokens(Number(agent.totalTokens)) }), _jsxs("span", { role: "cell", className: "self-center text-right text-xs tabular-nums text-foreground", children: [formatCost(cost / 1_000_000), _jsxs("span", { className: "ml-1.5 text-[0.6rem] text-muted-foreground", children: [pct.toFixed(0), "%"] })] })] }), _jsx("div", { className: "mt-1.5 h-1 w-full rounded-full bg-muted", children: _jsx("div", { className: "h-full rounded-full bg-chart-2 transition-all", style: { width: `${barWidth}%` } }) })] }, agent.agentId));
                    })] })] }));
}
function formatCompactTokens(n) {
    if (n >= 1_000_000) {
        const v = n / 1_000_000;
        return v >= 100 ? `${Math.round(v)}M` : `${trimZero(v.toFixed(1))}M`;
    }
    if (n >= 1_000) {
        const v = n / 1_000;
        return v >= 100 ? `${Math.round(v)}K` : `${trimZero(v.toFixed(1))}K`;
    }
    return String(n);
}
function trimZero(s) {
    return s.endsWith(".0") ? s.slice(0, -2) : s;
}
//# sourceMappingURL=AgentBreakdownList.js.map