// panels-c.jsx — Plugins, Scheduler, Admin

// ────────────────────────────────────────────────────────────────
// Plugins
// ────────────────────────────────────────────────────────────────
function PluginsPanel() {
  const [tab, setTab] = React.useState('installed');
  const [sel, setSel] = React.useState(PLUGINS[1]);

  return (
    <div>
      <div className="panel-head">
        <div>
          <h1>Plugins</h1>
          <div className="sub">{PLUGINS.length} installed · {PLUGINS.filter((p) => p.update).length} updates · CounterStrikeSharp 1.0.305 + Metamod 2.0.0-12</div>
        </div>
        <div className="tools">
          <button className="btn"><span className="ico">{I.reload}</span>Reload all</button>
          <button className="btn"><span className="ico">{I.download}</span>Update available ({PLUGINS.filter((p) => p.update).length})</button>
          <button className="btn primary"><span className="ico">{I.plus}</span>Install from registry…</button>
        </div>
      </div>

      <div className="tabs">
        <button className={tab === 'installed' ? 'on' : ''} onClick={() => setTab('installed')}>Installed<span className="badge">{PLUGINS.length}</span></button>
        <button className={tab === 'registry' ? 'on' : ''} onClick={() => setTab('registry')}>Registry</button>
        <button className={tab === 'errors' ? 'on' : ''} onClick={() => setTab('errors')}>Error log<span className="badge err">{PLUGIN_ERRORS.filter((e) => e.level === 'err').length}</span></button>
      </div>

      <div className="body">
        {tab === 'installed' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 12 }}>
            <div className="card" style={{ overflow: 'hidden' }}>
              <table className="tbl">
                <thead><tr>
                  <th></th>
                  <th>Plugin</th>
                  <th>Version</th>
                  <th>Status</th>
                  <th></th>
                  <th></th>
                </tr></thead>
                <tbody>
                {PLUGINS.map((p) => (
                  <tr key={p.name} onClick={() => setSel(p)} style={{ cursor: 'default', background: sel?.name === p.name ? 'var(--bg-3)' : '' }}>
                    <td>
                      {p.status === 'ok'   && <span className="dot" style={dotStyle('var(--ok)')} />}
                      {p.status === 'warn' && <span className="dot" style={dotStyle('var(--warn)')} />}
                      {p.status === 'err'  && <span className="dot" style={dotStyle('var(--err)')} />}
                      {p.status === 'off'  && <span className="dot" style={dotStyle('var(--fg-3)')} />}
                    </td>
                    <td className="fg">
                      {p.name}
                      {p.essential && <span className="badge ac" style={{ marginLeft: 8 }}>core</span>}
                      <div className="hint" style={{ fontFamily: 'var(--sans)', fontSize: 11 }}>{p.desc}</div>
                    </td>
                    <td className="muted">
                      {p.ver}
                      {p.update && <span className="badge warn" style={{ marginLeft: 6 }}>→ {p.update}</span>}
                    </td>
                    <td>
                      {p.status === 'ok'   && <span className="badge ok">enabled</span>}
                      {p.status === 'warn' && <span className="badge warn">warn</span>}
                      {p.status === 'err'  && <span className="badge err">failed</span>}
                      {p.status === 'off'  && <span className="badge">disabled</span>}
                    </td>
                    <td>
                      <Toggle on={p.status !== 'off' && p.status !== 'err'} />
                    </td>
                    <td>
                      <div className="row-acts">
                        <button className="btn sm">config</button>
                        <button className="btn sm">reload</button>
                        <button className="btn sm danger">remove</button>
                      </div>
                    </td>
                  </tr>
                ))}
                </tbody>
              </table>
            </div>

            {sel && <PluginDetail p={sel} />}
          </div>
        )}

        {tab === 'registry' && <RegistryView />}
        {tab === 'errors' && <ErrorLog />}
      </div>
    </div>
  );
}
const dotStyle = (c) => ({
  display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
  background: c, boxShadow: `0 0 0 3px ${c.replace(')', ' / 0.18)').replace('var(', 'oklch(from var(').replace('var(', '')}`,
  // simpler: just background dot
});
function Toggle({ on }) {
  return (
    <button style={{
      position: 'relative', width: 28, height: 16, borderRadius: 999,
      background: on ? 'var(--ac)' : 'var(--bg-4)',
      boxShadow: on ? '0 0 8px var(--ac-soft)' : 'inset 0 0 0 1px var(--br-1)',
      transition: 'all .15s',
    }}>
      <i style={{
        position: 'absolute', top: 2, left: on ? 14 : 2,
        width: 12, height: 12, borderRadius: '50%',
        background: on ? '#0a0a0b' : 'var(--fg-2)',
        transition: 'left .15s',
      }} />
    </button>
  );
}

