frontend/components/CompactModelSelector.tsx

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

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

const CompactModelSelector: React.FC<CompactModelSelectorProps> = ({ 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="relative group min-w-[160px]">
            <div className="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none text-petro-400 group-hover:text-petro-300 transition-colors">
                <Icons.Cpu className="h-4 w-4" />
            </div>
            <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/50 border border-industrial-700/50 text-gray-200 text-xs font-medium rounded-lg pl-9 pr-9 py-2
                focus:outline-none focus:ring-1 focus:ring-petro-500/50 focus:border-petro-500/50 
                disabled:opacity-50 disabled:cursor-not-allowed 
                hover:bg-industrial-800/80 hover:border-industrial-600 transition-all cursor-pointer appearance-none shadow-sm backdrop-blur-sm truncate"
                title={selectedModel.description}
            >
                {Object.entries(modelsByProvider).map(([provider, models]) => (
                    <optgroup key={provider} label={providerLabels[provider as ModelProvider]}>
                        {models.map(model => (
                            <option key={model.id} value={model.id} className="bg-industrial-900 text-gray-300 py-1">
                                {model.name}
                            </option>
                        ))}
                    </optgroup>
                ))}
            </select>
            <div className="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none text-gray-500 group-hover:text-petro-400 transition-colors">
                <Icons.ChevronDown className="h-3.5 w-3.5" />
            </div>
        </div>
    );
};

export default CompactModelSelector;