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

// Visual-regression baseline for the whynot-control UI kit.
// Snapshots live next to this file under __screenshots__/.
//
// To update intentionally:  pnpm test:visual:update

test.describe("whynot-control UI kit", () => {
  test("prototypes index", async ({ page }) => {
    await page.goto("/index.html");
    // Wait for Babel + Lucide to hydrate
    await page.waitForFunction(() => !!document.querySelector("aside"));
    await page.waitForTimeout(500);
    await expect(page).toHaveScreenshot("01-prototypes.png", { fullPage: true });
  });

  test("inbox", async ({ page }) => {
    await page.goto("/index.html");
    await page.waitForFunction(() => !!document.querySelector("aside a"));
    await page.click("aside a:has-text('Inbox')");
    await page.waitForTimeout(400);
    await expect(page).toHaveScreenshot("02-inbox.png", { fullPage: true });
  });

  test("signals", async ({ page }) => {
    await page.goto("/index.html");
    await page.waitForFunction(() => !!document.querySelector("aside a"));
    await page.click("aside a:has-text('Signals')");
    await page.waitForTimeout(400);
    await expect(page).toHaveScreenshot("03-signals.png", { fullPage: true });
  });

  test("prototype detail", async ({ page }) => {
    await page.goto("/index.html");
    await page.waitForFunction(() => !!document.querySelector("article"));
    await page.click("article:nth-of-type(1)");
    await page.waitForTimeout(400);
    await expect(page).toHaveScreenshot("04-prototype-detail.png", { fullPage: true });
  });

  test("control doc — INTENT.md", async ({ page }) => {
    await page.goto("/index.html");
    await page.waitForFunction(() => !!document.querySelector("aside a"));
    await page.click("aside a:has-text('INTENT.md')");
    await page.waitForTimeout(400);
    await expect(page).toHaveScreenshot("05-doc-intent.png", { fullPage: true });
  });
});