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

import { login, navigateTo } from '../smoke/helpers';

/**
 * Initiative 4 (e2e testing) — visual regression baseline for the new
 * Reports UI (Initiative 1, `docs/reports-content-spec.md`). Mirrors the
 * list/landing pattern in `snapshots.spec.ts` so the two specs share the
 * same project config (project=visual, matched by /visual/.*\.spec\.ts/).
 *
 * NOTE — NO baseline images are committed with this change. A human must run
 *
 *   pnpm exec playwright test --project=visual --update-snapshots
 *
 * once the Reports UI is visually settled to generate the PNGs under
 * tests/e2e/visual/reports.spec.ts-snapshots/. Until then these cases will
 * report "missing snapshot" on the first run (expected) — this is by design:
 * the task brief explicitly asked NOT to generate/commit baselines, only to
 * wire up the spec cases so the baselines can be captured later.
 *
 * The Reports landing (`/reports`) is a stable list/landing screen — it does
 * not depend on per-row fixture data, so it tolerates seed drift the same way
 * the other visual baselines do. The category sub-pages (sales / financial /
 * operational) are charts-heavy; they're included but a generous
 * maxDiffPixelRatio absorbs antialiasing differences across machines.
 */

const REPORT_PAGES = [
  { name: 'reports-landing', path: '/reports' },
  { name: 'reports-sales', path: '/reports/sales' },
  { name: 'reports-financial', path: '/reports/financial' },
  { name: 'reports-operational', path: '/reports/operational' },
] as const;

async function settle(page: Page) {
  // Quiet animations / timers / blinking carets so dynamic content doesn't
  // produce flaky pixel diffs (identical to snapshots.spec.ts).
  await page.addStyleTag({
    content: `
      *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        caret-color: transparent !important;
      }
    `,
  });
  await page.waitForLoadState('networkidle');
  // Let TanStack Query + chart libraries flush their first paint.
  await page.waitForTimeout(750);
}

test.describe('Visual regression — Reports UI', () => {
  for (const p of REPORT_PAGES) {
    test(`${p.name} matches baseline`, async ({ page }) => {
      await login(page, 'super_admin');
      await navigateTo(page, p.path);
      await settle(page);

      await expect(page).toHaveScreenshot(`${p.name}.png`, {
        fullPage: true,
        // Charts/SVG render with sub-pixel antialiasing variance across
        // machines — match the tolerance the existing visual baselines use.
        maxDiffPixelRatio: 0.02,
      });
    });
  }
});