// screens-content.jsx — Games (13), Videos (14), Live (15)

// ─── 13 Games ────────────────────────────────────────────────────────────────
function GamesScreen({ t, push }) {
  return (
    <div className="stack">
      <div className="page-h">
        <div>
          <h1>{t.p_games}</h1>
          <div className="sub">{t.tx('5 个供应商 · 47 款子游戏 · 实时 RTP 97.2% · 责任博彩开启', '5 vendors · 47 sub-games · Live RTP 97.2% · Responsible gaming on')}</div>
        </div>
        <div className="actions">
          <button className="btn btn-sm">{t.tx('供应商', 'Vendors')}</button>
          <button className="btn btn-sm">{t.tx('站点开关', 'Site switch')}</button>
          <button className="btn btn-pri btn-sm"><Icons.plus /> {t.tx('接入游戏', 'Onboard game')}</button>
        </div>
      </div>

      <div className="row-4">
        <KPI t={t} label={t.tx('今日有效投注', "Today's valid stake")} value="¥3.18M" delta="+8.4%" up spark={<Sparkline data={[20,24,28,30,32,38,42]} w={100} h={24} />} />
        <KPI t={t} label={t.tx('今日盈亏 (GGR)', "Today's P&L (GGR)")} value="¥412k" delta="+12.1%" up spark={<Sparkline data={[8,10,14,18,20,24,28]} w={100} h={24} stroke="oklch(0.6 0.16 145)" />} />
        <KPI t={t} label={t.tx('活跃玩家', 'Active players')} value="18,402" delta="+2.4%" up spark={<Sparkline data={[15,16,17,18,18,19,18]} w={100} h={24} stroke="oklch(0.62 0.14 230)" />} />
        <KPI t={t} label={t.tx('自我排除中', 'Self-excluded')} value="412" delta={t.tx('本月新增 48', '+48 this month')} spark={<MiniBars data={[2,3,4,3,5,4,6,5]} w={100} h={24} color="oklch(0.65 0.14 30)" />} />
      </div>

      <div className="card">
        <div className="filter-bar">
          <span className="chip active">{t.tx('全部', 'All')} 47</span>
          <span className="chip">{t.tx('在线', 'Online')} 42</span>
          <span className="chip">{t.tx('暂停', 'Paused')} 3</span>
          <span className="chip">{t.tx('下架', 'Removed')} 2</span>
          <div style={{ flex: 1 }} />
          <select className="select" style={{ width: 140 }}><option>{t.tx('全部供应商', 'All vendors')}</option></select>
          <select className="select" style={{ width: 120 }}><option>{t.tx('全部分类', 'All categories')}</option></select>
        </div>
        <div className="tbl-scroll">
        <table className="tbl tbl-stack">
          <thead><tr>
            <th>{t.tx('游戏', 'Game')}</th><th>{t.tx('供应商', 'Vendor')}</th><th>{t.tx('分类', 'Category')}</th><th>RTP</th>
            <th className="right">{t.tx('今日投注', "Today's stake")}</th><th className="right">{t.tx('今日盈亏', "Today's P&L")}</th><th>{t.tx('开放站点', 'Sites')}</th><th>{t.tx('状态', 'Status')}</th><th></th>
          </tr></thead>
          <tbody>
            {DATA.games.map(g => (
              <tr key={g.id}>
                <td data-label={t.tx('游戏', 'Game')}>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 6, background: 'linear-gradient(135deg, oklch(0.7 0.12 ' + ((g.id.charCodeAt(2) * 7) % 360) + '), oklch(0.5 0.18 ' + ((g.id.charCodeAt(2) * 13) % 360) + '))', flexShrink: 0 }} />
                    <div>
                      <div style={{ fontWeight: 500 }}>{g.name}</div>
                      <div className="text-mono text-faint" style={{ fontSize: 10 }}>{g.id}</div>
                    </div>
                  </div>
                </td>
                <td data-label={t.tx('供应商', 'Vendor')} className="muted">{g.vendor}</td>
                <td data-label={t.tx('分类', 'Category')}><span className="badge outline">{g.cat}</span></td>
                <td data-label="RTP" className="tabular">{g.rtp}</td>
                <td data-label={t.tx('今日投注', "Today's stake")} className="right tabular">{fmtCN(g.wager)}</td>
                <td data-label={t.tx('今日盈亏', "Today's P&L")} className="right tabular text-success">{fmtCN(g.wager - g.win)}</td>
                <td data-label={t.tx('开放站点', 'Sites')}>
                  <div style={{ display: 'flex', gap: 2 }}>
                    {Array.from({ length: g.openSites }).map((_, i) => (
                      <span key={i} style={{ width: 16, height: 16, borderRadius: 4, background: 'var(--accent-soft)', color: 'var(--accent-text)', fontSize: 9, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>S{i+1}</span>
                    ))}
                  </div>
                </td>
                <td data-label={t.tx('状态', 'Status')}><StatusBadge status={g.status} t={t} /></td>
                <td data-label={t.tx('操作', 'Actions')} className="tbl-actions">
                  <button className="btn btn-xs">{t.operate}</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-h"><h3>{t.tx('责任博彩状态', 'Responsible gaming')}</h3><span className="badge success"><span className="dot" />{t.tx('全站启用', 'Enabled site-wide')}</span></div>
          <div style={{ padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              { name: t.tx('年龄验证', 'Age verification'), value: t.tx('强制 18+', 'Enforced 18+'), state: 'on' },
              { name: t.tx('KYC 等级', 'KYC tier'),         value: t.tx('L2 · 大额必查', 'L2 · large amounts checked'), state: 'on' },
              { name: t.tx('自我排除', 'Self-exclusion'),   value: t.tx('412 名玩家', '412 players'), state: 'on' },
              { name: t.tx('冷静期', 'Cool-off'),           value: '24h / 7d / 30d', state: 'on' },
              { name: t.tx('投注提醒', 'Wager reminder'),   value: t.tx('每 30 分钟', 'Every 30 min'), state: 'on' },
              { name: t.tx('亏损上限', 'Loss cap'),         value: t.tx('每日 ¥10k 默认', 'Daily ¥10k default'), state: 'on' },
            ].map((p, i) => (
              <div key={i} style={{ padding: 10, border: '1px solid var(--border)', borderRadius: 8 }}>
                <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{p.value}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-h"><h3>{t.tx('合规报表', 'Compliance reports')}</h3><span className="meta">{t.tx('月度自动生成', 'Auto-generated monthly')}</span></div>
          <div style={{ padding: 0 }}>
            {[
              { name: t.tx('AGCO 月度合规报告', 'AGCO monthly compliance'), period: '2026 / 10', status: 'submitted' },
              { name: t.tx('KYC 抽查档案', 'KYC audit dossier'),            period: '2026 / 11', status: 'in-progress' },
              { name: t.tx('问题博彩转介', 'Problem gambling referrals'),   period: t.tx('近 30 日', 'Last 30d'),  status: 'submitted' },
              { name: t.tx('反洗钱可疑事件', 'AML suspicious events'),       period: '2026 / Q3', status: 'submitted' },
            ].map((r, i) => (
              <div key={i} style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icons.shield />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{r.name}</div>
                  <div className="text-faint" style={{ fontSize: 11 }}>{r.period}</div>
                </div>
                {r.status === 'submitted' ? <span className="badge success"><Icons.check /> {t.tx('已提交', 'Submitted')}</span> : <span className="badge info">{t.tx('进行中', 'In progress')}</span>}
                <button className="btn btn-xs btn-ghost"><Icons.download /></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── 14 Videos ───────────────────────────────────────────────────────────────
function VideosScreen({ t, push }) {
  const [kind, setKind] = React.useState('all');
  const filtered = DATA.videos.filter(v => kind === 'all' || v.kind === kind);
  return (
    <div className="stack">
      <div className="page-h">
        <div>
          <h1>{t.p_videos}</h1>
          <div className="sub">{t.tx('12,402 条短视频 · 1,820 部长视频 · 今日播放 4.8M · 审核队列 24', '12,402 short videos · 1,820 long videos · 4.8M plays today · 24 in moderation queue')}</div>
        </div>
        <div className="actions">
          <button className="btn btn-sm"><Icons.upload /> {t.tx('批量上传', 'Bulk upload')}</button>
          <button className="btn btn-sm"><Icons.flag /> {t.tx('审核队列', 'Moderation queue')} 24</button>
          <button className="btn btn-pri btn-sm"><Icons.plus /> {t.tx('内容', 'Content')}</button>
        </div>
      </div>

      <div className="row-4">
        <KPI t={t} label={t.tx('今日播放', "Today's plays")} value="4.82M" delta="+18.4%" up spark={<Sparkline data={[2,3,3,4,4,5,5]} w={100} h={24} />} />
        <KPI t={t} label={t.tx('完播率', 'Completion rate')} value="64.2%" delta="+2.1%" up spark={<Sparkline data={[60,61,62,62,63,64,64]} w={100} h={24} stroke="oklch(0.6 0.16 145)" />} />
        <KPI t={t} label={t.tx('付费转化', 'Paid conversion')} value="3.4%" delta="+0.4%" up spark={<Sparkline data={[2.4,2.6,2.8,3.0,3.2,3.3,3.4]} w={100} h={24} stroke="oklch(0.62 0.14 230)" />} />
        <KPI t={t} label={t.tx('举报 / 违规', 'Reports / Violations')} value="48" delta={t.tx('+12 待处理', '+12 pending')} spark={<MiniBars data={[2,3,2,4,3,5,4]} w={100} h={24} color="oklch(0.58 0.20 25)" />} />
      </div>

      <div className="card">
        <div className="filter-bar">
          {[['all', t.tx('全部','All')],['short', t.tx('短视频','Short')],['long', t.tx('长视频','Long')]].map(([k,l]) => (
            <span key={k} className={'chip ' + (kind === k ? 'active' : '')} onClick={() => setKind(k)}>{l}</span>
          ))}
          <div style={{ flex: 1 }} />
          <button className="btn btn-sm btn-ghost"><Icons.filter /> {t.tx('标签 / 清晰度 / VIP', 'Tags / Quality / VIP')}</button>
        </div>
        <div style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 14 }}>
          {filtered.map((v, i) => (
            <div key={v.id} className="card" style={{ overflow: 'hidden' }}>
              {/* Thumbnail */}
              <div style={{
                aspectRatio: v.kind === 'short' ? '9 / 16' : '16 / 9',
                background: `linear-gradient(135deg, oklch(0.5 0.12 ${(i * 47) % 360}), oklch(0.3 0.18 ${(i * 71) % 360}))`,
                position: 'relative',
                display: 'flex', alignItems: 'flex-end', padding: 10,
                borderBottom: '1px solid var(--border)'
              }}>
                <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', gap: 4 }}>
                  <span className="badge solid-dark" style={{ background: 'rgba(0,0,0,.55)', backdropFilter: 'blur(4px)', color: 'white' }}>{v.kind === 'short' ? t.tx('短','S') : t.tx('长','L')}</span>
                  {v.vip && <span className="badge gold" style={{ background: 'rgba(0,0,0,.55)', color: 'oklch(0.85 0.14 85)' }}>VIP</span>}
                </div>
                <div style={{ position: 'absolute', top: 8, right: 8, fontSize: 10, padding: '2px 6px', background: 'rgba(0,0,0,.55)', color: 'white', borderRadius: 4, fontFamily: 'var(--font-mono)' }}>{v.quality}</div>
                <div style={{ color: 'white', fontSize: 13, fontWeight: 600, textShadow: '0 1px 4px rgba(0,0,0,.6)', maxWidth: '100%' }} className="truncate">{v.title}</div>
                <div style={{ position: 'absolute', bottom: 8, right: 10, fontSize: 10, color: 'white', textShadow: '0 1px 3px rgba(0,0,0,.6)', fontFamily: 'var(--font-mono)' }}>{v.duration}</div>
              </div>
              {/* Meta */}
              <div style={{ padding: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-muted)', marginBottom: 6 }}>
                  <Icons.eye /><span className="tabular">{fmtNum(v.plays)}</span>
                  <span className="text-faint">·</span>
                  <StatusBadge status={v.status} t={t} />
                </div>
                <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
                  {v.tags.map(tg => <span key={tg} className="badge outline" style={{ fontSize: 10 }}>{tg}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── 15 Live ─────────────────────────────────────────────────────────────────
function LiveScreen({ t, push }) {
  return (
    <div className="stack">
      <div className="page-h">
        <div>
          <h1>{t.p_live}</h1>
          <div className="sub">{t.tx('直播间 42 间在线 · 总观众 27,034 · 5 个分类', '42 rooms live · 27,034 viewers · 5 categories')}</div>
        </div>
        <div className="actions">
          <button className="btn btn-sm">{t.tx('主播认证', 'Host verification')}</button>
          <button className="btn btn-sm">{t.tx('礼物配置', 'Gift config')}</button>
          <button className="btn btn-pri btn-sm"><Icons.plus /> {t.tx('开播位置', 'Slot')}</button>
        </div>
      </div>

      <div className="row-4">
        <KPI t={t} label={t.tx('在线直播间', 'Live rooms')} value="42" delta="+8" up spark={<MiniBars data={[28,30,32,38,40,42]} w={100} h={24} />} />
        <KPI t={t} label={t.tx('实时观众', 'Live viewers')} value="27,034" delta="+12.4%" up spark={<Sparkline data={[20,22,24,25,26,27,28]} w={100} h={24} stroke="oklch(0.62 0.14 230)" />} />
        <KPI t={t} label={t.tx('今日打赏', "Today's tips")} value="¥1.42M" delta="+24.2%" up spark={<Sparkline data={[8,12,14,18,22,26,30]} w={100} h={24} stroke="oklch(0.65 0.14 30)" />} />
        <KPI t={t} label={t.tx('平均卡顿率', 'Avg jank rate')} value="0.8%" delta="-0.2%" up spark={<Sparkline data={[1.2,1.1,1.0,0.9,0.9,0.8,0.8]} w={100} h={24} stroke="oklch(0.6 0.16 145)" />} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-h">
            <h3>{t.tx('实时直播间', 'Live rooms')}</h3>
            <span className="meta">{t.tx('5s 自动刷新', 'Auto refresh 5s')}</span>
          </div>
          <div className="tbl-scroll">
          <table className="tbl tbl-stack">
            <thead><tr>
              <th>{t.tx('主播', 'Host')}</th><th>{t.tx('分类', 'Category')}</th><th className="right">{t.tx('观众', 'Viewers')}</th><th className="right">{t.tx('打赏', 'Tips')}</th>
              <th>{t.tx('时长', 'Duration')}</th><th>{t.tx('码率', 'Bitrate')}</th><th>{t.tx('卡顿', 'Jank')}</th><th>{t.tx('状态', 'Status')}</th><th></th>
            </tr></thead>
            <tbody>
              {DATA.lives.map(l => (
                <tr key={l.id}>
                  <td data-label={t.tx('主播', 'Host')}>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                      <div style={{ position: 'relative' }}>
                        <Avatar name={l.host} size={26} />
                        <span style={{ position: 'absolute', bottom: -2, right: -2, background: 'var(--danger)', color: 'white', fontSize: 7, fontWeight: 700, padding: '1px 3px', borderRadius: 2, letterSpacing: '.04em' }}>LIVE</span>
                      </div>
                      <div>
                        <div style={{ fontWeight: 500 }}>{l.host}</div>
                        <div className="text-mono text-faint" style={{ fontSize: 10 }}>{l.id}</div>
                      </div>
                    </div>
                  </td>
                  <td data-label={t.tx('分类', 'Category')}><span className="badge outline">{l.cat}</span></td>
                  <td data-label={t.tx('观众', 'Viewers')} className="right tabular">{fmtNum(l.viewers)}</td>
                  <td data-label={t.tx('打赏', 'Tips')} className="right tabular">{fmtCN(l.gifts)}</td>
                  <td data-label={t.tx('时长', 'Duration')} className="text-mono muted">{l.dur}</td>
                  <td data-label={t.tx('码率', 'Bitrate')} className="muted">{l.bitrate}</td>
                  <td data-label={t.tx('卡顿', 'Jank')}><span style={{ color: parseFloat(l.jank) > 1 ? 'var(--warning)' : 'var(--success)' }} className="tabular">{l.jank}</span></td>
                  <td data-label={t.tx('状态', 'Status')}>{l.sev === 'risk' ? <StatusBadge status="risk" t={t} /> : l.sev === 'warn' ? <StatusBadge status="warning" t={t} /> : <StatusBadge status="normal" t={t} />}</td>
                  <td data-label={t.tx('操作', 'Actions')} className="tbl-actions">
                    {l.sev === 'risk' ? <button className="btn btn-xs btn-danger">{t.tx('关播', 'Cut')}</button> : <button className="btn btn-xs">{t.tx('进入', 'Enter')}</button>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>

        <div className="card">
          <div className="card-h"><h3>{t.tx('违规 · 复核队列', 'Violations · Review queue')}</h3><span className="badge danger">3</span></div>
          <div>
            {[
              { who: t.tx('?违规-待复核', '?violation-pending'), kind: t.tx('低俗内容', 'Vulgar content'), sev: 'high', t: t.tx('2m前', '2m ago') },
              { who: 'CityRun_Dan',  kind: t.tx('弹幕辱骂', 'Chat abuse'),      sev: 'mid',  t: t.tx('12m前', '12m ago') },
              { who: t.tx('Mika美妆', 'Mika Beauty'),     kind: t.tx('推广违规', 'Promo violation'), sev: 'mid',  t: t.tx('32m前', '32m ago') },
              { who: 'Orion_Live',   kind: t.tx('版权', 'Copyright'),           sev: 'low',  t: t.tx('1h前', '1h ago') },
            ].map((r, i) => (
              <div key={i} style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
                  <Avatar name={r.who} size={22} />
                  <span style={{ fontSize: 12.5, fontWeight: 500 }}>{r.who}</span>
                  <span className="text-faint" style={{ fontSize: 11, marginLeft: 'auto' }}>{r.t}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  {r.sev === 'high' ? <span className="badge danger">{t.tx('高','High')}</span> : r.sev === 'mid' ? <span className="badge warning">{t.tx('中','Mid')}</span> : <span className="badge info">{t.tx('低','Low')}</span>}
                  <span style={{ fontSize: 12 }}>{r.kind}</span>
                  <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
                    <button className="btn btn-xs btn-ghost">{t.tx('驳回', 'Reject')}</button>
                    <button className="btn btn-xs btn-danger">{t.tx('处置', 'Action')}</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GamesScreen, VideosScreen, LiveScreen });