"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";
const PHASE_DISPLAY = new Map([
    [
        ExecutionPhase.EXECUTION_COMPLETED,
        { label: "Completed", colorClass: "text-success", bgColorClass: "bg-success" },
    ],
    [
        ExecutionPhase.EXECUTION_FAILED,
        { label: "Failed", colorClass: "text-destructive", bgColorClass: "bg-destructive" },
    ],
    [
        ExecutionPhase.EXECUTION_IN_PROGRESS,
        { label: "Running", colorClass: "text-primary", bgColorClass: "bg-primary" },
    ],
    [
        ExecutionPhase.EXECUTION_PENDING,
        { label: "Pending", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground" },
    ],
    [
        ExecutionPhase.EXECUTION_PAUSED,
        { label: "Paused", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground/60" },
    ],
    [
        ExecutionPhase.EXECUTION_CANCELLED,
        { label: "Cancelled", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground/40" },
    ],
    [
        ExecutionPhase.EXECUTION_TERMINATED,
        { label: "Terminated", colorClass: "text-destructive", bgColorClass: "bg-destructive/60" },
    ],
]);
/**
 * Phase distribution chart for workflow executions.
 *
 * Shows a stacked horizontal bar with a legend listing each phase
 * and its count. Renders from `ExecutionSummary.phaseCounts`.
 */
export const ExecutionTrendChart = memo(function ExecutionTrendChart({ summary, isLoading, className, }) {
    const segments = useMemo(() => {
        if (!summary)
            return [];
        const result = [];
        for (const [phase, count] of Object.entries(summary.phaseCounts)) {
            const p = Number(phase);
            if (count <= 0)
                continue;
            const display = PHASE_DISPLAY.get(p);
            if (!display)
                continue;
            result.push({ ...display, count });
        }
        return result.sort((a, b) => b.count - a.count);
    }, [summary]);
    const total = useMemo(() => segments.reduce((sum, s) => sum + s.count, 0), [segments]);
    if (isLoading) {
        return (_jsxs("div", { className: cn("space-y-3", className), "aria-busy": "true", children: [_jsx("div", { className: "h-4 w-36 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-8 animate-pulse rounded-full bg-muted/50" }), _jsx("div", { className: "flex gap-4", children: Array.from({ length: 3 }, (_, i) => (_jsx("div", { className: "h-3 w-16 animate-pulse rounded bg-muted" }, i))) })] }));
    }
    if (!summary || total === 0) {
        return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Execution Distribution" }), _jsx("p", { className: "py-6 text-center text-xs text-muted-foreground", children: "No execution data available" })] }));
    }
    return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsxs("div", { className: "flex items-baseline justify-between", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Execution Distribution" }), _jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [total, " total"] })] }), _jsx("div", { className: "flex h-3 overflow-hidden rounded-full bg-muted", role: "img", "aria-label": "Execution phase distribution", children: segments.map((seg) => (_jsx("div", { className: cn("h-full transition-all duration-500", seg.bgColorClass), style: { width: `${(seg.count / total) * 100}%` } }, seg.label))) }), _jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: segments.map((seg) => (_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: cn("inline-block h-2.5 w-2.5 rounded-sm", seg.bgColorClass) }), _jsx("span", { children: seg.label }), _jsx("span", { className: cn("font-semibold tabular-nums", seg.colorClass), children: seg.count })] }, seg.label))) })] }));
});
//# sourceMappingURL=ExecutionTrendChart.js.map