"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { WorkflowExecutionPhaseBadge } from "./WorkflowExecutionPhaseBadge.js";
import { formatDuration, formatMicroUsd } from "./format-utils.js";
const RUNNING_PHASES = new Set([
    ExecutionPhase.EXECUTION_PENDING,
    ExecutionPhase.EXECUTION_IN_PROGRESS,
]);
/**
 * Header bar for the workflow execution viewer showing phase badge,
 * execution name, duration, cost summary, and lifecycle action buttons.
 *
 * Action buttons are contextual:
 * - Running: Pause, Cancel
 * - Paused: Resume, Cancel
 * - Failed: Recover
 */
const TERMINAL_PHASES = new Set([
    ExecutionPhase.EXECUTION_COMPLETED,
    ExecutionPhase.EXECUTION_FAILED,
    ExecutionPhase.EXECUTION_CANCELLED,
    ExecutionPhase.EXECUTION_TERMINATED,
]);
export const WorkflowExecutionHeader = memo(function WorkflowExecutionHeader({ execution, streamState, costSummary, actions, onDiagnose, isDiagnosing, onCompare, headerActions, className, }) {
    const phase = execution.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
    const name = execution.metadata?.name ?? execution.metadata?.id ?? "Execution";
    const startedAt = execution.status?.startedAt ?? "";
    const completedAt = execution.status?.completedAt ?? "";
    const duration = useMemo(() => {
        if (!startedAt)
            return null;
        const start = new Date(startedAt).getTime();
        const end = completedAt ? new Date(completedAt).getTime() : Date.now();
        return formatDuration(end - start);
    }, [startedAt, completedAt]);
    const costDisplay = useMemo(() => {
        if (costSummary.costConsumedMicros <= BigInt(0))
            return null;
        return formatMicroUsd(costSummary.costConsumedMicros);
    }, [costSummary.costConsumedMicros]);
    const isRunning = RUNNING_PHASES.has(phase);
    const isPaused = phase === ExecutionPhase.EXECUTION_PAUSED;
    const isFailed = phase === ExecutionPhase.EXECUTION_FAILED;
    const isLive = streamState.stage === "streaming" ||
        streamState.stage === "connecting" ||
        streamState.stage === "reconnecting";
    return (_jsxs("header", { className: cn("flex items-center gap-3 border-b border-border px-4 py-3", className), children: [_jsx(WorkflowExecutionPhaseBadge, { phase: phase }), _jsx("h2", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: name }), duration && (_jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: duration })), costDisplay && (_jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: costDisplay })), isLive && (_jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsxs("span", { className: "relative flex h-1.5 w-1.5", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" }), _jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-success" })] }), "Live"] })), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [onCompare && TERMINAL_PHASES.has(phase) && (_jsx(ActionButton, { label: "Compare with\u2026", onClick: onCompare, disabled: false })), isRunning && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: "Pause", onClick: () => actions.pause(), disabled: actions.isSubmitting }), _jsx(ActionButton, { label: "Cancel", variant: "destructive", onClick: () => actions.cancel(), disabled: actions.isSubmitting })] })), isPaused && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: "Resume", onClick: () => actions.resume(), disabled: actions.isSubmitting }), _jsx(ActionButton, { label: "Cancel", variant: "destructive", onClick: () => actions.cancel(), disabled: actions.isSubmitting })] })), isFailed && (_jsxs(_Fragment, { children: [onDiagnose && (_jsx(ActionButton, { label: isDiagnosing ? "Diagnosing…" : "Diagnose", onClick: onDiagnose, disabled: actions.isSubmitting || !!isDiagnosing })), _jsx(ActionButton, { label: "Recover", onClick: () => actions.recover(), disabled: actions.isSubmitting })] })), headerActions && (_jsx("div", { className: "relative flex items-center", children: headerActions }))] })] }));
});
function ActionButton({ label, variant, onClick, disabled, }) {
    return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: cn("rounded px-2 py-1 text-xs font-medium transition-colors", "disabled:pointer-events-none disabled:opacity-50", variant === "destructive"
            ? "border border-destructive/30 text-destructive hover:bg-destructive/10"
            : "border border-border text-foreground hover:bg-muted"), children: label }));
}
//# sourceMappingURL=WorkflowExecutionHeader.js.map