/**
 * E2E tests for the Configurations modal on mobile (BUG-071).
 *
 * Runs only under the `chromium-mobile` Playwright project (viewport ≤ 768px);
 * skipped on the desktop project that the CI job executes — same convention
 * as mobile-editor.spec.js.
 *
 * Covered:
 *  - the TOC hamburger (#config-hamburger) is visible and reveals #config-nav,
 *    which is hidden by default on mobile;
 *  - picking a TOC entry scrolls to the section, marks the link active and
 *    collapses the nav;
 *  - the modal content does not overflow horizontally at 393px.
 *
 * Run:
 *   npx playwright test tests/e2e/config-mobile.spec.js --project=chromium-mobile
 *   (ObsiGate listening on http://localhost:2029, auth disabled)
 */

import { test, expect } from '@playwright/test';

const MOBILE_MAX_WIDTH = 768;

async function boot(page) {
  await page.goto('/');
  await page.waitForSelector('#app:not(.hidden)', { timeout: 15000 });
  await expect(page.locator('#header-menu-btn')).toBeVisible({ timeout: 15000 });
}

async function openConfigModal(page) {
  await page.locator('#header-menu-btn').click();
  await page.locator('#config-open-btn').click();
  await expect(page.locator('#config-modal.active')).toBeVisible();
}

test.describe('Configurations modal on mobile (BUG-071)', () => {
  test('hamburger reveals the table of contents', async ({ page, viewport }) => {
    test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
    await boot(page);
    await openConfigModal(page);

    // TOC hidden by default on mobile, hamburger visible.
    await expect(page.locator('#config-hamburger')).toBeVisible();
    await expect(page.locator('#config-nav')).toBeHidden();

    await page.locator('#config-hamburger').click();
    await expect(page.locator('#config-nav')).toBeVisible();
  });

  test('picking a section scrolls to it and collapses the nav', async ({ page, viewport }) => {
    test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
    await boot(page);
    await openConfigModal(page);

    await page.locator('#config-hamburger').click();
    const link = page.locator('#config-nav a[href="#cfg-tokens"]');
    await expect(link).toBeVisible();
    await link.click();

    // Nav collapses on mobile after selection…
    await expect(page.locator('#config-nav')).toBeHidden();
    // …the link is marked active…
    await expect(link).toHaveClass(/active/);
    // …and the section scrolls into view inside the modal (smooth scroll:
    // poll for the settled position instead of racing the animation).
    await expect
      .poll(
        async () => {
          const box = await page.locator('#cfg-tokens').boundingBox();
          const modalBox = await page.locator('#config-modal').boundingBox();
          if (!box || !modalBox) return Number.POSITIVE_INFINITY;
          return box.y - (modalBox.y + modalBox.height);
        },
        { timeout: 8000 },
      )
      .toBeLessThanOrEqual(0);
  });

  test('no horizontal overflow at 393px', async ({ page, viewport }) => {
    test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
    await boot(page);
    await openConfigModal(page);

    for (const section of ['#cfg-ai', '#cfg-tokens', '#cfg-webhooks', '#cfg-partages-publics']) {
      await page.locator('#config-hamburger').click();
      await page.locator(`#config-nav a[href="${section}"]`).click();
    }
    const overflow = await page.evaluate(() => {
      const scroller = document.getElementById('config-scroll');
      return scroller.scrollWidth - scroller.clientWidth;
    });
    expect(overflow).toBeLessThanOrEqual(1);
  });
});