// Volume-story overlay.
// Static top bar + collapsible legend showing per-dataset corpus share.

const VOLUME_DATA_URL = "./data/volume-datasets.json?v=volume-note-removed-1";

function escapeHtml(value) {
  return String(value ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

function fmtRows(n) {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(2).replace(/\.?0+$/, "") + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(n >= 100_000 ? 0 : 1).replace(/\.?0+$/, "") + "k";
  return String(n);
}

function fmtRowsExact(n) {
  return Number(n ?? 0).toLocaleString("en-US");
}

function stageClass(stage) {
  return String(stage ?? "other").replace(/[^A-Za-z0-9_-]+/g, "-");
}

async function loadVolumeData() {
  const response = await fetch(VOLUME_DATA_URL);
  if (!response.ok) throw new Error(`volume-datasets.json: HTTP ${response.status}`);
  const data = await response.json();
  const datasets = Array.isArray(data.datasets) ? data.datasets : [];
  if (datasets.length === 0) throw new Error("volume-datasets.json has no datasets");
  const totals = data.totals ?? {
    datasets: datasets.length,
    rows: datasets.reduce((sum, dataset) => sum + Number(dataset.rows ?? 0), 0),
    sampled_rows: datasets.reduce((sum, dataset) => sum + Number(dataset.sampled_rows ?? 0), 0),
  };
  return { datasets, totals };
}

function buildBar(totals) {
  const rowsPerPoint = Math.round(Number(totals.rows ?? 0) / Math.max(Number(totals.sampled_rows ?? 0), 1));
  const bar = document.createElement("div");
  bar.id = "volume-bar";
  bar.innerHTML = `
    <span class="vb-stat">${fmtRowsExact(totals.datasets)} datasets</span>
    <span class="vb-sep">·</span>
    <span class="vb-stat">${fmtRows(totals.rows)} rows</span>
    <span class="vb-sep">·</span>
    <span class="vb-stat">${fmtRows(totals.sampled_rows)} shown</span>
    <span class="vb-sep">·</span>
    <span class="vb-hint">1 point ≈ ${fmtRowsExact(rowsPerPoint)} rows</span>
    <button id="vb-toggle" type="button" aria-label="Toggle volume legend">Legend</button>
  `;
  document.body.appendChild(bar);
  return bar;
}

function buildLegend(datasets, totals) {
  const panel = document.createElement("div");
  panel.id = "volume-legend";
  panel.setAttribute("data-state", "collapsed");
  const sorted = [...datasets].sort((a, b) => Number(b.rows ?? 0) - Number(a.rows ?? 0));
  const max = Math.max(...sorted.map((dataset) => Number(dataset.rows ?? 0)), 1);
  const totalRows = Math.max(Number(totals.rows ?? 0), 1);
  const items = sorted.map((dataset) => {
    const rows = Number(dataset.rows ?? 0);
    const pct = (rows / max) * 100;
    const share = ((rows / totalRows) * 100).toFixed(1);
    const name = dataset.dataset_full_name ?? dataset.dataset;
    const filterValue = dataset.dataset ?? name;
    const stage = dataset.stage_short ?? dataset.pipeline_stage ?? "other";
    const source = dataset.source_group === "ultra" ? "Ultra" : "Original";
    return `
      <li data-dataset="${escapeHtml(filterValue)}" title="${escapeHtml(name)} · ${fmtRowsExact(rows)} rows · ${share}% of corpus · ${source}">
        <span class="vb-name"><span class="vb-stage-dot vb-stage-${stageClass(stage)}"></span>${escapeHtml(name)}</span>
        <span class="vb-rows">${fmtRowsExact(rows)}</span>
        <span class="vb-bar"><span class="vb-bar-fill" style="width:${pct.toFixed(2)}%"></span></span>
      </li>
    `;
  }).join("");
  panel.innerHTML = `
    <header>
      <h2>Corpus volume <span class="vb-close" aria-label="Close">×</span></h2>
      <p class="vb-subtitle">${fmtRowsExact(totals.datasets)} datasets · ${fmtRowsExact(totals.rows)} rows · ${fmtRowsExact(totals.sampled_rows)} shown · click to filter</p>
    </header>
    <ol id="vb-list">${items}</ol>
  `;
  document.body.appendChild(panel);
  return panel;
}

function buildErrorBar(error) {
  const bar = document.createElement("div");
  bar.id = "volume-bar";
  bar.innerHTML = `
    <span class="vb-stat">Corpus volume unavailable</span>
    <span class="vb-sep">·</span>
    <span class="vb-hint">${escapeHtml(error.message)}</span>
  `;
  document.body.appendChild(bar);
}

function wire(bar, legend) {
  const toggleBtn = bar.querySelector("#vb-toggle");
  const closeEl = legend.querySelector(".vb-close");
  const list = legend.querySelector("#vb-list");

  const setState = (s) => {
    legend.setAttribute("data-state", s);
    toggleBtn.textContent = s === "open" ? "Hide" : "Legend";
  };

  toggleBtn.addEventListener("click", () => {
    const next = legend.getAttribute("data-state") === "open" ? "collapsed" : "open";
    setState(next);
  });

  closeEl.addEventListener("click", () => setState("collapsed"));

  const applySelectedDatasets = () => {
    const selected = Array.from(list.querySelectorAll("li.selected"))
      .map((li) => li.dataset.dataset)
      .filter(Boolean);
    window.__nemotronAtlas?.setDatasetPredicate?.(selected);
  };

  list.addEventListener("click", (e) => {
    const li = e.target.closest("li[data-dataset]");
    if (!li) return;
    li.classList.toggle("selected");
    applySelectedDatasets();
  });

  window.addEventListener("nemotron-atlas-ready", () => window.setTimeout(applySelectedDatasets, 0));
  window.addEventListener("nemotron-atlas-filters-cleared", () => {
    list.querySelectorAll("li.selected").forEach((li) => li.classList.remove("selected"));
  });
}

loadVolumeData()
  .then(({ datasets, totals }) => {
    const bar = buildBar(totals);
    const legend = buildLegend(datasets, totals);
    wire(bar, legend);
  })
  .catch((error) => {
    console.warn("Volume bar data unavailable", error);
    buildErrorBar(error);
  });