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: "inputs", label: "Inputs" },
  { 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: "lists", label: "Lists" },
  { name: "description-list", label: "Description List" },
  { name: "page-header", label: "Page Header" },
  { name: "backgrounds", label: "Backgrounds" },
  { name: "logos", label: "Logos" },
  { name: "modals", label: "Modals" },
  { name: "popover", label: "Popover" },
  { name: "dropdowns", label: "Dropdowns" },
  { name: "tooltips", label: "Tooltips" },
  { name: "overlays", label: "Overlays" },
  { name: "confirm-dialog", label: "Confirm Dialog" },
  { name: "input-group", label: "Input Group" },
  { name: "data-patterns", label: "Data patterns" },
  { name: "progress", label: "Progress" },
  { name: "timeline", label: "Timeline" },
  { name: "drawer", label: "Drawers" },
  { name: "toasts", label: "Toasts" },
  { name: "breadcrumbs", label: "Breadcrumbs" },
  { name: "accordion", label: "Accordion" },
  { name: "tabs", label: "Tabs" },
  { name: "choices", label: "Choice controls" },
  { name: "select-textarea", label: "Select & Textarea" },
  { name: "divider", label: "Divider" },
  { name: "stepper", label: "Stepper" },
  { name: "pagination", label: "Pagination" },
  { name: "loader", label: "Loader" },
  { name: "chips", label: "Chips" },
  { name: "avatar", label: "Avatar" },
  { name: "skeleton", label: "Skeleton" },
  { name: "navigation-shell", label: "Navigation Shell" }
];

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);
      const box = await element.evaluate(el => {
        const rect = el.getBoundingClientRect();
        return {
          x: rect.x + window.scrollX,
          y: rect.y + window.scrollY,
          width: rect.width,
          height: rect.height
        };
      });
      await page.screenshot({
        path: path.join(SCREENSHOT_DIR, `section-${section.name}.png`),
        clip: box,
        fullPage: true
      });
    }
  });
});