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

// ============================================================
// PUBLISH MODAL
//
// Publishing is NOT something the leaderboard can do on its own.
// `POST /api/v1/sessions/{id}/publish` is owner-gated: it needs a
// COMPLETED training session *and* the `X-Session-Token` that was
// handed out once when that session was created.  That token only
// exists in the browser that ran the training: i.e. the Playground
// at /dashboard/, never here.
//
// So this modal routes the user to the real thing instead of
// pretending.  The previous version rendered a fake form that
// reported "submitted · verified" for a hardcoded run (DreamerV3 /
// 921 / r_8422) without touching the API: a visitor could "publish"
// a run they never trained and see a success screen for it.
// ============================================================
const PLAYGROUND_URL = '/dashboard/';

const PublishModal = ({ open, onClose }) => {
  if (!open) return null;

  const go = () => { window.location.href = PLAYGROUND_URL; };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} data-testid="publish-modal">
        <div className="modal-head">
          <div>
            <span className="kicker">Submit to leaderboard</span>
            <div style={{fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 600, marginTop: 4}}>
              Publish a Playground run
            </div>
          </div>
          <button className="btn sm ghost" onClick={onClose}>✕</button>
        </div>

        <div className="modal-body">
          <div style={{fontFamily: 'var(--serif)', fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)'}}>
            Runs are published from the session that produced them: the
            Playground holds the owner token that proves the run is yours,
            and the leaderboard has no way to mint one.
          </div>

          <ol style={{
            margin: '18px 0 0', padding: '0 0 0 18px',
            fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 2, color: 'var(--ink-2)',
          }}>
            <li>Open the Playground and pick an environment + algorithm.</li>
            <li>Train until the session reports <span style={{color: 'var(--ok)'}}>completed</span>.</li>
            <li>Hit <strong style={{color: 'var(--ink)'}}>↗ Submit to RLX</strong> on that session.</li>
            <li>Add a social handle to publish verified, or skip it and the
                run waits in the admin review queue.</li>
          </ol>

          <div style={{
            marginTop: 18, padding: 12, background: 'rgba(183, 71, 42, 0.06)',
            borderLeft: '3px solid var(--accent)', fontFamily: 'var(--serif)',
            fontSize: 13, fontStyle: 'italic', color: 'var(--ink-2)',
          }}>
            Approved runs land on the Playground Benchmarks board with the same
            field set as the Research and OptRL boards.
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Cancel</button>
          <button className="btn primary" onClick={go} data-testid="open-playground">
            Open Playground ↗
          </button>
        </div>
      </div>
    </div>
  );
};