function PluginDetail({ p }) {
  return (
    <div className="card" style={{ position: 'sticky', top: 12, alignSelf: 'start' }}>
      <div className="ch">
        <div className="t"><span className="ico">{I.plug}</span>{p.name}</div>
        <div className="meta">{p.ver}</div>
      </div>
      <div className="cb">
        <p style={{ margin: '0 0 12px', color: 'var(--fg-1)', fontSize: 12 }}>{p.desc}</p>
        <dl className="kv">
          <dt>status</dt>     <dd>{p.status}</dd>
          <dt>path</dt>       <dd className="fg2">addons/counterstrikesharp/plugins/{p.name}/</dd>
          <dt>hooks</dt>      <dd>OnRoundStart, OnPlayerSpawn, OnMapStart</dd>
          <dt>memory</dt>     <dd>14.2 MB</dd>
          <dt>commits</dt>    <dd className="fg2">a14ce82 · 3d ago</dd>
        </dl>

        <div className="div-lbl">config — {p.name}.json</div>
        <div className="editor" style={{ borderRadius: 8, overflow: 'hidden', border: '1px solid var(--br)', maxHeight: 220 }}>
          <div className="gutter">
            {Array.from({ length: 10 }).map((_, i) => <div key={i}>{i + 1}</div>)}
          </div>
          <div className="code">
{`{
  "Enabled": true,
  "MinReadyRequired": 5,
  "DemoPath": "matchzy_demos",
  "ChatPrefix": "[\\u0010nokit\\u0001]",
  "AutoStart": true,
  "Pause": { "MaxTacticalPauses": 4, "PauseDuration": 30 },
  "Knife": true,
  "MatchEndAction": "kickall"
}`}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <button className="btn sm">format</button>
          <div className="grow" />
          <button className="btn sm">revert</button>
          <button className="btn sm primary">save &amp; reload</button>
        </div>
      </div>
    </div>
  );
}

