import { expect, test } from '@playwright/test'

const output = 'docs/evidence/screenshots'
const supported = new Set(['chrome', 'firefox', 'chromium-1920x1080', 'chromium-1680x1050', 'chromium-1920x1200'])

test('capture evidence dashboard', async ({ page }, testInfo) => {
  test.skip(!supported.has(testInfo.project.name), 'Only required evidence projects generate captures.')
  await page.goto('/')
  await page.evaluate(() => localStorage.clear())
  await page.reload()

  const metadata = await page.evaluate(() => ({
    width: window.innerWidth,
    height: window.innerHeight,
    browser: navigator.userAgent.includes('Firefox') ? 'Firefox' : 'Google Chrome',
  }))
  await page.evaluate((label) => {
    const badge = document.createElement('div')
    badge.id = 'evidence-metadata'
    badge.textContent = label
    Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#171429e6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif', boxShadow: '0 4px 18px #0004' })
    document.body.appendChild(badge)
  }, `${metadata.browser} · ${metadata.width}×${metadata.height} · ${new Date().toISOString().slice(0, 10)}`)

  const filename = testInfo.project.name === 'chrome' || testInfo.project.name === 'firefox'
    ? `browser-${testInfo.project.name}-dashboard.png`
    : `responsive-${metadata.width}x${metadata.height}-dashboard.png`
  await page.screenshot({ path: `${output}/${filename}`, fullPage: true })
  await expect(page.locator('.app-shell')).toBeVisible()

  if (testInfo.project.name === 'chromium-1680x1050') {
    await page.addStyleTag({ content: '@media (min-width:1400px) and (max-width:1799px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}' })
    await page.screenshot({ path: `${output}/responsive-defect-before-1680x1050.png`, fullPage: true })
    await page.reload()
    await page.evaluate(() => {
      const badge = document.createElement('div')
      badge.textContent = 'Chromium · 1680×1050 · corrected 2×2 summary grid'
      Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#08735ee6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif' })
      document.body.appendChild(badge)
    })
    await page.screenshot({ path: `${output}/responsive-fix-after-1680x1050.png`, fullPage: true })
    await page.getByLabel('Primary navigation').getByRole('button', { name: 'Learning goals' }).click()
    await page.getByRole('button', { name: 'New goal' }).click()
    await page.screenshot({ path: `${output}/responsive-1680x1050-goal-dialog.png`, fullPage: true })
  }
})