slug = new URLSearchParams(window.location.search).get("s") ?? "playground"

// --- the only network call in the whole dashboard ------------------------
// A generator that holds its own last-good value, so a hiccup on the server
// shows slightly stale numbers rather than an error on the projector.
//
// Every viewer runs this independently against a static file. There is no
// per-viewer work on the server: Caddy hands the same small JSON to everyone,
// and the single R process producing it does not care whether 3 people or 300
// are watching.
//
// The poll interval comes from the data, because it is a property of the
// survey: 3 seconds for a live event, 10 minutes for one open for months.
data = {
  let last = null;
  let wait = 3000;
  while (true) {
    try {
      const r = await fetch(`${slug}/summary.json`, { cache: "no-store" });
      if (r.ok) {
        last = await r.json();
        if (last.interval) wait = Math.max(1000, last.interval * 1000);
      }
    } catch (e) {
      // keep showing `last`
    }
    if (last) yield last;
    await new Promise((res) => setTimeout(res, wait));
  }
}

// The navbar title belongs to the survey, not to this file.
titleSync = {
  const el = document.querySelector(".navbar-title");
  if (el && data.event && data.event.name) el.textContent = data.event.name;
  return true;
}

dark = {
  const mq = window.matchMedia("(prefers-color-scheme: dark)");
  while (true) {
    yield mq.matches;
    await new Promise((res) => mq.addEventListener("change", res, { once: true }));
  }
}

// Blue ordinal ramp, taken unchanged from the validated reference palette.
// Ordinal rather than diverging because these are ordered response options,
// and a red/green polarity ramp would need its own validation run before it
// went in front of a client. Light mode starts at ramp step 250 and dark mode
// stops at step 600 -- the documented floors that keep the step nearest the
// surface above 2:1 contrast.
pal = dark
  ? {
      surface: "#1a1a19", ink: "#ffffff", ink2: "#c3c2b7", muted: "#898781",
      grid: "#2c2c2a", axis: "#383835", accent: "#3987e5",
      ramp: ["#184f95", "#256abf", "#3987e5", "#86b6ef", "#cde2fb"]
    }
  : {
      surface: "#fcfcfb", ink: "#0b0b0b", ink2: "#52514e", muted: "#898781",
      grid: "#e1e0d9", axis: "#c3c2b7", accent: "#2a78d6",
      ramp: ["#86b6ef", "#5598e7", "#2a78d6", "#1c5cab", "#0d366b"]
    }

satLabels = ["Very dissatisfied", "Dissatisfied",
             "Neither satisfied nor dissatisfied", "Satisfied", "Very satisfied"]

// Short forms for the legend -- the full middle label is unreadable at
// projector distance.
satShort = ["Very dissat.", "Dissatisfied", "Neutral", "Satisfied", "Very satisfied"]

shorten = (s) => (satShort[satLabels.indexOf(s)] ?? s)

// Shared plot styling, so every chart on the page agrees.
//
// NAMED `chartBase`, NOT `chrome`. It was called `chrome` and that silently
// broke everything: `window.chrome` exists as an empty object in Chrome and
// Edge, so `...chrome` spread nothing and the styling below was never applied
// -- no error, charts just quietly used Plot's defaults. In Safari, where no
// such global exists, every chart died with "chrome is not defined".
//
// Avoid cell names that collide with browser globals: chrome, name, status,
// location, history, screen, top, self, parent, origin, length, closed.
//
// Written as a block with an explicit `return`, NOT as `chartBase = ({...})`.
// Quarto silently fails to define a cell assigned a parenthesised object
// literal -- no parse error at render, no runtime error in the cell itself,
// the name just never exists. Consumers then fail with "not defined" and send
// you hunting in the wrong place.
chartBase = {
  return { style: { background: "transparent", color: pal.ink2, fontSize: "13px" } };
}

fmt1 = (x) => (x == null ? "—" : Number(x).toFixed(1))

// Same trick as plotH: measure the card, size the content to fit. Depends on
// `vh` so it recomputes when the window or projector resolution changes.
//
// Measure the USABLE height, not the outer one: clientHeight includes the
// card's padding, and assuming otherwise is what made every earlier attempt
// overflow. Then subtract the label and sub-label, which are a constant ~34px
// whatever the figure does, and divide by the line-height to get back to a
// font size.
// Yields twice: once immediately, once after the dashboard's flex layout has
// settled. The first measurement runs before the rows have their final
// heights, which pinned the figure to its 18px floor.
kpiFont = {
  vh;
  const measure = () => {
    const card = [...document.querySelectorAll(".card")].find((c) =>
      (c.querySelector(".card-header")?.textContent || "").trim() === "Responses"
    );
    const body = card?.querySelector(".card-body");
    if (!body) return 32;
    const cs = getComputedStyle(body);
    const avail = body.clientHeight
      - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
    return Math.max(18, Math.min(56, Math.round((avail - 34) / 1.15)));
  };
  yield measure();
  await new Promise((r) => setTimeout(r, 400));
  yield measure();
}

kpi = (value, label, sub) => htl.html`<div class="kpi">
  <div class="kpi-value" style="font-size:${kpiFont}px">${value}</div>
  <div class="kpi-label">${label}</div>
  ${sub ? htl.html`<div class="kpi-sub">${sub}</div>` : ""}
</div>`

vh = {
  yield window.innerHeight;
  while (true) {
    await new Promise((r) => window.addEventListener("resize", r, { once: true }));
    yield window.innerHeight;
  }
}

// Plot needs a height in pixels; the dashboard sizes its cards as a
// percentage of the viewport. So measure the card we are about to draw into.
// Referencing `vh` makes this recompute on resize -- without it, a chart laid
// out on a laptop gets clipped on a 1080p projector.
plotH = (titleFragment, reserve = 0) => {
  vh;
  kpiFont; // re-run once layout has settled, same reason as kpiFont
  const card = [...document.querySelectorAll(".card")].find((c) =>
    (c.querySelector(".card-header")?.textContent || "").includes(titleFragment)
  );
  const body = card?.querySelector(".card-body");
  if (!body) return 200;
  // clientHeight INCLUDES the card's padding. Subtracting `reserve` from it
  // without removing the padding first is why the ratings chart kept
  // overflowing by the same 11px no matter how much reserve was added.
  const cs = getComputedStyle(body);
  const avail = body.clientHeight
    - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
  return Math.max(110, avail - 8 - reserve);
}

aspectRows = data.aspects.flatMap((a) =>
  a.dist.map((d) => ({ aspect: a.aspect, label: d.label, code: d.code, n: d.n }))
)

timelineRows = (data.timeline ?? []).map((d) => ({ t: new Date(d.t), n: d.n }))