import React from 'react';
import { Brain, Sparkles, Zap, Shield, ChevronDown } from 'lucide-react';
import { motion } from 'motion/react';

export const SUPPORTED_MODELS = [
  { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', tier: 'Standard', desc: 'Fast & Precise' },
  { id: 'gemini-2.5-flash-lite', name: 'Gemini 2.5 Flash Lite', tier: 'Lite', desc: 'Efficient' },
  { id: 'gemini-3.1-flash-lite-preview', name: 'Gemini 3.1 Flash Lite', tier: 'Lite', desc: 'Cutting Edge Lite' },
  { id: 'gemma-3-27b', name: 'Gemma 3 27B', tier: 'Gemma', desc: 'Research Grade' },
  { id: 'gemma-3-12b', name: 'Gemma 3 12B', tier: 'Gemma', desc: 'Balanced' },
  { id: 'Local Ollama', name: 'Local Ollama', tier: 'Local', desc: 'Private & Secure' },
];

interface Props {
  selectedModel: string;
  onSelect: (modelId: string) => void;
  disabled?: boolean;
}

export default function ModelSelector({ selectedModel, onSelect, disabled }: Props) {
  const [isOpen, setIsOpen] = React.useState(false);
  const selected = SUPPORTED_MODELS.find(m => m.id === selectedModel) || SUPPORTED_MODELS[0];

  return (
    <div className="relative">
      <button
        onClick={() => !disabled && setIsOpen(!isOpen)}
        disabled={disabled}
        className={`flex items-center gap-3 px-4 py-2 rounded-xl border transition-all text-left min-w-[240px] ${
          disabled 
            ? 'bg-stone-50 border-stone-100 opacity-50 cursor-not-allowed' 
            : 'bg-white border-stone-200 hover:border-stone-400 shadow-sm'
        }`}
      >
        <div className="w-8 h-8 rounded-lg bg-stone-900 text-white flex items-center justify-center shrink-0">
          {selected.tier === 'Local' ? <Shield size={16} /> : <Brain size={16} />}
        </div>
        <div className="flex-1 overflow-hidden">
          <div className="flex items-center gap-2">
            <span className="text-sm font-serif italic text-stone-900 truncate">{selected.name}</span>
            <span className="text-[8px] font-mono uppercase px-1.5 py-0.5 rounded bg-stone-100 text-stone-500 shrink-0">
              {selected.tier}
            </span>
          </div>
          <p className="text-[10px] font-mono text-stone-400 truncate uppercase tracking-tighter">{selected.desc}</p>
        </div>
        <ChevronDown size={16} className={`text-stone-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {isOpen && (
        <motion.div
          initial={{ opacity: 0, y: 10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          className="absolute z-50 mt-2 w-full bg-white border border-stone-200 rounded-2xl shadow-2xl overflow-hidden p-2"
        >
          {SUPPORTED_MODELS.map((model) => (
            <button
              key={model.id}
              onClick={() => {
                onSelect(model.id);
                setIsOpen(false);
              }}
              className={`w-full flex items-center gap-3 p-3 rounded-xl transition-colors text-left ${
                selectedModel === model.id ? 'bg-stone-50' : 'hover:bg-stone-50/50'
              }`}
            >
              <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
                selectedModel === model.id ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'
              }`}>
                {model.tier === 'Local' ? <Shield size={16} /> : (model.tier === 'Premium' ? <Sparkles size={16} /> : <Zap size={16} />)}
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-serif italic text-stone-900">{model.name}</span>
                  <span className="text-[8px] font-mono uppercase px-1.5 py-0.5 rounded bg-stone-100 text-stone-500">
                    {model.tier}
                  </span>
                </div>
                <p className="text-[10px] font-mono text-stone-400 uppercase tracking-tighter">{model.desc}</p>
              </div>
            </button>
          ))}
        </motion.div>
      )}
    </div>
  );
}