// Run with npm run art. Both illustrations originate in the live board component.
import { readFile, writeFile, unlink } from 'node:fs/promises';
import { compile } from 'svelte/compiler';
import { render } from 'svelte/server';
import sharp from 'sharp';
import { createGame } from '../src/lib/game/index.ts';
const root = new URL('../', import.meta.url);
const source = await readFile(new URL('src/lib/components/BoardArtwork.svelte', root), 'utf8');
const app = await readFile(new URL('src/app.css', root), 'utf8');
/** The site's design tokens, from the :root block of app.css. */
const tokens = Object.fromEntries([...app.slice(0, app.indexOf('}')).matchAll(/(--[\w-]+):\s*([^;]+);/g)].map(m => [m[1], m[2]]));
const compiled = compile(source.replace("'$lib/game'", "'../src/lib/game/index.ts'"), { generate: 'server', css: 'injected', filename: 'BoardArtwork.svelte' });
const temporary = new URL(`.board-art-${process.pid}.mjs`, import.meta.url);
try {
  await writeFile(temporary, compiled.js.code);
  const { default: BoardArtwork } = await import(temporary.href);
  for (const set of ['copenhagen', 'tablut']) {
    const result = render(BoardArtwork, { props: { g: createGame({ a: 'Defenders', b: 'Attackers' }, 0, undefined, { set }), decorative: true } });
    let svg = result.body.replace(/<!--[\s\S]*?-->/g, '');
    const css = [...result.head.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)].map(m => m[1]).join('\n');
    svg = svg.replace(/(<svg[^>]*>)/, '$1<style>' + css + '</style>');
    // Resolve custom properties for standalone SVG rasterizers, which do not
    // consistently implement CSS variable inheritance. Browsers use the component.
    const paletteSource = source.slice(source.indexOf('/* Copenhagen:'));
    const base = paletteSource.slice(0, paletteSource.indexOf('/* Tablut:'));
    const overrides = set === 'tablut' ? paletteSource.slice(paletteSource.indexOf('/* Tablut:'), paletteSource.indexOf('\n\t.artwork {')) : '';
    const values = { ...tokens, ...Object.fromEntries([...`${base}\n${overrides}`.matchAll(/(--[\w-]+):\s*([^;]+);/g)].map(m => [m[1], m[2]])) };
    values['--piece-rim'] = values['--defender-rim'];
    svg = svg.replace(/:where\((\.[\w-]+)\)/g, '$1');
    svg = svg.replace(/var\((--[\w-]+)\)/g, (_, key) => values[key] ?? 'inherit');
    svg = svg.replace('</style>', ['attacker', 'defender', 'king'].map(kind => `.piece.${kind} .base{fill:${values[`--${kind}-rim`]}}.piece.${kind} .body,.piece.${kind} .turned{stroke:${values[`--${kind}-rim`]}}`).join('') + '</style>');
    await writeFile(new URL(`static/board-${set}.svg`, root), svg);
  }
  const board = await readFile(new URL('static/board-copenhagen.svg', root), 'utf8');
  const image = Buffer.from(board).toString('base64');
  const share = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
    <rect width="1200" height="630" fill="#14181a"/>
    <image x="62" y="80" width="470" height="470" href="data:image/svg+xml;base64,${image}"/>
    <g font-family="Georgia, serif">
      <text x="590" y="180" font-size="82" fill="#e6dfcf">Hnefatafl</text>
      <text x="594" y="246" font-size="30" fill="#e6dfcf">The Viking board game.</text>
      <text x="594" y="294" font-size="27" fill="#aeb3ab">
        <tspan x="594">One king, one throne, four corners,</tspan>
        <tspan x="594" dy="38">and a ring of attackers closing in.</tspan>
        <tspan x="594" dy="50">Play a housecarl or a friend.</tspan>
        <tspan x="594" dy="38">Copenhagen or Linnaeus’s Tablut.</tspan>
      </text>
      <text x="594" y="491" font-size="24" fill="#c5ae7b">tafl.kestrelsnest.social</text>
      <text x="594" y="526" font-size="22" fill="#9ea59e">Free · no accounts</text>
    </g>
  </svg>`;
  await writeFile(new URL('docs/og-card.svg', root), share);
  await sharp(Buffer.from(share)).png().toFile(new URL('static/og.png', root).pathname);
  console.log('Generated both board illustrations and static/og.png (1200 × 630).');
} finally {
  await unlink(temporary).catch(() => {});
}