"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
const STATUS_COLORS = {
    completed: "bg-[var(--stgm-success,#22c55e)]",
    running: "bg-[var(--stgm-primary,#3b82f6)]",
    failed: "bg-[var(--stgm-destructive,#ef4444)]",
    retrying: "bg-[var(--stgm-warning,#f59e0b)]",
    waiting_approval: "bg-[var(--stgm-warning,#f59e0b)]",
    skipped: "bg-[var(--stgm-muted,#d4d4d4)]",
    pending: "bg-[var(--stgm-muted,#d4d4d4)]",
    not_reached: "bg-[var(--stgm-muted,#d4d4d4)]",
};
const ATTEMPT_STATUS_COLORS = {
    completed: "bg-[var(--stgm-success,#22c55e)]",
    running: "bg-[var(--stgm-primary,#3b82f6)]",
    failed: "bg-[var(--stgm-destructive,#ef4444)]",
};
/**
 * Renders the horizontal bar(s) for a single waterfall entry.
 *
 * When attempts are present (retries), renders individual attempt
 * segments with backoff gaps. Otherwise, renders a single bar.
 * Running bars animate with a pulsing trailing edge (respects
 * `prefers-reduced-motion`).
 */
export const WaterfallBar = memo(function WaterfallBar({ entry, totalMs, nowMs, className, }) {
    if (totalMs <= 0)
        return null;
    const effectiveEnd = entry.endMs ?? nowMs;
    // Use attempt segments when available
    if (entry.attempts.length > 1) {
        return (_jsxs("div", { className: cn("relative h-3", className), children: [entry.attempts.map((attempt, i) => (_jsx(AttemptSegment, { attempt: attempt, totalMs: totalMs, nowMs: nowMs }, i))), entry.children.map((child, i) => (_jsx(ChildSpan, { span: child, totalMs: totalMs, nowMs: nowMs }, i)))] }));
    }
    // Single bar for non-retry tasks
    const leftPct = (entry.startMs / totalMs) * 100;
    const widthPct = ((effectiveEnd - entry.startMs) / totalMs) * 100;
    const isRunning = entry.status === "running" || entry.status === "waiting_approval";
    return (_jsxs("div", { className: cn("relative h-3", className), children: [entry.approvalWaitMs != null && entry.approvalWaitMs > 0 && (_jsx("div", { className: "absolute top-0 h-full rounded-sm bg-[var(--stgm-warning,#f59e0b)] opacity-30", style: {
                    left: `${leftPct}%`,
                    width: `${(entry.approvalWaitMs / totalMs) * 100}%`,
                } })), _jsx("div", { className: cn("absolute top-0.5 h-2 rounded-sm transition-[width] duration-100", STATUS_COLORS[entry.status], isRunning && "motion-safe:animate-pulse"), style: {
                    left: `${leftPct}%`,
                    width: `${Math.max(widthPct, 0.2)}%`,
                } }), entry.children.map((child, i) => (_jsx(ChildSpan, { span: child, totalMs: totalMs, nowMs: nowMs }, i)))] }));
});
// ---------------------------------------------------------------------------
// Internal components
// ---------------------------------------------------------------------------
function AttemptSegment({ attempt, totalMs, nowMs, }) {
    const effectiveEnd = attempt.endMs ?? nowMs;
    const leftPct = (attempt.startMs / totalMs) * 100;
    const widthPct = ((effectiveEnd - attempt.startMs) / totalMs) * 100;
    const isRunning = attempt.status === "running";
    return (_jsx("div", { className: cn("absolute top-0.5 h-2 rounded-sm", ATTEMPT_STATUS_COLORS[attempt.status], isRunning && "motion-safe:animate-pulse"), style: {
            left: `${leftPct}%`,
            width: `${Math.max(widthPct, 0.2)}%`,
        } }));
}
function ChildSpan({ span, totalMs, nowMs, }) {
    const effectiveEnd = span.endMs ?? nowMs;
    const leftPct = (span.startMs / totalMs) * 100;
    const widthPct = ((effectiveEnd - span.startMs) / totalMs) * 100;
    return (_jsx("div", { className: "absolute top-1 h-1 rounded-sm bg-[var(--stgm-chart-purple,#8b5cf6)] opacity-60", style: {
            left: `${leftPct}%`,
            width: `${Math.max(widthPct, 0.15)}%`,
        } }));
}
//# sourceMappingURL=WaterfallBar.js.map