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 { RadioButtonSelect, } from '../shared/RadioButtonSelect.js';
const PROVIDER_DISPLAY_NAMES = {
    gemini: 'Google Gemini',
    codex: 'OpenAI Codex (ChatGPT Backend)',
    anthropic: 'Anthropic (Claude)',
    qwen: 'Qwen',
    synthetic: 'Synthetic (Testing)',
    zai: 'Zai',
    openai: 'OpenAI (GPT-4, etc.)',
    'openai-responses': 'OpenAI Responses API',
    openaivercel: 'OpenAI (Vercel AI SDK)',
    deepseek: 'DeepSeek',
};
// Preferred order for provider display
const PROVIDER_ORDER = [
    'gemini',
    'codex',
    'anthropic',
    'qwen',
    'synthetic',
    'zai',
    'openai',
    'openai-responses',
    'openaivercel',
    'deepseek',
];
export const ProviderSelectStep = ({ providers, onSelect, onSkip, isFocused = true, }) => {
    const options = useMemo(() => {
        // Sort providers by preferred order
        const sortedProviders = [...providers].sort((a, b) => {
            const aIndex = PROVIDER_ORDER.indexOf(a);
            const bIndex = PROVIDER_ORDER.indexOf(b);
            // Providers not in the list go to the end
            const aOrder = aIndex === -1 ? PROVIDER_ORDER.length : aIndex;
            const bOrder = bIndex === -1 ? PROVIDER_ORDER.length : bIndex;
            return aOrder - bOrder;
        });
        const providerOptions = sortedProviders.map((provider) => ({
            label: PROVIDER_DISPLAY_NAMES[provider] || provider,
            value: provider,
            key: provider,
        }));
        // Add "configure manually" option
        providerOptions.push({
            label: 'Configure manually later',
            value: '__skip__',
            key: '__skip__',
        });
        return providerOptions;
    }, [providers]);
    const handleSelect = useCallback((value) => {
        if (value === '__skip__') {
            onSkip();
        }
        else {
            onSelect(value);
        }
    }, [onSkip, onSelect]);
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.AccentCyan, children: "Step 1 of 5: Choose Your AI Provider" }), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsx(Text, { color: Colors.Foreground, children: "Select which AI provider you'd like to use:" })] }), _jsx(RadioButtonSelect, { items: options, onSelect: handleSelect, isFocused: isFocused, maxItemsToShow: 8 }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.Gray, children: "Use \u2191\u2193 to navigate, Enter to select, Esc to skip" }) })] }));
};
//# sourceMappingURL=ProviderSelectStep.js.map