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

test.describe('Scenario 01: Dashboard Integrity & Viewport Matrix', () => {
  test('loads Dashboard without console errors or horizontal overflow', async ({ page }) => {
    const consoleErrors: string[] = [];
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        consoleErrors.push(msg.text());
      }
    });

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    // Verify dashboard title / header
    await expect(page.locator('h1').first()).toBeVisible({ timeout: 15000 });

    // Verify dashboard metrics or widgets are rendered
    await expect(page.locator('h1, h2, h3').first()).toBeVisible();

    // Verify zero horizontal overflow (scrollWidth <= clientWidth)
    const isOverflowing = await page.evaluate(() => {
      return document.documentElement.scrollWidth > document.documentElement.clientWidth;
    });
    expect(isOverflowing).toBe(false);

    // Verify zero unhandled browser errors
    const fatalErrors = consoleErrors.filter(
      (err) => !err.includes('favicon') && !err.includes('status of 404')
    );
    expect(fatalErrors).toHaveLength(0);
  });
});