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

for (const locale of ['en', 'fr', 'ar'] as const) {
  test(`${locale} component fixture renders without horizontal overflow`, async ({ page }) => {
    await page.goto(`/${locale}/component-lab`);
    await expect(page.locator('h1')).toBeVisible();
    const overflow = await page.evaluate(
      () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
    );
    expect(overflow).toBe(false);
    await expect(page.locator('html')).toHaveAttribute('dir', locale === 'ar' ? 'rtl' : 'ltr');
  });
}

test('component controls support keyboard interaction and dialog focus return', async ({
  page,
}) => {
  await page.goto('/en/component-lab');
  const firstTab = page.getByRole('tab', { name: 'Reservations' });
  await firstTab.focus();
  await page.keyboard.press('ArrowRight');
  await expect(page.getByRole('tab', { name: 'Fleet availability' })).toHaveAttribute(
    'aria-selected',
    'true',
  );

  const trigger = page.getByRole('button', { name: 'Open dialog' });
  await trigger.click();
  await expect(page.getByRole('dialog')).toBeVisible();
  await page.keyboard.press('Escape');
  await expect(page.getByRole('dialog')).toBeHidden();
  await expect(trigger).toBeFocused();
});

test('component fixture reflows at narrow mobile and 200 percent zoom equivalent', async ({
  page,
}) => {
  await page.setViewportSize({ width: 320, height: 800 });
  await page.goto('/fr/component-lab');
  await page.evaluate(() => (document.body.style.zoom = '2'));
  const overflow = await page.evaluate(
    () => document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
  );
  expect(overflow).toBe(false);
});