"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useEffect, useMemo, useState } from "react";
import { cn } from "@stigmer/theme";
const STEP_INTERVAL_MS = 4000;
function buildSteps(workspaceEntries) {
    const hasGitRepo = workspaceEntries?.some((e) => e.source?.source.case === "gitRepo");
    const steps = [
        { message: "Initializing execution\u2026", durationMs: STEP_INTERVAL_MS },
    ];
    if (hasGitRepo) {
        steps.push({
            message: "Setting up workspace\u2026",
            durationMs: STEP_INTERVAL_MS,
        });
    }
    steps.push({
        message: "Preparing agent environment\u2026",
        durationMs: STEP_INTERVAL_MS,
    }, { message: "Almost ready\u2026", durationMs: STEP_INTERVAL_MS });
    return steps;
}
/**
 * Animated inline indicator shown in the message thread while an
 * execution is in the `PENDING` phase and no AI messages have arrived.
 *
 * **Server-driven mode** — when the backend reports
 * `setup_progress.current_phase` through the execution stream, the
 * component renders the server-reported label directly.
 *
 * **Timer-based fallback** — when `serverPhase` is absent (older
 * backends), the component cycles through contextual status messages
 * derived from the session configuration on a fixed interval.
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * // Server-driven (preferred)
 * <SetupProgress serverPhase={execution.status?.setupProgress?.currentPhase} />
 *
 * // Fallback (no server phase available)
 * <SetupProgress workspaceEntries={session.spec?.workspaceEntries} />
 * ```
 */
export const SetupProgress = memo(function SetupProgress({ workspaceEntries, serverPhase, className, }) {
    const useServerPhase = !!serverPhase;
    /* ── Timer-based fallback state ─────────────────────────────────── */
    const steps = useMemo(() => buildSteps(workspaceEntries), [workspaceEntries]);
    const [stepIndex, setStepIndex] = useState(0);
    useEffect(() => {
        setStepIndex(0);
    }, [steps]);
    useEffect(() => {
        if (useServerPhase)
            return;
        if (stepIndex >= steps.length - 1)
            return;
        const timer = setTimeout(() => {
            setStepIndex((i) => Math.min(i + 1, steps.length - 1));
        }, steps[stepIndex].durationMs);
        return () => clearTimeout(timer);
    }, [useServerPhase, stepIndex, steps]);
    /* ── Resolve display message ────────────────────────────────────── */
    const currentMessage = serverPhase || steps[Math.min(stepIndex, steps.length - 1)].message;
    return (_jsxs("div", { role: "status", "aria-label": currentMessage, className: cn("flex items-center gap-2.5 px-4 py-2", className), children: [_jsx(PulseIndicator, {}), _jsx("span", { className: "text-sm text-muted-foreground animate-in fade-in duration-300", children: currentMessage })] }));
});
function PulseIndicator() {
    return (_jsxs("span", { className: "relative flex h-2 w-2 shrink-0", "aria-hidden": "true", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-muted-foreground opacity-75" }), _jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-muted-foreground" })] }));
}
//# sourceMappingURL=SetupProgress.js.map