import { test, expect } from '@playwright/test';
import { ROUTES, VIEWPORTS } from './helpers';

for (const route of ROUTES) {
  for (const vp of VIEWPORTS) {
    test(`${route} @ ${vp.name} (${vp.width}x${vp.height}) — no horizontal scroll`, async ({ page }) => {
      await page.setViewportSize({ width: vp.width, height: vp.height });
      await page.goto(route);
      await page.locator('h1').first().waitFor();
      const overflow = await page.evaluate(() =>
        document.documentElement.scrollWidth > document.documentElement.clientWidth,
      );
      expect(overflow).toBe(false);
    });
  }
}

test('mobile (375x667): name + title visible above the fold', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');
  await expect(page.locator('h1').first()).toBeInViewport();
});

test('Download PDF button meets 36px tap target on mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');
  const btn = page.getByRole('button', { name: /download pdf/i });
  const box = await btn.boundingBox();
  expect(box).not.toBeNull();
  expect(box!.height).toBeGreaterThanOrEqual(36);
});

test('desktop ≥ 1024px shows two-column layout (main + aside)', async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 720 });
  await page.goto('/');
  // Both columns side-by-side: aside top should align with main top
  const main = await page.locator('article > div.grid > div').first().boundingBox();
  const aside = await page.locator('article > div.grid > aside').boundingBox();
  expect(main).not.toBeNull();
  expect(aside).not.toBeNull();
  // Aside should be to the right of main (different x), at similar y
  expect(aside!.x).toBeGreaterThan(main!.x + main!.width - 50);
});
