"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useEffect, useRef } from "react";
import { cn } from "@stigmer/theme";
import { useWaterfallEntries } from "../execution/useWaterfallEntries.js";
import { WaterfallScaleComponent } from "./WaterfallScale.js";
import { WaterfallRow } from "./WaterfallRow.js";
/**
 * Execution waterfall timeline — horizontal bars showing task durations
 * against a time axis.
 *
 * Designed as an SDK component (DD-001): no Console or Desktop
 * dependencies. Receives events from the parent `WorkflowExecutionViewer`
 * (single subscription owner per DD-009).
 *
 * Selection is bidirectional: clicking a bar calls `onTaskSelect`;
 * changing `selectedTaskName` externally scrolls the waterfall to
 * that task's row.
 *
 * @example
 * ```tsx
 * <WaterfallTimeline
 *   events={events}
 *   streamState={streamState}
 *   executionStartIso={execution.status.startedAt}
 *   selectedTaskName={selectedTask}
 *   onTaskSelect={setSelectedTask}
 * />
 * ```
 *
 * @since T07
 */
export const WaterfallTimeline = memo(function WaterfallTimeline({ events, streamState, executionStartIso, executionDurationMs, selectedTaskName, onTaskSelect, className, }) {
    const { entries, scale, isLive, nowMs } = useWaterfallEntries({
        events,
        streamState,
        executionStartIso,
        executionDurationMs,
    });
    const scrollRef = useRef(null);
    const handleSelect = useCallback((taskName) => {
        onTaskSelect?.(taskName);
    }, [onTaskSelect]);
    // Scroll to selected task when selectedTaskName changes externally
    useEffect(() => {
        if (!selectedTaskName || !scrollRef.current)
            return;
        const row = scrollRef.current.querySelector(`[data-task-name="${CSS.escape(selectedTaskName)}"]`);
        if (row) {
            row.scrollIntoView({ behavior: "smooth", block: "nearest" });
        }
    }, [selectedTaskName]);
    // Empty state
    if (entries.length === 0) {
        const isConnecting = streamState.stage === "connecting" || streamState.stage === "reconnecting";
        return (_jsx("div", { className: cn("flex items-center justify-center text-xs text-[var(--stgm-muted-foreground,#737373)]", className), children: isConnecting ? "Loading timeline…" : "No task data available" }));
    }
    return (_jsxs("div", { className: cn("flex flex-col overflow-hidden", className), role: "list", "aria-label": "Execution waterfall", children: [_jsxs("div", { className: "flex shrink-0 items-center", children: [_jsx("div", { className: "w-[248px] shrink-0" }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(WaterfallScaleComponent, { scale: scale }) })] }), _jsxs("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: [entries.map((entry) => (_jsx(WaterfallRow, { entry: entry, totalMs: scale.totalMs, nowMs: nowMs, isSelected: entry.taskName === selectedTaskName, onSelect: handleSelect }, entry.taskName))), isLive && (_jsxs("div", { className: "flex items-center gap-2 px-2 py-1 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: [_jsxs("span", { className: "relative flex size-1.5", children: [_jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-[var(--stgm-success,#22c55e)] opacity-75" }), _jsx("span", { className: "relative inline-flex size-1.5 rounded-full bg-[var(--stgm-success,#22c55e)]" })] }), "Live"] }))] })] }));
});
//# sourceMappingURL=WaterfallTimeline.js.map