import AxeBuilder from '@axe-core/playwright'
import { expect, test } from '@playwright/test'

test.beforeEach(async ({ page }) => {
  await page.route('**/auth/session', (route) =>
    route.fulfill({
      contentType: 'application/json',
      body: JSON.stringify({
        kind: 'authenticated',
        identity: 'issuer\u0000subject',
        csrfToken: 'csrf-value',
      }),
    }),
  )
  await page.route(/\/bff\/api\//, (route) => {
    const path = new URL(route.request().url()).pathname
    if (path.endsWith('/jobs'))
      return route.fulfill({
        contentType: 'application/json',
        body: JSON.stringify({
          items: [],
          next_cursor: null,
          event_cursor: 'cursor-snapshot-0001',
          management_capabilities: { revoke_execution_grants: false },
        }),
      })
    return route.fulfill({
      status: 201,
      contentType: 'application/json',
      body: JSON.stringify({
        ticket: 'ticket_00001',
        expires_at: '2026-07-20T00:00:00Z',
      }),
    })
  })
  await page.routeWebSocket(/\/bff\/events/, () => {})
})

test('meets automated WCAG A and AA checks', async ({ page }) => {
  await page.goto('/')
  await expect(page.getByRole('heading', { name: 'Remora' })).toBeVisible()
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
    .analyze()
  expect(results.violations).toEqual([])
})

test('reflows at 320 CSS pixels and preserves keyboard focus', async ({
  page,
}) => {
  await page.setViewportSize({ width: 320, height: 720 })
  await page.goto('/')
  await expect(page.getByRole('heading', { name: 'Remora' })).toBeVisible()
  expect(
    await page.evaluate(() => document.documentElement.scrollWidth),
  ).toBeLessThanOrEqual(320)
  await page.keyboard.press('Tab')
  await expect(page.getByRole('button', { name: 'Sign out' })).toBeFocused()
  await page.keyboard.press('Tab')
  await expect(page.getByRole('button', { name: 'Jobs' })).toBeFocused()
})