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

/**
 * Viewport Matrix Tests
 * 
 * Tests that all routes pass the viewport matrix for:
 * - Desktop (1200px+)
 * - Tablet (768px - 1199px)
 * - Mobile (0px - 767px)
 */

const routes = [
  '/',
  '/portfolio',
  '/research',
  '/plans',
  '/markets',
  '/screener',
  '/watchlist',
  '/alerts',
  '/settings',
];

test.describe('Viewport Matrix', () => {
  routes.forEach((route) => {
    test.describe(`Route: ${route}`, () => {
      test('Desktop viewport (1200px)', async ({ page }) => {
        await page.setViewportSize({ width: 1200, height: 800 });
        await page.goto(route);
        
        // Check for horizontal overflow
        const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
        const viewportWidth = await page.evaluate(() => window.innerWidth);
        expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1); // Allow 1px tolerance
        
        // Check that main content is visible
        await expect(page.locator('main')).toBeVisible();
      });

      test('Tablet viewport (768px)', async ({ page }) => {
        await page.setViewportSize({ width: 768, height: 1024 });
        await page.goto(route);
        
        // Check for horizontal overflow
        const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
        const viewportWidth = await page.evaluate(() => window.innerWidth);
        expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1);
        
        // Check that main content is visible
        await expect(page.locator('main')).toBeVisible();
      });

      test('Mobile viewport (375px)', async ({ page }) => {
        await page.setViewportSize({ width: 375, height: 667 });
        await page.goto(route);
        
        // Check for horizontal overflow
        const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
        const viewportWidth = await page.evaluate(() => window.innerWidth);
        expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1);
        
        // Check that main content is visible
        await expect(page.locator('main')).toBeVisible();
      });
    });
  });
});