import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * App — Root component.
 *
 * Layout (top to bottom):
 *   1. JourneyStepper (1 line) — progress through the flow
 *   2. HeaderBar (1 line) — title + org/project context
 *   3. Separator
 *   4. Content area (flex grow) — active screen
 *   5. ConsoleView bottom area — separator + hints + input
 *
 * No outer border. Full terminal width (capped at 120).
 */
import { useMemo } from 'react';
import { Box, Text } from 'ink';
import { createScreens, createServices } from './screen-registry.js';
import { CommandModeContext } from './context/CommandModeContext.js';
import { ContentAreaContext } from './context/ContentAreaContext.js';
import { ConsoleView } from './components/ConsoleView.js';
import { CtrlCHandler } from './components/CtrlCHandler.js';
import { HeaderBar } from './components/HeaderBar.js';
import { JourneyStepper } from './components/JourneyStepper.js';
import { useStdoutDimensions } from './hooks/useStdoutDimensions.js';
import { useWizardStore } from './hooks/useWizardStore.js';
import { DissolveTransition } from './primitives/index.js';
import { ScreenErrorBoundary } from './primitives/index.js';
import { Colors, Layout } from './styles.js';
/** Height reserved for stepper + header + separators + hint bar + input. */
const CHROME_HEIGHT = 8;
function getContentWidth(terminalColumns) {
    if (terminalColumns < Layout.minWidth)
        return terminalColumns;
    return Math.min(Layout.maxWidth, terminalColumns);
}
export const App = ({ store }) => {
    const [columns, rows] = useStdoutDimensions();
    const services = useMemo(() => createServices(store.session.localMcp), []);
    const screens = useMemo(() => createScreens(store, services), [store, services]);
    useWizardStore(store);
    const width = getContentWidth(columns);
    const contentHeight = Math.max(5, rows - CHROME_HEIGHT);
    const contentAreaWidth = Math.max(10, width - Layout.paddingX * 2);
    const direction = store.lastNavDirection === 'pop' ? 'right' : 'left';
    const activeScreen = screens[store.currentScreen] ?? null;
    const separator = Layout.separatorChar.repeat(Math.max(0, width - 2));
    return (_jsxs(CommandModeContext.Provider, { value: store.commandMode, children: [_jsx(CtrlCHandler, { store: store }), _jsxs(Box, { flexDirection: "column", height: rows, width: columns, alignItems: "center", justifyContent: "flex-start", children: [_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(JourneyStepper, { store: store, width: width }), _jsx(HeaderBar, { width: width, orgName: store.session.selectedOrgName, projectName: store.session.selectedProjectName, envName: store.session.selectedEnvName }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: Colors.border, children: separator }) })] }), _jsx(ConsoleView, { store: store, width: width, height: rows - 3, children: _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingX: Layout.paddingX, overflow: "hidden", children: _jsx(ContentAreaContext.Provider, { value: { height: contentHeight, width: contentAreaWidth }, children: _jsx(DissolveTransition, { transitionKey: store.currentScreen, width: contentAreaWidth, height: contentHeight, direction: direction, children: _jsx(ScreenErrorBoundary, { store: store, retryToken: store.screenErrorRetry, children: activeScreen }) }) }) }) })] })] }));
};
