import { useState, useEffect } from 'react';
import { Key, X, CheckCircle } from 'lucide-react';

export function ApiKeyModal({ onClose }) {
  const [key, setKey] = useState('');
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem('gemini_key');
    if (stored) setKey(stored);
  }, []);

  const handleSave = () => {
    localStorage.setItem('gemini_key', key.trim());
    setSaved(true);
    setTimeout(() => {
      setSaved(false);
      onClose();
    }, 1500);
  };

  const handleClear = () => {
    localStorage.removeItem('gemini_key');
    setKey('');
  };

  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      background: 'rgba(6, 13, 26, 0.8)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000
    }}>
      <div className="card fade-up" style={{ width: 400, padding: 24, position: 'relative' }}>
        <button 
          onClick={onClose}
          style={{ position: 'absolute', top: 16, right: 16, background: 'none', border: 'none', color: 'var(--text-tertiary)', cursor: 'pointer' }}
        >
          <X size={20} />
        </button>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
          <div style={{ padding: 10, background: 'rgba(191, 90, 242, 0.1)', borderRadius: 8, color: 'var(--purple-ai)' }}>
            <Key size={24} />
          </div>
          <div>
            <h3 style={{ fontSize: 16, fontWeight: 700, margin: 0 }}>Provide Your Brain</h3>
            <p style={{ fontSize: 12, color: 'var(--text-secondary)', margin: '4px 0 0' }}>Bring Your Own Key (BYOK) to bypass server limits.</p>
          </div>
        </div>

        <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 20, lineHeight: 1.5 }}>
          Our server's free-tier Gemini key might hit rate limits during high hackathon traffic. Paste your own Gemini 2.0 Flash API key here to guarantee lightning-fast performance. (Your key never leaves your browser).
        </p>

        <input 
          type="password"
          value={key}
          onChange={e => setKey(e.target.value)}
          placeholder="AIzaSy..."
          className="input-dark"
          style={{ marginBottom: 16, padding: '12px' }}
        />

        <div style={{ display: 'flex', gap: 10 }}>
          <button 
            className="btn-primary" 
            style={{ flex: 1, background: saved ? 'var(--green-safe)' : 'var(--purple-ai)' }}
            onClick={handleSave}
          >
            {saved ? <><CheckCircle size={16}/> Saved</> : 'Save API Key'}
          </button>
          {key && (
            <button className="btn-ghost" onClick={handleClear}>Clear</button>
          )}
        </div>
      </div>
    </div>
  );
}