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

test("media catalog keeps image provenance and loaded assets healthy", async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 900 });
  await page.goto("/media");
  await page.waitForLoadState("networkidle");

  const state = await page.evaluate(() => ({
    images: Array.from(document.images).map(image => ({
      alt: image.alt,
      complete: image.complete,
      naturalWidth: image.naturalWidth,
    })),
    width: document.documentElement.clientWidth,
    scrollWidth: document.documentElement.scrollWidth,
  }));

  expect(state.images.length).toBeGreaterThan(0);
  expect(state.images.every(image => image.alt.trim().length > 0)).toBe(true);
  expect(state.images.filter(image => image.complete && image.naturalWidth === 0)).toEqual([]);
  expect(state.scrollWidth).toBeLessThanOrEqual(state.width);
});

for (const theme of ["light", "dark"] as const) {
  test(`media catalog respects ${theme} theme on a narrow viewport`, async ({ page, context }) => {
    await context.addCookies([{ name: "rf4-theme", value: theme, url: "http://127.0.0.1:4321" }]);
    await page.setViewportSize({ width: 320, height: 800 });
    await page.goto("/media");

    const state = await page.evaluate(() => ({
      theme: document.documentElement.dataset.theme,
      width: document.documentElement.clientWidth,
      scrollWidth: document.documentElement.scrollWidth,
    }));
    expect(state.theme).toBe(theme);
    expect(state.scrollWidth).toBeLessThanOrEqual(state.width);
  });
}

for (const type of ["waterbody", "tackle", "reference"]) {
  test(`media ${type} section has a stable page state`, async ({ page }) => {
    await page.goto(`/media?type=${type}`);
    await expect(page.getByRole("heading", { name: "Медиатека" })).toBeVisible();
    await expect(page.locator("main")).toBeVisible();
  });
}