// Renders website/scripts/og.html to website/public/og.png at 1200x630.
//
//   CHROME_PATH=/path/to/chrome npm run og
//
// Uses puppeteer-core, the driver this package already carries for
// profile:runtime, so the card needs no browser dependency of its own.
import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';

import puppeteer from 'puppeteer-core';

const chromePath = process.env.CHROME_PATH;

if (!chromePath) {
  throw new Error('Set CHROME_PATH to a Chromium/Chrome executable.');
}

const here = dirname(fileURLToPath(import.meta.url));
const source = resolve(here, 'og.html');
const target = resolve(here, '../public/og.png');

const browser = await puppeteer.launch({
  executablePath: chromePath,
  headless: true,
  // Same pair profile:runtime uses, and for the same reason: the container and CI
  // images this gets run in are root with a small /dev/shm.
  args: ['--no-sandbox', '--disable-dev-shm-usage'],
});
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1 });
await page.goto(`file://${source}`, { waitUntil: 'networkidle0' });

// The fonts and the mark are the whole card; screenshotting before they arrive
// silently produces a fallback-font PNG that still looks plausible.
await page.evaluate(async () => {
  await document.fonts.ready;
  await Promise.all([...document.images].map((image) => (image.complete ? null : image.decode())));
});

// Guard the legibility contract. Feeds render this card as small as 320px wide — a
// 27% scale — so crowded, clipped, or re-wrapped type is worth failing over.
const problems = await page.evaluate(() => {
  const pad = 72;
  const width = 1200;
  const height = 630;

  // The statement hangs its box outside the padding by a deliberate optical inset,
  // so the R's printed edge — not its box — lands on the padding. That slack is a
  // CONSTANT on purpose: reading it back off the element under test would let any
  // margin-left, however wrong, widen the very bound meant to catch it.
  const opticalSlack = 12;

  const found = [];
  const label = (element) => element.className || element.tagName;

  for (const element of document.querySelectorAll('.card p, .card h1, .card .brand-name')) {
    const size = parseFloat(getComputedStyle(element).fontSize);
    if (size < 30) found.push(`${label(element)} is ${size}px (< 30px)`);
  }

  const statement = document.querySelector('.statement');
  const range = document.createRange();

  for (const element of document.querySelectorAll('.statement .line, .foot p, .brand-name')) {
    const leftBound = pad - (statement.contains(element) ? opticalSlack : 0);
    range.selectNodeContents(element);
    // One rect per inline box, not per line — "that" and "runs." are two boxes on
    // one line, and a <br> contributes an empty one. Distinct tops is the line count.
    const rects = [...range.getClientRects()].filter((rect) => rect.width > 0 && rect.height > 0);
    const lines = new Set(rects.map((rect) => Math.round(rect.top))).size;

    // Oversized type does not run past the padding — it wraps, quietly turning a
    // two-line headline into three and pushing the composition out of the frame.
    // One source line must stay one rendered line.
    const expectedLines = element.classList.contains('brand-name') ? 2 : 1;
    if (lines !== expectedLines) {
      found.push(`${label(element)} renders ${lines} lines, expected ${expectedLines}`);
    }

    for (const rect of rects) {
      if (rect.left < leftBound - 1 || rect.right > width - pad + 1) {
        found.push(
          `${label(element)} spans ${Math.round(rect.left)}-${Math.round(rect.right)}px ` +
            `(bounds ${leftBound}-${width - pad})`,
        );
      }
    }
  }

  // Nothing may run off the bottom: the card clips, so an overflowing block is
  // invisible here and obvious in a feed.
  for (const element of document.querySelectorAll('.lockup, .statement, .foot, .rule')) {
    const rect = element.getBoundingClientRect();
    if (rect.top < -1 || rect.bottom > height + 1) {
      found.push(
        `${label(element)} runs ${Math.round(rect.top)}-${Math.round(rect.bottom)}px vertically ` +
          `(card is 0-${height})`,
      );
    }
  }

  return found;
});

if (problems.length) {
  await browser.close();
  console.error('og.png legibility check failed:\n  ' + problems.join('\n  '));
  process.exit(1);
}

await page.screenshot({ path: target });
await browser.close();

console.log(`wrote ${target}`);