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

// Shared number formatter: "not reported" is a dash, never 0.
const fmt = (v, digits = 2) =>
  v === null || v === undefined || Number.isNaN(v)
    ? '-'
    : Number(v).toLocaleString(undefined, { maximumFractionDigits: digits });

// ============================================================
// HOME PAGE
// ============================================================
const Home = ({ onNav }) => {
  const D = window.RLX_DATA;
  const research = D.researchRows || [];
  const optrl = D.optrlRows || [];
  const playground = D.playgroundRows || [];

  // Distinct values of a CSV column across every board.
  const uniqueCount = (field) => new Set(
    [...research, ...optrl, ...playground].map(r => r[field]).filter(Boolean)
  ).size;

  const byMean = (rows) => [...rows]
    .filter(r => r.mean_reward != null)
    .sort((a, b) => b.mean_reward - a.mean_reward)
    .slice(0, 3);
  const topPub = byMean(research);
  const topOpt = byMean(optrl);

  return (
    <div>
      <div className="page-header">
        <div>
          <h1>
            The public RL benchmark.
            <span className="annot">// maintained by OptRL Lab</span>
          </h1>
        </div>
        <div className="lede">
          Rank the latest published algorithms against OptRL's proprietary baselines,
          on environments that touch real-world operations, warehouses, inventory,
          portfolios, freight. Try them yourself in the playground.
        </div>
      </div>

      {/* Every tile below is counted from live board data.  Nothing is
          hardcoded: a tile with no data reads 0, not a stale number. */}
      <div className="stat-grid" style={{marginTop: 24}}>
        <div className="stat-cell">
          <div className="k">Benchmark entries</div>
          <div className="v">{research.length + optrl.length + playground.length}</div>
          <div className="d">
            {research.length} research · {optrl.length} optrl · {playground.length} playground
          </div>
        </div>
        <div className="stat-cell">
          <div className="k">Algorithms</div>
          <div className="v">{uniqueCount('algorithm')}</div>
          <div className="d">{uniqueCount('learning_type')} learning types</div>
        </div>
        <div className="stat-cell">
          <div className="k">Environments</div>
          <div className="v">{uniqueCount('environment')}</div>
          <div className="d">across {uniqueCount('benchmark_suite')} benchmark suites</div>
        </div>
        <div className="stat-cell">
          <div className="k">Community runs</div>
          <div className="v">{playground.length}</div>
          <div className="d">published from the OptRL Playground</div>
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2><span className="num">01 /</span>Top 3, Research</h2>
          <button className="btn ghost sm" onClick={() => onNav('leaderboards')}>See full board →</button>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16}}>
          {topPub.length === 0 && (
            <div className="mono-tiny" style={{color: 'var(--ink-3)'}}>
              No research benchmarks loaded yet.
            </div>
          )}
          {topPub.map((r, i) => (
            <div key={r.id} className="card ink">
              <span className="corner tl"/><span className="corner tr"/><span className="corner bl"/><span className="corner br"/>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}>
                <div style={{fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 700, color: i===0 ? 'var(--accent-4)' : 'var(--accent)'}}>{i+1}</div>
                <span className="mono-tiny" style={{color: 'var(--accent-3)'}}>{r.benchmark_suite}</span>
              </div>
              <div className="algo-name" style={{fontSize: 18, marginTop: 10}}>{r.algorithm}</div>
              <div className="algo-cite" style={{marginTop: 2}}>{r.environment} · {r.learning_type || '-'}</div>
              <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 14, fontFamily: 'var(--mono)', fontSize: 11}}>
                <span>mean <strong style={{color: 'var(--ink)', fontSize: 13}}>{fmt(r.mean_reward)}</strong></span>
                <span>sd {fmt(r.std_reward)}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2><span className="num">02 /</span>Top 3, OptRL</h2>
          <button className="btn ghost sm" onClick={() => onNav('leaderboards')}>See full board →</button>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16}}>
          {topOpt.length === 0 && (
            <div className="mono-tiny" style={{color: 'var(--ink-3)'}}>
              No OptRL benchmarks loaded yet.
            </div>
          )}
          {topOpt.map((r, i) => (
            <div key={r.id} className="card ink">
              <span className="corner tl"/><span className="corner tr"/><span className="corner bl"/><span className="corner br"/>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}>
                <div style={{fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 700, color: i===0 ? 'var(--accent-4)' : 'var(--accent)'}}>{i+1}</div>
                <span className="mono-tiny" style={{color: 'var(--accent-3)'}}>{r.benchmark_suite}</span>
              </div>
              <div className="algo-name" style={{fontSize: 18, marginTop: 10}}>{r.algorithm}</div>
              <div className="algo-cite" style={{marginTop: 2}}>{r.environment} · {r.learning_type || '-'}</div>
              <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 14, fontFamily: 'var(--mono)', fontSize: 11}}>
                <span>mean <strong style={{color: 'var(--ink)', fontSize: 13}}>{fmt(r.mean_reward)}</strong></span>
                <span>{r.success_rate != null ? r.success_rate.toFixed(1) + '%' : '-'}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2><span className="num">03 /</span>Try it in OptRL Playground</h2>
          <button className="btn primary sm" onClick={() => { window.location.href = '/dashboard/'; }}>Open Playground ↗</button>
        </div>
        <div className="mono-tiny" style={{marginBottom: 12, color: 'var(--ink-3)'}}>
          OptRL Playground is a separate interactive product, pick an algo, run it on a real operational env, publish your run back here.
        </div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12}}>
          {D.playgroundEnvs.map(e => (
            <div key={e.id} className="env-card" onClick={() => { window.location.href = '/dashboard/?env=' + encodeURIComponent(e.id); }} style={{cursor: 'pointer'}}>
              <div className="env-title">{e.name}</div>
              <div className="mono-tiny" style={{marginTop: 4, color: 'var(--ink-3)'}}>{e.description.slice(0, 60)}…</div>
              <div className="env-meta">
                <span>obs={e.obsDim}</span>
                <span>act={e.actDim}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ============================================================
// ADMIN
// ============================================================
// Sign-in gate.  The admin API is cookie+bearer authenticated; until
// we hold a token there is nothing useful to render here.
const AdminLogin = ({ onDone }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setErr(null);
    try {
      await window.RLX_API.login(email.trim(), password);
      onDone();
    } catch (ex) {
      setErr(ex.message || 'login failed');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      <div className="page-header">
        <div><h1>RLX Admin<span className="annot">// sign in</span></h1></div>
        <div className="lede">
          Upload Research and OptRL benchmark sheets, review submissions, manage users,
          and audit actions.
        </div>
      </div>
      <form onSubmit={submit} data-testid="admin-login"
            style={{maxWidth: 380, border: '1px solid var(--ink)', background: 'var(--paper)', padding: 18}}>
        <div className="mono-tiny" style={{marginBottom: 10}}>admin credentials</div>
        <input type="email" required value={email} onChange={e => setEmail(e.target.value)}
               placeholder="admin@optrl.lab" data-testid="admin-email"
               style={{width: '100%', padding: 8, marginBottom: 8, fontFamily: 'var(--mono)', fontSize: 13}} />
        <input type="password" required value={password} onChange={e => setPassword(e.target.value)}
               placeholder="password" data-testid="admin-password"
               style={{width: '100%', padding: 8, marginBottom: 12, fontFamily: 'var(--mono)', fontSize: 13}} />
        <button className="btn primary" type="submit" disabled={busy} data-testid="admin-signin">
          {busy ? 'signing in…' : 'Sign in'}
        </button>
        {err && (
          <div className="mono-tiny" data-testid="admin-login-error"
               style={{marginTop: 10, color: 'var(--bad)'}}>{err}</div>
        )}
      </form>
    </div>
  );
};

const Admin = () => {
  const [authed, setAuthed] = useState(() => window.RLX_API.isAuthed());
  const [section, setSection] = useState('upload');
  const [profile, setProfile] = useState(null);
  const [reloadingCache, setReloadingCache] = useState(false);
  const [cacheMsg, setCacheMsg] = useState(null);

  const fetchProfile = useCallback(() => {
    if (!window.RLX_API.isAuthed()) return;
    window.RLX_API.whoami()
      .then(p => setProfile(p))
      .catch(() => {});
  }, []);

  useEffect(() => {
    if (authed) {
      fetchProfile();
    }
  }, [authed, fetchProfile]);

  useEffect(() => {
    const handleAuth = (e) => setAuthed(e.detail.authed);
    window.addEventListener('rlx:auth', handleAuth);
    return () => window.removeEventListener('rlx:auth', handleAuth);
  }, []);

  if (!authed) return <AdminLogin onDone={() => setAuthed(true)} />;

  const nav = [
    { id: 'upload', label: 'Upload Sheet' },
    { id: 'analytics', label: 'Analytics' },
    { id: 'users', label: 'User Management' },
    { id: 'audit', label: 'Audit Log' },
    { id: 'admins', label: 'Staff Admins' },
  ];

  const signOut = () => { window.RLX_API.logout(); setAuthed(false); };

  const handleReloadCache = async () => {
    setReloadingCache(true);
    setCacheMsg(null);
    try {
      await window.RLX_API.reloadCache();
      setCacheMsg('Cache reloaded!');
      setTimeout(() => setCacheMsg(null), 4000);
    } catch (e) {
      setCacheMsg('Failed: ' + (e.message || 'error'));
      setTimeout(() => setCacheMsg(null), 4000);
    } finally {
      setReloadingCache(false);
    }
  };

  return (
    <div>
      <div className="page-header">
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 12}}>
          <div>
            <h1>
              RLX Admin
              <span className="annot">// internal · optrl.lab</span>
            </h1>
            <div className="lede">
              Upload Research and OptRL benchmark sheets, monitor platform
              analytics, manage users, and audit actions.
            </div>
          </div>
          {profile && (
            <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
              <div style={{border: '1px solid var(--rule)', background: 'var(--paper-2)', padding: '6px 12px', fontFamily: 'var(--mono)', fontSize: 11, display: 'flex', alignItems: 'center', gap: 8}}>
                <span style={{color: 'var(--ink-3)'}}>Operator:</span>
                <strong style={{color: 'var(--ink)'}}>{profile.email}</strong>
                <span className="cls-badge" style={{color: 'var(--accent)'}}>{profile.role}</span>
              </div>
              <button className="btn sm ghost" onClick={signOut}
                      style={{color: 'var(--bad)', borderColor: 'var(--rule)', padding: '6px 12px', fontSize: 11, fontWeight: 600}}>
                Sign Out
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="admin-grid">
        <div className="admin-nav">
          <div className="mono-tiny" style={{padding: '4px 14px 10px', borderBottom: '1px solid var(--rule-soft)', marginBottom: 6, display: 'flex', justifyContent: 'space-between'}}>
            <span>signed in</span>
            <a href="#" onClick={e => { e.preventDefault(); signOut(); }}
               style={{color: 'var(--ink-3)'}} data-testid="admin-signout">sign out</a>
          </div>
          {nav.map(n => (
            <button key={n.id} className={`admin-nav-item ${section === n.id ? 'active' : ''}`} onClick={() => setSection(n.id)}>
              <span>{n.label}</span>
            </button>
          ))}
          <div style={{marginTop: 20, paddingTop: 12, borderTop: '1px dotted var(--rule)'}}>
            <button className="btn sm ghost" style={{width: '100%', fontSize: 10}} onClick={handleReloadCache} disabled={reloadingCache}>
              {reloadingCache ? 'Reloading...' : '↻ Reload Cache'}
            </button>
            {cacheMsg && <div className="mono-tiny" style={{marginTop: 6, color: 'var(--accent)', textAlign: 'center'}}>{cacheMsg}</div>}
          </div>
        </div>

        <div>
          {section === 'upload' && <AdminUpload />}
          {section === 'analytics' && <AdminAnalytics />}
          {section === 'users' && <AdminUsers />}
          {section === 'audit' && <AdminAudit />}
          {section === 'admins' && <AdminAdmins currentAdminId={profile?.id} />}
        </div>
      </div>
    </div>
  );
};

// Real CSV ingestion.
const AdminUpload = () => {
  const [drag, setDrag] = useState(false);
  const [source, setSource] = useState('paper');
  const [mode, setMode] = useState('upsert');
  const [busy, setBusy] = useState(false);
  const [result, setResult] = useState(null);
  const [err, setErr] = useState(null);
  const [history, setHistory] = useState([]);
  const inputRef = useRef(null);

  const loadHistory = () => {
    window.RLX_API.uploadHistory(10)
      .then(b => setHistory(b.entries || []))
      .catch(() => {});
  };
  useEffect(() => { loadHistory(); }, []);

  const send = async (f) => {
    if (!f) return;
    setBusy(true); setErr(null); setResult(null);
    try {
      const body = await window.RLX_API.upload(f, source, mode);
      setResult(body);
      await window.RLX_API.refresh();
      loadHistory();
    } catch (ex) {
      setErr(ex.message || 'upload failed');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      <div className="section-head" style={{marginBottom: 14}}>
        <h2><span className="num">UP /</span>Upload Benchmark Sheet</h2>
        <button className="btn sm ghost" onClick={loadHistory}>↻ Refresh History</button>
      </div>

      <div className="filter-row" style={{marginBottom: 12}}>
        <span className="label">Board</span>
        <button className={`chip ${source === 'paper' ? 'active' : ''}`}
                onClick={() => setSource('paper')} data-testid="src-paper">Research</button>
        <button className={`chip ${source === 'proprietary' ? 'active' : ''}`}
                onClick={() => setSource('proprietary')} data-testid="src-proprietary">OptRL</button>
        <div style={{width: 20}} />
        <span className="label">On duplicate</span>
        <select className="chip" style={{padding: '5px 8px'}} value={mode}
                onChange={e => setMode(e.target.value)} data-testid="upload-mode">
          <option value="upsert">upsert · newest file wins</option>
          <option value="skip">skip · keep existing</option>
          <option value="strict">strict · report as error</option>
        </select>
        <div className="grow" />
        <span className="mono-tiny">playground rows are published by users, not uploaded</span>
      </div>

      <input ref={inputRef} type="file" accept=".csv,text/csv" style={{display: 'none'}}
             data-testid="upload-input"
             onChange={e => send(e.target.files[0])} />

      <div
        className={`dropzone ${drag ? 'drag' : ''}`}
        data-testid="dropzone"
        onDragEnter={e => { e.preventDefault(); setDrag(true); }}
        onDragOver={e => { e.preventDefault(); setDrag(true); }}
        onDragLeave={() => setDrag(false)}
        onDrop={e => { e.preventDefault(); setDrag(false); send(e.dataTransfer.files[0]); }}
        onClick={() => inputRef.current && inputRef.current.click()}
      >
        <div style={{fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 600}}>
          {busy ? 'uploading…' : 'Drop .csv here'}
        </div>
        <div className="mono-tiny" style={{marginTop: 8}}>
          Algorithm, Environment, Learning Type, Benchmark Suite, Mean Reward,
          Stability (SD/SE), Success Rate (%), Training Steps, Min Reward,
          Max Reward, Primary Citation
        </div>
        <div className="mono-tiny" style={{marginTop: 4, color: 'var(--ink-3)'}}>
          only Algorithm and Environment are required
        </div>
        <button className="btn primary" style={{marginTop: 16}} disabled={busy}>Browse files</button>
      </div>

      {err && (
        <div className="mono" data-testid="upload-error"
             style={{marginTop: 16, padding: '10px 14px', border: '1px solid var(--bad)', color: 'var(--bad)'}}>
          upload failed · {err}
        </div>
      )}

      {result && (
        <div style={{marginTop: 20, border: '1px solid var(--ink)', background: 'var(--paper)'}}
             data-testid="upload-result">
          <div style={{padding: '10px 14px', background: 'var(--paper-2)', borderBottom: '1px solid var(--ink)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
            <span className="mono">
              <strong>{result.filename}</strong> · {result.source} · mode {result.mode}
            </span>
            <span className={`status ${result.rows_failed ? 'warn' : 'ok'}`}>{result.status}</span>
          </div>
          <div style={{padding: 14}}>
            <div style={{display: 'flex', gap: 28, marginBottom: 12}}>
              {[
                ['inserted', result.rows_inserted, 'var(--ok)'],
                ['updated', result.rows_updated, 'var(--accent)'],
                ['unchanged', result.rows_unchanged, 'var(--ink-3)'],
                ['failed', result.rows_failed, result.rows_failed ? 'var(--bad)' : 'var(--ink-3)'],
              ].map(([k, v, c]) => (
                <div key={k}>
                  <div className="mono-tiny">{k}</div>
                  <div style={{fontFamily: 'var(--mono)', fontSize: 22, color: c}}
                       data-testid={`rows-${k}`}>{v}</div>
                </div>
              ))}
            </div>
            <div className="mono-tiny">
              live on the public leaderboard now: other clients pick it up within 5s
            </div>
            {result.errors && result.errors.length > 0 && (
              <div style={{marginTop: 12}}>
                <div className="mono-tiny" style={{marginBottom: 6}}>row errors (first 10)</div>
                <table className="tbl">
                  <thead><tr><th>Row</th><th>Error</th><th>Detail</th></tr></thead>
                  <tbody>
                    {result.errors.slice(0, 10).map((e, i) => (
                      <tr key={i}>
                        <td className="mono">{e.row}</td>
                        <td className="mono">{e.error}</td>
                        <td className="mono-tiny">{e.detail}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      )}

      <div style={{marginTop: 20}}>
        <div className="mono-tiny" style={{marginBottom: 8}}>recent uploads</div>
        <table className="tbl" style={{border: '1px solid var(--rule)'}} data-testid="upload-history">
          <thead>
            <tr>
              <th>File</th><th>Board</th><th className="num">Ins</th><th className="num">Upd</th>
              <th className="num">Unch</th><th className="num">Fail</th><th>Uploaded</th><th>Status</th>
            </tr>
          </thead>
          <tbody>
            {history.length === 0 && (
              <tr><td colSpan={8} className="mono-tiny">no uploads yet</td></tr>
            )}
            {history.map(u => (
              <tr key={u.id}>
                <td className="mono">{u.filename}</td>
                <td className="mono">{u.source}</td>
                <td className="num mono">{u.rows_inserted}</td>
                <td className="num mono">{u.rows_updated}</td>
                <td className="num mono">{u.rows_unchanged}</td>
                <td className="num mono">{u.rows_failed}</td>
                <td className="mono">{(u.created_at || '').replace('T', ' ').slice(0, 16)}</td>
                <td><span className={`status ${u.status === 'completed' ? 'ok' : 'warn'}`}>{u.status}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const AdminAnalytics = () => {
  const [windowDays, setWindowDays] = useState(30);
  const [summary, setSummary] = useState(null);
  const [submissions, setSubmissions] = useState(null);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);

  const loadData = useCallback(() => {
    setLoading(true); setErr(null);
    Promise.all([
      window.RLX_API.analyticsSummary(windowDays),
      window.RLX_API.analyticsSubmissions(windowDays),
    ])
      .then(([sum, sub]) => {
        setSummary(sum);
        setSubmissions(sub);
      })
      .catch(e => setErr(e.message || 'Failed to load analytics'))
      .finally(() => setLoading(false));
  }, [windowDays]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const calcDiff = (curr, prior) => {
    if (prior === 0) return curr > 0 ? `+${curr}` : '0';
    const diff = curr - prior;
    return diff >= 0 ? `+${diff} vs prev` : `${diff} vs prev`;
  };

  const calcPct = (curr, prior) => {
    if (prior === 0) return curr > 0 ? '↑ 100%' : '-';
    const pct = ((curr - prior) / prior) * 100;
    return `${pct >= 0 ? '↑' : '↓'} ${Math.abs(pct).toFixed(0)}% vs prev`;
  };

  const buckets = submissions?.buckets || [];
  const maxCount = Math.max(...buckets.map(b => b.count), 5);

  return (
    <div>
      <div className="section-head" style={{marginBottom: 14}}>
        <h2><span className="num">A /</span>Analytics</h2>
        <div style={{display: 'flex', alignItems: 'center', gap: 6}}>
          {[7, 30, 90].map(d => (
            <button key={d} className={`chip ${windowDays === d ? 'active' : ''}`}
                    onClick={() => setWindowDays(d)}>
              {d}d
            </button>
          ))}
          <button className="btn sm ghost" onClick={loadData}>↻</button>
        </div>
      </div>

      {err && <div className="mono" style={{color: 'var(--bad)', marginBottom: 12}}>{err}</div>}

      {summary && (
        <div className="stat-grid" style={{gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))'}}>
          <div className="stat-cell">
            <div className="k">Total runs · {windowDays}d</div>
            <div className="v">{summary.total_runs_window}</div>
            <div className="d" style={{color: summary.total_runs_window >= summary.total_runs_prior ? 'var(--ok)' : 'var(--bad)'}}>
              {calcPct(summary.total_runs_window, summary.total_runs_prior)}
            </div>
          </div>
          <div className="stat-cell">
            <div className="k">Verified rate</div>
            <div className="v">{(summary.verified_rate * 100).toFixed(0)}%</div>
            <div className="d">{summary.verified_count} verified of {summary.total_runs_window}</div>
          </div>
          <div className="stat-cell">
            <div className="k">Top env</div>
            <div className="v" style={{fontSize: 20}}>{summary.top_env ? summary.top_env.env_key : '-'}</div>
            <div className="d">{summary.top_env ? `${summary.top_env.count} runs (${(summary.top_env.share * 100).toFixed(0)}%)` : 'No runs'}</div>
          </div>
          <div className="stat-cell">
            <div className="k">New users · {windowDays}d</div>
            <div className="v">{summary.new_users_window}</div>
            <div className="d" style={{color: 'var(--ok)'}}>{calcDiff(summary.new_users_window, summary.new_users_prior)}</div>
          </div>
          <div className="stat-cell">
            <div className="k">Best S2R Gap ★</div>
            <div className="v" style={{fontSize: 20}}>
              {summary.best_s2r_gap ? summary.best_s2r_gap.s2r_gap.toFixed(3) : '-'}
            </div>
            <div className="d">{summary.best_s2r_gap ? summary.best_s2r_gap.algorithm : 'No data yet'}</div>
          </div>
        </div>
      )}

      {/* Real Histogram Chart */}
      <div style={{marginTop: 20, border: '1px solid var(--rule)', padding: 20, background: 'var(--paper)'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12}}>
          <div className="mono-tiny">daily submission volume · last {windowDays}d (real live data)</div>
          <div className="mono-tiny">{submissions?.total || 0} total submissions</div>
        </div>

        {buckets.length === 0 ? (
          <div className="mono-tiny" style={{padding: '40px 0', textAlign: 'center'}}>No submission data in this window</div>
        ) : (
          <div>
            <svg width="100%" height="180" viewBox={`0 0 ${Math.max(buckets.length * 24, 600)} 180`} preserveAspectRatio="none">
              {buckets.map((b, i) => {
                const totalW = Math.max(buckets.length * 24, 600);
                const step = totalW / buckets.length;
                const barW = Math.max(step - 4, 6);
                const h = (b.count / maxCount) * 140;
                const x = i * step + 2;
                const y = 160 - h;
                return (
                  <g key={b.date}>
                    <title>{`${b.date}: ${b.count} runs`}</title>
                    <rect x={x} y={y} width={barW} height={Math.max(h, b.count > 0 ? 3 : 0)}
                          fill={b.count > 0 ? (i >= buckets.length - 3 ? 'var(--accent)' : 'var(--ink)') : 'var(--rule)'}
                          opacity={b.count > 0 ? (i >= buckets.length - 3 ? 0.9 : 0.6) : 0.2} />
                  </g>
                );
              })}
              <line x1="0" y1="160" x2={Math.max(buckets.length * 24, 600)} y2="160" stroke="var(--ink)" />
            </svg>
            <div className="mono-tiny" style={{display: 'flex', justifyContent: 'space-between', marginTop: 4}}>
              <span>{buckets[0]?.date}</span>
              <span>{buckets[Math.floor(buckets.length / 2)]?.date}</span>
              <span>{buckets[buckets.length - 1]?.date}</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const AdminUsers = () => {
  const [users, setUsers] = useState([]);
  const [total, setTotal] = useState(0);
  const [role, setRole] = useState('');
  const [verified, setVerified] = useState('');
  const [suspended, setSuspended] = useState('');
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);

  // Invite modal
  const [inviteOpen, setInviteOpen] = useState(false);
  const [inviteForm, setInviteForm] = useState({ display_name: '', social_platform: 'x', social_handle: '', role: 'contributor' });
  const [inviting, setInviting] = useState(false);

  // Role & Suspend modals
  const [roleModal, setRoleModal] = useState(null);
  const [suspendModal, setSuspendModal] = useState(null);
  const [actionBusy, setActionBusy] = useState(false);

  const loadUsers = useCallback(() => {
    setLoading(true); setErr(null);
    const params = { limit: 50 };
    if (role) params.role = role;
    if (verified !== '') params.verified = verified;
    if (suspended !== '') params.is_suspended = suspended;

    window.RLX_API.listUsers(params)
      .then(res => {
        setUsers(res.entries || []);
        setTotal(res.total || 0);
      })
      .catch(e => setErr(e.message || 'Failed to load users'))
      .finally(() => setLoading(false));
  }, [role, verified, suspended]);

  useEffect(() => {
    loadUsers();
  }, [loadUsers]);

  const submitInvite = async (e) => {
    e.preventDefault();
    setInviting(true);
    try {
      await window.RLX_API.inviteUser({
        display_name: inviteForm.display_name.trim() || null,
        social_platform: inviteForm.social_platform.trim() || null,
        social_handle: inviteForm.social_handle.trim().replace(/^@/, '') || null,
        role: inviteForm.role,
      });
      setInviteOpen(false);
      setInviteForm({ display_name: '', social_platform: 'x', social_handle: '', role: 'contributor' });
      loadUsers();
    } catch (ex) {
      alert('Invite failed: ' + (ex.message || 'error'));
    } finally {
      setInviting(false);
    }
  };

  const submitRoleChange = async () => {
    if (!roleModal) return;
    setActionBusy(true);
    try {
      await window.RLX_API.changeUserRole(roleModal.user.id, roleModal.role);
      setRoleModal(null);
      loadUsers();
    } catch (ex) {
      alert('Role update failed: ' + (ex.message || 'error'));
    } finally {
      setActionBusy(false);
    }
  };

  const submitSuspend = async () => {
    if (!suspendModal) return;
    setActionBusy(true);
    try {
      await window.RLX_API.suspendUser(suspendModal.user.id, suspendModal.is_suspended, suspendModal.reason.trim() || null);
      setSuspendModal(null);
      loadUsers();
    } catch (ex) {
      alert('Suspension update failed: ' + (ex.message || 'error'));
    } finally {
      setActionBusy(false);
    }
  };

  return (
    <div>
      <div className="section-head" style={{marginBottom: 14}}>
        <h2><span className="num">U /</span>User Management</h2>
        <button className="btn primary sm" onClick={() => setInviteOpen(true)}>+ Invite User</button>
      </div>

      <div className="filter-row" style={{marginBottom: 14, flexWrap: 'wrap', gap: 8}}>
        <span className="label">Role</span>
        <select className="chip" value={role} onChange={e => setRole(e.target.value)}>
          <option value="">All Roles</option>
          <option value="contributor">contributor</option>
          <option value="reviewer">reviewer</option>
          <option value="admin">admin</option>
        </select>

        <span className="label" style={{marginLeft: 8}}>Verified</span>
        <select className="chip" value={verified} onChange={e => setVerified(e.target.value)}>
          <option value="">All</option>
          <option value="true">Verified only</option>
          <option value="false">Unverified only</option>
        </select>

        <span className="label" style={{marginLeft: 8}}>Status</span>
        <select className="chip" value={suspended} onChange={e => setSuspended(e.target.value)}>
          <option value="">All</option>
          <option value="false">Active only</option>
          <option value="true">Suspended only</option>
        </select>

        <button className="btn sm ghost" onClick={loadUsers}>↻ Refresh</button>
      </div>

      {err && <div className="mono" style={{color: 'var(--bad)', marginBottom: 12}}>{err}</div>}

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>User ID</th>
              <th>Handle / Name</th>
              <th>Role</th>
              <th className="num">Runs</th>
              <th>Joined</th>
              <th>Verified</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading && <tr><td colSpan={8} className="mono-tiny" style={{padding: 20}}>Loading users…</td></tr>}
            {!loading && users.length === 0 && (
              <tr><td colSpan={8} className="mono-tiny" style={{padding: 20}}>No users found</td></tr>
            )}
            {!loading && users.map(u => (
              <tr key={u.id}>
                <td className="mono" style={{fontSize: 10, color: 'var(--ink-3)'}}>{u.id.slice(0, 8)}…</td>
                <td className="mono">
                  <strong>{u.social_handle ? `@${u.social_handle}` : u.display_name || '@anonymous'}</strong>
                  {u.display_name && u.social_handle && (
                    <span className="mono-tiny" style={{marginLeft: 6, color: 'var(--ink-3)'}}>({u.display_name})</span>
                  )}
                </td>
                <td>
                  <span className="cls-badge" style={{color: u.role === 'admin' ? 'var(--accent)' : u.role === 'reviewer' ? 'var(--accent-3)' : 'var(--ink-3)'}}>
                    {u.role}
                  </span>
                </td>
                <td className="num mono">{u.session_count || 0}</td>
                <td className="mono" style={{fontSize: 11, color: 'var(--ink-3)'}}>
                  {(u.created_at || '').slice(0, 10)}
                </td>
                <td>
                  {u.social_handle ? <span className="status ok">yes</span> : <span className="status warn">no</span>}
                </td>
                <td>
                  {u.is_suspended ? <span className="status bad">suspended</span> : <span className="status ok">active</span>}
                </td>
                <td>
                  <div style={{display: 'flex', gap: 4}}>
                    <button className="btn sm ghost" onClick={() => setRoleModal({ user: u, role: u.role })}>role</button>
                    {u.is_suspended ? (
                      <button className="btn sm ghost" style={{color: 'var(--ok)'}} onClick={() => setSuspendModal({ user: u, is_suspended: false, reason: '' })}>
                        unsuspend
                      </button>
                    ) : (
                      <button className="btn sm ghost" style={{color: 'var(--bad)'}} onClick={() => setSuspendModal({ user: u, is_suspended: true, reason: '' })}>
                        suspend
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Invite Modal */}
      {inviteOpen && (
        <div className="admin-modal-overlay" onClick={() => !inviting && setInviteOpen(false)}>
          <div className="admin-modal" onClick={e => e.stopPropagation()} style={{maxWidth: 440}}>
            <div className="admin-modal-head">
              <span className="mono"><strong>Invite / Pre-register User</strong></span>
              <button className="btn sm ghost" onClick={() => setInviteOpen(false)}>✕</button>
            </div>
            <form onSubmit={submitInvite} className="admin-modal-body">
              <div className="mono-tiny" style={{marginBottom: 4}}>Display Name</div>
              <input type="text" value={inviteForm.display_name} onChange={e => setInviteForm({...inviteForm, display_name: e.target.value})}
                     placeholder="e.g. Alice Chen" style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 10}} />
              
              <div className="mono-tiny" style={{marginBottom: 4}}>Social Handle</div>
              <input type="text" value={inviteForm.social_handle} onChange={e => setInviteForm({...inviteForm, social_handle: e.target.value})}
                     placeholder="e.g. alice_rl" style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 10}} />
              
              <div className="mono-tiny" style={{marginBottom: 4}}>Social Platform</div>
              <input type="text" value={inviteForm.social_platform} onChange={e => setInviteForm({...inviteForm, social_platform: e.target.value})}
                     placeholder="x" style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 10}} />
              
              <div className="mono-tiny" style={{marginBottom: 4}}>Role</div>
              <select value={inviteForm.role} onChange={e => setInviteForm({...inviteForm, role: e.target.value})}
                      style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 16}}>
                <option value="contributor">contributor (standard)</option>
                <option value="reviewer">reviewer</option>
                <option value="admin">admin</option>
              </select>

              <div style={{display: 'flex', justifyContent: 'flex-end', gap: 8}}>
                <button type="button" className="btn ghost sm" onClick={() => setInviteOpen(false)} disabled={inviting}>Cancel</button>
                <button type="submit" className="btn primary sm" disabled={inviting}>{inviting ? 'Saving…' : 'Create User Row'}</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Role Change Modal */}
      {roleModal && (
        <div className="admin-modal-overlay" onClick={() => !actionBusy && setRoleModal(null)}>
          <div className="admin-modal" onClick={e => e.stopPropagation()} style={{maxWidth: 380}}>
            <div className="admin-modal-head">
              <span className="mono"><strong>Change Role</strong> · {roleModal.user.social_handle || roleModal.user.display_name || roleModal.user.id.slice(0, 8)}</span>
              <button className="btn sm ghost" onClick={() => setRoleModal(null)}>✕</button>
            </div>
            <div className="admin-modal-body">
              <div className="mono-tiny" style={{marginBottom: 8}}>Select New Role:</div>
              <select value={roleModal.role} onChange={e => setRoleModal({...roleModal, role: e.target.value})}
                      style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 13, marginBottom: 16}}>
                <option value="contributor">contributor</option>
                <option value="reviewer">reviewer</option>
                <option value="admin">admin</option>
              </select>
              <div style={{display: 'flex', justifyContent: 'flex-end', gap: 8}}>
                <button className="btn ghost sm" onClick={() => setRoleModal(null)} disabled={actionBusy}>Cancel</button>
                <button className="btn primary sm" onClick={submitRoleChange} disabled={actionBusy}>{actionBusy ? 'Updating…' : 'Save Role'}</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Suspend / Unsuspend Modal */}
      {suspendModal && (
        <div className="admin-modal-overlay" onClick={() => !actionBusy && setSuspendModal(null)}>
          <div className="admin-modal" onClick={e => e.stopPropagation()} style={{maxWidth: 420}}>
            <div className="admin-modal-head">
              <span className="mono"><strong>{suspendModal.is_suspended ? 'Suspend User' : 'Unsuspend User'}</strong></span>
              <button className="btn sm ghost" onClick={() => setSuspendModal(null)}>✕</button>
            </div>
            <div className="admin-modal-body">
              <div style={{marginBottom: 10, fontSize: 13, fontFamily: 'var(--serif)'}}>
                {suspendModal.is_suspended
                  ? `Are you sure you want to suspend this user? They will be blocked from launching new training sessions.`
                  : `Are you sure you want to unsuspend this user? Their session creation capability will be restored.`}
              </div>
              {suspendModal.is_suspended && (
                <div>
                  <div className="mono-tiny" style={{marginBottom: 4}}>Suspension Reason:</div>
                  <input type="text" value={suspendModal.reason} onChange={e => setSuspendModal({...suspendModal, reason: e.target.value})}
                         placeholder="e.g. Bot traffic, rate limit violation"
                         style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 14}} />
                </div>
              )}
              <div style={{display: 'flex', justifyContent: 'flex-end', gap: 8}}>
                <button className="btn ghost sm" onClick={() => setSuspendModal(null)} disabled={actionBusy}>Cancel</button>
                <button className={`btn sm ${suspendModal.is_suspended ? '' : 'primary'}`}
                        style={suspendModal.is_suspended ? {background: 'var(--bad)', color: '#fff'} : {}}
                        onClick={submitSuspend} disabled={actionBusy}>
                  {actionBusy ? 'Updating…' : suspendModal.is_suspended ? 'Confirm Suspend' : 'Confirm Unsuspend'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const AdminAudit = () => {
  const [entries, setEntries] = useState([]);
  const [total, setTotal] = useState(0);
  const [targetTable, setTargetTable] = useState('');
  const [action, setAction] = useState('');
  const [offset, setOffset] = useState(0);
  const limit = 50;
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);
  const [inspectEntry, setInspectEntry] = useState(null);

  const loadAudit = useCallback(() => {
    setLoading(true); setErr(null);
    const params = { limit, offset };
    if (targetTable) params.target_table = targetTable;
    if (action.trim()) params.action = action.trim();

    window.RLX_API.listAuditLog(params)
      .then(res => {
        setEntries(res.entries || []);
        setTotal(res.total || 0);
      })
      .catch(e => setErr(e.message || 'Failed to load audit log'))
      .finally(() => setLoading(false));
  }, [targetTable, action, offset]);

  useEffect(() => {
    loadAudit();
  }, [loadAudit]);

  return (
    <div>
      <div className="section-head" style={{marginBottom: 14}}>
        <h2><span className="num">L /</span>Audit Log</h2>
        <span className="mono-tiny">{total} total audit records</span>
      </div>

      <div className="filter-row" style={{marginBottom: 14, flexWrap: 'wrap', gap: 8}}>
        <span className="label">Table</span>
        <select className="chip" value={targetTable} onChange={e => { setTargetTable(e.target.value); setOffset(0); }}>
          <option value="">All Tables</option>
          <option value="training_sessions">training_sessions</option>
          <option value="users">users</option>
          <option value="benchmark_entries">benchmark_entries</option>
          <option value="admin_users">admin_users</option>
        </select>

        <span className="label" style={{marginLeft: 8}}>Action</span>
        <input type="text" placeholder="e.g. session.review" value={action}
               onChange={e => { setAction(e.target.value); setOffset(0); }}
               className="chip" style={{padding: '4px 8px', width: 160}} />

        <button className="btn sm ghost" onClick={loadAudit}>↻ Refresh</button>
      </div>

      {err && <div className="mono" style={{color: 'var(--bad)', marginBottom: 12}}>{err}</div>}

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Timestamp</th>
              <th>Actor</th>
              <th>Action</th>
              <th>Target</th>
              <th>Reason</th>
              <th>Diff</th>
            </tr>
          </thead>
          <tbody>
            {loading && <tr><td colSpan={6} className="mono-tiny" style={{padding: 20}}>Loading audit records…</td></tr>}
            {!loading && entries.length === 0 && (
              <tr><td colSpan={6} className="mono-tiny" style={{padding: 20}}>No audit records found</td></tr>
            )}
            {!loading && entries.map(l => (
              <tr key={l.id}>
                <td className="mono" style={{fontSize: 11, color: 'var(--ink-3)'}}>
                  {(l.created_at || '').replace('T', ' ').slice(0, 19)}
                </td>
                <td className="mono" style={{fontSize: 11}}>
                  <span style={{color: 'var(--accent-3)'}}>{l.actor_type}:</span> {l.actor_id}
                </td>
                <td className="mono" style={{fontWeight: 600, color: 'var(--ink)'}}>{l.action}</td>
                <td className="mono" style={{fontSize: 11, color: 'var(--ink-2)'}}>
                  {l.target_table} ({l.target_id ? (l.target_id.length > 10 ? l.target_id.slice(0, 8) + '…' : l.target_id) : '-'})
                </td>
                <td style={{fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 12, color: 'var(--ink-3)'}}>
                  {l.reason || '-'}
                </td>
                <td>
                  {(l.before_state || l.after_state) ? (
                    <button className="btn sm ghost" onClick={() => setInspectEntry(l)}>Inspect</button>
                  ) : (
                    <span className="mono-tiny" style={{color: 'var(--ink-3)'}}>none</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {total > limit && (
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14}}>
          <span className="mono-tiny">Showing {offset + 1}–{Math.min(offset + limit, total)} of {total}</span>
          <div style={{display: 'flex', gap: 6}}>
            <button className="btn sm ghost" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - limit))}>← Previous</button>
            <button className="btn sm ghost" disabled={offset + limit >= total} onClick={() => setOffset(offset + limit)}>Next →</button>
          </div>
        </div>
      )}

      {/* Inspect Diff Modal */}
      {inspectEntry && (
        <div className="admin-modal-overlay" onClick={() => setInspectEntry(null)}>
          <div className="admin-modal" onClick={e => e.stopPropagation()} style={{maxWidth: 680}}>
            <div className="admin-modal-head">
              <span className="mono"><strong>Audit State Mutation</strong> · {inspectEntry.action}</span>
              <button className="btn sm ghost" onClick={() => setInspectEntry(null)}>✕</button>
            </div>
            <div className="admin-modal-body">
              <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14}}>
                <div>
                  <div className="mono-tiny" style={{marginBottom: 4, color: 'var(--bad)'}}>BEFORE STATE</div>
                  <pre className="admin-json-box">{JSON.stringify(inspectEntry.before_state || {}, null, 2)}</pre>
                </div>
                <div>
                  <div className="mono-tiny" style={{marginBottom: 4, color: 'var(--ok)'}}>AFTER STATE</div>
                  <pre className="admin-json-box">{JSON.stringify(inspectEntry.after_state || {}, null, 2)}</pre>
                </div>
              </div>
              <div className="mono-tiny" style={{color: 'var(--ink-3)'}}>
                Target: {inspectEntry.target_table} · ID: {inspectEntry.target_id} · At: {inspectEntry.created_at}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const AdminAdmins = ({ currentAdminId }) => {
  const [admins, setAdmins] = useState([]);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [createForm, setCreateForm] = useState({ email: '', password: '', role: 'admin' });
  const [creating, setCreating] = useState(false);
  const [pwdModal, setPwdModal] = useState(null);
  const [actionBusy, setActionBusy] = useState(false);

  const loadAdmins = useCallback(() => {
    setLoading(true); setErr(null);
    window.RLX_API.listAdmins(true)
      .then(res => setAdmins(res.entries || []))
      .catch(e => setErr(e.message || 'Failed to load admin accounts'))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    loadAdmins();
  }, [loadAdmins]);

  const submitCreate = async (e) => {
    e.preventDefault();
    if (createForm.password.length < 12) {
      alert('Password must be at least 12 characters.');
      return;
    }
    setCreating(true);
    try {
      await window.RLX_API.createAdmin(createForm.email.trim(), createForm.password, createForm.role);
      setCreateOpen(false);
      setCreateForm({ email: '', password: '', role: 'admin' });
      loadAdmins();
    } catch (ex) {
      alert('Failed to create admin: ' + (ex.message || 'error'));
    } finally {
      setCreating(false);
    }
  };

  const toggleActive = async (admin) => {
    const nextActive = !admin.is_active;
    if (!nextActive && admin.id === currentAdminId) {
      alert('You cannot deactivate your own active admin account.');
      return;
    }
    if (!confirm(`Are you sure you want to ${nextActive ? 'reactivate' : 'deactivate'} ${admin.email}?`)) return;
    setActionBusy(true);
    try {
      await window.RLX_API.patchAdmin(admin.id, { is_active: nextActive });
      loadAdmins();
    } catch (ex) {
      alert('Action failed: ' + (ex.message || 'error'));
    } finally {
      setActionBusy(false);
    }
  };

  const submitPasswordReset = async (e) => {
    e.preventDefault();
    if (!pwdModal || pwdModal.password.length < 12) {
      alert('Password must be at least 12 characters.');
      return;
    }
    setActionBusy(true);
    try {
      await window.RLX_API.patchAdmin(pwdModal.admin.id, { password: pwdModal.password });
      setPwdModal(null);
      alert('Password updated successfully.');
    } catch (ex) {
      alert('Password reset failed: ' + (ex.message || 'error'));
    } finally {
      setActionBusy(false);
    }
  };

  return (
    <div>
      <div className="section-head" style={{marginBottom: 14}}>
        <h2><span className="num">S /</span>Staff Console Accounts</h2>
        <button className="btn primary sm" onClick={() => setCreateOpen(true)}>+ Onboard Admin</button>
      </div>

      {err && <div className="mono" style={{color: 'var(--bad)', marginBottom: 12}}>{err}</div>}

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>ID</th>
              <th>Email</th>
              <th>Role</th>
              <th>Status</th>
              <th>Last Login</th>
              <th>Created</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading && <tr><td colSpan={7} className="mono-tiny" style={{padding: 20}}>Loading staff accounts…</td></tr>}
            {!loading && admins.map(a => (
              <tr key={a.id}>
                <td className="mono">{a.id}</td>
                <td className="mono">
                  <strong>{a.email}</strong>
                  {a.id === currentAdminId && <span className="badge" style={{marginLeft: 6}}>YOU</span>}
                </td>
                <td><span className="cls-badge" style={{color: 'var(--accent)'}}>{a.role}</span></td>
                <td>
                  {a.is_active ? <span className="status ok">active</span> : <span className="status bad">inactive</span>}
                </td>
                <td className="mono" style={{fontSize: 10, color: 'var(--ink-3)'}}>
                  {(a.last_login_at || 'never').replace('T', ' ').slice(0, 16)}
                </td>
                <td className="mono" style={{fontSize: 10, color: 'var(--ink-3)'}}>
                  {(a.created_at || '').slice(0, 10)}
                </td>
                <td>
                  <div style={{display: 'flex', gap: 4}}>
                    <button className="btn sm ghost" onClick={() => setPwdModal({ admin: a, password: '' })}>
                      reset pwd
                    </button>
                    {a.id !== currentAdminId && (
                      <button className="btn sm ghost" style={{color: a.is_active ? 'var(--bad)' : 'var(--ok)'}}
                              onClick={() => toggleActive(a)} disabled={actionBusy}>
                        {a.is_active ? 'deactivate' : 'reactivate'}
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Create Admin Modal */}
      {createOpen && (
        <div className="admin-modal-overlay" onClick={() => !creating && setCreateOpen(false)}>
          <div className="admin-modal" onClick={e => e.stopPropagation()} style={{maxWidth: 420}}>
            <div className="admin-modal-head">
              <span className="mono"><strong>Onboard Staff Admin Account</strong></span>
              <button className="btn sm ghost" onClick={() => setCreateOpen(false)}>✕</button>
            </div>
            <form onSubmit={submitCreate} className="admin-modal-body">
              <div className="mono-tiny" style={{marginBottom: 4}}>Email Address</div>
              <input type="email" required value={createForm.email}
                     onChange={e => setCreateForm({...createForm, email: e.target.value})}
                     placeholder="colleague@optrl.lab" style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 10}} />

              <div className="mono-tiny" style={{marginBottom: 4}}>Password (min 12 chars)</div>
              <input type="password" required minLength={12} value={createForm.password}
                     onChange={e => setCreateForm({...createForm, password: e.target.value})}
                     placeholder="••••••••••••" style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 10}} />

              <div className="mono-tiny" style={{marginBottom: 4}}>Role</div>
              <select value={createForm.role} onChange={e => setCreateForm({...createForm, role: e.target.value})}
                      style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 16}}>
                <option value="admin">admin</option>
              </select>

              <div style={{display: 'flex', justifyContent: 'flex-end', gap: 8}}>
                <button type="button" className="btn ghost sm" onClick={() => setCreateOpen(false)} disabled={creating}>Cancel</button>
                <button type="submit" className="btn primary sm" disabled={creating}>{creating ? 'Creating…' : 'Create Account'}</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Reset Password Modal */}
      {pwdModal && (
        <div className="admin-modal-overlay" onClick={() => !actionBusy && setPwdModal(null)}>
          <div className="admin-modal" onClick={e => e.stopPropagation()} style={{maxWidth: 420}}>
            <div className="admin-modal-head">
              <span className="mono"><strong>Reset Password</strong> · {pwdModal.admin.email}</span>
              <button className="btn sm ghost" onClick={() => setPwdModal(null)}>✕</button>
            </div>
            <form onSubmit={submitPasswordReset} className="admin-modal-body">
              <div className="mono-tiny" style={{marginBottom: 4}}>New Password (min 12 chars):</div>
              <input type="password" required minLength={12} value={pwdModal.password}
                     onChange={e => setPwdModal({...pwdModal, password: e.target.value})}
                     placeholder="••••••••••••" style={{width: '100%', padding: 8, fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 14}} />
              <div style={{display: 'flex', justifyContent: 'flex-end', gap: 8}}>
                <button type="button" className="btn ghost sm" onClick={() => setPwdModal(null)} disabled={actionBusy}>Cancel</button>
                <button type="submit" className="btn primary sm" disabled={actionBusy}>{actionBusy ? 'Saving…' : 'Update Password'}</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};


// ============================================================
// DOCS
// ============================================================
const Docs = ({ onNav, setAlgo, setEnvId }) => {
  const D = window.RLX_DATA;
  const apply = (algoName, envId) => {
    setAlgo(algoName);
    if (envId) setEnvId(envId);
    // Straight to the real, API-backed Playground.
    window.location.href = envId ? ('/dashboard/?env=' + encodeURIComponent(envId)) : '/dashboard/';
  };

  const guide = [
    {
      key: 'policy',
      title: 'On-Policy RL',
      subtitle: 'PPO · TRPO · GRPO',
      when: 'You have a fast simulator and want stable, reliable improvement. The agent only learns from data collected by its current policy.',
      avoid: 'Sample-expensive environments, you will throw away every rollout after one gradient step.',
      operational: 'Good first pick for the Warehouse & Inventory envs if you can afford millions of steps.',
      picks: [
        { algo: 'PPO',  env: 'warehouse', label: 'PPO on Warehouse' },
        { algo: 'GRPO', env: 'inventory', label: 'GRPO on Inventory' },
      ],
    },
    {
      key: 'value',
      title: 'Off-Policy RL',
      subtitle: 'SAC · DreamerV3 · TD-MPC2 · Rainbow-DQN',
      when: 'Rollouts are expensive and you want sample-efficiency. Replay buffer lets you reuse every transition.',
      avoid: 'Environments with very sparse rewards and no demonstrations, exploration can stall.',
      operational: 'Strong default for Truck & Portfolio where each rollout is slow and you want every transition to count.',
      picks: [
        { algo: 'SAC',       env: 'portfolio', label: 'SAC on Portfolio' },
        { algo: 'DreamerV3', env: 'truck',     label: 'DreamerV3 on Truck' },
      ],
    },
    {
      key: 'irl',
      title: 'Inverse RL / Imitation',
      subtitle: 'GAIL · AIRL',
      when: 'You have expert demonstrations but no reward function, or your reward is hard to specify correctly.',
      avoid: 'You have no demonstrations, or your experts are noisy & inconsistent.',
      operational: 'Pick this when you already have a human dispatcher’s historical decisions (e.g. truck routes).',
      picks: [
        { algo: 'GAIL', env: 'warehouse', label: 'GAIL on Warehouse (40 demos)' },
        { algo: 'AIRL', env: 'truck',     label: 'AIRL on Truck' },
      ],
    },
    {
      key: 'offline',
      title: 'Offline RL',
      subtitle: 'CQL · IQL · Decision Transformer',
      when: 'You cannot interact with the environment at all, only a fixed logged dataset. Common for finance, healthcare, industrial control.',
      avoid: 'Your dataset is small, or very off-distribution from the policy you actually want to deploy.',
      operational: 'The Portfolio env has 10y of logged trades, start here before ever going online.',
      picks: [
        { algo: 'CQL',                  env: 'portfolio', label: 'CQL on Portfolio' },
        { algo: 'IQL',                  env: 'inventory', label: 'IQL on Inventory' },
        { algo: 'Decision Transformer', env: 'portfolio', label: 'DT on Portfolio' },
      ],
    },
  ];

  return (
    <div>
      <div className="page-header">
        <div><h1>Docs<span className="annot">// how ranking works & when to use what</span></h1></div>
        <div className="lede">
          A quick operator’s guide to choosing an algorithm family, plus how our benchmarks,
          stability, and sim-to-real gap are computed. Click any “apply in playground” to
          jump straight into a run and see the difference.
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2><span className="num">01 /</span>When to use what</h2>
          <span className="mono-tiny">four families · pick by data regime, not by hype</span>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18}}>
          {guide.map(g => (
            <div key={g.key} className="card ink" style={{padding: 22}}>
              <span className="corner tl"/><span className="corner tr"/><span className="corner bl"/><span className="corner br"/>
              <div style={{display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4}}>
                <ClassBadge cls={g.key}/>
                <div style={{fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 22}}>{g.title}</div>
              </div>
              <div className="mono-tiny" style={{color: 'var(--ink-3)', marginBottom: 14}}>{g.subtitle}</div>

              <div style={{display: 'grid', gridTemplateColumns: '72px 1fr', rowGap: 8, columnGap: 10, marginTop: 10, fontFamily: 'var(--serif)', fontSize: 13, lineHeight: 1.5}}>
                <div className="kicker" style={{color: 'var(--ok)'}}>Use if</div>
                <div style={{color: 'var(--ink-2)'}}>{g.when}</div>
                <div className="kicker" style={{color: 'var(--bad)'}}>Avoid if</div>
                <div style={{color: 'var(--ink-2)'}}>{g.avoid}</div>
                <div className="kicker" style={{color: 'var(--accent-3)'}}>Ops note</div>
                <div style={{color: 'var(--ink-2)', fontStyle: 'italic'}}>{g.operational}</div>
              </div>

              <div style={{marginTop: 18, paddingTop: 14, borderTop: '1px dotted var(--rule)'}}>
                <div className="kicker" style={{marginBottom: 8}}>Apply in playground →</div>
                <div style={{display: 'flex', flexWrap: 'wrap', gap: 6}}>
                  {g.picks.map(p => (
                    <button key={p.algo + p.env} className="chip" onClick={() => apply(p.algo, p.env)}>
                      {p.label} →
                    </button>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{marginTop: 18, padding: 16, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderLeft: '3px solid var(--accent)'}}>
          <span className="kicker" style={{color: 'var(--accent)'}}>Rule of thumb</span>
          <div style={{fontFamily: 'var(--serif)', fontSize: 15, fontStyle: 'italic', color: 'var(--ink-2)', marginTop: 6, maxWidth: '80ch'}}>
            Pick by the <strong>data regime you actually have</strong>, not by the paper that came out last week.
            Logged data only → offline. Demos only → IRL. Cheap sim → on-policy. Expensive sim → off-policy.
          </div>
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2><span className="num">02 /</span>How ranking works</h2>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18}}>
          {[
            { t: 'Ranking', b: 'Mean normalized return over a fixed env suite, averaged across 5 seeds. Ties broken by stability (lower std preferred).' },
            { t: 'Stability σ', b: '1 − normalized std across seeds on the same (algo × env) cell. Values closer to 1.0 indicate tighter seed-to-seed reproducibility.' },
            { t: 'Sim→Real Gap ★', b: 'OptRL-exclusive. Score delta between in-distribution eval and a fixed bank of Out-Of-Set random scenarios that perturb dynamics, sensors, and task params.' },
            { t: 'Community submissions', b: 'Playground runs accepted with a verified X/Twitter handle. Submissions without handles enter the flagged queue for admin review.' },
            { t: 'Proprietary ingestion', b: 'OptRL admins upload CSV/XLSX sheets. Schema validation runs server-side; published sheets are versioned and reversible.' },
            { t: 'Environments', b: 'MuJoCo, D4RL, Atari, Procgen, DMC for research; OptRL/* for operational envs (Warehouse, Inventory, Portfolio, Truck).' },
          ].map((s, i) => (
            <div key={i} className="card">
              <span className="kicker" style={{color: 'var(--accent)'}}>{String(i+1).padStart(2,'0')} · {s.t}</span>
              <p style={{fontFamily: 'var(--serif)', fontSize: 14, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 8}}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Home, Admin, Docs });