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

// Accessibility pass (feat/accessibility-pass) — non-kiosk public-web a11y.
// Each block maps to a task in
// docs/superpowers/plans/2026-06-30-accessibility-and-about-page.md.

test.describe("Task 1 — Output panel layout", () => {
  test("language picker sits below the Audio control", async ({ page }) => {
    await page.goto("/");
    const audio = page.locator("#audio");
    const lang = page.locator("#lang-select");
    await expect(audio).toBeVisible();
    await expect(lang).toBeVisible();
    const aBox = await audio.boundingBox();
    const lBox = await lang.boundingBox();
    expect(lBox!.y).toBeGreaterThan(aBox!.y); // lang renders lower than audio
  });

  test("globe icon is inline-left of the language select (same row)", async ({ page }) => {
    await page.goto("/");
    const pick = page.locator(".lang-pick");
    const select = page.locator("#lang-select");
    const pBox = await pick.boundingBox();
    const sBox = await select.boundingBox();
    expect(sBox!.x).toBeGreaterThan(pBox!.x); // select right of the label's left edge
    expect(pBox!.height).toBeLessThan(40);    // one row, not stacked
  });
});

test.describe("Task 4 — Photosensitivity warning gate", () => {
  test("motion warning gate shows once, then is remembered", async ({ page }) => {
    await page.goto("/");
    const gate = page.locator("#motion-warning");
    await expect(gate).toBeVisible({ timeout: 30000 }); // shown after media preload + splash fade
    await page.locator("#motion-warning-continue").click();
    await expect(gate).toBeHidden();
    // Reload in the SAME context: dismissal persisted, gate stays hidden.
    await page.reload();
    await expect(page.locator("#motion-warning")).toBeHidden();
    await expect(page.locator("#run-sim")).toBeVisible();
  });
});
