import { expect, type Locator, test } from "@playwright/test";
import { captureScreenshot, completeOnboarding, signup } from "./helpers";

async function fontSize(locator: Locator) {
  return locator.evaluate((element) => Number.parseFloat(getComputedStyle(element).fontSize));
}

test("phone widths read text at 16px and up while desktop keeps its sizes", async ({
  page,
}, testInfo) => {
  const stamp = Date.now();
  await signup(page, `mobile-font-${stamp}@rakazo.test`, "password12", "Font QA");
  await completeOnboarding(page);

  const composer = page.getByRole("combobox", { name: /^Message/ });
  await composer.fill("Please review `shared/PROJECT_CHECKPOINT_WRAPUP.md`.");
  await composer.press("Enter");
  const reply = page
    .getByTestId("transcript")
    .locator("[data-message-id]")
    .filter({ hasText: "done. i handled:" });
  await expect(reply).toBeVisible({ timeout: 30_000 });

  const smallText = page.locator(".text-ui-body-sm").first();
  const desktopSmall = await fontSize(smallText);
  expect(desktopSmall).toBe(14);

  await page.setViewportSize({ width: 390, height: 844 });
  await expect.poll(() => fontSize(smallText)).toBeCloseTo(16, 1);
  expect(await fontSize(composer)).toBeGreaterThanOrEqual(16);
  const userText = page.getByTestId("message-user-bubble").last();
  const replyText = reply.locator(".rk-chat-markdown p").first();
  expect(await fontSize(replyText)).toBe(await fontSize(userText));

  await page.emulateMedia({ colorScheme: "dark" });
  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
  await captureScreenshot(page, testInfo, "mobile-font-size-dark");
  await page.emulateMedia({ colorScheme: "light" });
  await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
  await captureScreenshot(page, testInfo, "mobile-font-size-light");

  await page.setViewportSize({ width: 1280, height: 720 });
  await expect.poll(() => fontSize(smallText)).toBe(desktopSmall);
});