// Overview page — main dashboard landing.

// Live clock — Asia/Bangkok, ticks every second.
function LiveClock() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const t = now.toLocaleTimeString('en-GB', { timeZone: 'Asia/Bangkok', hour12: false });
  const parts = t.split(':');
  const hh = parts[0] || '00', mm = parts[1] || '00', ss = parts[2] || '00';
  let dateStr = now.toLocaleDateString('th-TH', { timeZone: 'Asia/Bangkok', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  return (
    <div className="clock-card" style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, var(--surface)) 0%, var(--surface) 58%)',
      border: '1px solid var(--border)', borderRadius: 14, padding: '22px 26px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(600px 120px at 0% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent)',
      }}/>
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, fontFamily: 'var(--font-mono)', lineHeight: 1 }}>
          <span className="clock-hh">{hh}:{mm}</span>
          <span className="clock-ss">:{ss}</span>
        </div>
        <div style={{ marginTop: 10, color: 'var(--text-muted)', fontSize: 13.5 }}>{dateStr}</div>
      </div>
      <div style={{ position: 'relative', textAlign: 'right' }}>
        <div className="chip mono" style={{ marginBottom: 8 }}>🇹🇭 ICT · UTC+7</div>
        <div className="muted" style={{ fontSize: 11.5 }}>Asia / Bangkok</div>
      </div>
    </div>
  );
}

