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

test.describe("Referenzen Page", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/referenzen");
  });

  test("should display page heading", async ({ page }) => {
    await expect(page).toHaveTitle(/Referenzen/);
  });

  test("should show 9 gallery images in grid", async ({ page }) => {
    const grid = page.locator('[data-testid="gallery-grid"]');
    await expect(grid).toBeVisible();
    const items = grid.locator('[data-testid^="gallery-item-"]');
    await expect(items).toHaveCount(9);
  });

  test("should have 4 category filter chips", async ({ page }) => {
    const chips = page.locator('[data-testid="filter-chips"]');
    await expect(chips).toBeVisible();
    await expect(chips).toContainText("Alle");
    await expect(chips).toContainText("Open-Air");
    await expect(chips).toContainText("Indoor");
    await expect(chips).toContainText("Rigging");
  });

  test("should filter images by category", async ({ page }) => {
    // Click Open-Air filter
    await page.locator('[data-testid="filter-open-air"]').click();
    const grid = page.locator('[data-testid="gallery-grid"]');
    const items = grid.locator('[data-testid^="gallery-item-"]');
    const count = await items.count();
    expect(count).toBeLessThan(9);
    expect(count).toBeGreaterThan(0);

    // Click Alle to reset
    await page.locator('[data-testid="filter-alle"]').click();
    await expect(items).toHaveCount(9);
  });

  test("should open lightbox on image click", async ({ page }) => {
    const firstItem = page.locator('[data-testid="gallery-item-1"]');
    await firstItem.click();
    const lightbox = page.locator('[data-testid="lightbox"]');
    await expect(lightbox).toBeVisible();
  });

  test("should close lightbox with close button", async ({ page }) => {
    await page.locator('[data-testid="gallery-item-1"]').click();
    const lightbox = page.locator('[data-testid="lightbox"]');
    await expect(lightbox).toBeVisible();
    await page.locator('[data-testid="lightbox-close"]').click();
    await expect(lightbox).not.toBeVisible();
  });

  test("should navigate to next image in lightbox", async ({ page }) => {
    await page.locator('[data-testid="gallery-item-1"]').click();
    const lightbox = page.locator('[data-testid="lightbox"]');
    await expect(lightbox).toBeVisible();
    const firstCaption = await lightbox.locator("p").textContent();
    await page.locator('[data-testid="lightbox-next"]').click();
    const secondCaption = await lightbox.locator("p").textContent();
    expect(firstCaption).not.toBe(secondCaption);
  });

  test("should navigate to prev image in lightbox", async ({ page }) => {
    await page.locator('[data-testid="gallery-item-1"]').click();
    const lightbox = page.locator('[data-testid="lightbox"]');
    await expect(lightbox).toBeVisible();
    await page.locator('[data-testid="lightbox-prev"]').click();
    await expect(lightbox).toBeVisible();
  });

  test("should be mobile-responsive at 375px width", async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await expect(page.locator('[data-testid="gallery-grid"]')).toBeVisible();
    await expect(page.locator('[data-testid="filter-chips"]')).toBeVisible();
  });
});