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

/**
 * História 25 — Editor da home no painel (P5.S2.1, emenda ADR-016): a lista de seções é o
 * documento, a edição vive num `<dialog>` nativo e a gravação é server-side por schema.
 *
 * Pré-condições: `make up` + `php artisan db:seed` (o perfil demo recebe as permissões declaradas,
 * incluindo `home.ver`/`home.editar`) e assets compilados. O spec cria o próprio rascunho e é
 * idempotente: rodar de novo substitui o mesmo documento (`variant = draft`).
 */

test.describe('CMS — editor da home', () => {
  test('adiciona uma seção nova, edita no diálogo e salva o rascunho', async ({ page }) => {
    await signIn(page);

    await page.goto('/home');
    await expect(page.getByRole('heading', { level: 1, name: 'Editor da home' })).toBeVisible();
    await expectNoA11yViolations(page);

    // Adicionar é um GET: escolhe o tipo e a tela volta com a seção **nova** (nada persistido).
    await page.getByLabel('Tipo de seção').first().selectOption('text');
    await page.getByRole('button', { name: 'Adicionar seção' }).click();

    const pending = page.getByRole('region', { name: 'Nova seção (ainda não salva)' });
    await expect(pending).toBeVisible();

    // O diálogo nativo é o caminho de edição (com JS); o gatilho abre e o foco entra no campo.
    await pending.getByRole('button', { name: 'Editar seção' }).click();

    const dialog = page.getByRole('dialog');
    await expect(dialog).toBeVisible();

    // Campos traduzíveis abrem um grupo com um controle por locale (P5.S2.2).
    await dialog
      .getByRole('group', { name: 'Título' })
      .getByLabel('Português (Brasil)')
      .fill('Rascunho e2e da home');
    await dialog
      .getByRole('group', { name: 'Conteúdo' })
      .getByLabel('Português (Brasil)')
      .fill('{"type":"doc","content":[{"type":"paragraph"}]}');

    const closeDialog = dialog.getByRole('button', { name: 'Concluir edição' });
    await closeDialog.scrollIntoViewIfNeeded();
    await closeDialog.click();
    await expect(dialog).not.toBeVisible();

    await page.getByRole('button', { name: 'Salvar rascunho' }).click();

    await expect(page.getByText('Rascunho salvo.')).toBeVisible();

    // A prévia é do documento **salvo** (estrutura) — não há rota pública de rascunho.
    const preview = page.getByRole('region', { name: 'Prévia do rascunho salvo' });
    await expect(preview).toContainText('Rascunho e2e da home');
    await expectNoA11yViolations(page);
  });

  test.describe('sem JavaScript', () => {
    test.use({ javaScriptEnabled: false });

    test('os campos da seção nova continuam visíveis e editáveis', async ({ page }) => {
      await signIn(page);

      // Sem JS o `<dialog>` não abre: o CSS (`@media (scripting: none)`) mantém os campos no
      // fluxo, dentro do formulário, e o botão de salvar continua valendo (progressive enhancement).
      await page.goto('/home?novo=text');

      const pending = page.getByRole('region', { name: 'Nova seção (ainda não salva)' });
      await expect(pending).toBeVisible();
      await expect(
        pending.getByRole('group', { name: 'Título' }).getByLabel('Português (Brasil)'),
      ).toBeVisible();
      await expect(
        pending.getByRole('group', { name: 'Conteúdo' }).getByLabel('Português (Brasil)'),
      ).toBeVisible();
      await expect(page.getByRole('button', { name: 'Salvar rascunho' })).toBeVisible();
    });
  });
});