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

// Render the prototype's sample card locally, without loading scripts or remote assets.
const html = `<style>
* { box-sizing:border-box; } body { margin:0; font-family:Arial,'Microsoft YaHei',sans-serif; }
.answer-paper { width:202px; background:white; padding:15px 13px 12px; color:#393441; position:relative; border:1px solid #d6cee2; }
.answer-paper:before,.answer-paper:after { content:''; position:absolute; width:9px; height:9px; background:#343039; top:7px; }
.answer-paper:before { left:7px; } .answer-paper:after { right:7px; }
.ap-brand { font-size:8px; font-weight:700; color:#6f5d86; text-align:center; letter-spacing:2px; }
.ap-title { text-align:center; font-size:12px; font-weight:700; margin:6px 0; }
.ap-meta { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #c9c3d1; padding-bottom:7px; font-size:7px; line-height:1.8; }
.ap-qr { width:30px; height:30px; flex-shrink:0; } .ap-qr svg { display:block; width:100%; height:100%; }
.ap-note { font-size:6px; color:#999; padding:5px 0; }
.ap-question { border:1px solid #d8d3de; padding:6px; margin-top:5px; font-size:7px; min-height:43px; }
.ap-question b { font-size:7px; } .ap-hand { color:#3d5680; font-style:italic; font-family:Georgia,'KaiTi',serif; font-size:11px; margin-top:6px; }
.ap-footer { display:flex; justify-content:space-between; font-size:6px; color:#aaa; margin-top:8px; }
</style>
<div class="answer-paper">
<div class="ap-brand">知了数学 · 答题卡</div><div class="ap-title">二次函数 · 答题卡</div>
<div class="ap-meta"><span>姓名：李明\u3000 班级：初二（1）班<br>答题卡编号：261022000030001</span><span class="ap-qr"><svg viewBox="0 0 29 29"><rect width="29" height="29" fill="white"/><path fill="#333" d="M1 1h8v8H1z M20 1h8v8h-8z M1 20h8v8H1z M12 1h3v3h-3z M11 6h5v3h-5z M2 12h5v4H2z M10 11h4v5h-4z M16 11h3v3h-3z M21 12h7v3h-7z M16 17h6v3h-6z M24 17h4v5h-4z M11 20h3v8h-3z M16 23h4v5h-4z M22 25h6v3h-6z"/><path fill="white" d="M3 3h4v4H3z M22 3h4v4h-4z M3 22h4v4H3z"/><path fill="#333" d="M4 4h2v2H4z M23 4h2v2h-2z M4 23h2v2H4z"/></svg></span></div>
<div class="ap-note">请在指定区域内作答，保持卷面清晰完整。</div>
<div class="ap-question"><b>1. 选择题（请清晰填涂）</b><div style="margin-top:7px">1. [ A ] [ B ] [ ● ] [ D ]\u30002. [ A ] [ ● ] [ C ] [ D ]</div></div>
<div class="ap-question"><b>2. 填空题</b><div class="ap-hand">3. (1, 0)、(3, 0)</div></div>
<div class="ap-question" style="min-height:68px"><b>3. 解答题（保留解题步骤）</b><div class="ap-hand">解：y = a(x − 1)² + 4<br>代入 (0, 3)，得 a = −1<br>∴ y = −(x − 1)² + 4</div></div>
<div class="ap-footer"><span>■\u3000请保留四周边缘及二维码</span><span>第 1 页 / 共 1 页\u3000■</span></div>
</div>`
const browser = await chromium.launch({ channel: 'chrome', headless: true })
try {
  const page = await browser.newPage({ deviceScaleFactor: 3 })
  await page.setContent(html)
  await writeFile('src/assets/answer-capture-reference.png', await page.locator('.answer-paper').screenshot())
} finally {
  await browser.close()
}