// Renders the app icon to the PNG sizes browsers need to install the app.
// Run after changing the icon: node scripts/generate-icons.mjs
import { chromium } from '@playwright/test'

const shield = (stroke) => `
  <path d="M16 6.5 8.5 9.5v6c0 4.6 3.2 8.6 7.5 9.9 4.3-1.3 7.5-5.3 7.5-9.9v-6L16 6.5Z" fill="none" stroke="#fff" stroke-width="${stroke}" stroke-linejoin="round"/>
  <path d="m12.5 16 2.4 2.4 4.6-4.8" fill="none" stroke="#fff" stroke-width="${stroke}" stroke-linecap="round" stroke-linejoin="round"/>`

// Regular icon: rounded tile. Maskable: full-bleed square with the mark inside the safe zone.
const regular = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#ee7258"/>${shield(2.2)}</svg>`
const maskable = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#ee7258"/><g transform="translate(16 16) scale(0.72) translate(-16 -16)">${shield(2.4)}</g></svg>`

const outputs = [
  ['public/icons/icon-192.png', regular, 192],
  ['public/icons/icon-512.png', regular, 512],
  ['public/icons/maskable-512.png', maskable, 512],
  ['public/icons/apple-touch-icon.png', maskable, 180],
]

const browser = await chromium.launch()
const page = await browser.newPage()
for (const [path, svg, size] of outputs) {
  await page.setViewportSize({ width: size, height: size })
  await page.setContent(`<style>html,body{margin:0;background:transparent}</style><img src="data:image/svg+xml,${encodeURIComponent(svg)}" width="${size}" height="${size}">`)
  await page.locator('img').screenshot({ path, omitBackground: true })
  console.log('wrote', path)
}
await browser.close()