/* global React */
const { useState: _useSet, useEffect: _useEff } = React;

function ThemeSwatch({ name, bg, accent, active, onClick }) {
  return (
    <div className={`theme-swatch${active ? ' active' : ''}`} onClick={onClick}>
      <div className="sw" style={{ background: bg }}><span style={{ display: 'inline-block', width: '40%', height: '4px', marginTop: '14px', background: accent, borderRadius: '2px' }} /></div>
      {name}
    </div>
  );
}

function AppearancePanel() {
  const [theme, setTheme] = _useSet('Dark');
  return (
    <div>
      <div className="settings-row">
        <div className="settings-section-title">Theme</div>
        <div className="theme-swatches">
          <ThemeSwatch name="Dark" bg="#000000" accent="#00b4ff" active={theme === 'Dark'} onClick={() => setTheme('Dark')} />
          <ThemeSwatch name="Medium" bg="#383838" accent="#64b5f6" active={theme === 'Medium'} onClick={() => setTheme('Medium')} />
          <ThemeSwatch name="Light" bg="#ffffff" accent="#0066b8" active={theme === 'Light'} onClick={() => setTheme('Light')} />
        </div>
        <div style={{ marginTop: '10px' }}>
          <button className="settings-link-btn" type="button">Open CustomThemeCreator…</button>
        </div>
      </div>
      <div className="settings-row">
        <div className="settings-section-title">Fonts</div>
        <div className="form-row">
          <div className="form-group" style={{ flex: 2 }}>
            <label>UI Font</label>
            <select defaultValue="Segoe UI"><option>Segoe UI</option><option>System Default</option></select>
          </div>
          <div className="form-group" style={{ flex: 2 }}>
            <label>Terminal Font</label>
            <select defaultValue="Cascadia Mono"><option>Cascadia Mono</option><option>Consolas</option><option>JetBrains Mono</option></select>
          </div>
          <div className="form-group" style={{ flex: 1 }}>
            <label>Size</label>
            <input type="text" defaultValue="14" />
          </div>
        </div>
      </div>
      <div className="settings-row">
        <div className="settings-section-title">Encoding</div>
        <div className="form-group">
          <label>Default text encoding</label>
          <select defaultValue="UTF-8"><option>UTF-8</option><option>Shift_JIS</option><option>EUC-JP</option></select>
        </div>
      </div>
    </div>
  );
}

function AIPanel({ provider, setProvider }) {
  return (
    <div>
      <div className="settings-row">
        <div className="settings-section-title">AI Provider</div>
        <div className="form-group">
          <label>Active provider</label>
          <div className="settings-fakeselect">{provider}<span style={{ opacity: 0.6 }}>▾</span></div>
        </div>
      </div>
      <div className="settings-row">
        <div className="settings-section-title">{provider} authentication</div>
        {provider === 'Anthropic' && (
          <div className="form-group"><label>API Key</label><input type="password" placeholder="sk-ant-..." /></div>
        )}
        {provider === 'OpenAI' && (
          <div className="form-group"><label>API Key</label><input type="password" placeholder="sk-..." /></div>
        )}
        {provider === 'Google AI Studio' && (
          <div>
            <div className="form-group"><label>OAuth Client ID</label><input type="text" placeholder="xxxxxxxx.apps.googleusercontent.com" /></div>
            <div className="form-group"><label>Client Secret</label><input type="password" placeholder="GOCSPX-..." /></div>
          </div>
        )}
        {provider === 'Vertex AI' && (
          <div>
            <div className="form-row">
              <div className="form-group" style={{ flex: 2 }}><label>Project ID</label><input type="text" placeholder="my-gcp-project" /></div>
              <div className="form-group" style={{ flex: 2 }}><label>Region</label><select defaultValue="us-central1"><option>us-central1</option><option>asia-northeast1</option><option>europe-west1</option></select></div>
            </div>
            <div className="form-group"><label>Authentication</label><select defaultValue="Application Default Credentials"><option>Application Default Credentials</option><option>Service account key</option></select></div>
          </div>
        )}
        <button className="settings-primary-btn" type="button" style={{ marginTop: '4px' }}>Sign in</button>
      </div>
    </div>
  );
}

function SettingsModal({ onClose, initialTab = 'Appearance' }) {
  const [tab, setTab] = _useSet(initialTab);
  const [provider, setProvider] = _useSet('Vertex AI');
  _useEff(() => { window.__hottySetProvider = setProvider; return () => { try { delete window.__hottySetProvider; } catch (e) {} }; }, []);
  const TABS = ['General', 'Appearance', 'Protocols', 'Features', 'AI', 'About'];
  return (
    <div className="settings-overlay" onClick={onClose}>
      <div className="settings-modal" onClick={(e) => e.stopPropagation()}>
        <div className="settings-head">
          <span className="settings-title">Settings</span>
          <button className="settings-close" onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="settings-tabs">
          {TABS.map(t => (
            <button key={t} className={`settings-tab${t === tab ? ' active' : ''}`} onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>
        <div className="settings-body">
          {tab === 'Appearance' && <AppearancePanel />}
          {tab === 'AI' && <AIPanel provider={provider} setProvider={setProvider} />}
          {tab !== 'Appearance' && tab !== 'AI' && <div className="settings-placeholder">{tab} settings</div>}
        </div>
      </div>
    </div>
  );
}

window.SettingsModal = SettingsModal;