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

const items = Array.from({ length: 100 }, (_, index) => ({
  id: `event-${String(index + 1).padStart(3, '0')}`,
  type: index % 2 === 0 ? 'service.down' : 'container.restart',
  severity: index % 10 === 0 ? 'critical' : index % 3 === 0 ? 'warning' : 'info',
  entityId: `entity-${String(index % 5).padStart(2, '0')}`,
  sourceId: 'source-unraid',
  occurredAt: new Date(Date.UTC(2026, 7, 21, 12, 0, 0) - index * 60_000).toISOString(),
  receivedAt: new Date(Date.UTC(2026, 7, 21, 12, 0, 5) - index * 60_000).toISOString(),
  summary: `Gebeurtenis ${String(index + 1).padStart(3, '0')}`,
}));

test('100 events blijven compact, filterbaar en toetsenbordnavigeerbaar', async ({ page }, testInfo) => {
  test.skip(testInfo.project.name === 'wallboard-chromium', 'De eventwerkruimte gebruikt de desktop-, tablet- en mobiele shell.');
  let eventRequests = 0;
  await page.route('**/api/v1/**', async (route) => {
    const pathname = new URL(route.request().url()).pathname;
    if (pathname === '/api/v1/events') {
      eventRequests += 1;
      await route.fulfill({ contentType: 'application/json', body: JSON.stringify({ items }) });
      return;
    }
    if (pathname === '/api/v1/system/status') {
      await route.fulfill({ contentType: 'application/json', body: JSON.stringify({ version: '1', generatedAt: new Date().toISOString(), overallState: 'healthy', components: [], backup: { state: 'disabled', reason: 'not_configured' }, sourceLag: [] }) });
      return;
    }
    await route.fulfill({ status: 404, contentType: 'application/problem+json', body: '{}' });
  });

  await page.goto('/events');
  await expect(page.getByRole('heading', { name: 'Gebeurtenissen' })).toBeVisible();
  const rows = page.locator('.event-list > li');
  await expect(rows).toHaveCount(20);
  const baselineRequests = eventRequests;
  expect(baselineRequests).toBeLessThanOrEqual(2);
  const criticalSummary = page.getByRole('button', { name: /Kritieke gebeurtenissen/i });
  await expect(criticalSummary).toBeVisible();
  await expect(criticalSummary).toContainText('10');
  expect(await page.evaluate(() => document.documentElement.scrollHeight / window.innerHeight)).toBeLessThan(10);

  await page.getByLabel('Ernst').selectOption('critical');
  await expect(rows).toHaveCount(10);
  await page.getByLabel('Soort').selectOption('service.down');
  await expect(rows).toHaveCount(10);
  await page.getByLabel('Onderdeel').selectOption('entity-00');
  await expect(rows).toHaveCount(10);
  await page.getByLabel('Zoeken').fill('Gebeurtenis 091');
  await expect(rows).toHaveCount(1);
  expect(eventRequests).toBe(baselineRequests);

  await page.getByRole('button', { name: 'Filters wissen' }).click();
  const next = page.getByRole('button', { name: 'Volgende pagina' });
  await next.focus();
  await page.keyboard.press('Enter');
  await expect(page.locator('.list-pager [role="status"]')).toBeFocused();
  await expect(page).toHaveURL(/page=2/);
  await expect(rows).toHaveCount(20);
  await expect(rows.first()).toContainText('event-021');
  expect(eventRequests).toBe(baselineRequests);
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth + 1)).toBe(true);

  const axe = await new AxeBuilder({ page }).analyze();
  expect(axe.violations.filter((item) => item.impact === 'critical' || item.impact === 'serious')).toEqual([]);
  if (testInfo.project.name === 'mobile-chromium') {
    const pagerHeights = await page.locator('.list-pager .button').evaluateAll((buttons) => buttons.map((button) => button.getBoundingClientRect().height));
    expect(pagerHeights.every((height) => height >= 44)).toBe(true);
  }
  if (process.env.PULSE_CAPTURE_VISUALS && (testInfo.project.name === 'desktop-chromium' || testInfo.project.name === 'mobile-chromium')) {
    await page.screenshot({ path: path.resolve('../../artifacts/evidence/M14-03', `events-${testInfo.project.name}.png`), fullPage: true });
  }
});