import { mkdir, writeFile } from 'node:fs/promises';
import { join } from 'node:path';

const root = new URL('.', import.meta.url).pathname;
const cards = [
  {
    slug: 'started',
    eyebrow: 'NO BLANK PAGE · STARTED',
    title: ['I made one', 'small check-in.'],
    note: 'The answers stay private.',
    accent: '#7C3AED',
  },
  {
    slug: 'continuing',
    eyebrow: 'NO BLANK PAGE · CONTINUING',
    title: ['Some days', 'are still blank.'],
    note: 'No backfilling. Restart when useful.',
    accent: '#4F46E5',
  },
  {
    slug: 'paused',
    eyebrow: 'NO BLANK PAGE · PAUSED',
    title: ['I made the', 'challenge smaller.'],
    note: 'Pausing or stopping is allowed.',
    accent: '#9333EA',
  },
  {
    slug: 'finished',
    eyebrow: 'NO BLANK PAGE · FINISHED',
    title: ['Seven days', 'tested.'],
    note: 'No private answers shared.',
    accent: '#DB2777',
  },
];

const escapeXml = (value) => value
  .replaceAll('&', '&amp;')
  .replaceAll('<', '&lt;')
  .replaceAll('>', '&gt;');

function svg(card, width, height, label) {
  const story = height === 1920;
  const panelY = story ? 220 : 120;
  const panelH = story ? 1480 : 1110;
  const brandY = panelY + (story ? 140 : 115);
  const eyebrowY = panelY + (story ? 365 : 300);
  const titleY = panelY + (story ? 560 : 465);
  const titleGap = story ? 112 : 93;
  const boxesY = panelY + (story ? 900 : 715);
  const noteY = panelY + (story ? 1125 : 885);
  const privacyY = panelY + (story ? 1285 : 1005);
  const footerY = panelY + (story ? 1390 : 1060);
  const titleSize = story ? 82 : 70;
  const boxes = Array.from({ length: 7 }, (_, index) => {
    const x = 145 + index * 112;
    return `<rect x="${x}" y="${boxesY}" width="82" height="82" rx="22" fill="${index === 0 || card.slug === 'finished' ? card.accent : '#EDE9FE'}" stroke="${card.accent}" stroke-width="4"/>`;
  }).join('\n  ');
  const title = card.title.map((line, index) =>
    `<text x="145" y="${titleY + index * titleGap}" class="title">${escapeXml(line)}</text>`
  ).join('\n  ');

  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-labelledby="title desc">
  <title id="title">No Blank Page: ${escapeXml(card.slug)} status card</title>
  <desc id="desc">A privacy-safe Vibbrancy challenge status card that shares no score, emotion, context or journal text.</desc>
  <defs>
    <linearGradient id="bg" x1="80" y1="70" x2="1000" y2="${height - 60}" gradientUnits="userSpaceOnUse">
      <stop stop-color="#24153F"/><stop offset="0.52" stop-color="#5B21B6"/><stop offset="1" stop-color="#BE185D"/>
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="24" stdDeviation="34" flood-color="#160A2B" flood-opacity=".34"/></filter>
    <style>
      text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
      .title { fill: #24153F; font-size: ${titleSize}px; font-weight: 760; }
    </style>
  </defs>
  <rect width="${width}" height="${height}" fill="url(#bg)"/>
  <circle cx="980" cy="170" r="300" fill="#FFFFFF" opacity=".07"/>
  <circle cx="40" cy="${height - 90}" r="330" fill="#FFFFFF" opacity=".06"/>
  <rect x="90" y="${panelY}" width="900" height="${panelH}" rx="64" fill="#FFFFFF" fill-opacity=".98" filter="url(#shadow)"/>
  <g transform="translate(145 ${brandY - 54})">
    <circle cx="54" cy="54" r="54" fill="${card.accent}"/>
    <path d="M29 48C35 31 73 31 79 48" fill="none" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round"/>
    <path d="M31 65C42 82 66 82 77 65" fill="none" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round"/>
    <text x="130" y="68" fill="#4C1D95" font-size="44" font-weight="700">Vibbrancy</text>
  </g>
  <text x="145" y="${eyebrowY}" fill="${card.accent}" font-size="29" font-weight="760" letter-spacing="2.6">${escapeXml(card.eyebrow)}</text>
  ${title}
  ${boxes}
  <text x="145" y="${noteY}" fill="#4C1D95" font-size="34" font-weight="690">${escapeXml(card.note)}</text>
  <text x="145" y="${privacyY}" fill="#374151" font-size="27" font-weight="620">Share only the status card. Keep your check-in private.</text>
  <text x="145" y="${footerY}" fill="#6B7280" font-size="26">Free challenge · vibbrancy.app/tools/</text>
  <text x="935" y="${footerY}" fill="#9CA3AF" font-size="21" text-anchor="end">${label}</text>
</svg>\n`;
}

for (const format of [
  { name: 'feed', width: 1080, height: 1350 },
  { name: 'story', width: 1080, height: 1920 },
]) {
  const out = join(root, format.name);
  await mkdir(out, { recursive: true });
  for (const card of cards) {
    await writeFile(join(out, `${card.slug}.svg`), svg(card, format.width, format.height, format.name));
  }
}

await writeFile(join(root, 'cards.json'), `${JSON.stringify(cards, null, 2)}\n`);
