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

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

const builderUrl = '/en/builder'

// Verify that focus outline tokens from CSS are applied in a real browser context
// by focusing the submit button in the exported page and inspecting computed styles.
test('Exported page shows 3px solid outline color on focused button', async ({ page, context }) => {
  await page.goto(builderUrl)
  // Minimal content to export
  await page.getByTestId('card-hero').click()

  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 preview = await context.newPage()
  await preview.setContent(exported!.html)
  await preview.addStyleTag({ content: exported!.css })

  const submit = preview.locator('button[type="submit"]')
  await expect(submit).toHaveCount(1)
  await submit.focus()

  // Read computed style in the page context
  const style = await preview.evaluate(() => {
    const el = document.querySelector('button[type="submit"]') as HTMLElement | null
    if (!el) return null
    const cs = window.getComputedStyle(el)
    return { outlineWidth: cs.outlineWidth, outlineStyle: cs.outlineStyle, outlineColor: cs.outlineColor }
  })
  expect(style).not.toBeNull()
  // Expect 3px solid and brand color (#2563eb => rgb(37, 99, 235))
  expect(style!.outlineWidth).toBe('3px')
  expect(style!.outlineStyle).toBe('solid')
  expect(style!.outlineColor.replace(/\s+/g, '')).toMatch(/rgb\(37,99,235\)|#2563eb/i)

  await preview.close()
})