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

const scenarios = [
  {
    name: 'desktop-en-light',
    locale: 'en',
    theme: 'light',
    viewport: { width: 1440, height: 1000 },
  },
  { name: 'desktop-en-dark', locale: 'en', theme: 'dark', viewport: { width: 1440, height: 1000 } },
  { name: 'tablet-fr-light', locale: 'fr', theme: 'light', viewport: { width: 1024, height: 900 } },
  { name: 'tablet-fr-dark', locale: 'fr', theme: 'dark', viewport: { width: 1024, height: 900 } },
  { name: 'mobile-ar-light', locale: 'ar', theme: 'light', viewport: { width: 390, height: 844 } },
  { name: 'mobile-ar-dark', locale: 'ar', theme: 'dark', viewport: { width: 390, height: 844 } },
] as const;

for (const scenario of scenarios) {
  test(`${scenario.name} visual baseline`, async ({ page, context }) => {
    test.skip(
      test.info().project.name !== 'chromium',
      'Canonical visual baselines use Chromium; other projects run functional coverage.',
    );
    await page.setViewportSize(scenario.viewport);
    await context.addCookies([
      {
        name: 'hpc-theme',
        value: scenario.theme,
        domain: '127.0.0.1',
        path: '/',
        secure: false,
        sameSite: 'Lax',
      },
    ]);
    await page.goto(`/${scenario.locale}/${scenario.theme}`);
    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
  });
}

test('mobile navigation open baseline', async ({ page }) => {
  test.skip(test.info().project.name !== 'chromium');
  await page.setViewportSize({ width: 390, height: 844 });
  await page.context().addCookies([
    {
      name: 'hpc-theme',
      value: 'dark',
      domain: '127.0.0.1',
      path: '/',
      secure: false,
      sameSite: 'Lax',
    },
  ]);
  await page.goto('/ar/dark');
  await page.getByRole('button', { name: 'فتح قائمة التنقل' }).click();
  await expect(page).toHaveScreenshot('mobile-ar-dark-navigation-open.png', { fullPage: true });
});

test('keyboard focus baseline', async ({ page }) => {
  test.skip(test.info().project.name !== 'chromium');
  await page.setViewportSize({ width: 1440, height: 900 });
  await page.goto('/en/light');
  await page.keyboard.press('Tab');
  await expect(page).toHaveScreenshot('desktop-en-light-focus.png', { fullPage: true });
});