import { expect, test } from '@playwright/test';
import { gotoExpecting } from './support/portal';

/**
 * @intent História 02 — teclado e foco (`histories/02-teclado-e-foco.md`).
 */

test.describe('História 02 — Teclado e foco', () => {
  test('o primeiro Tab alcança o skip link, com foco visível', async ({ page }) => {
    await gotoExpecting(page, '/', 200);
    await page.keyboard.press('Tab');

    const focused = page.locator(':focus');
    await expect(focused).toHaveAccessibleName('Ir para o conteúdo');

    const outlineWidth = await focused.evaluate((element) =>
      Number.parseFloat(getComputedStyle(element).outlineWidth),
    );

    expect(
      outlineWidth,
      'foco precisa ser visível com a espessura da casa (0.1875rem = 3px, WCAG 2.4.7)',
    ).toBeGreaterThanOrEqual(3);
  });

  test('o skip link move o foco para o conteúdo principal', async ({ page }) => {
    await gotoExpecting(page, '/', 200);
    await page.keyboard.press('Tab');
    await page.keyboard.press('Enter');

    await expect(page.locator('main#main-content')).toBeFocused();
  });

  test('a barra de acessibilidade é operável por teclado', async ({ page }) => {
    await gotoExpecting(page, '/', 200);

    const contrast = page.getByRole('button', { name: 'Contraste' });
    await contrast.focus();
    await expect(contrast).toBeFocused();
    await expect(contrast).toHaveAttribute('aria-pressed', 'false');

    await page.keyboard.press('Enter');
    await expect(contrast).toHaveAttribute('aria-pressed', 'true');

    await page.keyboard.press('Enter');
    await expect(contrast).toHaveAttribute('aria-pressed', 'false');
  });

  test('não há armadilha de foco: 15 Tabs sempre avançam', async ({ page }) => {
    await gotoExpecting(page, '/', 200);

    const visited: string[] = [];

    for (let index = 0; index < 15; index += 1) {
      await page.keyboard.press('Tab');
      visited.push(
        await page.evaluate(() => {
          const active = document.activeElement;

          if (active === null || active === document.body) {
            return 'BODY';
          }

          return `${active.tagName}:${active.getAttribute('aria-label') ?? active.textContent?.trim().slice(0, 20) ?? ''}`;
        }),
      );
    }

    expect(visited, 'o foco ficou preso no body').not.toContain('BODY');
    expect(new Set(visited).size, 'o foco precisa avançar').toBeGreaterThanOrEqual(8);
  });

  test('a busca não aparece enquanto o serviço Search não existe', async ({ page }) => {
    await gotoExpecting(page, '/', 200);

    // ADR-002/backlog: um formulário que envia para `/busca` (rota inexistente) seria 404.
    await expect(page.getByRole('searchbox')).toHaveCount(0);
    await expect(page.getByRole('link', { name: /Ir para a busca/ })).toHaveCount(0);
  });
});