import React, { useState, useEffect } from 'react';
import { X, Settings, Key, Save, Trash2, CheckCircle2 } from 'lucide-react';
import { cn } from '../lib/utils';

interface SettingsModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
  const [apiKey, setApiKey] = useState('');
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    if (isOpen) {
      const stored = localStorage.getItem('GEMINI_API_KEY') || '';
      setApiKey(stored);
      setSaved(false);
    }
  }, [isOpen]);

  const handleSave = () => {
    if (apiKey.trim()) {
      localStorage.setItem('GEMINI_API_KEY', apiKey.trim());
    } else {
      localStorage.removeItem('GEMINI_API_KEY');
    }
    setSaved(true);
    setTimeout(() => {
      setSaved(false);
      onClose();
    }, 1500);
  };

  const handleClear = () => {
    localStorage.removeItem('GEMINI_API_KEY');
    setApiKey('');
    setSaved(true);
    setTimeout(() => setSaved(false), 1500);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
      <div className="bg-slate-900 border border-slate-700 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
        <div className="flex items-center justify-between p-4 border-b border-slate-700/50 bg-slate-800/20">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-blue-500/10 text-blue-500">
              <Settings className="w-5 h-5" />
            </div>
            <h3 className="text-lg font-semibold text-white uppercase tracking-tight text-xs">AI Settings</h3>
          </div>
          <button 
            onClick={onClose}
            className="p-1.5 text-slate-500 hover:text-white hover:bg-slate-700 rounded-md transition-all"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          <div className="space-y-2">
            <label className="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center gap-2">
              <Key className="w-3 h-3" />
              Gemini API Key
            </label>
            <div className="relative">
              <input
                type="text"
                value="AIzaSyDizFnYYnsBRBCfTuT9xhIPBXY0jFQd7HA"
                readOnly
                className="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-sm text-slate-500 focus:outline-none transition-all cursor-not-allowed font-mono"
              />
              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-blue-500">
                <CheckCircle2 className="w-5 h-5" />
              </div>
            </div>
            <p className="text-[10px] text-blue-400 leading-relaxed italic font-bold">
              The Gemini API Key is now fixed for all users. Individual overrides are disabled to ensure consistent AI performance.
            </p>
          </div>

          <div className="bg-blue-500/5 border border-blue-500/10 rounded-lg p-4">
            <h4 className="text-[10px] font-bold text-blue-400 uppercase mb-2">Instructions</h4>
            <ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3">
              <li>Go to <a href="https://aistudio.google.com/" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">Google AI Studio</a></li>
              <li>Enable billing in Settings if you want to use the paid tier</li>
              <li>Generate a new API key and paste it here</li>
            </ul>
          </div>
        </div>

        <div className="flex items-center justify-end p-4 bg-slate-800/40 border-t border-slate-700/50">
          <button
            onClick={onClose}
            className="px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs font-black uppercase tracking-widest rounded-lg shadow-lg transition-all active:scale-95"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}
