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

test("operational lists use bounded server pages and retain filter state in the URL", async ({ page, request }) => {
  await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } });

  const vehicles = await request.get("/api/v1/vehicles?page=1&page_size=25");
  expect(vehicles.ok()).toBeTruthy();
  const vehiclePage = await vehicles.json();
  expect(vehiclePage.items).toHaveLength(25);
  expect(vehiclePage.total).toBeGreaterThanOrEqual(25);

  const audit = await request.get("/api/v1/audit?page=1&page_size=25");
  expect(audit.ok()).toBeTruthy();
  const auditPage = await audit.json();
  expect(auditPage.items.length).toBeLessThanOrEqual(25);

  await page.goto("/vehicles?status=maintenance&page=1");
  await expect(page.getByRole("heading", { name: "Wagenpark" })).toBeVisible();
  await expect(page).toHaveURL(/status=maintenance/);
});

test("record status remains visible and responsive lists do not overflow on mobile", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto("/login");
  await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
  await page.goto("/bookings/BK-DEMO-RETURN");

  await expect(page.getByRole("heading", { name: "BK-DEMO-RETURN" })).toBeVisible();
  await expect(page.locator(".page-actions .badge")).toBeVisible();
  await page.goto("/vehicles");
  const dimensions = await page.evaluate(() => ({ scroll: document.documentElement.scrollWidth, client: document.documentElement.clientWidth }));
  expect(dimensions.scroll).toBeLessThanOrEqual(dimensions.client + 1);
});