{% extends "base.html" %}{% block title %}{{ t("admin.title") }}{% endblock %}
{% block wrap_class %}wide{% endblock %}
{% block body %}
<style>
  .scroll { overflow-x:auto; }
  .scroll table { min-width:640px; }
  .num { text-align:right; font-variant-numeric:tabular-nums; }
  .pill.warn { color:var(--accent); border-color:var(--accent); }

  /* charts: categorical slots validated against --card in both modes (dataviz validator) */
  .viz { --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
         --grid:#ebe9e3; --axis:#c9c6bd; --up-good:#006300; --up-bad:#b3261e; --wash:rgba(26,25,24,0.05); }
  @media (prefers-color-scheme: dark) {
    .viz { --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
           --grid:#2c2a27; --axis:#45423c; --up-good:#6cc48d; --up-bad:#f08a80; --wash:rgba(255,255,255,0.06); }
  }
  .ranges { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 16px; }
  .ranges button { width:auto; padding:6px 14px; font-size:14px; background:transparent;
                   color:var(--fg); border:1px solid var(--line); border-radius:20px; }
  .ranges button[aria-pressed="true"] { background:var(--fg); color:var(--bg); border-color:var(--fg); }
  .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 16px; }
  .tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
  .tile .label { font-size:13px; color:var(--muted); }
  .tile .value { font-size:28px; font-weight:600; margin:2px 0; }
  .tile .delta { font-size:13px; color:var(--muted); }
  .tile .delta.good { color:var(--up-good); }
  .tile .delta.bad { color:var(--up-bad); }
  .charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:12px; }
  .chart { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; min-width:0; }
  .chart h3 { margin:0 0 2px; font-size:15px; }
  .chart .sub { font-size:13px; color:var(--muted); margin:0 0 8px; }
  .chart svg { display:block; width:100%; height:190px; overflow:visible; }
  .chart svg:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
  .chart text { font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums; }
  .chart text.peak { fill:var(--fg); font-weight:600; }
  .legend { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:0 0 6px; }
  .legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:2px;
                         margin-right:6px; vertical-align:-1px; background:var(--c); }
  .chart details { margin-top:8px; font-size:13px; }
  .chart details summary { cursor:pointer; color:var(--muted); }
  .chart details table { margin-top:6px; }
  .chart details td, .chart details th { padding:4px 8px; font-size:13px; }
  #viz-tip { position:fixed; pointer-events:none; z-index:10; display:none; background:var(--card);
             border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px;
             box-shadow:0 4px 16px rgba(0,0,0,0.12); min-width:120px; }
  #viz-tip .day { color:var(--muted); margin-bottom:4px; }
  #viz-tip .row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
  #viz-tip .row i { display:inline-block; width:12px; height:2px; background:var(--c); margin-right:6px; }
  #viz-tip .row b { font-variant-numeric:tabular-nums; }
</style>

<h1>{{ t("admin.title") }}</h1>
<p class="muted">{{ t("admin.summary", users=users|length, unused=unused, unverified=unverified) }}</p>

<div class="viz" id="viz">
  <div class="ranges" role="group" aria-label="{{ t('admin.range') }}">
    {% for n in (7, 30, 90) %}
    <button type="button" data-days="{{ n }}" aria-pressed="{{ 'true' if n == 30 else 'false' }}">{{ t("admin.days", n=n) }}</button>
    {% endfor %}
  </div>
  <div class="tiles" id="viz-tiles"></div>
  <div class="charts">
    <section class="chart" data-chart="active">
      <h3>{{ t("admin.chart_active") }}</h3><p class="sub">{{ t("admin.chart_active_sub") }}</p>
    </section>
    <section class="chart" data-chart="messages">
      <h3>{{ t("admin.chart_messages") }}</h3><p class="sub">{{ t("admin.messages_note") }}</p>
    </section>
    <section class="chart" data-chart="signups">
      <h3>{{ t("admin.chart_signups") }}</h3><p class="sub">{{ t("admin.chart_signups_sub") }}</p>
    </section>
    <section class="chart" data-chart="problems">
      <h3>{{ t("admin.chart_problems") }}</h3><p class="sub">{{ t("admin.chart_problems_sub") }}</p>
    </section>
  </div>
</div>
<div id="viz-tip" role="status" aria-live="polite"></div>

