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

async function resetDemoData(request: APIRequestContext) {
  await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } });
  await request.post("/api/v1/demo/reset");
}

// Cross-checks the responsive shell across the exact breakpoint matrix from the polish
// brief (1440x1000, 1280x800, 1024x768, 768x1024, 430x932, 390x844, 360x800) in all three
// supported languages -- both that nothing overflows horizontally and that the localized
// heading text still renders (rather than being silently truncated away).
const BREAKPOINTS: { width: number; height: number }[] = [
  { width: 1440, height: 1000 },
  { width: 1280, height: 800 },
  { width: 1024, height: 768 },
  { width: 768, height: 1024 },
  { width: 430, height: 932 },
  { width: 390, height: 844 },
  { width: 360, height: 800 },
];

const LANGUAGES: { code: string; attentionTitle: string }[] = [
  { code: "nl-BE", attentionTitle: "Aandachtspunten" },
  { code: "en-GB", attentionTitle: "Attention queue" },
  { code: "fr-BE", attentionTitle: "File d'attention" },
];

test.beforeEach(async ({ request }) => {
  await resetDemoData(request);
});

for (const language of LANGUAGES) {
  test.describe(`${language.code}`, () => {
    for (const bp of BREAKPOINTS) {
      test(`no horizontal overflow at ${bp.width}x${bp.height}`, async ({ page }) => {
        await page.addInitScript(
          (lang) => localStorage.setItem("fleetops.language", lang),
          language.code,
        );
        await page.setViewportSize({ width: bp.width, height: bp.height });
        await page.goto("/login");
        await page.getByRole("button", { name: /begeleide demo|guided demo|démo guidée/i }).click();
        await expect(page).toHaveURL(/\/dashboard/);

        await expect(page.getByRole("heading", { name: language.attentionTitle })).toBeVisible();

        const dimensions = await page.evaluate(() => ({
          scroll: document.documentElement.scrollWidth,
          client: document.documentElement.clientWidth,
        }));
        expect(dimensions.scroll, `${language.code} @ ${bp.width}x${bp.height}`).toBeLessThanOrEqual(
          dimensions.client + 1,
        );
      });
    }
  });
}