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

/**
 * Visual Regression Tests — Playwright built-in toHaveScreenshot().
 *
 * First run creates baseline screenshots in e2e/screenshots/baselines/.
 * Subsequent runs diff against baselines.
 * Uses maxDiffPixels: 200 for minor rendering differences (fonts, antialiasing).
 *
 * All screenshots taken in dark mode at 1280x720 viewport.
 */

const BASE = process.env.BASE_URL || "http://localhost:3000"

test.describe("Visual Regression — Admin Pages", () => {
  test.use({
    viewport: { width: 1280, height: 720 },
    colorScheme: "dark",
  })

  const pages = [
    { name: "dashboard", path: "/dashboard" },
    { name: "members", path: "/members" },
    { name: "distributions", path: "/distributions" },
    { name: "stock", path: "/stock" },
    { name: "reports", path: "/reports" },
    { name: "info-board", path: "/info-board" },
    { name: "calendar", path: "/calendar" },
    { name: "forum", path: "/forum" },
  ]

  for (const { name, path } of pages) {
    test(`${name} matches baseline`, async ({ page }) => {
      await page.goto(`${BASE}${path}`)
      await page.waitForLoadState("domcontentloaded")
      // Wait for animations and lazy content to settle
      await page.waitForTimeout(3000)

      await expect(page).toHaveScreenshot(`admin-${name}-dark.png`, {
        maxDiffPixels: 200,
        fullPage: false,
      })
    })
  }
})

test.describe("Visual Regression — Auth Pages", () => {
  test.use({
    viewport: { width: 1280, height: 720 },
    colorScheme: "dark",
  })

  test("login page matches baseline", async ({ page }) => {
    await page.goto(`${BASE}/login`)
    await page.waitForLoadState("domcontentloaded")
    await page.waitForTimeout(2000)

    await expect(page).toHaveScreenshot("auth-login-dark.png", {
      maxDiffPixels: 200,
      fullPage: false,
    })
  })
})

test.describe("Visual Regression — Portal Pages", () => {
  test.use({
    viewport: { width: 1280, height: 720 },
    colorScheme: "dark",
  })

  const portalPages = [
    { name: "portal-dashboard", path: "/portal" },
    { name: "portal-history", path: "/portal/history" },
    { name: "portal-profile", path: "/portal/profile" },
  ]

  for (const { name, path } of portalPages) {
    test(`${name} matches baseline`, async ({ page }) => {
      await page.goto(`${BASE}${path}`)
      await page.waitForLoadState("domcontentloaded")
      await page.waitForTimeout(2000)

      await expect(page).toHaveScreenshot(`${name}-dark.png`, {
        maxDiffPixels: 200,
        fullPage: false,
      })
    })
  }
})