"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useEffect, useRef } from "react";
import { cn } from "@stigmer/theme";
import { WorkflowExecutionTimelineEvent } from "./WorkflowExecutionTimelineEvent.js";
/**
 * Scrollable event timeline for a workflow execution.
 *
 * Renders each event through `WorkflowExecutionTimelineEvent` and
 * auto-scrolls to the bottom when new events arrive during live
 * streaming, using a bottom sentinel + IntersectionObserver pattern
 * consistent with DD-009.
 *
 * Auto-scroll activates only when the sentinel is visible (user is
 * near the bottom). When the user scrolls up, auto-scroll pauses
 * to allow reading history.
 */
export const WorkflowExecutionTimeline = memo(function WorkflowExecutionTimeline({ events, streamState, onNavigateToAgentExecution, taskStates, onSubmitTaskApproval, taskApprovalSubmittingTaskNames, taskApprovalErrorsByTaskName, className, }) {
    const scrollRef = useRef(null);
    const sentinelRef = useRef(null);
    const isNearBottomRef = useRef(true);
    // IntersectionObserver tracks whether the sentinel is in view
    useEffect(() => {
        const sentinel = sentinelRef.current;
        if (!sentinel)
            return;
        const observer = new IntersectionObserver(([entry]) => {
            isNearBottomRef.current = entry.isIntersecting;
        }, { threshold: 0.1 });
        observer.observe(sentinel);
        return () => observer.disconnect();
    }, []);
    // Auto-scroll when new events arrive and user is near bottom
    useEffect(() => {
        if (isNearBottomRef.current && sentinelRef.current) {
            sentinelRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
        }
    }, [events.length]);
    const isLive = streamState.stage === "streaming" || streamState.stage === "reconnecting";
    const isConnecting = streamState.stage === "connecting";
    const isComplete = streamState.stage === "complete";
    const isError = streamState.stage === "error";
    if (events.length === 0 && isConnecting) {
        return (_jsx("div", { className: cn("flex flex-1 items-center justify-center text-sm text-muted-foreground", className), children: "Loading events\u2026" }));
    }
    if (events.length === 0 && isComplete) {
        const hasTaskFallback = taskStates && taskStates.size > 0;
        return (_jsxs("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-1 text-sm text-muted-foreground", className), children: [_jsx("span", { children: "No events recorded" }), hasTaskFallback && (_jsx("span", { className: "text-xs", children: "Task status available in the panel" }))] }));
    }
    return (_jsxs("div", { ref: scrollRef, className: cn("flex-1 overflow-y-auto", className), role: "list", "aria-label": "Execution timeline", children: [events.map((event) => (_jsx(WorkflowExecutionTimelineEvent, { event: event, onNavigateToAgentExecution: onNavigateToAgentExecution, taskStates: taskStates, onSubmitTaskApproval: onSubmitTaskApproval, taskApprovalSubmittingTaskNames: taskApprovalSubmittingTaskNames, taskApprovalErrorsByTaskName: taskApprovalErrorsByTaskName }, event.eventId))), isLive && (_jsxs("div", { className: "flex items-center gap-2 px-4 py-2 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" })] }), "Streaming events\u2026"] })), isError && (_jsx("div", { className: "px-4 py-2 text-xs text-destructive", children: "Stream disconnected. Events may be incomplete." })), _jsx("div", { ref: sentinelRef, className: "h-px", "aria-hidden": "true" })] }));
});
//# sourceMappingURL=WorkflowExecutionTimeline.js.map