import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useTheme } from '../../../theme';
const SETTING_CONFIGS = {
    temperature: {
        type: 'number',
        label: 'Temperature',
        description: 'Controls randomness. Lower values make responses more deterministic.',
        min: 0,
        max: 2,
        step: 0.01,
        fallback: 0.7
    },
    topP: {
        type: 'number',
        label: 'Top P',
        description: 'Limits sampling to the most likely tokens whose cumulative probability is below this value.',
        min: 0,
        max: 1,
        step: 0.01,
        fallback: 1
    },
    maxTokens: {
        type: 'number',
        label: 'Max Tokens',
        description: 'Maximum number of tokens the model can generate in the response.',
        min: 1,
        max: 8192,
        step: 1,
        fallback: 1000
    },
    reasoningEffort: {
        type: 'enum',
        label: 'Reasoning Effort',
        description: 'Controls how much extra thinking GPT-5 performs before responding.',
        options: [
            { value: 'low', label: 'Low', helper: 'Fast responses, minimal extra reasoning.' },
            { value: 'medium', label: 'Medium', helper: 'Balanced deliberation and latency.' },
            { value: 'high', label: 'High', helper: 'Deepest reasoning with higher latency.' }
        ],
        fallback: 'medium'
    },
    textVerbosity: {
        type: 'enum',
        label: 'Text Verbosity',
        description: 'Controls how expansive GPT-5 responses should be.',
        options: [
            { value: 'low', label: 'Low', helper: 'Concise summaries and short answers.' },
            { value: 'medium', label: 'Medium', helper: 'Balanced detail and brevity.' },
            { value: 'high', label: 'High', helper: 'Rich detail and expansive context.' }
        ],
        fallback: 'medium'
    }
};
export const ModelControls = ({ availableModels, defaultModel, providerDisplayLabel, isStreaming, temperature, topP, maxTokens, showToolCalls, onModelChange, onSettingEdit, onToggleToolCalls }) => {
    const modelId = defaultModel?.model?.trim().toLowerCase() ?? '';
    const isGpt5 = modelId.startsWith('gpt-5');
    const settings = (defaultModel?.settings ?? {});
    const reasoningObject = settings.reasoning;
    const textObject = settings.text;
    const reasoningEffort = typeof settings.reasoningEffort === 'string'
        ? settings.reasoningEffort
        : (typeof reasoningObject?.effort === 'string' ? reasoningObject.effort : undefined);
    const textVerbosity = typeof settings.textVerbosity === 'string'
        ? settings.textVerbosity
        : (typeof textObject?.verbosity === 'string' ? textObject.verbosity : undefined);
    const toTitleCase = (value) => value.charAt(0).toUpperCase() + value.slice(1);
    const reasoningConfig = SETTING_CONFIGS.reasoningEffort;
    const verbosityConfig = SETTING_CONFIGS.textVerbosity;
    const gpt5ReasoningDisplay = toTitleCase((reasoningEffort ?? reasoningConfig.fallback));
    const gpt5VerbosityDisplay = toTitleCase((textVerbosity ?? verbosityConfig.fallback));
    const formattedTemperature = temperature !== undefined ? temperature.toFixed(2) : '—';
    const formattedTopP = topP !== undefined ? topP.toFixed(2) : '—';
    const formattedMaxTokens = maxTokens !== undefined ? String(maxTokens) : '—';
    const theme = useTheme();
    return (_jsx("div", { className: theme.modelControls.container, children: _jsxs("div", { className: theme.modelControls.metaRow, children: [_jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("span", { className: theme.modelControls.modelLabel, children: "Model" }), availableModels.length > 0 ? (_jsxs("select", { value: defaultModel?.id ?? '', onChange: onModelChange, className: theme.modelControls.select, children: [!defaultModel && _jsx("option", { value: '', children: "Select a model\u2026" }), availableModels.map((model) => (_jsx("option", { value: model.id, children: model.label || model.model }, model.id)))] })) : (_jsx("span", { className: theme.modelControls.noModelsBadge, children: "No models configured" })), providerDisplayLabel !== '—' && (_jsx("span", { className: theme.modelControls.providerBadge, children: providerDisplayLabel })), isStreaming && (_jsx("span", { className: theme.modelControls.liveBadge, children: "Live" }))] }), _jsxs("div", { className: 'flex items-center gap-2', children: [!isGpt5 && (_jsxs(_Fragment, { children: [_jsxs("button", { type: 'button', onClick: () => onSettingEdit('temperature', temperature), disabled: !defaultModel, className: `${theme.modelControls.quickButtonBase} ${theme.modelControls.quickButtonVariants.temperature}`, title: 'Edit temperature', children: ["Temp: ", _jsx("span", { className: 'font-bold', children: formattedTemperature })] }), _jsxs("button", { type: 'button', onClick: () => onSettingEdit('topP', topP), disabled: !defaultModel, className: `${theme.modelControls.quickButtonBase} ${theme.modelControls.quickButtonVariants.topP}`, title: 'Edit top p', children: ["Top P: ", _jsx("span", { className: 'font-bold', children: formattedTopP })] })] })), _jsxs("button", { type: 'button', onClick: () => onSettingEdit('maxTokens', maxTokens), disabled: !defaultModel, className: `${theme.modelControls.quickButtonBase} ${theme.modelControls.quickButtonVariants.maxTokens}`, title: 'Edit max tokens', children: ["Max Tokens: ", _jsx("span", { className: 'font-bold', children: formattedMaxTokens })] })] }), isGpt5 && (_jsxs("div", { className: 'flex items-center gap-2 text-[11px]', children: [_jsxs("button", { type: 'button', onClick: () => onSettingEdit('reasoningEffort', reasoningEffort ?? reasoningConfig.fallback), disabled: !defaultModel, className: `${theme.modelControls.quickButtonBase} ${theme.modelControls.quickButtonVariants.reasoning}`, title: 'Edit reasoning effort', children: ["Reasoning: ", _jsx("span", { className: 'font-bold', children: gpt5ReasoningDisplay })] }), _jsxs("button", { type: 'button', onClick: () => onSettingEdit('textVerbosity', textVerbosity ?? verbosityConfig.fallback), disabled: !defaultModel, className: `${theme.modelControls.quickButtonBase} ${theme.modelControls.quickButtonVariants.verbosity}`, title: 'Edit text verbosity', children: ["Verbosity: ", _jsx("span", { className: 'font-bold', children: gpt5VerbosityDisplay })] })] }))] }) }));
};
export { SETTING_CONFIGS };
