// The reviewed golden text and its rewrite, side by side: one card per clip, read from data.js (window.ROWS). View only.
const rows = window.ROWS || [];
const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;"}[c]));
const store = {
  get(k) { try { return localStorage.getItem(k); } catch { return null; } },
  set(k, v) { try { localStorage.setItem(k, v); } catch {} },
};
const has = (r, start) => r.why.some((w) => w.startsWith(start));
const GROUPS = [
  ["all", "All", () => true],
  ["review", "Reviewer notes", (r) => has(r, "review")],
  ["rewrite", "Rewrite drift", (r) => has(r, "rewrite")],
  ["original", "Original issues", (r) => has(r, "original")],
  ["signs", "With signs", (r) => r.signs.length > 0],
];
const GENERATOR = {facefusion: "FaceFusion", animate: "Animate", s2v: "S2V", real: "Real recording"};
const words = (t) => (t || "").split(/\s+/).filter(Boolean).length;

function column(cls, title, note, r, sections, extra = "") {
  const fake = (p) => r.fake_parts.includes(p);
  const n = r.fake_parts.reduce((a, p) => a + words(sections[p]), 0);
  const body = ["video", "audio"].map((p) => `<div class="part"><div class="tag">${p}</div>
      <p class="${fake(p) ? "" : "real"}">${esc(sections[p])}</p></div>`).join("");
  return `<section class="arm"><h3><span class="dot ${cls}"></span>${title}<small>${note}</small>
      <span class="words">${n} words</span></h3>${extra}${body}</section>`;
}

function card(r) {
  const parts = ["video", "audio"].map((p) => {
    const fake = r.fake_parts.includes(p);
    return `<span class="${fake ? "fake" : "real"}">${p[0].toUpperCase() + p.slice(1)} ${fake ? "fake" : "real"}</span>`;
  }).join(" · ");
  const dl = [["Picked", `<ul class="why">${r.why.map((w) => `<li>${esc(w)}</li>`).join("")}</ul>`]];
  if (r.signs.length) dl.push(["Signs", r.signs.map(esc).join("<br>")]);
  const ref = r.reference ? `<button class="link" data-ref>Show the real clip</button>
      <div class="ref" hidden><video controls preload="none" src="${esc(r.reference)}"></video></div>` : "";
  const kept = r.rewritten ? "" : '<p class="kept">No rewrite passed, so this clip keeps the original text.</p>';
  return `<article class="clip"><div class="top"><div class="media"><video controls preload="metadata" src="${esc(r.clip)}"></video></div>
    <div class="info"><h2>Clip ${r.n}</h2><div class="meta">${GENERATOR[r.generator] || r.generator} · ${parts}</div>
      <dl class="facts">${dl.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join("")}</dl>${ref}</div></div>
    <div class="cols">${column("O", "Original", "reviewed", r, r.original)}${column("R", "Rewrite", "one paragraph", r, r.rewrite, kept)}</div></article>`;
}

function show(key) {
  const test = GROUPS.find((g) => g[0] === key)[2];
  document.getElementById("clips").innerHTML = rows.filter(test).map(card).join("");
  for (const b of document.querySelectorAll("#filters button")) b.classList.toggle("on", b.dataset.key === key);
  store.set("rvo:filter", key);
}

document.getElementById("filters").innerHTML = GROUPS.map(([k, label, test]) =>
  `<button data-key="${k}">${label}<span class="count">${rows.filter(test).length}</span></button>`).join("");
document.getElementById("filters").onclick = (e) => { const b = e.target.closest("button"); if (b) show(b.dataset.key); };

document.addEventListener("click", (e) => {
  const b = e.target.closest("[data-ref]");
  if (!b) return;
  const ref = b.nextElementSibling;
  ref.hidden = !ref.hidden;
  b.textContent = ref.hidden ? "Show the real clip" : "Hide the real clip";
});

const start = store.get("rvo:filter");
show(GROUPS.some((g) => g[0] === start) ? start : "all");