function PageOverview() {
  const ctx = React.useContext(DashCtx);
  const live = useLive();
  const conn = useConn();
  useRealData();
  const isLive = conn.status === 'connected';
  const metrics = (isLive && REALDATA.raw && REALDATA.raw.metrics) || null;

  const cmdsToday = live.cmdsToday.toLocaleString();
  const cmdsSpark = COMMANDS_HOURLY.slice(0, 15);

  const totalGuildMembers = GUILDS.reduce((s, g) => s + g.members, 0);
  const totalOnline = GUILDS.reduce((s, g) => s + g.online, 0);

  // real-ish stats when connected
  const usersReached = isLive ? totalGuildMembers : 872;
  const usersSpark = [620, 640, 660, 680, 700, 740, 770, 810, 830, 845, 858, 865, 870, 872];
  const errCount = isLive ? live.logs.filter((l) => l.level === 'error').length : 3;
  const errorsSpark = [0, 0, 1, 0, 0, 2, 1, 0, 3, 1, 0, 0, 0, 0, 0];

  // System card — real uptime + memory when connected
  const uptimeStr = isLive ? fmtUptimeShell(BOT.startedAt) : '3d 0h 22m';
  const memUsedMB = metrics ? Math.round((metrics.heapUsed || 0) / 1048576) : 172;
  const memTotalMB = metrics ? Math.max(1, Math.round((metrics.heapTotal || 0) / 1048576)) : 512;
  const memPct = Math.min(100, Math.round((memUsedMB / memTotalMB) * 100));

  const latencyNow = live.latency[live.latency.length - 1];
  const latencyAvg = Math.round(live.latency.reduce((s, v) => s + v, 0) / live.latency.length);
  const latencyMax = Math.max(...live.latency);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Overview</h1>
          <div className="page-sub">
            {conn.status === 'connected'
              ? <><span style={{ color: 'var(--accent)' }}>● Live</span> · pulling from {conn.endpoint}</>
              : <>Sample data · <span style={{ color: 'var(--warn)' }}>not connected to a real bot</span></>
            }
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn" onClick={() => { if (conn.status === 'connected') REALDATA.refreshAll().catch(() => {}); }}><I.refresh width="13" height="13"/>Refresh</button>
          <button className="btn primary" disabled={conn.status !== 'connected'} onClick={() => { if (conn.status !== 'connected') return; toastConfirm('รีสตาร์ทบอทตอนนี้? บอทจะออฟไลน์ชั่วครู่', { danger: true }).then((ok) => { if (!ok) return; REALDATA.doAction('restart').then(() => toast('สั่งรีสตาร์ทแล้ว', 'success')).catch((e) => toast('ล้มเหลว: ' + e.message, 'error')); }); }}><I.power width="13" height="13"/>Restart bot</button>
        </div>
      </div>

      <OnboardBanner onConnect={() => ctx.onRoute('settings')}/>

      <LiveClock/>

      {/* Stat row */}
      <div className="grid grid-4">
        <StatCard
          label={<><span>Servers</span><span className="dim">· total members {totalGuildMembers}</span></>}
          value={GUILDS.length}
          delta={`+2 in 30d · ${totalOnline} online`}
          deltaDir="up"
          spark={[5, 5, 5, 6, 6, 6, 7, 7, 8, 8, 8, 8]}
        />
        <StatCard
          label={<><span>Commands · 24h</span></>}
          value={cmdsToday}
          delta="+12.4% vs yesterday"
          deltaDir="up"
          spark={cmdsSpark}
        />
        <StatCard
          label={<><span>{isLive ? 'สมาชิกทั้งหมด' : 'Users reached · 7d'}</span></>}
          value={usersReached.toLocaleString()}
          delta={isLive ? `${totalOnline} ออนไลน์` : '+8.1% vs prev week'}
          deltaDir="up"
          spark={usersSpark}
          sparkColor="var(--violet)"
        />
        <StatCard
          label={<><span>{isLive ? 'Errors (log ปัจจุบัน)' : 'Errors · 24h'}</span></>}
          value={errCount}
          delta={isLive ? 'จาก log ล่าสุด' : '−4 vs yesterday'}
          deltaDir="down"
          spark={errorsSpark}
          sparkColor="var(--danger)"
        />
      </div>

      {/* Latency + status */}
      <div className="grid grid-12-5">
        <Card
          title="Gateway latency"
          sub="last 60 minutes · WebSocket heartbeat"
          action={
            <div className="row" style={{ gap: 16 }}>
              <div className="row" style={{ gap: 6 }}>
                <span className="dim" style={{ fontSize: 11 }}>NOW</span>
                <span className="mono" style={{ fontSize: 13, color: 'var(--text)' }}>{latencyNow}ms</span>
              </div>
              <div className="row" style={{ gap: 6 }}>
                <span className="dim" style={{ fontSize: 11 }}>AVG</span>
                <span className="mono" style={{ fontSize: 13 }}>{latencyAvg}ms</span>
              </div>
              <div className="row" style={{ gap: 6 }}>
                <span className="dim" style={{ fontSize: 11 }}>PEAK</span>
                <span className="mono" style={{ fontSize: 13, color: 'var(--warn)' }}>{latencyMax}ms</span>
              </div>
            </div>
          }
        >
          <LineChart data={live.latency} height={220} labels={['60m', '45m', '30m', '15m', 'now']}/>
        </Card>

        <Card title="System">
          <div className="kv"><div className="kv-key">Status</div><div className="kv-val"><span className="chip solid"><span className="dot" style={{ width: 6, height: 6, boxShadow: 'none' }}/>Online</span></div></div>
          <div className="kv"><div className="kv-key">Uptime</div><div className="kv-val mono">{uptimeStr}</div></div>
          <div className="kv"><div className="kv-key">Version</div><div className="kv-val mono">{BOT.version}</div></div>
          <div className="kv"><div className="kv-key">Library</div><div className="kv-val mono">{BOT.library}</div></div>
          <div className="kv"><div className="kv-key">Runtime</div><div className="kv-val mono">{BOT.node}</div></div>
          <div className="kv"><div className="kv-key">Ping</div><div className="kv-val mono">{isLive ? `${latencyNow}ms` : BOT.region}</div></div>
          <div className="kv"><div className="kv-key">Memory</div><div className="kv-val">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ flex: 1, height: 6, background: 'var(--surface-2)', borderRadius: 999 }}>
                <div style={{ width: `${memPct}%`, height: '100%', background: 'var(--accent)', borderRadius: 'inherit' }}/>
              </div>
              <span className="mono" style={{ fontSize: 12 }}>{memUsedMB}/{memTotalMB} MB</span>
            </div>
          </div></div>
        </Card>
      </div>

      {/* Command volume + Top commands */}
      <div className="grid grid-12-5">
        <Card title="Command volume" sub="last 24 hours · hourly buckets">
          <MiniBars data={COMMANDS_HOURLY} highlightIdx={14} height={140}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-dim)', fontSize: 10.5, marginTop: 8, fontFamily: 'var(--font-mono)' }}>
            <span>−24h</span><span>−18h</span><span>−12h</span><span>−6h</span><span>now</span>
          </div>
        </Card>

        <Card title="Top commands · today" sub={`${TOTAL_COMMANDS} total · ${TOTAL_USES_ALL.toLocaleString()} all-time`}>
          {[...ALL_COMMANDS].sort((a, b) => b.uses - a.uses).slice(0, 7).map((c) => {
            const max = ALL_COMMANDS.reduce((m, x) => Math.max(m, x.uses), 0);
            return (
              <div key={c.name} className="bar-row" style={{ cursor: 'pointer' }} onClick={() => ctx.onOpenCommand(c)}>
                <div style={{ width: 110, fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 2, background: c.color, flexShrink: 0 }}/>
                  <span className="mono ellipsis">/{c.name}</span>
                </div>
                <div className="bar-track"><div className="bar-fill" style={{ width: `${(c.uses / max) * 100}%`, background: c.color }}/></div>
                <div className="mono dim" style={{ width: 56, textAlign: 'right', fontSize: 12 }}>{c.uses.toLocaleString()}</div>
              </div>
            );
          })}
        </Card>
      </div>

      {/* Servers row + recent activity */}
      <div className="grid grid-12-5">
        <Card
          title="Servers"
          sub={`${GUILDS.length} guilds`}
          action={<button className="btn" onClick={() => ctx.onRoute('servers')}>View all <I.arrow width="11" height="11"/></button>}
        >
          <table className="tbl">
            <thead><tr><th>Guild</th><th className="num">Members</th><th className="num">Online</th><th className="num">Joined</th><th>Plan</th></tr></thead>
            <tbody>
              {GUILDS.slice(0, 6).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}/>
                      <span className="ellipsis" style={{ maxWidth: 200 }}>{g.name}</span>
                    </div>
                  </td>
                  <td className="num">{g.members}</td>
                  <td className="num"><span style={{ color: 'var(--accent)' }}>●</span> {g.online}</td>
                  <td className="num muted">{g.joined}</td>
                  <td>{g.premium ? <span className="chip solid">Premium</span> : <span className="chip">Free</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <Card
          title="Recent activity"
          sub="live event feed"
          action={<span className="chip"><span className="dot" style={{ width: 5, height: 5, boxShadow: 'none' }}/>live</span>}
        >
          <div className="log-stream" style={{ maxHeight: 320 }}>
            {live.logs.slice(0, 12).map((l, i) => (
              <div className="log-line" key={i}>
                <span className="t">{l.t}</span>
                <span className={`lvl ${l.level}`}>{l.level}</span>
                <span className="src">{l.source}</span>
                <span className="msg" title={l.msg}>{l.msg}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { PageOverview });