import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * @license
 * Copyright 2025 Vybestack LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import { useState, useCallback } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../../colors.js';
import { TextInput } from './TextInput.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { PROVIDER_OPTIONS } from './constants.js';
import { validateBaseUrl } from './validation.js';
import { getStepPosition } from './utils.js';
export const BaseUrlConfigStep = ({ state, onUpdateBaseUrl, onContinue, onBack, }) => {
    // Handle Escape key to go back
    useKeypress((key) => {
        if (key.name === 'escape') {
            onBack();
        }
    }, { isActive: true });
    const providerOption = PROVIDER_OPTIONS.find((p) => p.value === state.config.provider);
    const defaultBaseUrl = providerOption?.defaultBaseUrl || '';
    // Initialize with default URL if available and not already set
    const [inputValue, setInputValue] = useState(state.config.baseUrl || defaultBaseUrl);
    const [validationError, setValidationError] = useState(null);
    const handleInputChange = useCallback((value) => {
        setInputValue(value);
        const validation = validateBaseUrl(value);
        setValidationError(validation.valid ? null : validation.error || null);
        if (validation.valid) {
            onUpdateBaseUrl(value);
        }
    }, [onUpdateBaseUrl]);
    const handleInputSubmit = useCallback(() => {
        const validation = validateBaseUrl(inputValue);
        if (validation.valid) {
            onContinue();
        }
        else {
            setValidationError(validation.error || 'Invalid URL');
        }
    }, [inputValue, onContinue]);
    const isCustomProvider = state.config.provider === 'custom';
    const helpText = isCustomProvider
        ? 'Enter the API endpoint for your custom provider:'
        : `${providerOption?.label || 'This provider'} typically runs on the default port. Edit if using a different configuration.`;
    const { current, total } = getStepPosition(state);
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: Colors.AccentCyan, children: ["Create New Profile - Step ", current, " of ", total] }), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsx(Text, { color: Colors.Foreground, children: "Configure Base URL:" }), _jsx(Text, { color: Colors.Gray, children: helpText }), _jsx(Text, { color: Colors.Foreground, children: " " }), isCustomProvider && (_jsxs(_Fragment, { children: [_jsx(Text, { color: Colors.Gray, children: "Examples:" }), _jsx(Text, { color: Colors.Gray, children: " \u2022 https://api.x.ai/v1/" }), _jsx(Text, { color: Colors.Gray, children: " \u2022 https://openrouter.ai/api/v1/" }), _jsx(Text, { color: Colors.Gray, children: "\u2022 https://api.fireworks.ai/inference/v1/" }), _jsx(Text, { color: Colors.Foreground, children: " " })] })), _jsx(Text, { color: Colors.Foreground, children: "Base URL:" }), _jsx(TextInput, { value: inputValue, onChange: handleInputChange, onSubmit: handleInputSubmit, isFocused: true, placeholder: "https://..." }), validationError && (_jsxs(Text, { color: Colors.AccentRed, children: ["\u2717 ", validationError] })), !validationError && inputValue && (_jsx(Text, { color: Colors.AccentGreen, children: "\u2713 Valid" })), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsx(Text, { color: Colors.Gray, children: "\u2190 \u2192 Move cursor Enter Continue Esc Back" })] }));
};
//# sourceMappingURL=BaseUrlConfigStep.js.map