<script type="application/json" id="viz-data">{{ charts|tojson }}</script>
<script type="application/json" id="viz-text">{{ {
  "lang": lang,
  "signups": t("admin.signups"), "logins": t("admin.logins"), "links": t("admin.links"),
  "messages": t("admin.messages"), "problems": t("admin.problems_short"),
  "active": t("admin.active_accounts"),
  "vs": t("admin.vs_previous"), "same": t("admin.same_as_previous"),
  "table": t("admin.table"), "day": t("admin.col_day"), "total": t("admin.total"),
  "ask": "ask", "answer": "answer", "notify": "notify", "other": t("admin.kind_other")
}|tojson }}</script>
<script>
(() => {
  const data = JSON.parse(document.getElementById("viz-data").textContent);
  const T = JSON.parse(document.getElementById("viz-text").textContent);
  const tip = document.getElementById("viz-tip");
  const SVG = "http://www.w3.org/2000/svg";
  const KINDS = ["ask", "answer", "notify", "other"];
  const COLORS = { ask: "var(--s1)", answer: "var(--s2)", notify: "var(--s3)", other: "var(--s4)" };
  const fmtDay = (iso, long) => new Date(iso + "T12:00:00Z").toLocaleDateString(T.lang,
    long ? { weekday: "short", day: "numeric", month: "numeric", year: "numeric" } : { day: "numeric", month: "numeric" });
  const fmtNum = n => n.toLocaleString(T.lang);
  let days = 30;

  // one series or the stacked message kinds, as [{name, color, values}]
  function seriesOf(chart) {
    if (chart === "messages") return KINDS.map(k => ({ name: T[k], color: COLORS[k], values: data.messages[k] }));
    return [{ name: T[chart], color: "var(--s1)", values: data.series[chart] }];
  }
  const sum = a => a.reduce((x, y) => x + y, 0);
  const lastN = (values, n, offset = 0) => values.slice(values.length - n - offset, values.length - offset);

  function niceStep(max) {
    if (max <= 3) return 1;
    const raw = max / 3, pow = Math.pow(10, Math.floor(Math.log10(raw)));
    for (const m of [1, 2, 5, 10]) if (m * pow >= raw) return m * pow;
    return 10 * pow;
  }
  function el(name, attrs, parent) {
    const node = document.createElementNS(SVG, name);
    for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v);
    if (parent) parent.appendChild(node);
    return node;
  }
  // a column with a 4px rounded data end and a square foot on the baseline
  function columnPath(x, y, w, h, round) {
    const r = round ? Math.min(4, w / 2, h) : 0;
    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
  }

  function showTip(evt, day, rows) {
    tip.replaceChildren();
    const head = document.createElement("div");
    head.className = "day";
    head.textContent = fmtDay(day, true);
    tip.appendChild(head);
    for (const row of rows) {
      const line = document.createElement("div");
      line.className = "row";
      const name = document.createElement("span");
      if (rows.length > 1) {
        const key = document.createElement("i");
        key.style.setProperty("--c", row.color);
        name.appendChild(key);
      }
      name.appendChild(document.createTextNode(row.name));
      const value = document.createElement("b");
      value.textContent = fmtNum(row.value);
      line.append(value, name);
      tip.appendChild(line);
    }
    tip.style.display = "block";
    const box = tip.getBoundingClientRect();
    let left = evt.clientX + 14, top = evt.clientY - box.height - 10;
    if (left + box.width > window.innerWidth - 8) left = evt.clientX - box.width - 14;
    if (top < 8) top = evt.clientY + 16;
    tip.style.left = Math.max(8, left) + "px";
    tip.style.top = top + "px";
  }
  const hideTip = () => { tip.style.display = "none"; };

  function draw(section) {
    const chart = section.dataset.chart;
    const series = seriesOf(chart).map(s => ({ ...s, values: lastN(s.values, days) }));
    const dayList = lastN(data.days, days);
    section.querySelectorAll("svg, .legend, details").forEach(n => n.remove());

    if (series.length > 1) {
      const legend = document.createElement("div");
      legend.className = "legend";
      for (const s of series) {
        const item = document.createElement("span");
        item.style.setProperty("--c", s.color);
        item.textContent = s.name;
        legend.appendChild(item);
      }
      section.appendChild(legend);
    }

    const totals = dayList.map((_, i) => sum(series.map(s => s.values[i])));
    const W = Math.max(section.clientWidth - 32, 200), H = 190;
    const m = { l: 32, r: 6, t: 16, b: 22 };
    const step = niceStep(Math.max(...totals, 1));
    const top = Math.max(step, Math.ceil(Math.max(...totals, 1) / step) * step);
    const plotW = W - m.l - m.r, plotH = H - m.t - m.b;
    const band = plotW / dayList.length;
    const bw = Math.max(1, Math.min(24, band - 2));
    const y = v => m.t + plotH - (v / top) * plotH;

    const svg = el("svg", { viewBox: `0 0 ${W} ${H}`, tabindex: "0", role: "img",
      "aria-label": `${section.querySelector("h3").textContent}: ${T.total} ${fmtNum(sum(totals))}` });
    for (let v = 0; v <= top; v += step) {
      el("line", { x1: m.l, x2: W - m.r, y1: y(v), y2: y(v), stroke: v === 0 ? "var(--axis)" : "var(--grid)",
        "stroke-width": 1, "shape-rendering": "crispEdges" }, svg);
      el("text", { x: m.l - 6, y: y(v) + 4, "text-anchor": "end" }, svg).textContent = fmtNum(v);
    }
    const labelAt = [0, Math.floor((dayList.length - 1) / 2), dayList.length - 1];
    for (const i of new Set(labelAt)) {
      const anchor = i === 0 ? "start" : i === dayList.length - 1 ? "end" : "middle";
      const x = i === 0 ? m.l : i === dayList.length - 1 ? W - m.r : m.l + (i + 0.5) * band;
      el("text", { x, y: H - 6, "text-anchor": anchor }, svg).textContent = fmtDay(dayList[i]);
    }

    const wash = el("rect", { y: m.t, height: plotH, width: band, fill: "var(--wash)", visibility: "hidden" }, svg);
    dayList.forEach((day, i) => {
      const x = m.l + i * band + (band - bw) / 2;
      let base = 0;
      const drawn = series.filter(s => s.values[i] > 0);
      drawn.forEach((s, k) => {
        const v = s.values[i];
        const y0 = y(base), y1 = y(base + v);
        const gap = base > 0 ? 2 : 0;  // the surface gap between stacked segments
        const h = Math.max(0, y0 - y1 - gap);
        if (h > 0) el("path", { d: columnPath(x, y1, bw, h, k === drawn.length - 1), fill: s.color }, svg);
        base += v;
      });
    });
    // label the peak only: one number, the one worth reading
    const peak = totals.indexOf(Math.max(...totals));
    if (totals[peak] > 0) {
      el("text", { x: m.l + (peak + 0.5) * band, y: y(totals[peak]) - 4, "text-anchor": "middle", class: "peak" }, svg)
        .textContent = fmtNum(totals[peak]);
    }

    let focused = -1;
    const rowsAt = i => series.map(s => ({ name: s.name, color: s.color, value: s.values[i] }));
    const mark = (i, evt) => {
      focused = i;
      wash.setAttribute("x", m.l + i * band);
      wash.setAttribute("visibility", "visible");
      showTip(evt, dayList[i], rowsAt(i));
    };
    const clear = () => { wash.setAttribute("visibility", "hidden"); hideTip(); };
    // the whole day's column is the hit target, not just the painted pixels
    const hit = el("rect", { x: m.l, y: m.t, width: plotW, height: plotH, fill: "transparent" }, svg);
    const indexAt = evt => {
      const r = svg.getBoundingClientRect();
      const px = (evt.clientX - r.left) * (W / r.width);
      return Math.min(dayList.length - 1, Math.max(0, Math.floor((px - m.l) / band)));
    };
    hit.addEventListener("pointermove", evt => mark(indexAt(evt), evt));
    hit.addEventListener("pointerleave", clear);
    svg.addEventListener("blur", clear);
    svg.addEventListener("keydown", evt => {
      if (!["ArrowLeft", "ArrowRight", "Home", "End", "Escape"].includes(evt.key)) return;
      evt.preventDefault();
      if (evt.key === "Escape") return clear();
      const last = dayList.length - 1;
      const next = evt.key === "Home" ? 0 : evt.key === "End" ? last
        : Math.min(last, Math.max(0, (focused < 0 ? last : focused) + (evt.key === "ArrowLeft" ? -1 : 1)));
      const r = svg.getBoundingClientRect();
      const cx = r.left + (m.l + (next + 0.5) * band) * (r.width / W);
      mark(next, { clientX: cx, clientY: r.top + r.height / 3 });
    });
    section.appendChild(svg);

    // the table view: every value, reachable without a pointer
    const details = document.createElement("details");
    const summary = document.createElement("summary");
    summary.textContent = T.table;
    const table = document.createElement("table");
    const head = table.insertRow();
    for (const text of [T.day, ...series.map(s => s.name), ...(series.length > 1 ? [T.total] : [])]) {
      const th = document.createElement("th");
      th.textContent = text;
      head.appendChild(th);
    }
    dayList.slice().reverse().forEach((day, r) => {
      const i = dayList.length - 1 - r;
      const row = table.insertRow();
      row.insertCell().textContent = fmtDay(day, true);
      for (const s of series) {
        const cell = row.insertCell();
        cell.className = "num";
        cell.textContent = fmtNum(s.values[i]);
      }
      if (series.length > 1) {
        const cell = row.insertCell();
        cell.className = "num";
        cell.textContent = fmtNum(totals[i]);
      }
    });
    details.append(summary, table);
    section.appendChild(details);
  }

  function tiles() {
    const box = document.getElementById("viz-tiles");
    box.replaceChildren();
    const all = { ...data.series, messages: KINDS.reduce((acc, k) => acc.map((v, i) => v + data.messages[k][i]),
      data.days.map(() => 0)) };
    for (const [key, upIsGood] of [["signups", true], ["logins", true], ["links", true], ["messages", true], ["problems", false]]) {
      const now = sum(lastN(all[key], days)), before = sum(lastN(all[key], days, days));
      const tile = document.createElement("div");
      tile.className = "tile";
      const label = document.createElement("div");
      label.className = "label";
      label.textContent = T[key];
      const value = document.createElement("div");
      value.className = "value";
      value.textContent = fmtNum(now);
      const delta = document.createElement("div");
      delta.className = "delta";
      const diff = now - before;
      if (diff === 0) delta.textContent = T.same;
      else {
        delta.classList.add((diff > 0) === upIsGood ? "good" : "bad");
        delta.textContent = `${diff > 0 ? "▲ +" : "▼ −"}${fmtNum(Math.abs(diff))} ${T.vs}`;
      }
      tile.append(label, value, delta);
      box.appendChild(tile);
    }
  }

  const sections = [...document.querySelectorAll("#viz .chart")];
  const render = () => { tiles(); sections.forEach(draw); };
  document.querySelectorAll("#viz .ranges button").forEach(button => {
    button.addEventListener("click", () => {
      days = Number(button.dataset.days);
      document.querySelectorAll("#viz .ranges button").forEach(b => b.setAttribute("aria-pressed", String(b === button)));
      hideTip();
      render();
    });
  });
  let pending;
  window.addEventListener("resize", () => { clearTimeout(pending); pending = setTimeout(() => sections.forEach(draw), 120); });
  render();
})();
</script>

