// 前端渲染断言：检查关键元素与 console 错误
const { chromium } = require('playwright')

async function main() {
  const browser = await chromium.launch()
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } })
  const errors = []
  page.on('console', (m) => { if (m.type() === 'error') errors.push(page.url() + ' :: ' + m.text()) })
  page.on('pageerror', (e) => errors.push('pageerror: ' + e.message))

  async function check(name, url, selectors) {
    await page.goto(url, { waitUntil: 'networkidle' })
    await page.waitForTimeout(800)
    const results = []
    for (const [label, sel] of Object.entries(selectors)) {
      const n = await page.locator(sel).count()
      results.push(`${label}:${n}`)
    }
    console.log(`${name}: ${results.join(' ')}`)
  }

  await check('landing', 'http://localhost:5173/', {
    nav: 'header nav',
    hero: 'h1',
    protocols: '#protocols .grid > div',
    footer: 'footer',
  })

  await check('login', 'http://localhost:5173/login', {
    username: 'input[autocomplete="username"]',
    password: 'input[autocomplete="current-password"]',
    submit: 'button[type="submit"]',
  })

  // 注册一个测试用户并进控制台
  const uname = 'verify' + Date.now().toString().slice(-6)
  await page.goto('http://localhost:5173/register', { waitUntil: 'networkidle' })
  await page.fill('input[autocomplete="username"]', uname)
  await page.fill('input[autocomplete="email"]', uname + '@test.com')
  await page.fill('input[autocomplete="new-password"]', 'password123')
  await page.locator('input[autocomplete="new-password"]').nth(1).fill('password123')
  await page.click('button[type="submit"]')
  await page.waitForURL('**/console/dashboard', { timeout: 10000 })
  await page.waitForTimeout(1200)

  await check('dashboard', 'http://localhost:5173/console/dashboard', {
    sidebar: 'aside',
    cards: '.mt-6.grid .rounded-lg',
    chart: '.divide-y, canvas',
    recent: '.divide-y',
    navKeys: 'a[href="/console/keys"]',
    balance: 'aside .text-mint-400',
  })

  await check('keys', 'http://localhost:5173/console/keys', {
    table: 'table',
    createBtn: 'button:has-text("新建密钥")',
  })

  await check('usage', 'http://localhost:5173/console/usage', {
    table: 'table',
    filter: 'select',
    pagination: 'button:has-text("下一页")',
  })

  // 创建密钥弹窗
  await page.goto('http://localhost:5173/console/keys', { waitUntil: 'networkidle' })
  await page.click('button:has-text("新建密钥")')
  await page.waitForTimeout(300)
  await page.fill('input[placeholder*="本地开发"]', 'verify-key')
  await page.click('button:has-text("创建")')
  await page.waitForTimeout(600)
  const created = await page.locator('code.text-mint-300').count()
  console.log(`key-created-modal: oneTimeKey:${created}`)

  console.log('console-errors:', errors.length ? errors.slice(0, 5) : 'none')
  await browser.close()
}

main().catch((e) => { console.error(e); process.exit(1) })