// Servers, Commands, Activity pages.

function PageServers() {
  const ctx = React.useContext(DashCtx);
  const [q, setQ] = React.useState('');
  const filtered = GUILDS.filter((g) => g.name.toLowerCase().includes(q.toLowerCase()));
  const exportCSV = () => {
    const rows = [['id', 'name', 'members', 'online', 'joined'], ...GUILDS.map((g) => [g.id, g.name, g.members, g.online, g.joined])];
    const csv = rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
    const a = document.createElement('a');
    a.href = url; a.download = 'servers.csv';
    document.body.appendChild(a); a.click(); a.remove();
    URL.revokeObjectURL(url);
  };
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Servers</h1>
          <div className="page-sub">{GUILDS.length} guilds · {GUILDS.reduce((s, g) => s + g.members, 0)} total members</div>
        </div>
        <div className="row">
          <div className="search" style={{ width: 220 }}>
            <I.search width="14" height="14"/>
            <input placeholder="Filter…" value={q} onChange={(e) => setQ(e.target.value)}/>
          </div>
          <button className="btn" onClick={exportCSV}>Export CSV</button>
        </div>
      </div>

      <Card padding={0}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Guild</th>
              <th className="num">Members</th>
              <th className="num">Online</th>
              <th>Prefix</th>
              <th className="num">Joined</th>
              <th>Plan</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((g) => (
              <tr key={g.id} style={{ cursor: 'pointer' }} onClick={() => ctx.onOpenGuild(g)}>
                <td>
                  <div className="row">
                    <GuildAvatar name={g.name} color={g.color} icon={g.icon}/>
                    <div>
                      <div>{g.name}</div>
                      <div className="muted mono" style={{ fontSize: 11 }}>id {g.id.padStart(18, '0')}</div>
                    </div>
                  </div>
                </td>
                <td className="num">{g.members}</td>
                <td className="num"><span style={{ color: 'var(--accent)' }}>●</span> {g.online}</td>
                <td className="mono">{g.prefix}</td>
                <td className="num muted">{g.joined}</td>
                <td>{g.premium ? <span className="chip solid">Premium</span> : <span className="chip">Free</span>}</td>
                <td><button className="btn" style={{ padding: '4px 8px', fontSize: 11.5 }} onClick={(e) => { e.stopPropagation(); ctx.onOpenGuild(g); }}>Manage</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

function PageCommands() {
  const ctx = React.useContext(DashCtx);
  const conn = useConn();
  useRealData(); // re-render when real command data arrives
  const [filter, setFilter] = React.useState('all');
  const cats = COMMAND_CATEGORIES;
  const max = ALL_COMMANDS.reduce((m, x) => Math.max(m, x.uses), 0);
  const filteredCats = filter === 'all' ? cats : cats.filter((c) => c.key === filter);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Commands</h1>
          <div className="page-sub">{TOTAL_COMMANDS} registered · {TOTAL_USES_ALL.toLocaleString()} uses all-time</div>
        </div>
        <div className="row">
          <button className="btn" disabled={conn.status !== 'connected'} onClick={() => { if (conn.status === 'connected') REALDATA.doAction('reload').then(() => { toast('reload สำเร็จ', 'success'); REALDATA.refreshAll().catch(() => {}); }).catch((e) => toast('ล้มเหลว: ' + e.message, 'error')); }}><I.refresh width="13" height="13"/>Reload all</button>
          <button className="btn primary" disabled={conn.status !== 'connected'} onClick={() => REALDATA.doAction('redeploy').then((r) => { toast(r.message || 'synced', 'success'); REALDATA.refreshAll(); }).catch((e) => toast(e.message, 'error'))}>Sync slash commands</button>
        </div>
      </div>

      <div className="grid grid-4">
        {cats.map((c) => {
          const total = c.items.reduce((s, x) => s + x.uses, 0);
          return (
            <div key={c.key} className="card" style={{ padding: 14, cursor: 'pointer', borderColor: filter === c.key ? c.color : undefined }} onClick={() => setFilter(filter === c.key ? 'all' : c.key)}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <div className="row">
                  <span style={{ width: 22, height: 22, borderRadius: 6, display: 'grid', placeItems: 'center', background: `color-mix(in oklab, ${c.color} 18%, transparent)`, color: c.color, fontSize: 13 }}>{c.icon}</span>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{c.name}</div>
                </div>
                <div className="mono dim" style={{ fontSize: 11 }}>{c.items.length} cmd</div>
              </div>
              <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div className="mono" style={{ fontSize: 20, color: c.color }}>{total.toLocaleString()}</div>
                <div className="dim" style={{ fontSize: 11 }}>uses</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="tabs">
        <button className="tab" aria-current={filter === 'all'} onClick={() => setFilter('all')}>All ({TOTAL_COMMANDS})</button>
        {cats.map((c) => (
          <button key={c.key} className="tab" aria-current={filter === c.key} onClick={() => setFilter(c.key)}>{c.icon} {c.name} ({c.items.length})</button>
        ))}
      </div>

      {filteredCats.map((c) => (
        <Card key={c.key}
          title={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>{c.icon} {c.name}</span>}
          sub={`${c.items.length} commands · ${c.items.reduce((s, x) => s + x.uses, 0).toLocaleString()} uses`}
          padding={0}
        >
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 200 }}>Command</th>
                <th>Description</th>
                <th className="num" style={{ width: 110 }}>Uses</th>
                <th style={{ width: 200 }}></th>
                <th style={{ width: 70 }}></th>
              </tr>
            </thead>
            <tbody>
              {c.items.map((cmd) => (
                <tr key={cmd.name} style={{ cursor: 'pointer' }} onClick={() => ctx.onOpenCommand({ ...cmd, category: c.key, categoryName: c.name, color: c.color })}>
                  <td className="mono" style={{ color: c.color }}>/{cmd.name}</td>
                  <td>{cmd.desc}</td>
                  <td className="num">{cmd.uses.toLocaleString()}</td>
                  <td>
                    <div className="bar-track" style={{ width: 160 }}>
                      <div className="bar-fill" style={{ width: `${Math.max(2, (cmd.uses / max) * 100)}%`, background: c.color }}/>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      ))}
    </div>
  );
}

function PageActivity() {
  const conn = useConn();
  const isLive = conn.status === 'connected';
  useRealData(); // re-render when real shift/command data arrives

  if (isLive) {
    const users = [...((REALDATA.shifts && REALDATA.shifts.weekly && REALDATA.shifts.weekly.users) || [])]
      .sort((a, b) => (b.totalMs || 0) - (a.totalMs || 0));
    const topCmds = [...ALL_COMMANDS].sort((a, b) => b.uses - a.uses).slice(0, 10);
    const maxUses = topCmds.reduce((m, x) => Math.max(m, x.uses), 0) || 1;
    const maxMs = users.reduce((m, x) => Math.max(m, x.totalMs || 0), 0) || 1;
    const totalHours = users.reduce((s, x) => s + (x.totalMs || 0), 0) / 3600000;
    const fmtH = (ms) => (((ms || 0) / 3600000).toFixed(1)) + 'h';

    return (
      <div className="page">
        <div className="page-head">
          <div>
            <h1 className="page-title">Activity</h1>
            <div className="page-sub">{users.length} คนทำงานสัปดาห์นี้ · {totalHours.toFixed(1)} ชั่วโมงรวม · {ALL_COMMANDS.length} คำสั่ง</div>
          </div>
        </div>

        <Card title="อันดับชั่วโมงทำงาน" sub="last 7 days · เรียงตามเวลารวม" padding={0}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 50 }}>#</th>
                <th>User</th>
                <th className="num">Shifts</th>
                <th className="num">Avg</th>
                <th className="num">Total hours</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {users.map((u, i) => (
                <tr key={u.userId || i}>
                  <td className="mono dim">{String(i + 1).padStart(2, '0')}</td>
                  <td>
                    <div className="row">
                      {u.avatarURL
                        ? <img src={u.avatarURL} alt="" style={{ width: 26, height: 26, borderRadius: 999, objectFit: 'cover' }}/>
                        : <div style={{ width: 26, height: 26, borderRadius: 999, background: `hsl(${((u.displayName || u.username || '?').charCodeAt(0) || 63) * 9} 70% 60%)` }}/>}
                      <div>
                        <div>{u.displayName || u.username}</div>
                        <div className="mono muted" style={{ fontSize: 10.5 }}>{u.userId}</div>
                      </div>
                    </div>
                  </td>
                  <td className="num">{u.shifts}</td>
                  <td className="num mono">{fmtH(u.averageMs)}</td>
                  <td className="num" style={{ color: 'var(--accent)' }}>{fmtH(u.totalMs)}</td>
                  <td>
                    <div className="bar-track" style={{ width: 180 }}>
                      <div className="bar-fill" style={{ width: `${Math.max(2, ((u.totalMs || 0) / maxMs) * 100)}%` }}/>
                    </div>
                  </td>
                </tr>
              ))}
              {users.length === 0 && (
                <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>ยังไม่มีข้อมูลการทำงานสัปดาห์นี้</td></tr>
              )}
            </tbody>
          </table>
        </Card>

        <div className="grid grid-2">
          <Card title="คำสั่งที่ใช้บ่อย" sub="Top 10 · per-command usage" padding={0}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 200 }}>Command</th>
                  <th className="num" style={{ width: 110 }}>Uses</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {topCmds.map((cmd) => (
                  <tr key={cmd.name}>
                    <td className="mono" style={{ color: 'var(--accent)' }}>/{cmd.name}</td>
                    <td className="num">{(cmd.uses || 0).toLocaleString()}</td>
                    <td>
                      <div className="bar-track" style={{ width: 160 }}>
                        <div className="bar-fill" style={{ width: `${Math.max(2, ((cmd.uses || 0) / maxUses) * 100)}%` }}/>
                      </div>
                    </td>
                  </tr>
                ))}
                {topCmds.length === 0 && (
                  <tr><td colSpan={3} style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>ยังไม่มีข้อมูลการใช้คำสั่ง</td></tr>
                )}
              </tbody>
            </table>
          </Card>

          <Card title="ปริมาณคำสั่งรายชั่วโมง" sub="24 ชั่วโมงล่าสุด">
            <MiniBars data={COMMANDS_HOURLY} highlightIdx={new Date().getHours()}/>
          </Card>
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Activity</h1>
          <div className="page-sub">Top users by command invocations + shift hours</div>
        </div>
      </div>

      <div className="grid grid-3">
        <StatCard label="Active users · 7d" value="184" delta="+22 vs prev" deltaDir="up" spark={[120,128,140,156,162,170,178,184]}/>
        <StatCard label="Avg commands / user" value="14.2" delta="+1.3" deltaDir="up" spark={[10,11,11.5,12,12.8,13.5,14,14.2]} sparkColor="var(--violet)"/>
        <StatCard label="Shift hours · 7d" value="2,184" delta="−4.1%" deltaDir="down" spark={[420,380,360,340,300,300,184]} sparkColor="var(--warn)"/>
      </div>

      <Card title="Leaderboard" sub="last 7 days" padding={0}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 50 }}>#</th>
              <th>User</th>
              <th>ID</th>
              <th className="num">Commands</th>
              <th className="num">Shift hours</th>
              <th></th>
              <th style={{ width: 80 }}></th>
            </tr>
          </thead>
          <tbody>
            {TOP_USERS.map((u) => {
              const maxCmds = TOP_USERS[0].commands;
              return (
                <tr key={u.id}>
                  <td className="mono dim">{String(u.rank).padStart(2, '0')}</td>
                  <td>
                    <div className="row">
                      <div style={{ width: 26, height: 26, borderRadius: 999, background: `hsl(${u.rank * 47} 70% 60%)` }}/>
                      <div>
                        <div>{u.name} {u.badge && <span className="chip warn" style={{ marginLeft: 6 }}>{u.badge}</span>}</div>
                      </div>
                    </div>
                  </td>
                  <td className="mono muted">{u.id}</td>
                  <td className="num">{u.commands.toLocaleString()}</td>
                  <td className="num">{u.hours}h</td>
                  <td>
                    <div className="bar-track" style={{ width: 180 }}>
                      <div className="bar-fill" style={{ width: `${(u.commands / maxCmds) * 100}%` }}/>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Object.assign(window, { PageServers, PageCommands, PageActivity });