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

// ============================================================
// SHARED PRIMITIVES
// ============================================================

const ClassBadge = ({ cls }) => {
  const map = {
    policy: { label: 'Policy', klass: 'cls-policy' },
    value: { label: 'Value', klass: 'cls-value' },
    irl: { label: 'IRL', klass: 'cls-irl' },
    offline: { label: 'Offline', klass: 'cls-offline' },
    modelbased: { label: 'Model-Based', klass: 'cls-modelbased' },
    hybrid: { label: 'Hybrid', klass: 'cls-hybrid' },
  };
  const c = map[cls] || { label: cls, klass: '' };
  return <span className={`cls-badge ${c.klass}`}>{c.label}</span>;
};

const NNIndicator = ({ n }) => {
  const max = 4;
  return (
    <span className="nn-indicator" title={`${n} neural network${n>1?'s':''}`}>
      {Array.from({ length: max }).map((_, i) => (
        <span key={i} className={`nn-dot ${i < n ? 'filled' : ''}`} />
      ))}
      <span style={{ marginLeft: 4 }}>×{n}</span>
    </span>
  );
};

const StabilityBar = ({ val }) => (
  <span className="stab-bar" title={`Stability index ${val.toFixed(2)} (1.0 = perfect reproducibility across seeds)`}>
    <span className="fill" style={{ width: `${val * 100}%` }} />
    <span className="val">{val.toFixed(2)}</span>
  </span>
);

