import { expect, test, type Page } from '@playwright/test';
import { expectNoA11yViolations } from './support/axe';
import { signIn } from './support/cms';

/**
 * Largura do **layout viewport** (`clientWidth`) é a referência de overflow — nunca
 * `window.innerWidth`: quando o conteúdo estoura, o Chromium móvel amplia o layout viewport e
 * `innerWidth` "cresce junto", mascarando o defeito (medido: 575×412 antes da correção do
 * cabeçalho, achado P5.S6.1).
 */
async function expectNoHorizontalOverflow(page: Page, path: string): Promise<void> {
  const metrics = await page.evaluate(() => ({
    client: document.documentElement.clientWidth,
    scroll: document.documentElement.scrollWidth,
  }));

  expect(
    metrics.scroll,
    `${path} com overflow horizontal (${metrics.scroll} > ${metrics.client})`,
  ).toBeLessThanOrEqual(metrics.client + 1);
}

/**
 * História 16 — CMS em ponteiro grosso (Pixel 7). O painel não pode depender de hover nem de
 * alvos pequenos: off-canvas, alvos ≥ 24px (44px é o padrão da casa), **sem overflow horizontal**
 * (o cabeçalho quebra linha e tabela larga rola no próprio contêiner) e axe no viewport real.
 */
test.describe('CMS — mobile', () => {
  test('serve o painel sem overflow e com a navegação off-canvas acessível', async ({ page }) => {
    await signIn(page);

    await expect(page.locator('html')).toHaveAttribute('data-cms-sidebar', 'left');
    await expect(page.locator('main#cms-content')).toBeVisible();

    // As telas com mais controles/camadas: o cabeçalho (usuário/sair), a lista e o formulário
    // longo com o editor rico, e a superfície de layout com duas tabelas.
    for (const path of ['/', '/paginas', '/paginas/criar', '/layout']) {
      await page.goto(path);
      await expect(page.locator('main#cms-content')).toBeVisible();
      await expectNoHorizontalOverflow(page, path);
    }

    await page.goto('/');

    const toggle = page.locator('[data-cms-sidebar-toggle]');
    await expect(toggle).toBeVisible();
    await toggle.click();
    await expect(page.locator('#cms-sidebar')).toBeVisible();

    for (const link of await page.locator('.cms-sidebar__nav a').all()) {
      const box = await link.boundingBox();
      expect(box, 'link do menu sem caixa').not.toBeNull();
      const b = box as NonNullable<typeof box>;
      expect(b.height, 'alvo vertical < 24px').toBeGreaterThanOrEqual(24);
      expect(b.width, 'alvo horizontal < 24px').toBeGreaterThanOrEqual(24);
    }

    await expectNoA11yViolations(page);
  });
});