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

const builderUrl = '/en/builder'

test('Preview viewport toggle via keyboard (Tab + Enter/Space)', async ({ page }) => {
  await page.goto(builderUrl)
  await page.waitForLoadState('domcontentloaded')
  // Ensure the page has focus before sending keyboard events
  await page.locator('body').click({ position: { x: 1, y: 1 } })

  // Focus the Desktop button explicitly to avoid flakiness from skip-link/initial focus
  const desktopBtn = page.getByRole('button', { name: 'Desktop' })
  await desktopBtn.focus()
  await expect(desktopBtn).toBeFocused()

  // Press Space to toggle Mobile (first ensure Desktop is selected, then move to Mobile with Tab)
  await page.keyboard.press('Tab')
  await expect(page.getByRole('button', { name: 'Mobile' })).toBeFocused()
  await page.keyboard.press('Space')
  await expect(page.getByRole('button', { name: 'Mobile' })).toHaveAttribute('aria-pressed', 'true')

  // Back to Desktop with Shift+Tab and Enter
  await page.keyboard.down('Shift')
  await page.keyboard.press('Tab')
  await page.keyboard.up('Shift')
  await expect(page.getByRole('button', { name: 'Desktop' })).toBeFocused()
  await page.keyboard.press('Enter')
  await expect(page.getByRole('button', { name: 'Desktop' })).toHaveAttribute('aria-pressed', 'true')
})