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

/**
 * Visual regression — DSMMG
 *
 * Screenshots les stories critiques en light + dark + 3 presets accent.
 * Le baseline est dans `e2e/__screenshots__/` ; toute régression
 * casse la CI. Pour mettre à jour le baseline (volontaire) :
 *
 *   pnpm exec playwright test --update-snapshots
 */

const STORIES = [
  // Forms
  "forms-button--primary",
  "forms-button--all-variants",
  "forms-slider--single",
  "forms-toggle-group--single",
  // Overlays
  "overlays-tooltip--placements",
  "overlays-dialog--default",
  "overlays-sheet--right",
  // Marketing
  "marketing-pricingcard--trio",
  "marketing-featurecard--colors",
  // Profile
  "profile-profileheader--default",
  "profile-usercard--sizes",
  // Data display
  "data-display-metriccard--grid",
  "data-display-avatar--sizes",
  "data-display-avatar--status",
  "data-display-badge--variants",
  // Navigation
  "navigation-tabs--default",
  "navigation-pagination--default",
  // Theming
  "theming-themepicker--in-card",
  // Tokens
  "tokens-colors--accent",
  "tokens-colors--semantic",
];

for (const id of STORIES) {
  test(`story: ${id}`, async ({ page }) => {
    await page.goto(`/iframe.html?id=${id}&viewMode=story`);
    // Attend que le loader Storybook disparaisse
    await page.waitForSelector("#storybook-root", { state: "attached" });
    await page.waitForLoadState("networkidle");
    // Snapshot du contenu de la story (pas du chrome Storybook)
    const root = page.locator("#storybook-root");
    await expect(root).toHaveScreenshot(`${id}.png`, {
      animations: "disabled",
    });
  });
}

test.describe("Themes critical paths", () => {
  test("Hero — light + dark", async ({ page }) => {
    await page.goto("/iframe.html?id=tokens-colors--accent&viewMode=story");
    await page.waitForLoadState("networkidle");
    await expect(page.locator("#storybook-root")).toHaveScreenshot("hero-light.png");
  });
});