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

test("mobile header clears the simulated iPhone safe area", async ({ page }, testInfo) => {
  test.skip(!["chromium-mobile", "webkit-mobile"].includes(testInfo.project.name), "Mobile browser coverage only.");

  await page.goto("/login", { waitUntil: "domcontentloaded" });

  const header = page.locator("nav.mobile-header-section");
  const spacer = page.locator(".navbar-spacer");
  await expect(header).toBeVisible();

  await page.evaluate(() => {
    document.documentElement.style.setProperty("--pleno-mobile-safe-top", "44px");
  });

  const insetLayout = await header.evaluate((element) => {
    const headerBox = element.getBoundingClientRect();
    const spacer = document.querySelector(".navbar-spacer");
    const spacerBox = spacer?.getBoundingClientRect();
    return {
      headerHeight: headerBox.height,
      headerPaddingTop: getComputedStyle(element).paddingTop,
      spacerHeight: spacerBox?.height ?? 0,
    };
  });

  expect(insetLayout.headerHeight).toBe(124);
  expect(insetLayout.headerPaddingTop).toBe("44px");
  expect(insetLayout.spacerHeight).toBe(124);

  await page.evaluate(() => {
    document.documentElement.style.setProperty("--pleno-mobile-safe-top", "0px");
  });

  await expect.poll(() => header.evaluate((element) => element.getBoundingClientRect().height)).toBe(80);
  await expect.poll(() => spacer.evaluate((element) => element.getBoundingClientRect().height)).toBe(80);
});