<h2>{{ t("admin.online") }} <span class="muted">({{ live|length }})</span></h2>
<div class="panel scroll">
<table>
  {% for row in live %}
  <tr>
    <td><span class="dot on"></span> <span class="mono">{{ row.endpoint }}</span></td>
    <td class="muted">{{ row.label }}</td>
    <td class="muted">{{ row.since }}</td>
  </tr>
  {% else %}
  <tr><td class="muted">{{ t("admin.nobody_online") }}</td></tr>
  {% endfor %}
</table>
</div>

<h2>{{ t("admin.accounts") }}</h2>
<div class="panel scroll">
<table>
  <tr>
    <th>{{ t("admin.col_handle") }}</th>
    <th>{{ t("admin.col_email") }}</th>
    <th>{{ t("admin.col_created") }}</th>
    <th>{{ t("admin.col_login") }}</th>
    <th>{{ t("admin.col_seen") }}</th>
    <th class="num">{{ t("admin.col_sessions") }}</th>
    <th class="num">{{ t("admin.col_devices") }}</th>
    <th class="num">{{ t("admin.col_grants") }}</th>
  </tr>
  {% for u in users %}
  <tr>
    <td>
      <span class="mono">{{ u.handle }}</span>
      {% if u.is_admin %}<span class="pill trust">admin</span>{% endif %}
      {% if u.disabled %}<span class="pill warn">{{ t("admin.disabled") }}</span>{% endif %}
    </td>
    <td>
      {{ u.email or t("admin.key_only") }}
      {% if u.unverified %}<span class="pill warn">{{ t("admin.unverified") }}</span>{% endif %}
    </td>
    <td class="muted">{{ u.created_ago }}</td>
    <td class="muted">{{ u.login_ago or t("admin.never") }}</td>
    <td class="muted">{{ u.seen_ago or t("admin.never") }}</td>
    <td class="num">{{ u.sessions }}</td>
    <td class="num">{{ u.devices }}</td>
    <td class="num">{{ u.grants }}</td>
  </tr>
  {% endfor %}
</table>
</div>

<h2>{{ t("admin.problems") }}</h2>
<div class="panel scroll">
<table>
  {% for row in problems %}
  <tr><td><code>{{ row.kind }}</code></td><td class="num">{{ row.n }}</td></tr>
  {% else %}
  <tr><td class="muted">{{ t("admin.no_problems") }}</td></tr>
  {% endfor %}
</table>
</div>

<h2>{{ t("admin.recent") }}</h2>
<div class="panel scroll">
<table>
  <tr>
    <th>{{ t("admin.col_when") }}</th>
    <th>{{ t("admin.col_kind") }}</th>
    <th>{{ t("admin.col_who") }}</th>
    <th>IP</th>
  </tr>
  {% for row in recent %}
  <tr>
    <td class="muted" title="{{ row.at }}">{{ row.ago }}</td>
    <td><code>{{ row.kind }}</code></td>
    <td class="mono">{{ row.peer or row.handle or "" }}</td>
    <td class="mono muted">{{ row.ip or "" }}</td>
  </tr>
  {% endfor %}
</table>
</div>
{% endblock %}