const Sparkline = ({ data, w = 70, h = 22, color }) => {
  if (!data || data.length < 2) return null;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const pts = data.map((d, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((d - min) / range) * (h - 2) - 1;
    return [x, y];
  });
  const path = 'M ' + pts.map(p => p.join(' ')).join(' L ');
  const area = path + ` L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg className="spark" width={w} height={h} style={{ color }}>
      <path className="area" d={area} />
      <path d={path} stroke={color || 'currentColor'} fill="none" strokeWidth="1.3" />
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2" fill={color || 'currentColor'} />
    </svg>
  );
};

const S2RGapDisplay = ({ val }) => {
  const pct = (val * 100).toFixed(1);
  const good = val < 0.15;
  const mid = val < 0.25;
  const color = good ? 'var(--ok)' : mid ? 'var(--accent-4)' : 'var(--bad)';
  return (
    <span style={{ color, fontFamily: 'var(--mono)', fontVariantNumeric: 'tabular-nums' }}>
      {pct}%
    </span>
  );
};

// ============================================================
// HEADER + NAV
// ============================================================
const Header = ({ active, onNav, onOpenAuth, onOpenKeys }) => {
  const isPlayground = active === 'playground' || active === 'pg-envs' || active === 'pg-algos' || active === 'pg-sessions' || active === 'pg-train';
  const isAdmin = active === 'admin';
  const activePg = active === 'playground' ? 'pg-envs' : active;
  const [adminAuthed, setAdminAuthed] = useState(() => window.RLX_API && window.RLX_API.isAuthed());
  const [currentUser, setCurrentUser] = useState(null);

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

  useEffect(() => {
    const handler = (e) => setCurrentUser(e.detail?.user || null);
    window.addEventListener('rlx:user-auth', handler);
    if (window.RLX_USER_API) {
      window.RLX_USER_API.getCurrentUser().then(u => setCurrentUser(u)).catch(() => {});
    }
    return () => window.removeEventListener('rlx:user-auth', handler);
  }, []);

  // RLX = results/benchmark site. Playground = separate interactive product.
  const tabs = isPlayground
    ? [
        { id: 'pg-envs',     label: 'Overview' },
        { id: 'pg-sessions', label: 'My Sessions' },
      ]
    : [
        { id: 'home', label: 'Home' },
        { id: 'leaderboards', label: 'Leaderboards' },
        { id: 'docs', label: 'Docs' },
        { id: 'playground', label: 'Playground Dashboard ↗' },
      ];
  return (
    <>
      <div className="topbar">
        <div className="brand">
          <span className="brand-square" aria-hidden="true">
            <img src="assets/optrl-icon-dark.svg?v=2" alt="" width="32" height="32" style={{display: 'block'}}/>
          </span>
          <div className="logo-mark">
            {isPlayground ? (
              <><span className="lm-light">Opt</span><span className="lm-gold">RL</span></>
            ) : (
              <span className="lm-light">RLX</span>
            )}
            {(isAdmin || isPlayground) && (
              <span className="sub">/ {isAdmin ? 'admin' : 'playground'}</span>
            )}
          </div>
          <div className="tagline">
            {isPlayground ? '“Apply algorithms. Run the envs. Publish.”' : '“From Rewards to Reality.”'}
          </div>
        </div>
        <div className="topbar-meta">
          {isAdmin ? (
            <>
              {adminAuthed ? (
                <>
                  <span style={{color: 'var(--accent)'}}><span className="dot" style={{background: 'var(--accent)'}}/>internal · signed in</span>
                  <button className="btn sm ghost" onClick={() => { window.RLX_API.logout(); onNav('admin'); }} style={{color: 'var(--bad)', borderColor: 'var(--rule)', padding: '3px 8px', fontSize: 11}}>
                    sign out
                  </button>
                </>
              ) : (
                <span style={{color: 'var(--ink-3)'}}><span className="dot" style={{background: 'var(--ink-3)'}}/>internal · signed out</span>
              )}
              <button className="btn sm ghost" onClick={() => onNav('home')}>← exit admin</button>
            </>
          ) : isPlayground ? (
            <>
              <span style={{color: 'var(--accent-2)'}}><span className="dot" style={{background: 'var(--accent-2)'}}/>session live</span>
              <span className="mono">optrl.com / playground</span>
              <button className="btn sm ghost" onClick={() => onNav('home')}>← back to RLX</button>
            </>
          ) : (
            <>
              {/* Counted from the live boards, not baked in. */}
              <span><span className="dot" />live · {
                (() => {
                  const s = window.RLX_STATUS;
                  return s ? (s.paper + s.proprietary + s.playground) : 0;
                })()
              } entries indexed</span>
              {currentUser ? (
                <>
                  <span className="mono" style={{color: 'var(--accent)', fontWeight: 600}}>
                    👤 {currentUser.display_name || currentUser.social_handle || (currentUser.email ? currentUser.email.split('@')[0] : 'User')}
                  </span>
                  <button className="btn sm ghost" onClick={onOpenKeys} title="Manage Encrypted API Keys (Alpha Vantage)" style={{fontSize: 11, padding: '3px 8px'}}>
                    🔑 API Keys
                  </button>
                  <button className="btn sm ghost" onClick={() => window.RLX_USER_API.logout()} style={{fontSize: 11, padding: '3px 8px', color: 'var(--ink-2)'}}>
                    Sign Out
                  </button>
                </>
              ) : (
                <button className="btn sm ghost" onClick={onOpenAuth} style={{fontSize: 11, padding: '3px 8px'}}>
                  Sign In / Sign Up
                </button>
              )}
              <button className="btn sm primary" onClick={() => { window.location.href = '/dashboard/'; }}>Open Playground ↗</button>
            </>
          )}
        </div>
      </div>
      {!isAdmin && (
        <nav className="nav">
          {tabs.map((t, i) => (
            <button
              key={t.id}
              className={`nav-item ${(isPlayground ? activePg : active) === t.id ? 'active' : ''}`}
              onClick={() => onNav(t.id)}
            >
              <span className="idx">{String(i + 1).padStart(2, '0')}</span>
              {t.label}
            </button>
          ))}
        </nav>
      )}
    </>
  );
};

// ============================================================
// LEADERBOARDS
//
// One table, three boards.  The column set is exactly the RLX CSV
// contract (docs/RLX/rl_benchmarks_comparison-v3.csv) and nothing
// else: Research, OptRL and Playground are field-identical by
// construction because they render the same component.
//
// Every column below maps 1:1 to an API field.  Nothing here is
// derived, inferred or computed from another column: if the source
// didn't report it, the cell shows a dash rather than a zero.
// ============================================================

// "not reported": never render a missing measurement as 0.
const Dash = () => <span style={{ color: 'var(--ink-3)' }}>-</span>;

const Num = ({ v, digits = 2 }) => (
  v === null || v === undefined || Number.isNaN(v)
    ? <Dash />
    : <>{Number(v).toLocaleString(undefined, { maximumFractionDigits: digits })}</>
);

const Pct = ({ v }) => (
  v === null || v === undefined ? <Dash /> : <>{Number(v).toFixed(1)}%</>
);

// Training Steps keeps its unit: 40M Atari frames is not 1M gradient
// steps, and the board must not imply they are comparable.
const Steps = ({ raw, n, unit }) => {
  if (!raw && n === null) return <Dash />;
  const label = raw || Number(n).toLocaleString();
  const suffix = unit && unit !== 'steps' ? unit.replace(/_/g, ' ') : null;
  return (
    <span title={suffix ? `${label} (${suffix})` : label}>
      {label}
      {suffix && (
        <span style={{ color: 'var(--accent-3)', marginLeft: 4, fontSize: 10 }}>{suffix}</span>
      )}
    </span>
  );
};

const EmptyBoard = ({ lane }) => {
  const copy = {
    paper: ['No research benchmarks yet.',
            'An admin loads these from a CSV in RLX Admin → Upload Sheet.'],
    proprietary: ['No OptRL benchmarks yet.',
                  'An admin loads these from a CSV in RLX Admin → Upload Sheet.'],
    playground: ['No published runs yet.',
                 'Runs appear here once a Playground session is published and approved.'],
  }[lane];
  return (
    <div style={{
      border: '1px dashed var(--rule)', padding: '48px 24px', textAlign: 'center',
      background: 'var(--paper)',
    }}>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 600 }}>{copy[0]}</div>
      <div className="mono-tiny" style={{ marginTop: 8, color: 'var(--ink-3)' }}>{copy[1]}</div>
    </div>
  );
};

const Leaderboards = ({ board, setBoard, sortKey, setSortKey, onPublish }) => {
  const [sortDir, setSortDir] = useState('desc');
  const [fSuite, setFSuite] = useState('all');
  const [fType, setFType] = useState('all');
  const [fEnv, setFEnv] = useState('all');

  const D = window.RLX_DATA;
  const lanes = {
    published: { key: 'paper', rows: D.researchRows || [], label: 'Research Benchmarks' },
    optrl: { key: 'proprietary', rows: D.optrlRows || [], label: 'OptRL Benchmarks' },
    playground: { key: 'playground', rows: D.playgroundRows || [], label: 'Playground Benchmarks' },
  };

  // Reset filters when switching boards: a suite that exists on one
  // board usually doesn't on another, and a stale filter reads as
  // "this board is empty".
  useEffect(() => { setFSuite('all'); setFType('all'); setFEnv('all'); }, [board]);

  const boards = [
    { id: 'published', label: 'Research Benchmarks', count: lanes.published.rows.length },
    { id: 'optrl', label: 'OptRL Benchmarks', count: lanes.optrl.rows.length },
    { id: 'playground', label: 'Playground Benchmarks', count: lanes.playground.rows.length },
  ];

  const active = lanes[board] || lanes.published;

  return (
    <div>
      <div className="page-header">
        <div>
          <h1>
            Benchmarks
            <span className="annot">// three sources, one field set</span>
          </h1>
        </div>
        <div className="lede">
          A living record of reinforcement-learning performance across published
          research, OptRL proprietary experiments, and community-submitted runs
          from the OptRL Playground.
        </div>
      </div>

      <div className="board-selector">
        {boards.map(b => (
          <button
            key={b.id}
            className={`board-tab ${board === b.id ? 'active' : ''}`}
            onClick={() => setBoard(b.id)}
          >
            {b.label}<span className="count">({b.count})</span>
          </button>
        ))}
      </div>

      <BoardTable
        lane={active.key}
        rows={active.rows}
        sortKey={sortKey} setSortKey={setSortKey}
        sortDir={sortDir} setSortDir={setSortDir}
        fSuite={fSuite} setFSuite={setFSuite}
        fType={fType} setFType={setFType}
        fEnv={fEnv} setFEnv={setFEnv}
        onPublish={onPublish}
      />
    </div>
  );
};

const BoardTable = ({
  lane, rows, sortKey, setSortKey, sortDir, setSortDir,
  fSuite, setFSuite, fType, setFType, fEnv, setFEnv, onPublish,
}) => {
  const uniq = (k) => [...new Set(rows.map(r => r[k]).filter(Boolean))].sort();
  const suites = useMemo(() => uniq('benchmark_suite'), [rows]);
  const types = useMemo(() => uniq('learning_type'), [rows]);
  const envs = useMemo(() => uniq('environment'), [rows]);

  const filtered = useMemo(() => {
    let r = rows.filter(x =>
      (fSuite === 'all' || x.benchmark_suite === fSuite) &&
      (fType === 'all' || x.learning_type === fType) &&
      (fEnv === 'all' || x.environment === fEnv));

    const dir = sortDir === 'desc' ? -1 : 1;
    r = [...r].sort((a, b) => {
      const va = a[sortKey], vb = b[sortKey];
      // "Not reported" always sorts last, in both directions: the
      // same rule the API applies with NULLS LAST.
      const na = va === null || va === undefined;
      const nb = vb === null || vb === undefined;
      if (na && nb) return 0;
      if (na) return 1;
      if (nb) return -1;
      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
      return String(va).localeCompare(String(vb)) * dir;
    });
    return r;
  }, [rows, fSuite, fType, fEnv, sortKey, sortDir]);

  const toggleSort = (k) => {
    if (sortKey === k) setSortDir(sortDir === 'desc' ? 'asc' : 'desc');
    else { setSortKey(k); setSortDir('desc'); }
  };
  const arrow = (k) => sortKey === k
    ? <span className="sort-arrow">{sortDir === 'desc' ? '▼' : '▲'}</span> : null;
  const th = (k, label, numeric) => (
    <th onClick={() => toggleSort(k)}
        className={`${numeric ? 'num ' : ''}${sortKey === k ? 'sorted' : ''}`}
        style={{ cursor: 'pointer' }}>
      {label} {arrow(k)}
    </th>
  );

  if (rows.length === 0) {
    return (
      <>
        {lane === 'playground' && (
          <div className="filter-row">
            <span className="mono-tiny">verified community submissions only</span>
            <div className="grow" />
            <button className="btn sm primary" onClick={onPublish}>+ Submit a run</button>
          </div>
        )}
        <EmptyBoard lane={lane} />
      </>
    );
  }

  // The last column is the row's provenance.  For uploaded boards
  // that's the citation the sheet carried; for Playground it's the
  // submitter, which is the same idea: who this result came from.
  const provenanceHead = lane === 'playground' ? 'Submitted By' : 'Primary Citation';

  return (
    <>
      <div className="filter-row">
        <span className="label">Suite</span>
        <select className="chip" style={{ padding: '5px 8px', maxWidth: 220 }}
                value={fSuite} onChange={e => setFSuite(e.target.value)}>
          <option value="all">All suites</option>
          {suites.map(s => <option key={s} value={s}>{s}</option>)}
        </select>

        <div style={{ width: 14 }} />
        <span className="label">Learning type</span>
        <select className="chip" style={{ padding: '5px 8px', maxWidth: 240 }}
                value={fType} onChange={e => setFType(e.target.value)}>
          <option value="all">All learning types</option>
          {types.map(t => <option key={t} value={t}>{t}</option>)}
        </select>

        <div style={{ width: 14 }} />
        <span className="label">Env</span>
        <select className="chip" style={{ padding: '5px 8px', maxWidth: 220 }}
                value={fEnv} onChange={e => setFEnv(e.target.value)}>
          <option value="all">All environments</option>
          {envs.map(e => <option key={e} value={e}>{e}</option>)}
        </select>

        <div className="grow" />
        {lane === 'playground' && (
          <button className="btn sm primary" onClick={onPublish}>+ Submit a run</button>
        )}
        <span className="mono-tiny" style={{ marginLeft: 10 }}>
          showing {filtered.length} of {rows.length}
        </span>
      </div>

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 46 }}>#</th>
              {th('algorithm', 'Algorithm')}
              {th('environment', 'Environment')}
              {th('learning_type', 'Learning Type')}
              {th('benchmark_suite', 'Benchmark Suite')}
              {th('mean_reward', 'Mean Reward', true)}
              {th('std_reward', 'Stability (SD/SE)', true)}
              {th('success_rate', 'Success Rate', true)}
              {th('n_timesteps', 'Training Steps', true)}
              {th('min_reward', 'Min Reward', true)}
              {th('max_reward', 'Max Reward', true)}
              <th>{provenanceHead}</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((r, i) => (
              <tr key={r.id}>
                <td className={`rank ${i === 0 ? 'gold' : ''} ${i === 1 || i === 2 ? 'medal' : ''}`}>
                  {i + 1}
                </td>
                <td><div className="algo-name">{r.algorithm}</div></td>
                <td className="mono-tiny" style={{ color: 'var(--ink-2)' }}>{r.environment}</td>
                <td className="mono-tiny" style={{ color: 'var(--ink-2)' }}>
                  {r.learning_type || <Dash />}
                </td>
                <td className="mono-tiny" style={{ color: 'var(--accent-3)' }}>
                  {r.benchmark_suite || <Dash />}
                </td>
                <td className="num"><Num v={r.mean_reward} /></td>
                <td className="num"><Num v={r.std_reward} /></td>
                <td className="num"><Pct v={r.success_rate} /></td>
                <td className="num mono-tiny">
                  <Steps raw={r.training_steps_raw} n={r.n_timesteps} unit={r.steps_unit} />
                </td>
                <td className="num"><Num v={r.min_reward} /></td>
                <td className="num"><Num v={r.max_reward} /></td>
                <td className="algo-cite">
                  {lane === 'playground'
                    ? (r.submitted_by
                        ? <a href={r.submitted_by.social_handle} target="_blank" rel="noreferrer"
                             style={{ color: 'var(--accent)', textDecoration: 'none' }}>
                            {r.submitted_by.handle_short}
                          </a>
                        : <Dash />)
                    : (r.paper_reference || <Dash />)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
};

Object.assign(window, {
  Header, Leaderboards,
  ClassBadge, NNIndicator, StabilityBar, Sparkline, S2RGapDisplay
});