"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { WorkflowExecutionPhaseBadge } from "../WorkflowExecutionPhaseBadge.js";
import { useExecutionComparison } from "./useExecutionComparison.js";
import { ComparisonSummaryCards } from "./ComparisonSummaryCards.js";
import { TaskComparisonTable } from "./TaskComparisonTable.js";
/**
 * Top-level composed comparison view showing summary deltas and a
 * per-task comparison table between two workflow executions.
 *
 * Self-contained: fetches both executions internally via
 * {@link useExecutionComparison}. Zero Console dependencies.
 *
 * Layout:
 * ```
 * Header (back button + execution labels)
 * ComparisonSummaryCards (4 delta cards)
 * TaskComparisonTable (per-task status/duration/cost)
 * ```
 *
 * @example
 * ```tsx
 * <ExecutionComparisonView
 *   baseExecutionId="wfx_failed_123"
 *   compareExecutionId="wfx_success_456"
 *   onBack={() => setCompareMode(false)}
 * />
 * ```
 */
export const ExecutionComparisonView = memo(function ExecutionComparisonView({ baseExecutionId, compareExecutionId, onBack, className, }) {
    const { comparison, isLoading, error } = useExecutionComparison({
        baseId: baseExecutionId,
        compareId: compareExecutionId,
    });
    if (isLoading) {
        return (_jsx("div", { className: cn("flex items-center justify-center py-16", className), children: _jsx("span", { className: "text-sm text-[var(--stgm-muted-foreground,#737373)]", children: "Loading comparison..." }) }));
    }
    if (error) {
        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-2 py-16", className), children: [_jsx("span", { className: "text-sm text-[var(--stgm-destructive,#dc2626)]", children: "Failed to load executions" }), _jsx("span", { className: "text-xs text-[var(--stgm-muted-foreground,#737373)]", children: error.message })] }));
    }
    if (!comparison)
        return null;
    return (_jsxs("section", { className: cn("flex flex-col gap-4", className), "aria-label": "Execution comparison", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { type: "button", onClick: onBack, className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]", "aria-label": "Back to execution", children: [_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M7.5 9L4.5 6l3-3" }) }), "Back"] }), _jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsx(ExecutionLabel, { name: comparison.baseRow.name || baseExecutionId, phase: comparison.baseRow.phase, label: "Base" }), _jsx("span", { className: "text-xs text-[var(--stgm-muted-foreground,#737373)]", children: "vs" }), _jsx(ExecutionLabel, { name: comparison.compareRow.name || compareExecutionId, phase: comparison.compareRow.phase, label: "Compare" })] })] }), comparison.divergencePoint && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-[var(--stgm-warning,#f59e0b)]/30 bg-[var(--stgm-warning,#f59e0b)]/5 px-3 py-2", children: [_jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-[var(--stgm-warning,#f59e0b)]", "aria-hidden": "true" }), _jsxs("span", { className: "text-xs text-[var(--stgm-foreground,#1a1a2e)]", children: ["First divergence at ", _jsx("strong", { children: comparison.divergencePoint })] })] })), _jsx(ComparisonSummaryCards, { comparison: comparison }), _jsx(TaskComparisonTable, { comparison: comparison })] }));
});
function ExecutionLabel({ name, phase, label, }) {
    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "text-[10px] font-medium uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]", children: [label, ":"] }), _jsx(WorkflowExecutionPhaseBadge, { phase: phase }), _jsx("span", { className: "max-w-[10rem] truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]", title: name, children: name })] }));
}
//# sourceMappingURL=ExecutionComparisonView.js.map