#!/usr/bin/env node
// Browser render benchmark for notevi web pages: drives headless Chrome over CDP
// (no npm deps; node >= 22 for native WebSocket). Serves the site dir, loads
// each page N times, reports parse/paint/load timings, node count, and the
// cost of jumping to the bottom of the file.
//
//   node bench-browser.mjs SITE_DIR PAGE [PAGE...] [--shot DIR]

import { spawn } from "node:child_process";
import { createReadStream, existsSync, mkdirSync, writeFileSync } from "node:fs";
import http from "node:http";
import path from "node:path";
import { tmpdir } from "node:os";

const CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
const RUNS = 3;

const args = process.argv.slice(2);
const shotIdx = args.indexOf("--shot");
let shotDir = null;
if (shotIdx >= 0) {
  shotDir = args[shotIdx + 1];
  args.splice(shotIdx, 2);
  mkdirSync(shotDir, { recursive: true });
}
const [siteDir, ...pages] = args;
if (!siteDir || pages.length === 0) {
  console.error("usage: node bench-browser.mjs SITE_DIR PAGE [PAGE...] [--shot DIR]");
  process.exit(2);
}

// ── tiny static server ────────────────────────────────────────────────────
const types = { html: "text/html", css: "text/css", js: "text/javascript" };
const server = http.createServer((req, res) => {
  const file = path.join(siteDir, decodeURIComponent(new URL(req.url, "http://x").pathname));
  if (!existsSync(file)) { res.writeHead(404).end(); return; }
  res.writeHead(200, { "content-type": types[path.extname(file).slice(1)] ?? "text/plain" });
  createReadStream(file).pipe(res);
});
await new Promise(r => server.listen(0, r));
const port = server.address().port;

// ── chrome + CDP ──────────────────────────────────────────────────────────
const profile = path.join(tmpdir(), "notevi-bench-profile");
const chrome = spawn(CHROME, [
  "--headless=new", "--remote-debugging-port=0", `--user-data-dir=${profile}`,
  "--no-first-run", "--disable-extensions", "--window-size=1600,1000", "about:blank",
], { stdio: ["ignore", "ignore", "pipe"] });
const wsUrl = await new Promise((resolve, reject) => {
  let buf = "";
  chrome.stderr.on("data", d => {
    buf += d;
    const m = buf.match(/DevTools listening on (ws:\/\/\S+)/);
    if (m) resolve(m[1]);
  });
  chrome.on("exit", () => reject(new Error("chrome exited")));
});
const debugPort = new URL(wsUrl).port;
const targets = await (await fetch(`http://127.0.0.1:${debugPort}/json/list`)).json();
const pageTarget = targets.find(t => t.type === "page");

const ws = new WebSocket(pageTarget.webSocketDebuggerUrl);
await new Promise(r => (ws.onopen = r));
let msgId = 0;
const pending = new Map();
const eventWaiters = new Map();
ws.onmessage = e => {
  const msg = JSON.parse(e.data);
  if (msg.id && pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
  if (msg.method && eventWaiters.has(msg.method)) {
    eventWaiters.get(msg.method)(msg.params);
    eventWaiters.delete(msg.method);
  }
};
const cdp = (method, params = {}) => new Promise(resolve => {
  const id = ++msgId;
  pending.set(id, m => resolve(m.result));
  ws.send(JSON.stringify({ id, method, params }));
});
const waitEvent = method => new Promise(r => eventWaiters.set(method, r));
const evaluate = async expr => {
  const r = await cdp("Runtime.evaluate", { expression: expr, returnByValue: true, awaitPromise: true });
  return r.result?.value;
};

await cdp("Page.enable");
await cdp("Runtime.enable");

const median = a => [...a].sort((x, y) => x - y)[a.length >> 1];

console.log("page                                     kB   nodes    parse     FCP     DCL    load  toBottom");
for (const p of pages) {
  const url = `http://127.0.0.1:${port}/${p}`;
  const runs = [];
  for (let i = 0; i < RUNS; i++) {
    const loaded = waitEvent("Page.loadEventFired");
    await cdp("Page.navigate", { url });
    await loaded;
    const m = await evaluate(`(async () => {
      await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
      const nav = performance.getEntriesByType("navigation")[0];
      const fcp = performance.getEntriesByType("paint").find(e => e.name === "first-contentful-paint");
      const t0 = performance.now();
      window.scrollTo(0, document.body.scrollHeight);
      await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
      const toBottom = performance.now() - t0;
      return JSON.stringify({
        kb: Math.round(nav.transferSize / 1024),
        nodes: document.getElementsByTagName("*").length,
        parse: Math.round(nav.domInteractive),
        fcp: Math.round(fcp?.startTime ?? -1),
        dcl: Math.round(nav.domContentLoadedEventEnd),
        load: Math.round(nav.loadEventEnd),
        toBottom: Math.round(toBottom),
      });
    })()`);
    runs.push(JSON.parse(m));
  }
  const med = k => median(runs.map(r => r[k]));
  console.log(
    p.padEnd(38) + String(med("kb")).padStart(6) + String(med("nodes")).padStart(8) +
    String(med("parse")).padStart(9) + String(med("fcp")).padStart(8) +
    String(med("dcl")).padStart(8) + String(med("load")).padStart(8) +
    String(med("toBottom")).padStart(10));
  if (shotDir) {
    await evaluate(`window.scrollTo(0, 0)`);
    await evaluate(`new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))`);
    const shot = await cdp("Page.captureScreenshot", { format: "png" });
    writeFileSync(path.join(shotDir, p.replaceAll("/", "_") + ".png"), Buffer.from(shot.data, "base64"));
  }
}

chrome.kill();
server.close();
process.exit(0);