"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo, useState, useCallback } from "react";
import { cn } from "@stigmer/theme";
import { WorkflowTaskStatus } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
import { formatDuration, formatMicroUsd } from "../format-utils";
const BIGINT_ZERO = BigInt(0);
/**
 * Per-task comparison table showing status, duration, and cost
 * differences between two executions.
 *
 * Tasks are ordered by execution position. Changed tasks are
 * highlighted with a subtle background. The divergence point
 * (first difference) is visually marked.
 */
export const TaskComparisonTable = memo(function TaskComparisonTable({ comparison, changesOnly = false, className, }) {
    const [filter, setFilter] = useState(changesOnly ? "changed" : "all");
    const filtered = useMemo(() => {
        switch (filter) {
            case "changed":
                return comparison.tasks.filter((t) => t.statusChanged);
            case "failed":
                return comparison.tasks.filter((t) => t.baseStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED ||
                    t.compareStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED);
            default:
                return comparison.tasks;
        }
    }, [comparison.tasks, filter]);
    const handleFilterChange = useCallback((mode) => setFilter(mode), []);
    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center gap-1", role: "tablist", "aria-label": "Task filter", children: [_jsx(FilterChip, { label: "All", count: comparison.tasks.length, active: filter === "all", onClick: () => handleFilterChange("all") }), _jsx(FilterChip, { label: "Changed", count: comparison.tasks.filter((t) => t.statusChanged).length, active: filter === "changed", onClick: () => handleFilterChange("changed") }), _jsx(FilterChip, { label: "Failed", count: comparison.tasks.filter((t) => t.baseStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED ||
                            t.compareStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED).length, active: filter === "failed", onClick: () => handleFilterChange("failed") })] }), _jsx("div", { className: "overflow-x-auto rounded-md border border-[var(--stgm-border,#e5e5e5)]", children: _jsxs("table", { className: "w-full text-xs", "aria-label": "Task comparison", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-muted,#f5f5f5)]", children: [_jsx("th", { className: "px-3 py-2 text-left font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Task" }), _jsx("th", { className: "px-3 py-2 text-center font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Base Status" }), _jsx("th", { className: "px-3 py-2 text-center font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Compare Status" }), _jsx("th", { className: "px-3 py-2 text-right font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Duration" }), _jsx("th", { className: "px-3 py-2 text-right font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Cost" })] }) }), _jsxs("tbody", { children: [filtered.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "px-3 py-6 text-center text-[var(--stgm-muted-foreground,#737373)]", children: filter === "all" ? "No tasks to compare." : "No matching tasks." }) })), filtered.map((task) => (_jsx(TaskRow, { task: task, isDivergencePoint: task.taskName === comparison.divergencePoint }, task.taskName)))] })] }) }), (comparison.tasksOnlyInBase.length > 0 || comparison.tasksOnlyInCompare.length > 0) && (_jsxs("div", { className: "mt-1 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: [comparison.tasksOnlyInBase.length > 0 && (_jsxs("p", { children: ["Only in base: ", comparison.tasksOnlyInBase.join(", ")] })), comparison.tasksOnlyInCompare.length > 0 && (_jsxs("p", { children: ["Only in compare: ", comparison.tasksOnlyInCompare.join(", ")] }))] }))] }));
});
const TaskRow = memo(function TaskRow({ task, isDivergencePoint, }) {
    return (_jsxs("tr", { className: cn("border-b border-[var(--stgm-border,#e5e5e5)] last:border-b-0", task.statusChanged && "bg-[var(--stgm-destructive,#dc2626)]/5", isDivergencePoint && "ring-1 ring-inset ring-[var(--stgm-warning,#f59e0b)]/50"), children: [_jsx("td", { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [isDivergencePoint && (_jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-[var(--stgm-warning,#f59e0b)]", title: "First point of divergence", "aria-label": "Divergence point" })), _jsx("span", { className: "font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: task.taskName })] }) }), _jsx("td", { className: "px-3 py-2 text-center", children: _jsx(TaskStatusBadge, { status: task.baseStatus }) }), _jsx("td", { className: "px-3 py-2 text-center", children: _jsx(TaskStatusBadge, { status: task.compareStatus }) }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsx(DurationCell, { task: task }) }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsx(CostCell, { task: task }) })] }));
});
function TaskStatusBadge({ status }) {
    const config = TASK_STATUS_CONFIG.get(status) ?? { label: "Unknown", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" };
    return (_jsx("span", { className: cn("inline-flex items-center gap-1 text-[10px] font-medium", config.colorClass), children: config.label }));
}
function DurationCell({ task }) {
    if (task.baseDurationMs == null && task.compareDurationMs == null)
        return _jsx("span", { children: "\u2014" });
    const baseStr = task.baseDurationMs != null ? formatDuration(task.baseDurationMs) : "—";
    const compareStr = task.compareDurationMs != null ? formatDuration(task.compareDurationMs) : "—";
    if (task.durationDeltaMs == null || task.durationDeltaMs === 0) {
        return _jsx("span", { className: "text-[var(--stgm-muted-foreground,#737373)]", children: baseStr });
    }
    const sign = task.durationDeltaMs > 0 ? "+" : "−";
    const abs = Math.abs(task.durationDeltaMs);
    const deltaColor = task.durationDeltaMs > 0
        ? "text-[var(--stgm-destructive,#dc2626)]"
        : "text-[var(--stgm-success,#16a34a)]";
    return (_jsxs("span", { className: "flex flex-col items-end", children: [_jsxs("span", { className: "text-[var(--stgm-foreground,#1a1a2e)]", children: [baseStr, " / ", compareStr] }), _jsxs("span", { className: cn("text-[10px]", deltaColor), children: [sign, formatDuration(abs)] })] }));
}
function CostCell({ task }) {
    if (task.baseCostMicros === BIGINT_ZERO && task.compareCostMicros === BIGINT_ZERO) {
        return _jsx("span", { className: "text-[var(--stgm-muted-foreground,#737373)]", children: "\u2014" });
    }
    const baseStr = task.baseCostMicros > BIGINT_ZERO ? formatMicroUsd(task.baseCostMicros) : "—";
    const compareStr = task.compareCostMicros > BIGINT_ZERO ? formatMicroUsd(task.compareCostMicros) : "—";
    const delta = task.baseCostMicros - task.compareCostMicros;
    if (delta === BIGINT_ZERO) {
        return _jsx("span", { className: "text-[var(--stgm-muted-foreground,#737373)]", children: baseStr });
    }
    return (_jsxs("span", { className: "text-[var(--stgm-foreground,#1a1a2e)]", children: [baseStr, " / ", compareStr] }));
}
function FilterChip({ label, count, active, onClick, }) {
    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": active, onClick: onClick, className: cn("rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors", active
            ? "bg-[var(--stgm-foreground,#1a1a2e)] text-[var(--stgm-background,#fff)]"
            : "bg-[var(--stgm-muted,#f5f5f5)] text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-border,#e5e5e5)]"), children: [label, " (", count, ")"] }));
}
const TASK_STATUS_CONFIG = new Map([
    [WorkflowTaskStatus.WORKFLOW_TASK_STATUS_UNSPECIFIED, { label: "—", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
    [WorkflowTaskStatus.WORKFLOW_TASK_PENDING, { label: "Pending", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
    [WorkflowTaskStatus.WORKFLOW_TASK_IN_PROGRESS, { label: "Running", colorClass: "text-[var(--stgm-foreground,#1a1a2e)]" }],
    [WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED, { label: "Completed", colorClass: "text-[var(--stgm-success,#16a34a)]" }],
    [WorkflowTaskStatus.WORKFLOW_TASK_FAILED, { label: "Failed", colorClass: "text-[var(--stgm-destructive,#dc2626)]" }],
    [WorkflowTaskStatus.WORKFLOW_TASK_SKIPPED, { label: "Skipped", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
    [WorkflowTaskStatus.WORKFLOW_TASK_WAITING_APPROVAL, { label: "Waiting", colorClass: "text-[var(--stgm-warning,#f59e0b)]" }],
]);
//# sourceMappingURL=TaskComparisonTable.js.map