// Data Experiments page: rows, guides and SFT marks come from /api/* (the Space's server reading R2; every route needs
// a signed-in, allow-listed viewer). The page polls every 60 s and on focus, so session writes show up within a minute.
"use strict";
const STATUSES = [
  ["prod_running", "Prod running"], ["prod_paused", "Prod paused"], ["pilot_ready", "Pilot ready"], ["building", "Building"],
  ["prod_done", "Prod done"]];
const LABEL = Object.fromEntries(STATUSES);
const HINT = {
  prod_running: "Full-size generation is running now.",
  prod_paused: "Stopped before reaching its target; what it made so far is usable.",
  pilot_ready: "A small sample is ready to listen to and judge before scaling up.",
  building: "Code or scripts are being written; nothing to review yet.",
  prod_done: "Finished; the final data is ready to use.",
  sft: "Someone has marked it as already used in a training run." };
const $ = (id) => document.getElementById(id);
const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
let projects = [], docs = {}, sft = {}, me = null, filter = null, query = "";
let sftEditing = null, sftDraft = "", sftFocus = false, sftError = {}, loadedOnce = false;
const docCache = {};
try { filter = localStorage.getItem("dx-filter") || null; } catch (e) {}

function ago(iso) {
  const t = Date.parse(iso); if (!t) return "";
  const m = Math.round((Date.now() - t) / 60000);
  if (m < 60) return m <= 1 ? "just now" : m + " min ago";
  const h = Math.round(m / 60); if (h < 48) return h + " h ago";
  return Math.round(h / 24) + " days ago";
}
const num = (x) => typeof x === "number" ? x.toLocaleString("en-US", { maximumFractionDigits: 1 }) : String(x ?? "");

function copyBtn(text) {
  const b = el("button", null, "Copy"); b.type = "button";
  b.addEventListener("click", async () => {
    try { await navigator.clipboard.writeText(text); b.textContent = "Copied"; }
    catch (e) { const r = document.createRange(); r.selectNodeContents(b.previousSibling); const s = getSelection(); s.removeAllRanges(); s.addRange(r); b.textContent = "Selected"; }
    setTimeout(() => (b.textContent = "Copy"), 1400);
  });
  return b;
}

// Guides are written by sessions, so their markdown is untrusted: raw HTML in it is shown as text (never
// parsed), and the rendered result still goes through DOMPurify.
const escapeHtml = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
if (window.marked) marked.use({ renderer: { html: (html) => escapeHtml(typeof html === "string" ? html : (html && html.text) || "") } });

