#!/usr/bin/env node
/**
 * Real-browser check (headless Firefox AND Chromium) for the colour picker's pixel reading:
 * src/utils/image-sample.ts + palette-extract.ts. jsdom has no canvas, so this bundles them with
 * esbuild, serves a generated PNG from one origin (the page's own) and from a second port
 * (cross-origin), and asserts exact pixel colours, the extracted palette, and the cross-origin
 * failure message.
 *
 *   node scripts/e2e-image-sample.mjs        (CHROMIUM_PATH / FIREFOX_PATH override binaries)
 */
import { chromium, firefox } from '@playwright/test';
import { build as esbuild } from 'esbuild';
import http from 'node:http';
import zlib from 'node:zlib';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
const W = 1024, H = 512;
const RED = [200, 30, 30], BLUE = [20, 20, 200], GREEN = [0, 160, 0];

// ---- tiny PNG encoder (RGBA, filter 0)
function crc32(buf) {
  let c, crc = ~0;
  for (let n = 0; n < buf.length; n++) { c = (crc ^ buf[n]) & 255; for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1; crc = (crc >>> 8) ^ c; }
  return ~crc >>> 0;
}
function chunk(type, data) {
  const len = Buffer.alloc(4); len.writeUInt32BE(data.length);
  const td = Buffer.concat([Buffer.from(type), data]);
  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(td));
  return Buffer.concat([len, td, crc]);
}
function png() {
  const raw = Buffer.alloc((W * 4 + 1) * H);
  for (let y = 0; y < H; y++) {
    raw[y * (W * 4 + 1)] = 0;
    for (let x = 0; x < W; x++) {
      const c = x < W / 2 ? RED : y < H / 2 ? BLUE : GREEN;
      raw.set([...c, 255], y * (W * 4 + 1) + 1 + x * 4);
    }
  }
  const ihdr = Buffer.alloc(13); ihdr.writeUInt32BE(W, 0); ihdr.writeUInt32BE(H, 4); ihdr[8] = 8; ihdr[9] = 6;
  return Buffer.concat([Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]), chunk('IHDR', ihdr), chunk('IDAT', zlib.deflateSync(raw)), chunk('IEND', Buffer.alloc(0))]);
}
const PNG = png();

// ---- bundle the units under test
const bundle = await esbuild({
  stdin: {
    contents: "export * from './src/utils/image-sample'; export * from './src/utils/palette-extract';",
    resolveDir: root, loader: 'ts',
  },
  bundle: true, write: false, format: 'iife', globalName: 'T', platform: 'browser', logLevel: 'error',
});
const BUNDLE = bundle.outputFiles[0].text;

// ---- servers: page + same-origin image on A; image only on B (cross-origin)
const serve = (withPage) => http.createServer((req, res) => {
  if (withPage && req.url === '/page.html') { res.setHeader('content-type', 'text/html'); return res.end('<!doctype html><title>t</title><body></body>'); }
  if (withPage && req.url === '/bundle.js') { res.setHeader('content-type', 'text/javascript'); return res.end(BUNDLE); }
  if (req.url.startsWith('/img.png')) { res.setHeader('content-type', 'image/png'); return res.end(PNG); }
  res.statusCode = 404; res.end();
});
const A = serve(true), B = serve(false);
await Promise.all([new Promise((r) => A.listen(0, '127.0.0.1', r)), new Promise((r) => B.listen(0, '127.0.0.1', r))]);
const pa = A.address().port, pb = B.address().port;

let failures = 0;
const check = (name, ok, extra = '') => { console.log(`${ok ? 'PASS' : 'FAIL'}  ${name}${extra ? '  ' + extra : ''}`); if (!ok) failures++; };
const hex = (c) => '#' + c.map((n) => n.toString(16).padStart(2, '0')).join('');

const targets = [
  ['chromium', chromium, process.env.CHROMIUM_PATH],
  ['firefox', firefox, process.env.FIREFOX_PATH],
].filter(([n]) => !process.env.ONLY || process.env.ONLY === n);

for (const [name, type, exe] of targets) {
  console.log(`--- ${name}`);
  const browser = await type.launch({ headless: true, ...(exe ? { executablePath: exe } : {}) });
  const page = await browser.newPage();
  await page.goto(`http://127.0.0.1:${pa}/page.html`);
  await page.addScriptTag({ url: `/bundle.js` });
  const r = await page.evaluate(async ({ pa, pb }) => {
    const out = {};
    const same = await T.loadImageForSampling(`/img.png`);
    out.sameOk = same.ok;
    if (same.ok) {
      out.size = [same.width, same.height];
      const d = same.imageData;
      out.red = T.sampleAt(d, 10, 10);
      out.blue = T.sampleAt(d, 400, 10);
      out.green = T.sampleAt(d, 400, 200);
      out.palette = T.extractPalette(d.data);
      const c = document.createElement('canvas');
      same.draw(c);
      out.drawn = [c.width, c.height];
    } else out.sameMsg = same.message;
    const abs = await T.loadImageForSampling(`http://127.0.0.1:${pa}/img.png`);
    out.absSameOk = abs.ok;
    const cross = await T.loadImageForSampling(`http://127.0.0.1:${pb}/img.png`);
    out.cross = cross;
    const bad = await T.loadImageForSampling(`/missing.png`);
    out.bad = bad;
    return out;
  }, { pa, pb });
  check('same-origin image loads', r.sameOk, r.sameMsg || '');
  check('downscaled to 512x256', JSON.stringify(r.size) === '[512,256]', JSON.stringify(r.size));
  check('draw() sizes canvas', JSON.stringify(r.drawn) === '[512,256]');
  check('pixel red exact', r.red === hex(RED), r.red);
  check('pixel blue exact', r.blue === hex(BLUE), r.blue);
  check('pixel green exact', r.green === hex(GREEN), r.green);
  check('palette = red, blue, green in population order (red 50%, blue/green 25%)',
    r.palette[0] === hex(RED) && r.palette.length === 3 && r.palette.includes(hex(BLUE)) && r.palette.includes(hex(GREEN)), JSON.stringify(r.palette));
  check('absolute same-origin URL loads', r.absSameOk);
  check('cross-origin refused', r.cross.ok === false && r.cross.reason === 'cross-origin');
  check('cross-origin message exact', r.cross.message === 'That image comes from another website, so the browser will not let the builder read its colours. Upload it to this site first, then pick from the uploaded copy.');
  check('missing image -> error', r.bad.ok === false && r.bad.reason === 'error', r.bad.message);
  await browser.close();
}
A.close(); B.close();
console.log(failures ? `\n${failures} FAILED` : '\nall passed');
process.exit(failures ? 1 : 0);