frontend/components/ModelSelector.tsx

import React from 'react';
import { AIModel, AVAILABLE_MODELS, ModelProvider } from '../types';

interface ModelSelectorProps {
    selectedModel: AIModel;
    onModelChange: (model: AIModel) => void;
    disabled?: boolean;
}

const ModelSelector: React.FC<ModelSelectorProps> = ({ selectedModel, onModelChange, disabled = false }) => {
    // Group models by provider
    const modelsByProvider = AVAILABLE_MODELS.reduce((acc, model) => {
        if (!acc[model.provider]) {
            acc[model.provider] = [];
        }
        acc[model.provider].push(model);
        return acc;
    }, {} as Record<ModelProvider, AIModel[]>);

    const providerLabels = {
        [ModelProvider.GEMINI]: 'Google Gemini',
        [ModelProvider.GROQ]: 'Groq',
        [ModelProvider.MISTRAL]: 'Mistral AI'
    };

    return (
        <div className="w-full">
            <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
                AI Model
            </label>
            <select
                value={selectedModel.id}
                onChange={(e) => {
                    const model = AVAILABLE_MODELS.find(m => m.id === e.target.value);
                    if (model) onModelChange(model);
                }}
                disabled={disabled}
                className="w-full bg-industrial-900 border border-industrial-700 text-white rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-petro-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed hover:border-industrial-600 transition-colors"
            >
                {Object.entries(modelsByProvider).map(([provider, models]) => (
                    <optgroup key={provider} label={providerLabels[provider as ModelProvider]}>
                        {models.map(model => (
                            <option key={model.id} value={model.id} title={model.description}>
                                {model.name}
                            </option>
                        ))}
                    </optgroup>
                ))}
            </select>
            <p className="text-xs text-gray-500 mt-1.5 line-clamp-2">
                {selectedModel.description}
            </p>
        </div>
    );
};

export default ModelSelector;