import { chromium } from '@playwright/test'
import { writeFile } from 'node:fs/promises'

// Code-drawn reference matching the local prototype; no remote media required.
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="600" height="800"><rect width="600" height="800" fill="#e8e6eb"/><rect x="30" y="24" width="540" height="752" fill="white"/><g fill="#333" font-family="Arial,Microsoft YaHei"><text x="300" y="82" text-anchor="middle" font-size="25">数学练习试卷</text><text x="65" y="125" font-size="15">姓名：________\u3000班级：________</text><path d="M60 145H540" stroke="#aaa"/><text x="65" y="185" font-size="18">1. 已知 y = x² − 4x + 3，求与 x 轴的交点。</text><text x="80" y="225" fill="#345a83" font-size="19">解：令 y = 0，得 (x − 1)(x − 3) = 0</text><text x="80" y="260" fill="#345a83" font-size="19">所以交点为 (1, 0)、(3, 0)。</text><text x="65" y="345" font-size="18">2. 求二次函数 y = −(x − 1)² + 4 的顶点。</text><text x="80" y="390" fill="#345a83" font-size="19">顶点坐标为 (1, 4)。</text><text x="65" y="480" font-size="18">3. 求函数的对称轴与单调区间。</text><path d="M100 670H460M220 710V530M130 650Q270 430 410 650" fill="none" stroke="#777" stroke-width="2"/><text x="300" y="746" text-anchor="middle" font-size="12" fill="#aaa">第 1 页</text></g></svg>`
const browser = await chromium.launch({ channel: 'chrome', headless: true })
try {
  const page = await browser.newPage()
  const png = await page.evaluate(async (source) => {
    const image = new Image()
    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`
    await image.decode()
    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 800
    canvas.getContext('2d').drawImage(image, 0, 0)
    return canvas.toDataURL('image/png').split(',')[1]
  }, svg)
  await writeFile('src/assets/paper-capture-reference.png', Buffer.from(png, 'base64'))
} finally {
  await browser.close()
}