const { test } = require("@playwright/test");
const fs = require("fs");
const path = require("path");

const SCREENSHOT_DIR = path.join(__dirname, "..", "screenshots");

// Sections that are worth reviewing manually after each visual pass.
const SECTIONS = [
  { name: "palette", label: "Palette" },
  { name: "buttons", label: "Buttons" },
  { name: "forms", label: "Forms" },
  { name: "alerts", label: "Alerts" },
  { name: "badges", label: "Badges" },
  { name: "cards", label: "Cards" },
  { name: "tables", label: "Tables" },
  { name: "file-upload", label: "File Upload" },
  { name: "advanced-select", label: "Advanced Select" },
  { name: "description-list", label: "Description List" },
  { name: "page-header", label: "Page Header" },
  { name: "backgrounds", label: "Backgrounds" }
];

test.describe("@screenshot", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/");
    await page.waitForTimeout(1500);
  });

  test("capture full demo page", async ({ page }) => {
    fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
    await page.screenshot({
      path: path.join(SCREENSHOT_DIR, "demo-full.png"),
      fullPage: true
    });
  });

  test("capture component section screenshots", async ({ page }) => {
    fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });

    for (const section of SECTIONS) {
      const locator = page.locator(".demo-section", { has: page.locator(`h2:has-text("${section.label}")`) });
      const count = await locator.count();
      if (count === 0) continue;
      const element = locator.first();
      await element.scrollIntoViewIfNeeded();
      await page.waitForTimeout(300);
      await element.screenshot({
        path: path.join(SCREENSHOT_DIR, `section-${section.name}.png`)
      });
    }
  });
});