import React, { useState } from 'react';
import { Eye, EyeOff, Key, RefreshCw } from 'lucide-react';

export default function Settings({ 
  apiKey, 
  setApiKey, 
  backendStatus, 
  checkBackendStatus 
}) {
  const [showKey, setShowKey] = useState(false);

  return (
    <div className="settings-drawer">
      <div className="settings-group">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <Key size={16} color="var(--primary)" />
            Gemini API Key
          </label>
          <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
            Saved locally in your browser
          </span>
        </div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
          <input
            type={showKey ? 'text' : 'password'}
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
            placeholder={backendStatus.gemini_api_key_configured ? "Using backend environment variable" : "Enter your GEMINI_API_KEY..."}
            style={{ width: '100%', paddingRight: '2.5rem' }}
          />
          <button
            type="button"
            onClick={() => setShowKey(!showKey)}
            style={{
              position: 'absolute',
              right: '10px',
              background: 'none',
              border: 'none',
              color: 'var(--text-secondary)',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center'
            }}
          >
            {showKey ? <EyeOff size={18} /> : <Eye size={18} />}
          </button>
        </div>
      </div>

      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        borderTop: '1px solid var(--border-color)', 
        paddingTop: '1rem',
        marginTop: '0.5rem'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
          <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Gemini Connection:</span>
          <span className={`status-badge`} style={{ padding: '0.2rem 0.6rem' }}>
            <span className={`status-dot ${backendStatus.gemini_api_key_configured || apiKey ? 'ready' : 'loading'}`}></span>
            <span style={{ marginLeft: '4px', fontSize: '0.8rem' }}>
              {backendStatus.gemini_api_key_configured || apiKey ? 'Configured' : 'Missing API Key'}
            </span>
          </span>
        </div>
        <button 
          onClick={checkBackendStatus} 
          className="settings-toggle-btn"
          style={{ padding: '0.35rem 0.75rem' }}
          title="Refresh connection status"
        >
          <RefreshCw size={14} />
          Refresh
        </button>
      </div>
    </div>
  );
}