// Playtime from PlaytimeHistory, shared by the public site and the staff panel: the Playtime page
// and the Playtime sections of a player's drawer. On the staff panel, staff with @css/generic
// (me.playtimeStaff) also get the staff-only figures; the public site shows everyone the same.
// Needs common.js.

const PT_TZ = (() => { try { return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"; } catch { return "UTC"; } })();
const PT_PERIODS = [["7d", "Last 7 days"], ["30d", "Last 30 days"], ["all", "All time"]];
const PT_WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const PT_TEAM = { 0: '<span class="faint">Unassigned</span>', 1: '<span class="muted">Spectating</span>', 2: '<span class="team t">T</span>', 3: '<span class="team ct">CT</span>' };
const PT_DBIP = '<p class="pt-credit">Locations from <a href="https://db-ip.com" target="_blank" rel="noopener">IP Geolocation by DB-IP</a> (CC BY 4.0). The plugin never stores IP addresses.</p>';
// The CS2 disconnect reasons players hit most, in words. Anything else shows its own name.
const PT_REASONS = {
  NETWORK_DISCONNECT_DISCONNECT_BY_USER: "Left the game",
  NETWORK_DISCONNECT_TIMEDOUT: "Timed out",
  NETWORK_DISCONNECT_KICKED: "Kicked",
  NETWORK_DISCONNECT_STEAM_LOGOFF: "Steam logged off",
  NETWORK_DISCONNECT_LOOPDEACTIVATE: "Game closed",
  NETWORK_DISCONNECT_LOOPSHUTDOWN: "Game closed",
  NETWORK_DISCONNECT_EXITING: "Game closed",
  NETWORK_DISCONNECT_REJECT_BANNED: "Banned",
  NETWORK_DISCONNECT_KICKBANADDED: "Banned",
  NETWORK_DISCONNECT_STEAM_BANNED: "Banned",
  NETWORK_DISCONNECT_SHUTDOWN: "Server shut down",
};

const ptState = { period: "7d", staffPeriod: "7d", records: "7d" };

// The Records categories, from PlaytimeHistory's pt_events (0.2.0+).
const PT_RECORDS = [
  ["plants", "Bomb plants"], ["defuses", "Bomb defuses"], ["knifeKills", "Knife kills"], ["zeusKills", "Zeus kills"], ["headshots", "Headshot kills"],
];

const ptH = (h) => (h >= 100 ? Math.round(h).toLocaleString() : (Math.round(h * 10) / 10).toFixed(1)) + " h";
// a as a percentage of b. Works for hours under 1 too; nothing of nothing is 0.
const ptPct = (a, b) => (b > 0 ? Math.round((a / b) * 100) : 0);
// "–" until there's a kill or death to go on (session stats are saved when a session ends).
const ptKD = (k, d) => (k + d > 0 ? (k / Math.max(d, 1)).toFixed(2) : "–");
const ptPad = (h) => String(h).padStart(2, "0");
const ptDur = (s) => (s >= 3600 ? `${Math.floor(s / 3600)}h ${ptPad(Math.floor((s % 3600) / 60))}m` : `${Math.max(1, Math.round(s / 60))}m`);
const ptDay = (iso, opts = { weekday: "short", day: "numeric", month: "short" }) => new Date(`${iso}T12:00:00`).toLocaleDateString(undefined, opts);

function ptWho(p) {
  return `<div class="who pt-who">${avatar(p.steamid, p.name)}<div><b>${esc(p.name || "Unknown")}${p.rank ? rankTag(p.rank) : ""}</b><span class="sid">${esc(p.steamid)}</span></div></div>`;
}

function ptBar(value, max, label, fill) {
  return `<div class="pt-hbar"><div class="track"><div class="fill" style="width:${ptPct(value, max)}%${fill ? `;--fill:${fill}` : ""}"></div></div><span>${label}</span></div>`;
}

// A clean gridline step for values up to max: about three lines, from 0.1 up.
function ptStep(max, least = 0.1) {
  for (const s of [0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, 100, 200, 500]) if (s >= least && max / s <= 4) return s;
  return 1000;
}

// A column chart: values [{v, tip, tick}], gridlines on clean steps.
function ptColumns(values, { note = "", fill = "", whole = false }) {
  const top = Math.max(0, ...values.map((x) => x.v));
  const step = ptStep(top, whole ? 1 : 0.1);
  const max = Math.max(step, Math.ceil(top / step - 1e-9) * step);
  const grid = [];
  for (let i = 1; i * step <= max + 1e-9; i++) {
    const g = Math.round(i * step * 10) / 10;
    grid.push(`<div class="grid" style="bottom:${(g / max) * 100}%"><span>${g}</span></div>`);
  }
  return `<div class="pt-cols">
    <div class="plot">${grid.join("")}${values.map((x) => `<div class="bar" tabindex="0" data-tip="${esc(x.tip)}"><i style="height:${x.v ? Math.max(1, (x.v / max) * 100) : 0}%${fill ? `;background:${fill}` : ""}"></i></div>`).join("")}</div>
    <div class="ticks">${values.map((x) => `<span>${x.tick ?? ""}</span>`).join("")}</div>
    ${note ? `<p class="note">${note}</p>` : ""}
  </div>`;
}

function ptSplit(t, ct, spec) {
  const total = t + ct + spec;
  const seg = (cls, v) => (v > 0 ? `<i class="${cls}" style="flex:${v}" data-tip="${esc(`${ptH(v)} (${ptPct(v, total)}%)`)}"></i>` : "");
  return `<div class="pt-split" role="img" aria-label="T ${ptH(t)}, CT ${ptH(ct)}, spectating ${ptH(spec)}">${seg("t", t)}${seg("ct", ct)}${seg("spec", spec)}</div>
  <ul class="pt-legend">
    <li><i style="--c:var(--t)"></i>T <span>${ptH(t)}</span></li>
    <li><i style="--c:var(--ct)"></i>CT <span>${ptH(ct)}</span></li>
    <li><i style="--c:var(--spec)"></i>Spectating <span>${ptH(spec)}</span></li>
  </ul>`;
}

/* ---------- Page: public panels ---------- */

function ptTiles(s) {
  const delta = (a, b) => (b ? `<span class="delta ${a >= b ? "up" : ""}">${a >= b ? "+" : ""}${ptPct(a - b, b)}% on the 7 days before</span>` : '<span class="delta">Nothing the 7 days before</span>');
  return `<div class="pt-tiles">
    <div class="pt-tile"><small>Players, last 7 days</small><b>${s.players}</b>${delta(s.players, s.playersPrev)}</div>
    <div class="pt-tile"><small>Hours played, last 7 days</small><b>${s.hours < 10 ? s.hours.toFixed(1) : Math.round(s.hours).toLocaleString()}</b>${delta(s.hours, s.hoursPrev)}</div>
    <div class="pt-tile"><small>Most online at once</small><b>${s.peak}</b><span class="delta">${s.peakAt ? fmtDate(s.peakAt) : "No count yet"}</span></div>
    <div class="pt-tile"><small>New players, last 7 days</small><b>${s.newPlayers}</b><span class="delta">First time on the server</span></div>
  </div>`;
}

function ptLeaders(d) {
  const max = Math.max(0.1, ...d.leaders.map((p) => p.t + p.ct));
  return `<section class="panel">
    <div class="panel-head">
      <div><h2>Top players</h2><p>Time on T or CT. Spectating doesn't count.</p></div>
      ${segmented("ptPeriod", d.period, PT_PERIODS)}
    </div>
    ${d.leaders.length ? `<div class="table-wrap"><table>
      <thead><tr><th style="width:3em">#</th><th>Player</th><th>Time played</th><th class="num hide-sm">T / CT</th><th class="num">K/D</th></tr></thead>
      <tbody>${d.leaders.map((p, i) => `<tr class="clickable" data-player="${esc(p.steamid)}">
        <td><span class="pt-place">${i + 1}</span></td>
        <td>${ptWho(p)}</td>
        <td>${ptBar(p.t + p.ct, max, ptH(p.t + p.ct))}</td>
        <td class="num hide-sm muted">${p.t.toFixed(1)} / ${p.ct.toFixed(1)}</td>
        <td class="num">${ptKD(p.kills, p.deaths)}</td>
      </tr>`).join("")}</tbody>
    </table></div>` : '<div class="empty">Nobody has played on a team in this time.</div>'}
  </section>`;
}

// The span an average covers: "Last 30 days." (or 4 weeks), or "Since 4 Oct." while the
// recording is younger than that. n is the number of days, today included.
function ptSpan(n, full) {
  if (n >= full) return full === 28 ? "Last 4 weeks." : "Last 30 days.";
  const from = new Date();
  from.setDate(from.getDate() - Math.max(0, (n || 1) - 1));
  return `Since ${from.toLocaleDateString(undefined, { day: "numeric", month: "short" })}.`;
}

function ptBusiest(o) {
  const players = (v) => `${v} ${v === 1 ? "player" : "players"}`;
  const vals = o.byHour.map((v, h) => ({ v, tick: h % 3 === 0 ? ptPad(h) : "", tip: `${ptPad(h)}:00 · ${players(v)} a day` }));
  const best = o.byHour.indexOf(Math.max(...o.byHour));
  return `<section class="panel">
    <div class="panel-head"><div><h2>Busiest hours</h2><p>Players on T or CT in each hour of the day, on average. Bots don't count. ${ptSpan(o.byHourDays, 30)}</p></div></div>
    ${ptColumns(vals, { note: o.byHour[best] ? `Busiest at <b>${ptPad(best)}:00</b>, with ${players(o.byHour[best])} a day on average.` : "No one has played on a team yet." })}
  </section>`;
}

function ptDaily(o) {
  const vals = o.days.map((d, i) => ({ v: d.players || 0, tick: i % 5 === 0 ? ptDay(d.date, { day: "numeric" }) : "", tip: `${ptDay(d.date)} · ${d.players || 0} players` }));
  const best = o.days.reduce((b, d) => ((d.players || 0) > (b?.players || 0) ? d : b), null);
  return `<section class="panel">
    <div class="panel-head"><div><h2>Players per day</h2><p>Different players who joined each day, last 30 days.</p></div></div>
    ${ptColumns(vals, { fill: "var(--ct)", whole: true, note: best ? `Busiest day: <b>${ptDay(best.date)}</b>, with ${best.players} ${best.players === 1 ? "player" : "players"}.` : "No one has joined yet." })}
  </section>`;
}

function ptHeatmap(o) {
  const max = Math.max(0.1, ...o.heat.flat());
  const step = (v) => (v <= 0.05 ? 0 : Math.min(5, Math.ceil((v / max) * 5)));
  return `<section class="panel">
    <div class="panel-head"><div><h2>When people play</h2><p>Players on T or CT by day and hour, on average. ${ptSpan(o.heatDays, 28)}</p></div></div>
    <div class="pt-heat"><table>
      <thead><tr><th></th>${o.heat[0].map((_, h) => `<th>${h % 3 === 0 ? ptPad(h) : ""}</th>`).join("")}</tr></thead>
      <tbody>${o.heat.map((row, wd) => `<tr><th scope="row">${PT_WEEKDAYS[wd]}</th>${row.map((v, h) => `<td><i style="background:var(--heat-${step(v)})" data-tip="${PT_WEEKDAYS[wd]} ${ptPad(h)}:00 · ${v} players"></i></td>`).join("")}</tr>`).join("")}</tbody>
    </table>
    <div class="scale">Fewer ${[0, 1, 2, 3, 4, 5].map((n) => `<i style="background:var(--heat-${n})"></i>`).join("")} More</div></div>
  </section>`;
}

function ptMapsPanel(o) {
  const max = Math.max(0.1, ...o.maps.map((m) => m.hours));
  return `<section class="panel">
    <div class="panel-head"><div><h2>Maps</h2><p>Hours played on each map, last 30 days.</p></div></div>
    ${o.maps.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Map</th><th>Hours played</th><th class="num">Players</th></tr></thead>
      <tbody>${o.maps.map((m) => `<tr><td><b>${esc(m.map)}</b></td><td>${ptBar(m.hours, max, m.hours.toLocaleString(), "var(--t)")}</td><td class="num muted">${m.players}</td></tr>`).join("")}</tbody>
    </table></div>` : '<div class="empty">No maps played in the last 30 days.</div>'}
  </section>`;
}

function ptRecords(d) {
  const r = d.records;
  const since = r.since ? `Counted since ${ptDay(r.since.slice(0, 10), { day: "numeric", month: "short", year: "numeric" })}, not in warmup; kills of bots don't count.` : "Nothing counted yet.";
  return `<section class="panel">
    <div class="panel-head">
      <div><h2>Records</h2><p>${since}</p></div>
      ${segmented("ptRecords", d.recordsPeriod, PT_PERIODS)}
    </div>
    <div class="pt-records">${PT_RECORDS.map(([key, label]) => `<div class="pt-record">
      <h3>${label}</h3>
      ${r[key].length ? `<ol>${r[key].map((p) => `<li class="clickable" data-player="${esc(p.steamid)}"><span>${esc(p.name || p.steamid)}</span><b>${p.count.toLocaleString()}</b></li>`).join("")}</ol>` : '<p class="faint">None yet.</p>'}
    </div>`).join("")}</div>
  </section>`;
}

function ptPublicPanels(d) {
  const o = d.overview;
  return `${ptTiles(o.summary)}<div id="pt-leaders">${ptLeaders(d)}</div>${d.records ? `<div id="pt-records">${ptRecords(d)}</div>` : ""}
    <div class="pt-grid">${ptBusiest(o)}${ptDaily(o)}</div>${ptHeatmap(o)}${ptMapsPanel(o)}`;
}

/* ---------- Page: staff panels ---------- */

function ptOnline(a) {
  return `<section class="panel">
    <div class="panel-head"><div><h2>On the server now</h2><p>How long each player has been on, their team and where they're connecting from.</p></div></div>
    ${a.online.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Player</th><th>Online for</th><th>Team</th><th class="num">Ping</th><th class="hide-sm">From</th></tr></thead>
      <tbody>${a.online.map((p) => `<tr class="clickable" data-player="${esc(p.steamid)}">
        <td>${ptWho(p)}</td>
        <td>${p.since ? ptDur((Date.now() - new Date(p.since)) / 1000) : '<span class="faint">Not recorded</span>'}</td>
        <td>${PT_TEAM[p.team] || ""}${p.alive === false ? ' <span class="faint">dead</span>' : ""}</td>
        <td class="num">${p.ping > 100 ? `<span class="tag amber">${p.ping}</span>` : `<span class="muted">${p.ping}</span>`}</td>
        <td class="hide-sm">${p.country ? `${p.city ? `${esc(p.city)}, ` : ""}${esc(p.country)}` : '<span class="faint">Unknown</span>'}</td>
      </tr>`).join("")}</tbody>
    </table></div>${PT_DBIP}` : '<div class="empty">Nobody is on the server.</div>'}
  </section>`;
}

function ptActivity(a) {
  const max = Math.max(0.1, ...a.staff.map((s) => s.hours));
  return `<section class="panel">
    <div class="panel-head"><div><h2>Staff activity</h2><p>Time each staff member spent on the server.</p></div>
      ${segmented("ptStaffPeriod", a.period, PT_PERIODS.slice(0, 2))}</div>
    ${a.staff.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Staff</th><th>On T or CT</th><th class="num hide-sm">Spectating</th><th>Last seen</th></tr></thead>
      <tbody>${a.staff.map((s) => `<tr class="clickable" data-player="${esc(s.steamid)}">
        <td>${ptWho(s)}</td>
        <td>${s.hours ? ptBar(s.hours, max, ptH(s.hours), "var(--green)") : '<span class="tag amber">Not on a team</span>'}</td>
        <td class="num hide-sm muted">${s.spec ? ptH(s.spec) : "–"}</td>
        <td>${s.online ? '<span class="dot"></span>Online now' : s.lastSeen ? fmtAgo(s.lastSeen) : '<span class="faint">Never</span>'}</td>
      </tr>`).join("")}</tbody>
    </table></div>` : '<div class="empty">No staff yet.</div>'}
  </section>`;
}

function ptReasons(a) {
  const total = a.reasons.reduce((n, r) => n + r.count, 0);
  const max = Math.max(1, ...a.reasons.map((r) => r.count));
  return `<section class="panel">
    <div class="panel-head"><div><h2>Why people leave</h2><p>Disconnect reasons, last 30 days. Lots of timeouts can mean a network problem.</p></div></div>
    ${a.reasons.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Reason</th><th>Disconnects</th><th class="num hide-sm">Stayed</th></tr></thead>
      <tbody>${a.reasons.map((r) => `<tr><td><b>${esc(PT_REASONS[r.name] || r.name || "Unknown")}</b>${PT_REASONS[r.name] ? `<span class="sid" style="display:block">${esc(r.name)}</span>` : ""}</td>
        <td>${ptBar(r.count, max, `${r.count} · ${ptPct(r.count, total)}%`, "var(--amber)")}</td><td class="num hide-sm muted">${ptDur(r.avgSeconds)} avg.</td></tr>`).join("")}</tbody>
    </table></div>` : '<div class="empty">No disconnects in the last 30 days.</div>'}
  </section>`;
}

function ptCountries(a) {
  const max = Math.max(1, ...a.countries.map((c) => c.players));
  return `<section class="panel">
    <div class="panel-head"><div><h2>Where players are from</h2><p>Different players per country, all time.</p></div></div>
    ${a.countries.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Country</th><th>Players</th><th class="num hide-sm">Hours</th></tr></thead>
      <tbody>${a.countries.map((c) => `<tr><td><b>${esc(c.name || c.iso)}</b> <span class="faint">${esc(c.iso)}</span></td><td>${ptBar(c.players, max, c.players, "var(--ct)")}</td><td class="num hide-sm muted">${Math.round(c.hours).toLocaleString()}</td></tr>`).join("")}</tbody>
    </table></div>${PT_DBIP}` : '<div class="empty">No locations recorded yet.</div>'}
  </section>`;
}

function ptRecorder(a) {
  const r = a.recorder;
  if (!r) return "";
  const e = a.endKinds;
  const plugin = { loaded: `<span class="tag green">Loaded</span> <span class="muted">${esc(r.version)}</span>`, missing: '<span class="tag red">Not loaded</span>', unknown: '<span class="tag">Unknown</span> <span class="muted">the game server isn\'t answering</span>' }[r.plugin] || "";
  return `<section class="panel">
    <div class="panel-head"><div><h2>Recorder</h2><p>PlaytimeHistory on the game server (<code>css_pt_status</code>), and how sessions ended in the last 30 days. Only Root sees this.</p></div></div>
    <div class="panel-body"><dl class="kv">
      <dt>Plugin</dt><dd>${plugin}</dd>
      ${r.lines.length ? `<dt>Status</dt><dd><ul class="pt-lines">${r.lines.map((l) => `<li>${esc(l)}</li>`).join("")}</ul></dd>` : ""}
      <dt>Sessions ended</dt><dd>${e.disconnect.toLocaleString()} by disconnect, ${e.mapChange.toLocaleString()} by map change, ${e.unload} by plugin unload</dd>
      <dt>Crashes</dt><dd>${e.stale ? `<span class="tag amber">${e.stale} sessions</span> closed at their last heartbeat` : "None"}</dd>
    </dl></div>
  </section>`;
}

function ptStaffPanels(a) {
  return `<div class="stack pt-stack">${ptOnline(a)}<div id="pt-activity">${ptActivity(a)}</div>${ptReasons(a)}${ptCountries(a)}${ptRecorder(a)}</div>`;
}

/* ---------- Page ---------- */

// ptPage draws the Playtime page into #view: with staff (the staff panel, for staff who may see
// them), the staff panels first, then the public ones. isCurrent says whether the user is still on
// the page when data arrives.
async function ptPage(me, isCurrent, staffPanels = false) {
  const v = $("#view");
  const staff = staffPanels && !!me?.playtimeStaff;
  v.innerHTML = `
  <div class="page-head"><div><h1>Playtime</h1></div></div>
  ${staff ? `<div id="pt-staff">${loading()}</div><h2 class="crew-sep">${me.playtime === "on" ? "On the public site" : ""}</h2>` : ""}
  <div id="pt-public" class="stack pt-stack">${me?.playtime === "on" ? loading() : ""}</div>`;
  if (me?.playtime !== "on") {
    $("#pt-public").innerHTML = '<div class="empty">PlaytimeHistory hasn\'t recorded anything yet. Playtime appears on the public site once it has.</div>';
  }
  const jobs = [];
  if (staff) {
    jobs.push(api(`/api/admin/playtime${qs({ period: ptState.staffPeriod })}`).then((a) => {
      if (isCurrent()) $("#pt-staff").innerHTML = ptStaffPanels(a);
    }).catch((err) => { if (isCurrent()) $("#pt-staff").innerHTML = errorBox(err); }));
  }
  if (me?.playtime === "on") {
    jobs.push(api(`/api/public/playtime${qs({ period: ptState.period, records: ptState.records, tz: PT_TZ })}`).then((d) => {
      if (isCurrent()) $("#pt-public").innerHTML = ptPublicPanels(d);
    }).catch((err) => { if (isCurrent()) $("#pt-public").innerHTML = errorBox(err); }));
  }
  await Promise.all(jobs);
}

// Switching a period redraws only that panel.
async function ptSwitch(key, value) {
  if (key === "ptPeriod" || key === "ptRecords") {
    ptState[key === "ptPeriod" ? "period" : "records"] = value;
    try {
      const d = await api(`/api/public/playtime${qs({ period: ptState.period, records: ptState.records, tz: PT_TZ })}`);
      const box = key === "ptPeriod" ? $("#pt-leaders") : $("#pt-records");
      if (box) box.innerHTML = key === "ptPeriod" ? ptLeaders(d) : ptRecords(d);
    } catch (err) { toast(err.message); }
  } else if (key === "ptStaffPeriod") {
    ptState.staffPeriod = value;
    try {
      const a = await api(`/api/admin/playtime${qs({ period: value })}`);
      const box = $("#pt-activity");
      if (box) box.innerHTML = ptActivity(a);
    } catch (err) { toast(err.message); }
  }
}

/* ---------- Player drawer ---------- */

// ptDrawer is the Playtime sections of a player's drawer, from the drawer API's "playtime".
function ptDrawer(pt, online) {
  if (!pt) return "";
  const p = pt.player;
  let out;
  if (!p) {
    out = `<section><h3>Playtime</h3><p class="muted" style="margin:0">PlaytimeHistory hasn't recorded this player.</p></section>`;
  } else {
    const played = p.t + p.ct;
    const maxDay = Math.max(0.1, ...p.days.map((d) => d.hours || 0));
    const maxMap = Math.max(0.1, ...p.maps.map((m) => m.hours));
    const st = p.stats;
    out = `<section>
      <h3>Playtime</h3>
      <dl class="kv" style="margin-bottom:14px">
        <dt>Time played</dt><dd><b>${ptH(played)}</b> on T or CT</dd>
        <dt>First seen</dt><dd>${fmtDate(p.firstSeen)}</dd>
        <dt>Last seen</dt><dd>${online ? '<span class="dot"></span>On the server now' : fmtAgo(p.lastSeen)}</dd>
        <dt>Visits</dt><dd>${p.sessions.toLocaleString()} ${p.sessions === 1 ? "session" : "sessions"}</dd>
      </dl>
      ${played + p.spec > 0 ? ptSplit(p.t, p.ct, p.spec) : ""}
      ${p.alive + p.dead > 0 ? `<p class="muted" style="margin:10px 0 0;font-size:14px">Alive for ${ptPct(p.alive, p.alive + p.dead)}% of their time on a team.</p>` : ""}
    </section>
    <section>
      <h3>Last 30 days</h3>
      <div class="pt-spark" role="img" aria-label="Hours played each day">${p.days.map((d) => `<i class="${d.hours ? "" : "zero"}" style="height:${d.hours ? Math.max(6, (d.hours / maxDay) * 100) : 4}%" data-tip="${esc(`${ptDay(d.date)} · ${d.hours ? ptH(d.hours) : "didn't play"}`)}"></i>`).join("")}</div>
    </section>
    ${st && st.kills + st.deaths > 0 ? `<section>
      <h3>Stats</h3>
      <div class="pt-stats">
        <div><b>${ptKD(st.kills, st.deaths)}</b><small>K/D</small></div>
        <div><b>${ptPct(st.headshots, st.kills)}%</b><small>Headshot kills</small></div>
        <div><b>${st.kills.toLocaleString()}</b><small>Kills</small></div>
        <div><b>${st.deaths.toLocaleString()}</b><small>Deaths</small></div>
      </div>
      <p class="muted" style="margin:10px 0 0;font-size:14px">Against other players only: bots don't count.</p>
    </section>` : ""}
    ${p.events && Object.values(p.events).some((n) => n > 0) ? `<section>
      <h3>Records</h3>
      <div class="pt-stats">
        <div><b>${p.events.plants.toLocaleString()}</b><small>Bomb plants</small></div>
        <div><b>${p.events.defuses.toLocaleString()}</b><small>Bomb defuses</small></div>
        <div><b>${p.events.knifeKills.toLocaleString()}</b><small>Knife kills</small></div>
        <div><b>${p.events.zeusKills.toLocaleString()}</b><small>Zeus kills</small></div>
      </div>
    </section>` : ""}
    ${p.maps.length ? `<section>
      <h3>Favourite maps</h3>
      <div class="pt-maps">${p.maps.map((m) => `<div><span>${esc(m.map)}</span>${ptBar(m.hours, maxMap, ptH(m.hours), "var(--t)")}</div>`).join("")}</div>
    </section>` : ""}`;
  }
  const s = pt.staff;
  if (!s) return out;
  const reason = (x) => {
    if (x.endKind === 0) return '<span class="tag green">On now</span>';
    if (x.endKind === 2) return "Map change";
    if (x.endKind === 3) return "Plugin unloaded";
    if (x.endKind === 4) return '<span class="tag amber">Server crashed</span>';
    return esc(PT_REASONS[x.reason] || x.reason || "Left");
  };
  return `${out}
    ${s.names.length ? `<section>
      <h3>Names used</h3>
      <ul class="pt-names">${s.names.map((n) => `<li><span><b>${esc(n.name)}</b> <span class="faint">×${n.times}</span></span><span class="muted">${fmtDate(n.firstSeen)} – ${fmtDate(n.lastSeen)}</span></li>`).join("")}</ul>
    </section>` : ""}
    ${s.recent.length ? `<section>
      <h3>Recent sessions</h3>
      <ul class="pt-sessions">${s.recent.map((x) => `<li>
        <div class="top"><b>${fmtDate(x.started)}</b><span>${ptDur(x.seconds)}</span></div>
        <div class="muted">${esc(x.map)}${x.endMap && x.endMap !== x.map ? ` → ${esc(x.endMap)}` : ""}${x.kills != null ? ` · ${x.kills}–${x.deaths}` : ""}</div>
        <div>${reason(x)}</div>
      </li>`).join("")}</ul>
    </section>` : ""}
    ${s.country ? `<section>
      <h3>Location</h3>
      <p style="margin:0">${s.city ? `${esc(s.city)}, ` : ""}${esc(s.countryName || s.country)}</p>
    </section>${PT_DBIP}` : ""}`;
}

/* ---------- Events ---------- */

document.addEventListener("click", (e) => {
  const seg = e.target.closest('[data-seg="ptPeriod"] button, [data-seg="ptStaffPeriod"] button, [data-seg="ptRecords"] button');
  if (!seg) return;
  seg.parentElement.querySelectorAll("button").forEach((b) => b.setAttribute("aria-pressed", String(b === seg)));
  ptSwitch(seg.parentElement.dataset.seg, seg.dataset.value);
});

// One tooltip for every [data-tip] mark, on hover and on keyboard focus.
const ptTip = document.createElement("div");
ptTip.id = "pt-tip";
ptTip.hidden = true;
document.body.append(ptTip);
function ptShowTip(el, x, y) {
  ptTip.textContent = el.dataset.tip;
  ptTip.hidden = false;
  const r = ptTip.getBoundingClientRect();
  ptTip.style.left = `${Math.min(window.innerWidth - r.width - 8, Math.max(8, x - r.width / 2))}px`;
  ptTip.style.top = `${Math.max(8, y - r.height - 12)}px`;
}
document.addEventListener("mousemove", (e) => {
  const el = e.target.closest?.("[data-tip]");
  if (el) ptShowTip(el, e.clientX, e.clientY);
  else ptTip.hidden = true;
});
document.addEventListener("focusin", (e) => {
  const el = e.target.closest?.("[data-tip]");
  if (!el) return;
  const r = el.getBoundingClientRect();
  ptShowTip(el, r.left + r.width / 2, r.top);
});
document.addEventListener("focusout", () => { ptTip.hidden = true; });