import { expect, test } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('fan can complete the primary demo journey end-to-end', async ({ page }, testInfo) => {
  await page.goto('/');

  const displayName = `E2E ${testInfo.project.name} ${Date.now()}`;

  await page.getByLabel(/Display name/i).fill(displayName);
  await page.getByLabel(/Country or club identity/i).fill('Backer XI');
  await page.getByRole('button', { name: /Create passport/i }).click();

  await expect(page.getByRole('heading', { name: new RegExp(`Welcome, ${displayName}`) })).toBeVisible();

  await page.getByRole('button', { name: /^Collect England$/i }).click();
  await expect(page.getByRole('status')).toContainText(/England collected/i);

  await page.getByRole('button', { name: /^Collect USA$/i }).click();
  await page.getByRole('button', { name: /^Collect Iran$/i }).click();
  await page.getByRole('button', { name: /^Collect Wales$/i }).click();

  await expect(page.getByText(/Challenge complete: Complete every Group B team/i)).toBeVisible();

  await page.getByRole('button', { name: /^MetLife Stadium$/i }).click();
  await expect(page.getByRole('status')).toContainText(/Correct/i);

  await page.getByRole('button', { name: /Predict USA giant killing/i }).first().click();
  await expect(page.getByText(/Badge unlocked: Giant Killer/i)).toBeVisible();

  await page.getByLabel(/Memory title/i).fill('Opening week goosebumps');
  await page.getByLabel(/Memory note/i).fill('The passport finally feels alive with collections, trivia, and predictions all connected.');
  await page.getByRole('button', { name: /Add memory/i }).click();

  await expect(page.getByText(/Badge unlocked: Memory Keeper/i)).toBeVisible();
  await expect(page.getByText(/Opening week goosebumps/i)).toBeVisible();
  await expect(page.getByRole('table', { name: /Global demo leaderboard/i })).toBeVisible();
});

test('demo page has no critical or serious automated accessibility violations after onboarding', async ({ page }, testInfo) => {
  await page.goto('/');

  await page.getByLabel(/Display name/i).fill(`A11y ${testInfo.project.name} ${Date.now()}`);
  await page.getByRole('button', { name: /Create passport/i }).click();

  await expect(page.getByRole('heading', { name: /Welcome,/i })).toBeVisible();

  const scan = await new AxeBuilder({ page }).analyze();
  const severeViolations = scan.violations.filter(
    (violation) => violation.impact === 'critical' || violation.impact === 'serious'
  );

  expect(severeViolations).toEqual([]);
});