import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * JourneyStepper — persistent 1-line progress indicator.
 *
 * Shows where the user is in the wizard flow:
 *   ✓ Welcome  ✓ Auth  ● Setup  ○ Verify  ○ Done
 *
 * Adapts to terminal width: shows labels on wide terminals,
 * dots-only on narrow ones.
 */
import { Box, Text } from 'ink';
import { useWizardStore } from '../hooks/useWizardStore.js';
import { Screen, Flow } from '../router.js';
import { Colors, Icons, Brand } from '../styles.js';
/** Human-readable labels for wizard flow steps. */
const WIZARD_STEPS = [
    { screen: Screen.Intro, label: 'Welcome' },
    { screen: Screen.Auth, label: 'Auth' },
    { screen: Screen.Run, label: 'Setup' },
    { screen: Screen.DataIngestionCheck, label: 'Verify' },
    { screen: Screen.Outro, label: 'Done' },
];
/** Screens that belong to each step (for grouping substeps). */
const STEP_SCREENS = {
    Welcome: [Screen.Intro],
    Auth: [
        Screen.RegionSelect,
        Screen.EmailCapture,
        Screen.ToS,
        Screen.Auth,
        Screen.DataSetup,
    ],
    Setup: [Screen.ActivationOptions, Screen.Setup, Screen.Run, Screen.Mcp],
    Verify: [Screen.DataIngestionCheck],
    Done: [Screen.Outro, Screen.Slack],
};
function getStepState(stepLabel, currentScreen, completedScreens) {
    const screens = STEP_SCREENS[stepLabel] ?? [];
    const isCurrent = screens.some((s) => s === currentScreen);
    if (isCurrent)
        return 'active';
    // A step is completed if all its screens are completed
    const allDone = screens.every((s) => completedScreens.has(s));
    if (allDone)
        return 'completed';
    return 'future';
}
/** Build set of screens the flow has already passed. */
function getCompletedScreens(currentScreen) {
    const completed = new Set();
    const allScreensInOrder = WIZARD_STEPS.flatMap((step) => STEP_SCREENS[step.label] ?? []);
    for (const screen of allScreensInOrder) {
        if (screen === currentScreen)
            break;
        completed.add(screen);
    }
    return completed;
}
export const JourneyStepper = ({ store, width }) => {
    useWizardStore(store);
    // Only show stepper for the main wizard flow
    if (store.router.activeFlow !== Flow.Wizard)
        return null;
    const currentScreen = store.currentScreen;
    const completedScreens = getCompletedScreens(currentScreen);
    // Determine if we have room for labels (need ~50 chars for all labels)
    const showLabels = width >= 60;
    const steps = WIZARD_STEPS.map((step) => {
        const state = getStepState(step.label, currentScreen, completedScreens);
        return { ...step, state };
    });
    return (_jsx(Box, { paddingX: 1, children: steps.map((step, i) => {
            const icon = step.state === 'completed'
                ? Icons.checkmark
                : step.state === 'active'
                    ? Icons.bullet
                    : Icons.bulletOpen;
            const color = step.state === 'completed'
                ? Brand.lilac
                : step.state === 'active'
                    ? Colors.accent
                    : Colors.muted;
            return (_jsxs(Box, { children: [_jsx(Text, { color: color, bold: step.state === 'active', children: icon }), showLabels && (_jsx(Text, { color: color, bold: step.state === 'active', children: step.state === 'active'
                            ? ` ${step.label} ←`
                            : ` ${step.label}` })), i < steps.length - 1 && (_jsx(Text, { color: Colors.border, children: showLabels ? ` ${Icons.dash} ` : ` ${Icons.dot} ` }))] }, step.label));
        }) }));
};
