import { STALL_AFTER_H } from "./tracker.js";

const LABEL = {
  extracting: "Extracting",
  deduping: "Deduplicating",
  stalled: "Stalled",
  done: "Done",
  queued: "Manifest ready",
  not_started: "Not started",
};

const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
const pct = (f) => `${(f * 100).toFixed(1)}%`;
const chunks = (c) => c.nChunks == null ? "—" : `${c.chunksDone} / ${c.nChunks}`;
const rowsCell = (c) => c.rows == null ? "—" : c.rows.toLocaleString("en-US");

function ago(d, now) {
  if (!d) return "—";
  const s = Math.floor((now - d) / 1000);
  for (const [u, n] of [["d", 86400], ["h", 3600], ["m", 60]]) if (s >= n) return `${Math.floor(s / n)}${u} ago`;
  return "just now";
}

function dur(s) {
  if (s == null) return "—";
  const d = s / 86400;
  return `~${d.toFixed(1)} ${d.toFixed(1) === "1.0" ? "day" : "days"}`;
}

const bar = (f, st) => `<div class="bar"><div class="fill s-${st}" style="width:${(f * 100).toFixed(1)}%"></div></div>`;
const badge = (st) => `<span class="badge s-${st}">${LABEL[st]}</span>`;

export function render(data) {
  const now = data.fetchedAt;
  const live = data.crawls.filter((c) => ["extracting", "deduping", "stalled"].includes(c.status));

  const stats = `
    <div class="stats">
      <div class="stat wide"><div class="k">Overall progress</div><div class="v">${pct(data.overall)}</div>${bar(data.overall, "done")}</div>
      <div class="stat"><div class="k">Crawls finished</div><div class="v">${data.done} <span class="of">/ ${data.crawls.length}</span></div></div>
      <div class="stat"><div class="k">In progress</div><div class="v">${data.active}</div></div>
    </div>`;

  const cards = live.length
    ? `<div class="cards">${live.map((c) => `
        <div class="card">
          <div class="card-head"><span class="mono">${esc(c.crawl)}</span>${badge(c.status)}</div>
          <div class="pct">${pct(c.frac)}</div>
          ${bar(c.frac, c.status)}
          <div class="meta">
            <span>chunk ${chunks(c)}</span>
            <span>last upload ${ago(c.last, now)}</span>
            <span>ETA ${c.status === "extracting" ? dur(c.etaS) : "—"}</span>
          </div>
        </div>`).join("")}</div>`
    : `<p class="muted">Nothing is running.</p>`;

  const rows = data.crawls.map((c) => `
    <tr>
      <td class="mono">${esc(c.crawl)}</td>
      <td>${badge(c.status)}</td>
      <td><div class="prog">${bar(c.frac, c.status)}<span>${pct(c.frac)}</span></div></td>
      <td class="num">${chunks(c)}</td>
      <td class="num">${rowsCell(c)}</td>
      <td class="num">${ago(c.last, now)}</td>
    </tr>`).join("");

  return `${stats}
    <h2>Running now</h2>${cards}
    <h2>All crawls</h2>
    <div class="tablewrap"><table>
      <thead><tr><th>Crawl</th><th>Status</th><th>Progress</th><th class="num">Chunks</th>
      <th class="num">Manifest rows</th><th class="num">Last activity</th></tr></thead>
      <tbody>${rows}</tbody>
    </table></div>
    <p class="muted foot">As of ${now.toLocaleString()} · overall progress is the average of all ${data.crawls.length}
    target crawls' own % complete, so crawls not started yet count as 0% and pull it down too ·
    "Stalled" means no chunk upload for ${STALL_AFTER_H}h+</p>
    <h2>How this is worked out</h2>
    <ul class="muted notes">
      <li><b>Chunks done:</b> each chunk's output file is named after its starting row, so the highest uploaded
        offset ÷ chunk size + 1 gives chunks done (chunks with no surviving records upload nothing, so files aren't
        counted). The chunk size (usually 200k rows) is the most common gap between consecutive offsets.</li>
      <li><b>Total chunks:</b> each crawl's manifest (on the Hub) gives its exact row count; ÷ chunk size is the
        total. This is read straight from the manifest's parquet footer, without downloading the file.</li>
      <li><b>ETA:</b> the average time between the last 11 chunk uploads × chunks left, minus the time since the
        last upload. It covers extraction only; deduplication after the last chunk isn't included, and a pause in
        the recent uploads makes it read high until it drops out of the window.</li>
    </ul>`;
}