import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license
 * Copyright 2025 Vybestack LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import { useMemo, useCallback } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../../colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { RadioButtonSelect, } from '../shared/RadioButtonSelect.js';
export const ModelSelectStep = ({ provider, models, modelsLoadStatus, onSelect, onBack, isFocused = true, }) => {
    const providerDisplay = provider.charAt(0).toUpperCase() + provider.slice(1);
    const options = useMemo(() => {
        const modelOptions = models.map((model) => ({
            label: model.name,
            value: model.id,
            key: model.id,
        }));
        // Add back option
        modelOptions.push({
            label: '← Back to provider selection',
            value: '__back__',
            key: '__back__',
        });
        return modelOptions;
    }, [models]);
    const handleSelect = useCallback((value) => {
        if (value === '__back__') {
            onBack();
        }
        else {
            onSelect(value);
        }
    }, [onBack, onSelect]);
    // Handle Escape to go back (especially useful in error/empty states)
    useKeypress((key) => {
        if (key.name === 'escape') {
            onBack();
        }
    }, { isActive: isFocused });
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.AccentCyan, children: "Step 2 of 5: Choose Your Model" }), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsxs(Text, { color: Colors.Foreground, children: ["Select a model for ", providerDisplay, ":"] })] }), modelsLoadStatus === 'loading' && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: Colors.Gray, children: "Loading models..." }) })), modelsLoadStatus === 'error' && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: Colors.AccentRed, children: "Failed to load models." }), _jsx(Text, { color: Colors.Gray, children: "Press Esc to go back and try again." })] })), modelsLoadStatus === 'success' && models.length > 0 && (_jsx(RadioButtonSelect, { items: options, onSelect: handleSelect, isFocused: isFocused, maxItemsToShow: 10 })), modelsLoadStatus === 'success' && models.length === 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: Colors.AccentYellow, children: "No models available for this provider." }), _jsx(Text, { color: Colors.Gray, children: "Press Esc to go back and select a different provider." })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.Gray, children: modelsLoadStatus === 'success' && models.length > 0
                        ? 'Use ↑↓ to navigate, Enter to select'
                        : 'Press Esc to go back' }) })] }));
};
//# sourceMappingURL=ModelSelectStep.js.map