/**
 * Visual regression tests using Playwright's toHaveScreenshot().
 *
 * These capture pixel-level snapshots and compare against baselines.
 * First run creates the baseline images in tests/e2e/visual.spec.ts-snapshots/.
 *
 * Update baselines: npx playwright test tests/e2e/visual.spec.ts --update-snapshots
 */

import { test, expect } from '@playwright/test';
import { LoginPage } from '../page-objects';

// Use a clean context for login page screenshots
test.use({ storageState: { cookies: [], origins: [] } });

test.describe('Visual Regression', () => {
  test('login page should match baseline', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.waitForReady();

    // Wait for any animations to settle
    await page.waitForTimeout(500);

    await expect(page).toHaveScreenshot('login-page.png', {
      fullPage: true,
      // Mask dynamic content that changes between runs
      mask: [
        // Mask any CSRF tokens or dynamic ids in the DOM
        page.locator('input[type="hidden"]'),
      ],
    });
  });
});

test.describe('Authenticated Visual Regression', () => {
  test('dashboard should match baseline', async ({ page }) => {
    await page.goto('/dashboard');
    await page.waitForLoadState('networkidle');

    // Wait for charts/data to render
    await page.waitForTimeout(1_000);

    await expect(page).toHaveScreenshot('dashboard.png', {
      fullPage: true,
      // Mask dates and dynamic numbers that change between runs
      mask: [
        page.locator('time'),
        page.locator('[data-testid="current-date"]'),
      ],
    });
  });
});