import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

const css = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
const layout = readFileSync(new URL("../src/app/layout.tsx", import.meta.url), "utf8");

test("mobile login can scroll and keeps the form reachable on a short screen", () => {
  const mobileAuth = css.indexOf(".auth-page { height: 100dvh; overflow-x: hidden; overflow-y: auto;");
  assert.ok(mobileAuth >= 0, "the login page must be the mobile scroll container");
  assert.match(css.slice(mobileAuth, mobileAuth + 900), /\.auth-shell \{ min-height: 100%; overflow: visible;/);
  assert.match(css, /@media \(max-width: 767px\) and \(max-height: 640px\) \{\s*\.auth-story \{ display: none; \}/);
  assert.match(layout, /interactiveWidget:\s*"resizes-content"/);
});

test("mobile onboarding does not clip the birth place levels or session history", () => {
  assert.match(css, /\.session-nav \{ overflow: visible; \}/);
  assert.doesNotMatch(css, /\.session-nav \{ overflow: hidden; \}/);
  // The birth place levels portal their popup out of the onboarding card, so an
  // ancestor can no longer clip it and only the viewport height still constrains it.
  const select = readFileSync(new URL("../src/components/ui/select.tsx", import.meta.url), "utf8");
  assert.match(select, /<SelectPrimitive\.Portal>/);
  assert.match(css, /\.select-list \{ max-height: min\(288px, 48dvh\) !important; \}/);
});