import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";

const TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
const severity = (violations: Awaited<ReturnType<AxeBuilder["analyze"]>>["violations"]) =>
  violations.filter((violation) => violation.impact === "critical" || violation.impact === "serious").map((violation) => violation.id);

test.use({ viewport: { width: 1440, height: 900 } });

test("PBR tutorial landing and overlay are keyboard and screen-reader accessible", async ({ page }) => {
  test.setTimeout(180_000);
  await page.goto("/?ui=web&tutorial=pbr");
  const landing = page.locator('main[data-course="pbr"]');
  await expect(landing).toBeVisible({ timeout: 60_000 });
  await expect(landing.getByRole("heading", { level: 1 })).toContainText("PBR");
  expect(severity((await new AxeBuilder({ page }).withTags(TAGS).analyze()).violations)).toEqual([]);

  await page.getByRole("button", { name: /开始学习|继续学习/ }).click();
  const overlay = page.locator('.parts-tutorial-overlay[data-course="pbr"]');
  await expect(overlay).toBeVisible({ timeout: 120_000 });
  await expect(overlay).toHaveAttribute("data-tutorial-step", "intro");
  await expect(page.getByRole("button", { name: /^下一步/ })).toBeEnabled({ timeout: 180_000 });
  await expect(page.getByRole("progressbar", { name: "教程完成进度" })).toBeVisible();

  await page.getByRole("button", { name: /^下一步/ }).click();
  await expect(overlay).toHaveAttribute("data-tutorial-step", "workspace-shading");
  await expect(overlay.locator(".tutorial-checks")).toHaveAttribute("aria-live", "polite");
  expect(severity((await new AxeBuilder({ page }).include(".parts-tutorial-overlay").withTags(TAGS).analyze()).violations)).toEqual([]);

  await page.getByRole("button", { name: "查看课程目录" }).click();
  await expect(page.getByRole("navigation", { name: "课程目录" })).toBeVisible();
});