/* Stats page: live tiles plus throughput and connection charts (plain SVG). */
"use strict";

(() => {
  const sinkSel = document.getElementById("sink-select");
  if (!sinkSel) return;
  const rangeGroup = document.getElementById("range-group");
  const tooltip = document.getElementById("chart-tooltip");
  const rateBox = document.querySelector('#chart-rate .chart');
  const connBox = document.querySelector('#chart-conns .chart');
  const tbody = document.querySelector("#stats-table tbody");
  const SVG = "http://www.w3.org/2000/svg";
  const M = { top: 12, right: 44, bottom: 26, left: 64 };

  let range = "24h";
  let data = null;

  function svgEl(tag, attrs) {
    const e = document.createElementNS(SVG, tag);
    for (const [k, v] of Object.entries(attrs || {})) e.setAttribute(k, v);
    return e;
  }

  function niceMax(v) {
    if (v <= 0) return 1;
    const p = Math.pow(10, Math.floor(Math.log10(v)));
    for (const m of [1, 2, 2.5, 5, 10]) if (m * p >= v) return m * p;
    return 10 * p;
  }

  function timeLabel(ts, span) {
    const d = new Date(ts * 1000);
    if (span <= 2 * 86400) return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
    if (span <= 60 * 86400) return d.toLocaleDateString([], { month: "short", day: "numeric" });
    return d.toLocaleDateString([], { year: "2-digit", month: "short" });
  }

  function fullTime(ts) {
    return new Date(ts * 1000).toLocaleString();
  }

  // Dense series with zero-filled gaps, one entry per bucket.
  function buckets(d) {
    const byTs = new Map(d.points.map((p) => [p[0], p]));
    let start = d.since ? Math.floor(d.since / d.step) * d.step : (d.points.length ? d.points[0][0] : d.now);
    const end = Math.floor(d.now / d.step) * d.step;
    if (end - start > 2000 * d.step) start = end - 2000 * d.step;
    const out = [];
    for (let t = start; t <= end; t += d.step) {
      const p = byTs.get(t);
      out.push({ ts: t, in: p ? p[1] : 0, out: p ? p[2] : 0, conns: p ? p[3] : 0 });
    }
    return out;
  }

  function frame(box, yMax, fmt, rows) {
    box.replaceChildren();
    const w = box.clientWidth, h = box.clientHeight;
    const svg = svgEl("svg", { viewBox: `0 0 ${w} ${h}`, role: "img" });
    const pw = w - M.left - M.right, ph = h - M.top - M.bottom;
    const x = (i) => M.left + (rows.length > 1 ? (i / (rows.length - 1)) * pw : pw / 2);
    const y = (v) => M.top + ph - (v / yMax) * ph;
    const axis = svgEl("g", { class: "axis" });
    for (let k = 0; k <= 4; k++) {
      const v = (yMax * k) / 4, yy = y(v);
      axis.append(svgEl("line", { class: "gridline", x1: M.left, x2: M.left + pw, y1: yy, y2: yy }));
      const t = svgEl("text", { x: M.left - 8, y: yy + 4, "text-anchor": "end" });
      t.textContent = fmt(v);
      axis.append(t);
    }
    const span = rows.length ? rows[rows.length - 1].ts - rows[0].ts : 0;
    const nt = Math.max(2, Math.min(6, Math.floor(pw / 110)));
    for (let k = 0; k <= nt && rows.length > 1; k++) {
      const i = Math.round((k / nt) * (rows.length - 1));
      const t = svgEl("text", { x: x(i), y: h - 6, "text-anchor": k === 0 ? "start" : k === nt ? "end" : "middle" });
      t.textContent = timeLabel(rows[i].ts, span);
      axis.append(t);
    }
    svg.append(axis);
    box.append(svg);
    return { svg, w, h, pw, ph, x, y };
  }

  function showTip(ev, rows) {
    tooltip.replaceChildren();
    for (const r of rows) {
      if (r.time) {
        tooltip.append(PB.el("div", { class: "t-time", text: r.time }));
        continue;
      }
      const row = PB.el("div", { class: "t-row" });
      if (r.cls) row.append(PB.el("span", { class: `swatch-line ${r.cls}` }));
      row.append(PB.el("strong", { text: r.value }), PB.el("span", { class: "muted", text: r.label }));
      tooltip.append(row);
    }
    tooltip.hidden = false;
    const tw = tooltip.offsetWidth, th = tooltip.offsetHeight;
    let left = ev.clientX + 14, top = ev.clientY - th - 10;
    if (left + tw > window.innerWidth - 8) left = ev.clientX - tw - 14;
    if (top < 8) top = ev.clientY + 16;
    tooltip.style.left = left + "px";
    tooltip.style.top = top + "px";
  }

  function hideTip() {
    tooltip.hidden = true;
  }

  function drawRate(rows, step) {
    const rates = rows.map((r) => ({ ts: r.ts, a: r.in / step, b: r.out / step }));
    const yMax = niceMax(Math.max(0, ...rates.map((r) => Math.max(r.a, r.b))));
    const f = frame(rateBox, yMax, (v) => PB.rate(v), rows);
    if (!rows.length) return;

    for (const [key, cls, label] of [["a", "s1", "In"], ["b", "s2", "Out"]]) {
      const d = rates.map((r, i) => `${i ? "L" : "M"} ${f.x(i).toFixed(1)} ${f.y(r[key]).toFixed(1)}`).join(" ");
      f.svg.append(svgEl("path", { class: `line ${cls}`, d }));
      // Direct end label; the legend above repeats it.
      const last = rates[rates.length - 1];
      const t = svgEl("text", { class: "endlabel", x: f.x(rates.length - 1) + 6, y: f.y(last[key]) + 4 });
      t.textContent = label;
      f.svg.append(t);
    }
    // Keep end labels apart when both series end at the same height.
    const labels = f.svg.querySelectorAll(".endlabel");
    if (labels.length === 2 && Math.abs(labels[0].getAttribute("y") - labels[1].getAttribute("y")) < 12) {
      labels[0].setAttribute("y", Number(labels[0].getAttribute("y")) - 6);
      labels[1].setAttribute("y", Number(labels[1].getAttribute("y")) + 6);
    }

    const cross = svgEl("line", { class: "crosshair", y1: M.top, y2: M.top + f.ph, visibility: "hidden" });
    const m1 = svgEl("circle", { class: "marker s1", r: 4, visibility: "hidden" });
    const m2 = svgEl("circle", { class: "marker s2", r: 4, visibility: "hidden" });
    const hit = svgEl("rect", { x: M.left, y: M.top, width: f.pw, height: f.ph, fill: "transparent" });
    f.svg.append(cross, m1, m2, hit);

    hit.addEventListener("pointermove", (ev) => {
      const r = f.svg.getBoundingClientRect();
      const px = ((ev.clientX - r.left) / r.width) * f.w;
      const i = Math.max(0, Math.min(rates.length - 1, Math.round(((px - M.left) / f.pw) * (rates.length - 1))));
      const xx = f.x(i);
      for (const [el, v] of [[cross, null], [m1, rates[i].a], [m2, rates[i].b]]) {
        el.setAttribute("visibility", "visible");
        if (v === null) { el.setAttribute("x1", xx); el.setAttribute("x2", xx); }
        else { el.setAttribute("cx", xx); el.setAttribute("cy", f.y(v)); }
      }
      showTip(ev, [
        { time: fullTime(rates[i].ts) },
        { cls: "s1", value: PB.rate(rates[i].a), label: "In" },
        { cls: "s2", value: PB.rate(rates[i].b), label: "Out" },
      ]);
    });
    hit.addEventListener("pointerleave", () => {
      [cross, m1, m2].forEach((e) => e.setAttribute("visibility", "hidden"));
      hideTip();
    });
  }

  function drawConns(rows) {
    const yMax = niceMax(Math.max(0, ...rows.map((r) => r.conns)));
    const f = frame(connBox, yMax, (v) => (Number.isInteger(v) ? String(v) : v.toFixed(1)), rows);
    if (!rows.length) return;
    const slot = f.pw / rows.length;
    const bw = Math.max(1, slot - 2);       // 2px surface gap between bars
    rows.forEach((r, i) => {
      const x0 = M.left + i * slot + (slot - bw) / 2;
      // The hit area spans the whole slot and plot height, not just the bar.
      const hit = svgEl("rect", { x: M.left + i * slot, y: M.top, width: slot, height: f.ph, fill: "transparent" });
      let bar = null;
      if (r.conns > 0) {
        const top = f.y(r.conns);
        bar = svgEl("rect", { class: "bar", x: x0, y: top, width: bw, height: M.top + f.ph - top, rx: bw >= 8 ? 4 : 0 });
        f.svg.append(bar);
      }
      hit.addEventListener("pointermove", (ev) => {
        if (bar) bar.classList.add("hover");
        showTip(ev, [{ time: fullTime(r.ts) }, { value: String(r.conns), label: r.conns === 1 ? "connection" : "connections" }]);
      });
      hit.addEventListener("pointerleave", () => {
        if (bar) bar.classList.remove("hover");
        hideTip();
      });
      f.svg.append(hit);
    });
  }

  function fillTable(d) {
    tbody.replaceChildren();
    for (const p of [...d.points].reverse()) {
      tbody.append(PB.el("tr", {},
        PB.el("td", { text: fullTime(p[0]) }),
        PB.el("td", { class: "num", text: PB.bytes(p[1]) }),
        PB.el("td", { class: "num", text: PB.bytes(p[2]) }),
        PB.el("td", { class: "num", text: String(p[3]) })));
    }
    if (!d.points.length) tbody.append(PB.el("tr", {}, PB.el("td", { colspan: "4", class: "muted", text: "No traffic recorded in this range." })));
  }

  function render() {
    if (!data) return;
    const rows = buckets(data);
    drawRate(rows, data.step);
    drawConns(rows);
    const total = data.points.reduce((s, p) => s + p[1] + p[2], 0);
    document.getElementById("t-total").textContent = PB.bytes(total);
  }

  async function loadHistory() {
    rateBox.classList.add("loading");
    connBox.classList.add("loading");
    try {
      data = await PB.api("GET", `/api/stats?sink=${encodeURIComponent(sinkSel.value)}&range=${range}`);
      render();
      fillTable(data);
    } catch (e) {
      rateBox.replaceChildren(PB.el("p", { class: "muted", text: "Loading failed: " + e.message }));
    } finally {
      rateBox.classList.remove("loading");
      connBox.classList.remove("loading");
    }
  }

  async function loadLive() {
    try {
      const lv = await PB.api("GET", "/api/live");
      const s = (lv.sinks || {})[sinkSel.value];
      document.getElementById("t-in").textContent = lv.daemon ? PB.rate(s ? s.in : 0) : "offline";
      document.getElementById("t-out").textContent = lv.daemon ? PB.rate(s ? s.out : 0) : "offline";
      document.getElementById("t-active").textContent = lv.daemon ? String(s ? s.active : 0) : "-";
    } catch (e) { /* keep last values */ }
  }

  sinkSel.addEventListener("change", () => { loadHistory(); loadLive(); });
  rangeGroup.querySelectorAll("button").forEach((b) => b.addEventListener("click", () => {
    rangeGroup.querySelectorAll("button").forEach((x) => x.classList.toggle("selected", x === b));
    range = b.dataset.range;
    loadHistory();
  }));
  window.addEventListener("resize", render);

  loadHistory();
  loadLive();
  setInterval(loadLive, 2000);
  setInterval(loadHistory, 60000);
})();