function renderMarkdown(body, md) {
  if (window.marked && window.DOMPurify) {
    body.innerHTML = DOMPurify.sanitize(marked.parse(String(md)), { FORBID_TAGS: ["style", "form", "input", "iframe"] });
    body.querySelectorAll("a[href]").forEach((a) => {
      if (!/^https?:\/\//i.test(a.getAttribute("href") || "")) { a.removeAttribute("href"); return; }
      a.target = "_blank"; a.rel = "noopener noreferrer";
    });
  } else { const pre = el("pre"); pre.textContent = String(md); body.append(pre); }
}

async function openDoc(id) {
  const meta = docs[id];
  $("rtitle").textContent = meta ? (meta.title || id) : id;
  $("rpath").textContent = meta && meta.path ? meta.path : "";
  const body = $("rbody"); body.textContent = "";
  $("reader").hidden = false; body.scrollTop = 0; $("rclose").focus();
  if (!meta) { body.append(el("p", null, "This guide hasn't been added to the page yet.")); return; }
  if (!meta.has_markdown) { body.append(el("p", null, "Only the file path is recorded for this guide. Open it in the repo: " + (meta.path || ""))); return; }
  body.append(el("p", "lede", "Loading…"));
  try {
    let d = docCache[id];
    if (!d || d.updated_at !== meta.updated_at) {
      const r = await fetch("/api/doc/" + encodeURIComponent(id), { credentials: "same-origin", cache: "no-store" });
      if (!r.ok) throw new Error(r.status);
      d = docCache[id] = await r.json();
    }
    body.textContent = ""; renderMarkdown(body, d.markdown || "");
  } catch (e) { body.textContent = ""; body.append(el("p", null, "Couldn't load this guide. Reload the page (your sign-in may have expired).")); }
}
$("rclose").addEventListener("click", () => ($("reader").hidden = true));
$("reader").addEventListener("click", (e) => { if (e.target === $("reader")) $("reader").hidden = true; });
document.addEventListener("keydown", (e) => { if (e.key === "Escape") $("reader").hidden = true; });

async function saveSft(id, done, note) {
  sftError[id] = "";
  try {
    const r = await fetch("/api/sft/" + encodeURIComponent(id), {
      method: done ? "POST" : "DELETE", credentials: "same-origin", cache: "no-store",
      headers: { "Content-Type": "application/json", "X-Dashboard": "1" },
      body: done ? JSON.stringify({ note: note.slice(0, 300) }) : undefined });
    if (!r.ok) throw new Error(r.status);
    sft[id] = await r.json();
    sftEditing = null; sftDraft = "";
  } catch (e) { sftError[id] = "Couldn't save the mark. Reload the page (your sign-in may have expired) and try again."; }
  render();
}
function sftRow(p) {
  const m = sft[p.id]; const row = el("div", "sftrow");
  const editable = !!me;
  if (m && m.done) {
    row.append(el("span", "sftbadge", "SFT done"));
    const who = [m.by || "", m.at ? ago(m.at) : ""].filter(Boolean).join(" · ");
    if (who) row.append(el("span", "who", who));
    if (editable) { const u = el("button", null, "Undo"); u.type = "button"; u.setAttribute("aria-label", "Undo SFT done for " + (p.title || p.id)); u.addEventListener("click", () => saveSft(p.id, false, "")); row.append(u); }
    if (m.note) row.append(el("span", "sftnote", m.note));
  } else if (editable && sftEditing === p.id) {
    const inp = el("input"); inp.id = "sft-note-" + p.id; inp.placeholder = "Note (optional): run name or result"; inp.maxLength = 300; inp.value = sftDraft;
    inp.setAttribute("aria-label", "SFT note for " + (p.title || p.id));
    inp.addEventListener("input", (e) => { sftDraft = e.target.value; });
    const ok = el("button", null, "Save"); ok.type = "button"; ok.addEventListener("click", () => saveSft(p.id, true, inp.value.trim()));
    const no = el("button", null, "Cancel"); no.type = "button"; no.addEventListener("click", () => { sftEditing = null; sftDraft = ""; render(); });
    inp.addEventListener("keydown", (e) => { if (e.key === "Enter") ok.click(); if (e.key === "Escape") no.click(); });
    row.append(inp, ok, no);
    if (sftFocus) { sftFocus = false; setTimeout(() => inp.focus(), 0); }
  } else if (editable) {
    const b = el("button", null, "Mark SFT done"); b.type = "button"; b.setAttribute("aria-label", "Mark SFT done for " + (p.title || p.id));
    b.addEventListener("click", () => { sftEditing = p.id; sftDraft = ""; sftFocus = true; render(); }); row.append(b);
  }
  if (sftError[p.id]) row.append(el("span", "err", sftError[p.id]));
  return row.childNodes.length ? row : null;
}

function card(p) {
  const c = el("article", "card"); c.id = "p-" + p.id;
  const top = el("div", "top");
  top.append(el("h3", null, p.title || p.id));
  const pill = el("span", "pill " + (p.status || "")); pill.append(el("span", "dot"), document.createTextNode(LABEL[p.status] || p.status || "Unknown"));
  top.append(pill); c.append(top);
  if (p.description) c.append(el("p", "desc", p.description));
  if (p.data_type) c.append(el("p", "type", p.data_type));
  if (p.progress && p.progress.target) {
    const pr = el("div", "prog"); const tr = el("div", "track"); const f = el("div", "fill");
    f.style.width = Math.max(0, Math.min(100, 100 * (p.progress.done || 0) / p.progress.target)) + "%"; tr.append(f);
    pr.append(tr, el("span", "lbl", `${num(p.progress.done)} / ${num(p.progress.target)} ${p.progress.unit || ""}`.trim()));
    c.append(pr);
  }
  if (p.size) c.append(el("div", "size", p.size));
  if (p.summary) c.append(el("p", null, p.summary));
  const links = el("div", "links");
  for (const l of p.links || []) {
    if (!l || !l.url || !/^https:\/\//.test(l.url)) continue;
    const a = el("a", null, l.label || "Open"); a.href = l.url; a.target = "_blank"; a.rel = "noopener noreferrer"; links.append(a);
  }
  for (const id of p.docs || []) {
    const b = el("button", null, (docs[id] && docs[id].title) ? docs[id].title : id); b.type = "button";
    b.addEventListener("click", () => openDoc(id)); links.append(b);
  }
  if (links.childNodes.length) c.append(links);
  if (p.data_location) { const loc = el("div", "loc"); loc.append(el("code", null, p.data_location), copyBtn(p.data_location)); c.append(loc); }
  const kv = el("dl", "kv");
  for (const [k, v] of [["Next", p.next_step], ["Code", p.code]]) { if (v) { kv.append(el("dt", null, k), el("dd", null, v)); } }
  if (kv.childNodes.length) c.append(kv);
  const sr = sftRow(p); if (sr) c.append(sr);
  const foot = [p.updated_at ? "Updated " + ago(p.updated_at) : "", p.updated_by ? "by " + p.updated_by : ""].filter(Boolean).join(" ");
  if (foot) c.append(el("div", "foot", foot));
  return c;
}

function render() {
  const counts = Object.fromEntries(STATUSES.map(([k]) => [k, 0]));
  projects.forEach((p) => { if (p.status in counts) counts[p.status]++; });
  const strip = $("strip"); strip.textContent = "";
  for (const [k, label] of STATUSES) {
    const b = el("button", "stat " + k); b.type = "button"; b.setAttribute("aria-pressed", String(filter === k));
    b.append(el("b", null, String(counts[k])), el("span", null, label), el("small", null, HINT[k]));
    b.addEventListener("click", () => { filter = filter === k ? null : k; try { filter ? localStorage.setItem("dx-filter", filter) : localStorage.removeItem("dx-filter"); } catch (e) {} render(); });
    strip.append(b);
  }
  const nSft = projects.filter((p) => sft[p.id] && sft[p.id].done).length;
  const sb = el("button", "stat sft"); sb.type = "button"; sb.setAttribute("aria-pressed", String(filter === "sft"));
  sb.append(el("b", null, String(nSft)), el("span", null, "SFT done"), el("small", null, HINT.sft));
  sb.addEventListener("click", () => { filter = filter === "sft" ? null : "sft"; try { filter ? localStorage.setItem("dx-filter", filter) : localStorage.removeItem("dx-filter"); } catch (e) {} render(); });
  strip.append(sb);
  const q = query.trim().toLowerCase();
  const inFilter = (p) => !filter || (filter === "sft" ? !!(sft[p.id] && sft[p.id].done) : p.status === filter);
  const match = (p) => inFilter(p) && (!q || [p.title, p.description, p.data_type, p.summary, p.data_location, p.size, p.group]
    .filter(Boolean).join(" ").toLowerCase().includes(q));
  const host = $("sections"); host.textContent = "";
  let shown = 0;
  for (const [k, label] of STATUSES) {
    const rows = projects.filter((p) => p.status === k && match(p)).sort((a, b) => (b.updated_at || "").localeCompare(a.updated_at || ""));
    if (!rows.length) continue;
    shown += rows.length;
    const s = el("section"); const h = el("h2"); const pill = el("span", "pill " + k); pill.append(el("span", "dot"), document.createTextNode(label));
    h.append(pill, el("span", "count", rows.length + (rows.length === 1 ? " project" : " projects"))); s.append(h);
    const g = el("div", "grid"); rows.forEach((p) => g.append(card(p))); s.append(g); host.append(s);
  }
  const other = projects.filter((p) => !(p.status in counts) && match(p));
  if (other.length) { const s = el("section"); s.append(el("h2", null, "Other")); const g = el("div", "grid"); other.forEach((p) => g.append(card(p))); s.append(g); host.append(s); shown += other.length; }
  if (!shown) host.append(el("div", "empty", projects.length ? (filter === "sft" ? "No project is marked SFT done yet." : "No project matches this filter.") : (loadedOnce ? "No projects yet. Each session adds its own row; see the instructions below." : "Loading…")));
}

$("q").addEventListener("input", (e) => { query = e.target.value; render(); });

// Signed out (401) or not on the access list (403): show the sign-in card instead of the projects. Inside the
// huggingface.co iframe the browser blocks the sign-in cookie, so the button opens the dashboard in its own tab.
const framed = (() => { try { return window.top !== window.self; } catch (e) { return true; } })();
function showGate(status, body) {
  $("gate").hidden = false; $("strip").hidden = true; $("sections").hidden = true;
  document.querySelector(".bar").hidden = true;
  const a = $("signin");
  if (framed) { a.href = location.origin + "/"; a.target = "_blank"; a.rel = "noopener"; a.textContent = "Open the dashboard in its own tab";
                $("gtext").textContent = "Signing in doesn't work inside this embedded view. Open the dashboard in its own tab, then sign in with Hugging Face."; }
  if (status === 403) {
    $("gtitle").textContent = "You're signed in, but not on the access list";
    $("gtext").textContent = "Signed in as " + ((body && body.who) || "an unlisted account") + ". Ask the dashboard owner to add your email or Hugging Face username, then sign in again.";
    $("signout").hidden = false;
  }
}

async function load() {
  try {
    const r = await fetch("/api/data", { credentials: "same-origin", cache: "no-store" });
    if (r.status === 401 || r.status === 403) { showGate(r.status, await r.json().catch(() => null)); return; }
    if (!r.ok) throw new Error(r.status);
    const d = await r.json();
    projects = Object.entries(d.projects || {}).map(([id, p]) => Object.assign({ id }, p));
    docs = d.docs || {}; sft = d.sft || {}; me = d.me || null; loadedOnce = true;
    $("me").textContent = me ? "Signed in as " + me : ""; $("signout").hidden = !me;
    $("gate").hidden = true; $("strip").hidden = false; $("sections").hidden = false; document.querySelector(".bar").hidden = false;
    $("status").textContent = projects.length + " projects · refreshed " + new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  } catch (e) {
    $("status").textContent = loadedOnce ? "Couldn't refresh. Reload the page if this persists (your sign-in may have expired)."
                                         : "Couldn't load projects. Reload the page to sign in again.";
  }
  if (!sftEditing) render();
}
load();
setInterval(() => { if (!document.hidden) load(); }, 60000);
document.addEventListener("visibilitychange", () => { if (!document.hidden) load(); });
render();