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

const builderUrl = '/en/builder'

type WindowWithExport = Window & {
  __exportPreview?: () => { html: string; css: string; js: string }
}

test('Preview/export markers: heading/ARIA/responsive tokens exist', async ({ page }) => {
  await page.goto(builderUrl)

  // add sections to ensure markers exist in export
  await page.getByTestId('card-hero').click()
  await page.getByTestId('card-features').click()
  await page.getByTestId('card-testimonials').click()
  await page.getByTestId('card-faq').click()
  await page.getByTestId('card-cta').click()

  // ensure FAQ has at least one item to satisfy schema
  await page.getByLabel('Select 3').click()
  await page.getByRole('button', { name: 'Add FAQ Item' }).click()
  await page.getByLabel('FAQ Q 0').fill('What?')
  await page.getByLabel('FAQ A 0').fill('Answer')

  // ensure exporter hook is present
  await page.waitForFunction(() => Boolean((window as unknown as WindowWithExport).__exportPreview), { timeout: 5000 })
  const exported = await page.evaluate(() => (window as unknown as WindowWithExport).__exportPreview?.() ?? null)
  expect(exported).not.toBeNull()

  const html = exported!.html
  const css = exported!.css

  // headings/aria
  expect(html).toContain('<h1 id="hero-heading">')
  expect(html).toContain('aria-labelledby="features-heading"')
  expect(html).toContain('aria-labelledby="testimonials-heading"')
  expect(html).toContain('aria-labelledby="faq-heading"')
  expect(html).toContain('aria-labelledby="cta-heading"')

  // responsive/a11y css tokens
  expect(css).toMatch(/@media \(max-width: 640px\)/)
  expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)/)
  expect(css).toMatch(/a\.skip-link:focus/)
  expect(css).toMatch(/outline:\s*3px\s*solid/)
})