import React, { useState } from 'react';
import { Key, X, Check, Lock } from 'lucide-react';
import { setUserApiKey } from '../services/geminiService';

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

const ApiKeyModal: React.FC<ApiKeyModalProps> = ({ isOpen, onClose, onSuccess }) => {
  const [key, setKey] = useState('');
  const [saved, setSaved] = useState(false);

  if (!isOpen) return null;

  const handleSave = () => {
    if (key.trim()) {
      setUserApiKey(key.trim());
      setSaved(true);
      setTimeout(() => {
        onSuccess();
        onClose();
        setSaved(false);
      }, 1000);
    }
  };

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
      <div className="bg-slate-900 w-full max-w-md rounded-xl border border-slate-700 shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-200">
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-800/50">
          <h2 className="text-lg font-bold text-white flex items-center gap-2">
            <Key className="text-emerald-400" size={20} />
            API Access
          </h2>
          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
            <X size={20} />
          </button>
        </div>
        
        <div className="p-6 space-y-4">
          <p className="text-sm text-slate-400">
            Enter your Google Gemini API Key to enable AI features like Agents, Suggestions, and Code Generation.
          </p>
          
          <div className="relative">
            <Lock className="absolute left-3 top-2.5 text-slate-500" size={16} />
            <input 
              type="password" 
              className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-10 pr-4 py-2 text-slate-200 focus:ring-2 focus:ring-emerald-500 outline-none placeholder-slate-600 font-mono text-sm"
              placeholder="Paste your API key here..."
              value={key}
              onChange={(e) => setKey(e.target.value)}
            />
          </div>

          <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-3">
             <p className="text-xs text-emerald-200">
               Your key is stored locally in your browser and used directly with Google's API.
             </p>
          </div>

          <div className="flex justify-end pt-2">
            <button 
              onClick={handleSave}
              disabled={!key.trim()}
              className={`
                flex items-center gap-2 px-6 py-2 rounded-lg font-medium text-white transition-all
                ${saved ? 'bg-emerald-600' : 'bg-emerald-600 hover:bg-emerald-500'}
                ${!key.trim() && !saved ? 'opacity-50 cursor-not-allowed bg-slate-700' : ''}
              `}
            >
              {saved ? <Check size={18} /> : <Key size={18} />}
              {saved ? 'Saved!' : 'Save Key'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ApiKeyModal;