const TweaksPanel = ({ tweaks, setTweaks, active, setActive, board, setBoard, algo, setAlgo, sortKey, setSortKey }) => {
  const [collapsed, setCollapsed] = useState(false);
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaks(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaks(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  if (!tweaks) return null;

  const tabs = ['home', 'leaderboards', 'playground', 'docs', 'admin'];
  const boards = ['published', 'optrl', 'playground'];
  const themes = ['light', 'dark', 'accent'];
  const sorts = ['meanReturn', 'successRate', 'stability', 'compute', 's2rGap'];
  const algos = (window.RLX_DATA?.playgroundAlgoGroups || []).flatMap(g => g.items.map(i => i.name));

  const setTheme = (t) => {
    document.documentElement.setAttribute('data-theme', t === 'light' ? '' : t);
    window.parent.postMessage({type: '__edit_mode_set_keys', edits: {theme: t}}, '*');
  };
  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';

  return (
    <div className={`tweaks-panel ${collapsed ? 'collapsed' : ''}`}>
      <div className="tp-head" onClick={() => setCollapsed(c => !c)}>
        <span>◆ Tweaks</span>
        <span>{collapsed ? '+' : '−'}</span>
      </div>
      <div className="tp-body">
        <div className="tp-group">
          <span className="tp-label">Active tab</span>
          <div className="tp-pills">
            {tabs.map(t => (
              <button key={t} className={`chip ${active === t ? 'active' : ''}`} onClick={() => setActive(t)}>{t}</button>
            ))}
          </div>
        </div>
        <div className="tp-group">
          <span className="tp-label">Color theme</span>
          <div className="tp-pills">
            {themes.map(t => (
              <button key={t} className={`chip ${currentTheme === (t==='light'?'':t) ? 'active' : ''}`} onClick={() => setTheme(t)}>{t}</button>
            ))}
          </div>
        </div>
        <div className="tp-group">
          <span className="tp-label">Leaderboard</span>
          <div className="tp-pills">
            {boards.map(b => (
              <button key={b} className={`chip ${board === b ? 'active' : ''}`} onClick={() => { setBoard(b); setActive('leaderboards'); }}>{b}</button>
            ))}
          </div>
        </div>
        <div className="tp-group">
          <span className="tp-label">Playground algorithm</span>
          <select value={algo} onChange={e => setAlgo(e.target.value)} style={{
            width: '100%', padding: '6px 8px', fontFamily: 'var(--mono)', fontSize: 11,
            background: 'var(--paper-2)', border: '1px solid var(--rule)', color: 'var(--ink)', outline: 'none'
          }}>
            {algos.map(a => <option key={a}>{a}</option>)}
          </select>
        </div>
        <div className="tp-group">
          <span className="tp-label">Sort column</span>
          <div className="tp-pills">
            {sorts.map(s => (
              <button key={s} className={`chip ${sortKey === s ? 'active' : ''}`} onClick={() => setSortKey(s)}>{s}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// USER AUTH MODAL (SIGN IN / SIGN UP)
// ============================================================
const UserAuthModal = ({ open, onClose, onSuccess }) => {
  const [tab, setTab] = useState('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [socialHandle, setSocialHandle] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);

  if (!open) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setBusy(true);
    setErr(null);
    try {
      if (tab === 'login') {
        await window.RLX_USER_API.login(email.trim(), password);
      } else {
        await window.RLX_USER_API.signup(
          email.trim(),
          password,
          displayName.trim() || undefined,
          socialHandle.trim() || undefined,
        );
      }
      if (onSuccess) onSuccess();
      onClose();
    } catch (ex) {
      setErr(ex.message || 'Authentication failed');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{maxWidth: 440}}>
        <div className="modal-head">
          <div>
            <span className="kicker">OptRL Account</span>
            <div style={{fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 600, marginTop: 4}}>
              {tab === 'login' ? 'Sign In to OptRL' : 'Create an Account'}
            </div>
          </div>
          <button className="btn sm ghost" onClick={onClose}>✕</button>
        </div>

        <div style={{display: 'flex', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)'}}>
          <button
            type="button"
            className={`btn sm ghost ${tab === 'login' ? 'active' : ''}`}
            onClick={() => { setTab('login'); setErr(null); }}
            style={{flex: 1, borderRadius: 0, border: 'none', borderBottom: tab === 'login' ? '2px solid var(--accent)' : 'none', fontWeight: tab === 'login' ? 700 : 400}}
          >
            Sign In
          </button>
          <button
            type="button"
            className={`btn sm ghost ${tab === 'signup' ? 'active' : ''}`}
            onClick={() => { setTab('signup'); setErr(null); }}
            style={{flex: 1, borderRadius: 0, border: 'none', borderBottom: tab === 'signup' ? '2px solid var(--accent)' : 'none', fontWeight: tab === 'signup' ? 700 : 400}}
          >
            Create Account
          </button>
        </div>

        <form onSubmit={handleSubmit}>
          <div className="modal-body" style={{display: 'flex', flexDirection: 'column', gap: 12}}>
            {err && (
              <div style={{padding: '8px 10px', background: 'rgba(217, 83, 79, 0.1)', border: '1px solid var(--bad)', color: 'var(--bad)', fontSize: 12, fontFamily: 'var(--mono)'}}>
                {err}
              </div>
            )}
            <div>
              <label className="mono-tiny" style={{display: 'block', marginBottom: 4}}>Email Address</label>
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="trader@firm.com"
                style={{width: '100%', padding: '8px 10px', fontFamily: 'var(--mono)', fontSize: 13, background: 'var(--paper)', border: '1px solid var(--rule)', color: 'var(--ink)'}}
              />
            </div>
            <div>
              <label className="mono-tiny" style={{display: 'block', marginBottom: 4}}>Password</label>
              <input
                type="password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter password"
                style={{width: '100%', padding: '8px 10px', fontFamily: 'var(--mono)', fontSize: 13, background: 'var(--paper)', border: '1px solid var(--rule)', color: 'var(--ink)'}}
              />
            </div>

            {tab === 'signup' && (
              <>
                <div>
                  <label className="mono-tiny" style={{display: 'block', marginBottom: 4}}>Display Name (optional)</label>
                  <input
                    type="text"
                    value={displayName}
                    onChange={(e) => setDisplayName(e.target.value)}
                    placeholder="Alex Morgan"
                    style={{width: '100%', padding: '8px 10px', fontFamily: 'var(--mono)', fontSize: 13, background: 'var(--paper)', border: '1px solid var(--rule)', color: 'var(--ink)'}}
                  />
                </div>
                <div>
                  <label className="mono-tiny" style={{display: 'block', marginBottom: 4}}>Social Handle / GitHub (optional)</label>
                  <input
                    type="text"
                    value={socialHandle}
                    onChange={(e) => setSocialHandle(e.target.value)}
                    placeholder="@alex_m"
                    style={{width: '100%', padding: '8px 10px', fontFamily: 'var(--mono)', fontSize: 13, background: 'var(--paper)', border: '1px solid var(--rule)', color: 'var(--ink)'}}
                  />
                </div>
              </>
            )}
          </div>

          <div className="modal-foot">
            <button type="button" className="btn ghost" onClick={onClose} disabled={busy}>Cancel</button>
            <button type="submit" className="btn primary" disabled={busy}>
              {busy ? 'Processing...' : tab === 'login' ? 'Sign In' : 'Create Account'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

// ============================================================
// USER ENCRYPTED API KEYS MODAL
// ============================================================
const UserApiKeysModal = ({ open, onClose }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [apiKeyInput, setApiKeyInput] = useState('');
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState(null);
  const [err, setErr] = useState(null);

  const fetchKeys = async () => {
    setLoading(true);
    setErr(null);
    try {
      const res = await window.RLX_USER_API.getApiKeys();
      setData(res);
    } catch (ex) {
      setErr(ex.message || 'Failed to fetch API keys. Please ensure you are signed in.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (open) {
      fetchKeys();
      setApiKeyInput('');
      setMsg(null);
    }
  }, [open]);

  if (!open) return null;

  const handleSaveKey = async (e) => {
    e.preventDefault();
    const cleanKey = apiKeyInput.trim();
    if (!cleanKey) return;
    setSaving(true);
    setErr(null);
    setMsg(null);
    try {
      await window.RLX_USER_API.saveApiKey('alpha_vantage', cleanKey);
      setMsg('API key encrypted and saved successfully. Future sessions will auto-reuse it.');
      setApiKeyInput('');
      await fetchKeys();
    } catch (ex) {
      setErr(ex.message || 'Failed to save API key');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteKey = async () => {
    if (!window.confirm('Delete your custom key? Sessions will automatically fall back to the system free tier key.')) return;
    setSaving(true);
    setErr(null);
    setMsg(null);
    try {
      await window.RLX_USER_API.deleteApiKey('alpha_vantage');
      setMsg('Custom key removed. Free tier system key will now be used.');
      await fetchKeys();
    } catch (ex) {
      setErr(ex.message || 'Failed to remove API key');
    } finally {
      setSaving(false);
    }
  };

  const avKey = (data?.keys || []).find((k) => k.provider === 'alpha_vantage' && k.is_active);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{maxWidth: 520}}>
        <div className="modal-head">
          <div>
            <span className="kicker">Encrypted Key Management</span>
            <div style={{fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 600, marginTop: 4}}>
              Third-Party API Credentials
            </div>
          </div>
          <button className="btn sm ghost" onClick={onClose}>✕</button>
        </div>

        <div className="modal-body" style={{display: 'flex', flexDirection: 'column', gap: 14}}>
          {err && (
            <div style={{padding: '8px 10px', background: 'rgba(217, 83, 79, 0.1)', border: '1px solid var(--bad)', color: 'var(--bad)', fontSize: 12, fontFamily: 'var(--mono)'}}>
              {err}
            </div>
          )}
          {msg && (
            <div style={{padding: '8px 10px', background: 'rgba(92, 184, 92, 0.1)', border: '1px solid var(--ok)', color: 'var(--ok)', fontSize: 12, fontFamily: 'var(--mono)'}}>
              {msg}
            </div>
          )}

          {loading ? (
            <div style={{padding: 20, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-2)'}}>
              Loading credential status...
            </div>
          ) : (
            <>
              <div style={{padding: 12, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 4}}>
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6}}>
                  <strong style={{fontSize: 13, color: 'var(--ink)'}}>Alpha Vantage Market Data</strong>
                  {avKey ? (
                    <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent)', fontWeight: 600, background: 'rgba(183,71,42,0.1)', padding: '2px 6px', borderRadius: 3}}>
                      Personal Key: {avKey.key_hint}
                    </span>
                  ) : (
                    <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ok)', fontWeight: 600, background: 'rgba(46,125,50,0.1)', padding: '2px 6px', borderRadius: 3}}>
                      Free Tier (.env Key)
                    </span>
                  )}
                </div>
                <div style={{fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5, fontFamily: 'var(--serif)'}}>
                  {avKey
                    ? 'Your personal API key is stored with symmetric encryption. It is automatically injected into all your training sessions, hourly market data queries, and portfolio advisory inference.'
                    : 'No custom key saved. Requests automatically use the shared free tier key configured on the server (25 requests/day limit).'}
                </div>
                {avKey && (
                  <div style={{marginTop: 8}}>
                    <button type="button" className="btn sm ghost" onClick={handleDeleteKey} disabled={saving} style={{color: 'var(--bad)', borderColor: 'var(--bad)', fontSize: 11}}>
                      Remove Custom Key (Revert to Free Tier)
                    </button>
                  </div>
                )}
              </div>

              <form onSubmit={handleSaveKey} style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                <label className="mono-tiny">
                  {avKey ? 'Replace Alpha Vantage Key' : 'Add Custom Alpha Vantage Key'}
                </label>
                <div style={{display: 'flex', gap: 8}}>
                  <input
                    type="password"
                    required
                    value={apiKeyInput}
                    onChange={(e) => setApiKeyInput(e.target.value)}
                    placeholder="Enter Alpha Vantage API Key"
                    style={{flex: 1, padding: '8px 10px', fontFamily: 'var(--mono)', fontSize: 13, background: 'var(--paper)', border: '1px solid var(--rule)', color: 'var(--ink)'}}
                  />
                  <button type="submit" className="btn primary sm" disabled={saving || !apiKeyInput.trim()}>
                    {saving ? 'Encrypting...' : 'Save Encrypted'}
                  </button>
                </div>
                <div className="mono-tiny" style={{color: 'var(--ink-3)', fontSize: 11}}>
                  Keys are encrypted server-side with AES-256 Fernet using the secure application secret before storage.
                </div>
              </form>
            </>
          )}
        </div>

        <div className="modal-foot">
          <button type="button" className="btn ghost" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PublishModal, TweaksPanel, UserAuthModal, UserApiKeysModal });