"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
/**
 * Row of 4 stat cards displaying key workflow execution metrics.
 *
 * Cards: Total Executions, Success Rate, Avg Duration, Total Cost.
 *
 * Handles loading (skeleton), empty (no executions), and populated states.
 * All visual properties flow through `--stgm-*` design tokens.
 */
export const WorkflowOverviewSummary = memo(function WorkflowOverviewSummary({ summary, isLoading, className, }) {
    if (isLoading) {
        return (_jsx("div", { className: cn("grid grid-cols-2 gap-3 sm:grid-cols-4", className), children: Array.from({ length: 4 }, (_, i) => (_jsx(SkeletonCard, {}, i))) }));
    }
    const totalCount = typeof summary?.totalCount === "number" ? summary.totalCount : 0;
    if (!summary || totalCount === 0) {
        return (_jsx("div", { className: cn("rounded-lg border border-[var(--stgm-border,#d4d4d8)] px-4 py-6 text-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className), children: "No executions yet" }));
    }
    const successRate = typeof summary.successRate === "number" ? summary.successRate : -1;
    const successPct = successRate >= 0 ? `${Math.round(successRate * 100)}%` : "—";
    const successColor = successRate >= 0.9
        ? "text-[var(--stgm-success,#22c55e)]"
        : successRate >= 0.7
            ? "text-[var(--stgm-warning,#f59e0b)]"
            : "text-[var(--stgm-destructive,#ef4444)]";
    const avgDuration = summary.avgDuration
        ? formatProtoSeconds(Number(summary.avgDuration.seconds))
        : "—";
    const totalCost = summary.totalCost
        ? `$${summary.totalCost.totalCostUsd.toFixed(2)}`
        : "$0.00";
    return (_jsxs("div", { className: cn("grid grid-cols-2 gap-3 sm:grid-cols-4", className), children: [_jsx(StatCard, { label: "Total Executions", value: String(totalCount) }), _jsx(StatCard, { label: "Success Rate", value: successPct, valueClassName: successRate >= 0 ? successColor : undefined }), _jsx(StatCard, { label: "Avg Duration", value: avgDuration }), _jsx(StatCard, { label: "Total Cost", value: totalCost })] }));
});
function StatCard({ label, value, valueClassName, }) {
    return (_jsxs("div", { className: "rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-3", children: [_jsx("dt", { className: "text-[11px] font-medium uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)]", children: label }), _jsx("dd", { className: cn("mt-1 text-xl font-semibold text-[var(--stgm-foreground,#1a1a2e)]", valueClassName), children: value })] }));
}
function SkeletonCard() {
    return (_jsxs("div", { className: "rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-3", children: [_jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" }), _jsx("div", { className: "mt-2 h-6 w-16 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" })] }));
}
function formatProtoSeconds(seconds) {
    if (seconds < 60)
        return `${seconds}s`;
    if (seconds < 3600) {
        const m = Math.floor(seconds / 60);
        const s = seconds % 60;
        return s > 0 ? `${m}m ${s}s` : `${m}m`;
    }
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    return m > 0 ? `${h}h ${m}m` : `${h}h`;
}
//# sourceMappingURL=WorkflowOverviewSummary.js.map