"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from "react";
import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
import { cn } from "@stigmer/theme";
import { formatDurationSec } from "./format-utils.js";
const PHASE_LABEL = new Map([
    [ExecutionPhase.EXECUTION_PENDING, "Pending"],
    [ExecutionPhase.EXECUTION_IN_PROGRESS, "Running"],
    [ExecutionPhase.EXECUTION_COMPLETED, "Completed"],
    [ExecutionPhase.EXECUTION_FAILED, "Failed"],
    [ExecutionPhase.EXECUTION_CANCELLED, "Cancelled"],
    [ExecutionPhase.EXECUTION_TERMINATED, "Terminated"],
    [ExecutionPhase.EXECUTION_PAUSED, "Paused"],
]);
const STAT_CARDS = [
    {
        label: "Active",
        valueClass: "text-foreground",
        getValue: (s) => String(s.activeCount),
    },
    {
        label: "Completed",
        valueClass: "text-success",
        getValue: (s) => String(s.phaseCounts[ExecutionPhase.EXECUTION_COMPLETED] ?? 0),
    },
    {
        label: "Failed",
        valueClass: "text-destructive",
        getValue: (s) => String(s.phaseCounts[ExecutionPhase.EXECUTION_FAILED] ?? 0),
    },
    {
        label: "Total Cost",
        valueClass: "text-foreground",
        getValue: (s) => s.totalCost?.totalCostUsd
            ? `$${s.totalCost.totalCostUsd.toFixed(2)}`
            : "$0.00",
    },
];
/**
 * Dashboard widget showing aggregate execution KPIs.
 *
 * Displays stat cards for active, completed, failed counts and total cost.
 * Below the cards, shows average duration and a phase breakdown bar.
 *
 * All visuals use `--stgm-*` tokens. No hardcoded colors.
 */
export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({ summary, isLoading, className, }) {
    const phaseBreakdown = useMemo(() => {
        if (!summary)
            return [];
        const entries = [];
        const colorMap = {
            [ExecutionPhase.EXECUTION_PENDING]: "bg-muted-foreground",
            [ExecutionPhase.EXECUTION_IN_PROGRESS]: "bg-primary",
            [ExecutionPhase.EXECUTION_COMPLETED]: "bg-success",
            [ExecutionPhase.EXECUTION_FAILED]: "bg-destructive",
            [ExecutionPhase.EXECUTION_CANCELLED]: "bg-muted-foreground",
            [ExecutionPhase.EXECUTION_TERMINATED]: "bg-destructive",
            [ExecutionPhase.EXECUTION_PAUSED]: "bg-muted-foreground",
        };
        for (const [phase, count] of Object.entries(summary.phaseCounts)) {
            const p = Number(phase);
            if (count > 0) {
                entries.push({
                    label: PHASE_LABEL.get(p) ?? `Phase ${p}`,
                    count,
                    colorClass: colorMap[p] ?? "bg-muted",
                });
            }
        }
        return entries;
    }, [summary]);
    const totalExecutions = phaseBreakdown.reduce((sum, e) => sum + e.count, 0);
    if (isLoading) {
        return (_jsx("div", { className: cn("space-y-3", className), "aria-busy": "true", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }, (_, i) => (_jsx("div", { className: "h-[72px] animate-pulse rounded-lg border border-border bg-muted/50" }, i))) }) }));
    }
    if (!summary)
        return null;
    const avgSeconds = summary.avgDuration
        ? Number(summary.avgDuration.seconds)
        : 0;
    return (_jsxs("div", { className: cn("space-y-4", className), children: [_jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: STAT_CARDS.map((card) => (_jsxs("div", { className: "rounded-lg border border-border bg-card px-4 py-3", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: card.label }), _jsx("p", { className: cn("mt-1 text-2xl font-semibold", card.valueClass), children: card.getValue(summary) })] }, card.label))) }), (avgSeconds > 0 || totalExecutions > 0) && (_jsxs("div", { className: "flex items-center gap-6 text-xs text-muted-foreground", children: [avgSeconds > 0 && (_jsxs("span", { children: ["Avg duration:", " ", _jsx("span", { className: "font-medium text-foreground", children: formatDurationSec(avgSeconds) })] })), totalExecutions > 0 && (_jsxs("span", { children: ["Total:", " ", _jsx("span", { className: "font-medium text-foreground", children: totalExecutions }), " ", "executions"] }))] })), totalExecutions > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex h-2 overflow-hidden rounded-full bg-muted", role: "img", "aria-label": "Execution phase breakdown", children: phaseBreakdown.map((entry) => (_jsx("div", { className: cn("h-full", entry.colorClass), style: {
                                width: `${(entry.count / totalExecutions) * 100}%`,
                            } }, entry.label))) }), _jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: phaseBreakdown.map((entry) => (_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: cn("inline-block h-2 w-2 rounded-full", entry.colorClass) }), entry.label, ": ", entry.count] }, entry.label))) })] }))] }));
});
//# sourceMappingURL=ExecutionSummaryWidget.js.map