function RegistryView() {
  const items = [
    { n: 'CS2-RetakesAllocator', a: 'b3none',     ver: '2.1.0', d: 'Retakes allocator + bomb planter — used in 2.4k servers' },
    { n: 'Surf Timer',           a: 'kitsune',    ver: '3.0.4', d: 'Per-map records, leaderboards, replay bot' },
    { n: 'CS#-AutoUpdater',      a: 'roflmuffin', ver: '0.4.2', d: 'Hot-reload plugins from disk — dev only' },
    { n: 'AccessChecker',        a: 'd00mfist',   ver: '1.1.0', d: 'Steam group + flag-based access control' },
    { n: 'EconBet',              a: 'lostgirl',   ver: '0.8.1', d: 'Round betting with in-game economy hooks' },
    { n: 'Anti-Bhop',            a: 'whisper',    ver: '1.0.0', d: 'Tickrate-aware bhop limiter — competitive safe' },
  ];
  return (
    <div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        <div className="input" style={{ flex: 1, maxWidth: 480 }}>
          <span className="ico">{I.search}</span>
          <input placeholder="search 327 plugins — name, author, tag" />
        </div>
        <div className="seg">
          <button className="on">all</button>
          <button>match</button>
          <button>mode</button>
          <button>util</button>
          <button>fun</button>
        </div>
        <div className="grow" />
        <button className="btn"><span className="ico">{I.git}</span>add custom git…</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {items.map((it) => (
          <div key={it.n} className="card">
            <div className="cb" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'start' }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <strong style={{ fontSize: 13 }}>{it.n}</strong>
                  <span className="hint m">v{it.ver}</span>
                  <span className="hint">· by {it.a}</span>
                </div>
                <div className="hint" style={{ marginTop: 4, fontFamily: 'var(--sans)', fontSize: 11 }}>{it.d}</div>
              </div>
              <button className="btn primary sm">install</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ErrorLog() {
  const lvl = (l) => l === 'err' ? 'err' : l === 'warn' ? 'warn' : 'info';
  return (
    <div className="term" style={{ height: 380 }}>
      <div className="out">
        {PLUGIN_ERRORS.concat(PLUGIN_ERRORS).map((e, i) => (
          <div key={i} className="ln">
            <span className="ts">2026-05-21 {e.ts}</span>
            <span className={lvl(e.level)}>[{e.level.toUpperCase()}]</span>
            <span className="cv"> {e.plug}</span>
            <span> — {e.msg}</span>
          </div>
        ))}
        <div className="ln dim">{Array(40).join(' ')}</div>
      </div>
      <div className="input-row">
        <span className="prompt fg3">log&nbsp;❯</span>
        <span className="m fg3" style={{ flex: 1, fontSize: 11.5 }}>showing last 24h · 3 errors · 7 warnings · 12 info</span>
        <button className="btn sm">clear</button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Scheduler
// ────────────────────────────────────────────────────────────────
function SchedulerPanel() {
  return (
    <div>
      <div className="panel-head">
        <div>
          <h1>Scheduler</h1>
          <div className="sub">{SCHED.filter((s) => s.on).length}/{SCHED.length} active · system tz: Europe/Berlin · cron via nokit-relay</div>
        </div>
        <div className="tools">
          <button className="btn"><span className="ico">{I.bolt}</span>Run now…</button>
          <button className="btn primary"><span className="ico">{I.plus}</span>New task</button>
        </div>
      </div>

      <div className="body" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16 }}>
        <div>
          <div className="card">
            <table className="tbl">
              <thead><tr>
                <th style={{ width: 28 }}></th>
                <th>Name</th>
                <th>Schedule</th>
                <th>Command</th>
                <th>Last</th>
                <th>Next</th>
                <th></th>
              </tr></thead>
              <tbody>
              {SCHED.map((s) => (
                <tr key={s.id}>
                  <td>
                    <span className="dot" style={{
                      display: 'inline-block', width: 7, height: 7, borderRadius: '50%',
                      background: s.on ? 'var(--ok)' : 'var(--fg-3)',
                    }} />
                  </td>
                  <td className="fg" style={{ fontFamily: 'var(--sans)' }}>{s.name}</td>
                  <td className="muted">{s.cron}</td>
                  <td className="muted">
                    <span style={{ color: 'var(--fg-1)' }}>{syntaxColor(s.cmd)}</span>
                  </td>
                  <td className="muted">{s.last}</td>
                  <td className={s.on ? 'fg' : 'muted'}>{s.next}</td>
                  <td>
                    <div className="row-acts">
                      <button className="btn sm">run</button>
                      <button className="btn sm">edit</button>
                      <button className="btn sm danger">remove</button>
                    </div>
                  </td>
                </tr>
              ))}
              </tbody>
            </table>
          </div>

          <SectionTitle>Recent runs</SectionTitle>
          <div className="card">
            <table className="tbl">
              <thead><tr>
                <th>When</th><th>Task</th><th>Duration</th><th>Result</th>
              </tr></thead>
              <tbody>
                <tr><td className="muted">12:30:00</td><td className="fg" style={{ fontFamily: 'var(--sans)' }}>Warmup reset</td><td className="num">0.08s</td><td><span className="badge ok">ok</span></td></tr>
                <tr><td className="muted">12:00:00</td><td className="fg" style={{ fontFamily: 'var(--sans)' }}>Warmup reset</td><td className="num">0.07s</td><td><span className="badge ok">ok</span></td></tr>
                <tr><td className="muted">05:00:00</td><td className="fg" style={{ fontFamily: 'var(--sans)' }}>Nightly restart</td><td className="num">14.2s</td><td><span className="badge ok">ok</span></td></tr>
                <tr><td className="muted">03:00:00</td><td className="fg" style={{ fontFamily: 'var(--sans)' }}>Daily backup</td><td className="num">2m 04s</td><td><span className="badge ok">ok</span></td></tr>
                <tr><td className="muted">04:00 (Sun)</td><td className="fg" style={{ fontFamily: 'var(--sans)' }}>Workshop sync</td><td className="num">8m 41s</td><td><span className="badge warn">3 retries</span></td></tr>
                <tr><td className="muted">19:00 (Fri)</td><td className="fg" style={{ fontFamily: 'var(--sans)' }}>Pug auto-shuffle</td><td className="num">—</td><td><span className="badge">disabled</span></td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div>
          <div className="card">
            <div className="ch"><div className="t"><span className="ico">{I.bolt}</span>Presets</div></div>
            <div className="cb" style={{ display: 'grid', gap: 6 }}>
              {[
                { n: 'Nightly restart',     c: '0 5 * * *',     cmd: 'sv_shutdown' },
                { n: 'Warmup reset every 30m', c: '*/30 * * * *', cmd: 'mp_warmup_start' },
                { n: 'Pre-match script',    c: 'on-event match', cmd: 'matchzy_load mr12' },
                { n: 'GOTV demo cleanup',   c: '0 6 * * 0',     cmd: 'find demos -mtime +30 -delete' },
                { n: 'Discord ping if down',c: 'on-event down',  cmd: 'webhook discord_alerts' },
              ].map((p, i) => (
                <button key={i} className="btn" style={{ flexDirection: 'column', alignItems: 'flex-start', height: 'auto', padding: '8px 11px', gap: 2 }}>
                  <span style={{ color: 'var(--fg)' }}>{p.n}</span>
                  <span className="hint m" style={{ fontSize: 10.5 }}>{p.c}  →  {p.cmd}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="card" style={{ marginTop: 12 }}>
            <div className="ch"><div className="t"><span className="ico">{I.clock}</span>Next 24h</div></div>
            <div className="cb" style={{ padding: 0 }}>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                {[
                  ['13:00', 'Warmup reset'],
                  ['13:30', 'Warmup reset'],
                  ['14:00', 'Warmup reset'],
                  ['— hourly until 04:30 —', null],
                  ['05:00', 'Nightly restart'],
                  ['03:00', 'Daily backup'],
                ].map(([t, n], i) => (
                  <li key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr', padding: '7px 14px', borderBottom: '1px solid var(--br)', fontFamily: 'var(--mono)', fontSize: 11.5 }}>
                    <span className={n ? 'fg2' : 'fg3'}>{t}</span>
                    <span style={{ color: n ? 'var(--fg)' : 'var(--fg-3)' }}>{n || ''}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Admin
// ────────────────────────────────────────────────────────────────
function AdminPanel() {
  const [tab, setTab] = React.useState('users');
  return (
    <div>
      <div className="panel-head">
        <div>
          <h1>Admin</h1>
          <div className="sub">{ADMINS.length} users · audit retention 90d · Discord webhook configured · GOTV port 27020</div>
        </div>
        <div className="tools">
          <button className="btn"><span className="ico">{I.download}</span>Export audit log</button>
          <button className="btn primary"><span className="ico">{I.plus}</span>Invite admin</button>
        </div>
      </div>

      <div className="tabs">
        <button className={tab === 'users' ? 'on' : ''} onClick={() => setTab('users')}>Users &amp; roles<span className="badge">{ADMINS.length}</span></button>
        <button className={tab === 'audit' ? 'on' : ''} onClick={() => setTab('audit')}>Audit log<span className="badge">{AUDIT.length}</span></button>
        <button className={tab === 'integ' ? 'on' : ''} onClick={() => setTab('integ')}>Integrations</button>
        <button className={tab === 'demo' ? 'on' : ''} onClick={() => setTab('demo')}>GOTV &amp; demos</button>
      </div>

      <div className="body">
        {tab === 'users' && <UsersTab />}
        {tab === 'audit' && <AuditTab />}
        {tab === 'integ' && <IntegrationsTab />}
        {tab === 'demo'  && <DemosTab />}
      </div>
    </div>
  );
}

function UsersTab() {
  const ROLE_COLOR = { owner: 'ac', admin: 'info', moderator: '' };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16 }}>
      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th>User</th><th>Email</th><th>Role</th><th>MFA</th><th>Last seen</th><th></th>
          </tr></thead>
          <tbody>
          {ADMINS.map((a) => (
            <tr key={a.user}>
              <td className="fg">{a.user}</td>
              <td className="muted">{a.email}</td>
              <td><span className={"badge " + ROLE_COLOR[a.role]}>{a.role}</span></td>
              <td>{a.mfa ? <span className="badge ok">on</span> : <span className="badge warn">off</span>}</td>
              <td className="muted">{a.last}</td>
              <td><div className="row-acts">
                <button className="btn sm">edit</button>
                <button className="btn sm">reset MFA</button>
                <button className="btn sm danger">remove</button>
              </div></td>
            </tr>
          ))}
          </tbody>
        </table>
      </div>
      <div>
        <div className="card">
          <div className="ch"><div className="t"><span className="ico">{I.shield}</span>Role matrix</div></div>
          <div className="cb">
            <table className="tbl" style={{ background: 'transparent' }}>
              <thead><tr><th>capability</th><th>owner</th><th>admin</th><th>mod</th></tr></thead>
              <tbody>
                {[
                  ['rcon console', '✓', '✓', '·'],
                  ['kick / ban', '✓', '✓', '✓'],
                  ['edit configs', '✓', '✓', '·'],
                  ['install plugins', '✓', '·', '·'],
                  ['manage admins', '✓', '·', '·'],
                  ['manage servers', '✓', '·', '·'],
                ].map((r) => (
                  <tr key={r[0]}>
                    <td className="fg" style={{ fontFamily: 'var(--sans)' }}>{r[0]}</td>
                    <td className="ac">{r[1]}</td>
                    <td className={r[2] === '✓' ? 'ac' : 'fg3'}>{r[2]}</td>
                    <td className={r[3] === '✓' ? 'ac' : 'fg3'}>{r[3]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

function AuditTab() {
  const tone = { kick: 'warn', ban: 'err', plugin: 'cv', cmd: 'ac', map: 'info', preset: 'ac', config: 'info', signin: 'fg2' };
  return (
    <div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        <div className="input" style={{ flex: 1, maxWidth: 420 }}>
          <span className="ico">{I.search}</span>
          <input placeholder="search by user, action, target, time" />
        </div>
        <div className="seg">
          <button className="on">today</button>
          <button>7d</button>
          <button>30d</button>
          <button>all</button>
        </div>
        <div className="grow" />
        <div className="seg">
          <button>all</button>
          <button className="on">writes</button>
          <button>signin</button>
        </div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>When</th><th>Who</th><th>Action</th><th>Target</th><th></th></tr></thead>
          <tbody>
            {AUDIT.map((a, i) => (
              <tr key={i}>
                <td className="muted">{a.ts}</td>
                <td className="fg">{a.who}</td>
                <td><span className="badge" style={{ color: `var(--${tone[a.act] || 'fg-2'})` }}>{a.act}</span></td>
                <td className="muted">{syntaxColor(a.target)}</td>
                <td>{a.ok
                  ? <span style={{ color: 'var(--ok)' }}>{I.check}</span>
                  : <span style={{ color: 'var(--err)' }}>{I.alert}</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function IntegrationsTab() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
      <div className="card">
        <div className="ch">
          <div className="t"><span className="ico">{I.link}</span>Discord webhook</div>
          <span className="badge ok"><span className="dot" />connected</span>
        </div>
        <div className="cb">
          <dl className="kv">
            <dt>url</dt>     <dd className="fg2" style={{ wordBreak: 'break-all' }}>https://discord.com/api/webhooks/123•••••/k83ai••••••••</dd>
            <dt>channel</dt> <dd>#nokit-fra1</dd>
            <dt>events</dt>  <dd>match start · match end · server down · plugin error · ban</dd>
            <dt>last</dt>    <dd>12:51 — match started</dd>
          </dl>
          <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
            <button className="btn sm">test message</button>
            <div className="grow" />
            <button className="btn sm">edit</button>
            <button className="btn sm danger">disconnect</button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="ch">
          <div className="t"><span className="ico">{I.workshop}</span>Steam workshop API</div>
          <span className="badge ok"><span className="dot" />key valid</span>
        </div>
        <div className="cb">
          <dl className="kv">
            <dt>key</dt>      <dd className="fg2">A1F8••••••••••••••••••E0</dd>
            <dt>quota</dt>    <dd>4,221 / 100,000 calls (24h)</dd>
            <dt>collection</dt><dd>ws://3142099912 — 16 maps</dd>
            <dt>last sync</dt><dd>2026-05-18 04:08 · 8m 41s · 0 errors</dd>
          </dl>
          <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
            <button className="btn sm">rotate key</button>
            <div className="grow" />
            <button className="btn sm primary">sync now</button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="ch">
          <div className="t"><span className="ico">{I.bolt}</span>Steam game-server login token</div>
          <span className="badge ok"><span className="dot" />active</span>
        </div>
        <div className="cb">
          <dl className="kv">
            <dt>app</dt>    <dd>730 (cs2)</dd>
            <dt>token</dt>  <dd className="fg2">F38C1B•••••••••••••••••••••••••</dd>
            <dt>label</dt>  <dd>nokit-fra1</dd>
            <dt>added</dt>  <dd>2026-04-11</dd>
          </dl>
        </div>
      </div>

      <div className="card">
        <div className="ch">
          <div className="t"><span className="ico">{I.git}</span>Backup target</div>
          <span className="badge"><span className="dot" />S3</span>
        </div>
        <div className="cb">
          <dl className="kv">
            <dt>bucket</dt>  <dd>s3://nokit-backups</dd>
            <dt>prefix</dt>  <dd>fra1.mm/</dd>
            <dt>retention</dt><dd>30d (cfg) · 14d (demos)</dd>
            <dt>last</dt>    <dd>03:00 · 412 MB · ok</dd>
          </dl>
        </div>
      </div>
    </div>
  );
}

function DemosTab() {
  const demos = [
    { f: '2026-05-21_de_mirage_mr12_team-α_vs_team-β.dem', sz: '94.2 MB', dur: '46m', dl: 2 },
    { f: '2026-05-20_de_inferno_scrim_axum_vs_nbk.dem',    sz: '102.8 MB', dur: '52m', dl: 0 },
    { f: '2026-05-20_de_nuke_pug.dem',                      sz: '78.4 MB',  dur: '38m', dl: 1 },
    { f: '2026-05-19_de_anubis_eu-quals.dem',               sz: '121.0 MB', dur: '1h 04m', dl: 8 },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 12 }}>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>File</th><th>Size</th><th>Duration</th><th>DLs</th><th></th></tr></thead>
          <tbody>
            {demos.map((d) => (
              <tr key={d.f}>
                <td className="fg">{d.f}</td>
                <td className="muted">{d.sz}</td>
                <td className="muted">{d.dur}</td>
                <td className="num">{d.dl}</td>
                <td><div className="row-acts">
                  <button className="btn sm">share link</button>
                  <button className="btn sm">download</button>
                  <button className="btn sm danger">delete</button>
                </div></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="card">
        <div className="ch"><div className="t"><span className="ico">{I.term}</span>GOTV settings</div></div>
        <div className="cb">
          <dl className="kv">
            <dt>tv_enable</dt>     <dd className="ac">1</dd>
            <dt>tv_port</dt>       <dd>27020</dd>
            <dt>tv_maxclients</dt> <dd>32</dd>
            <dt>tv_delay</dt>      <dd>90s</dd>
            <dt>tv_autorecord</dt> <dd className="ac">1</dd>
            <dt>tv_chatgroup</dt>  <dd>"nokit-gotv"</dd>
            <dt>status</dt>        <dd><span className="badge ok"><span className="dot" />1 spectator · 0.4 mbps</span></dd>
          </dl>
          <div className="div-lbl">Demo retention</div>
          <div className="row" style={{ alignItems: 'center', gap: 10 }}>
            <span className="hint">keep</span>
            <span className="chip on">14 days</span>
            <span className="hint">then</span>
            <span className="chip">upload to S3</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PluginsPanel, SchedulerPanel, AdminPanel });