// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
//
// SPDX-License-Identifier: GPL-2.0-or-later

import assert from "node:assert/strict";
import { chromium } from "playwright-core";
import { startBrowser, startWebFixture } from "./web-fixture.mjs";

// page.evaluate callbacks run in the browser, not in this Node process.
/* global document, getComputedStyle, window, location */

const fixture = await startWebFixture();
const { selectedRigs } = fixture;
const { browser, page, runtimeErrors } = await startBrowser(chromium);

try {
  await page.goto(`${fixture.origin}/`, { waitUntil: "domcontentloaded" });
  await page.waitForTimeout(500);
  assert.deepEqual(runtimeErrors, []);
  await page.locator("#content").waitFor({ state: "visible" });
  assert.equal(await page.locator("#auth-gate").isVisible(), false);
  assert.equal(await page.locator("#tab-main").isVisible(), true);
  await page.locator("summary", { hasText: "Audio controls" }).click();
  assert.equal(await page.locator("#rx-audio-btn").count(), 1);

  // Digital modes: the decoders are a list down the side, and the panel for the
  // selected one sits beside it. A horizontal strip put thirteen decoders in a
  // scroller and marked the open one with a single underline among them.
  await page.locator('.tab[data-tab="digital-modes"]').click();
  await page.locator("#tab-digital-modes").waitFor({ state: "visible" });
  await page.locator('.sub-tab[data-subtab="ft8"]').click();
  await page.waitForTimeout(250);
  const digital = await page.evaluate(() => {
    const bar = document.querySelector("#tab-digital-modes > .sub-tab-bar").getBoundingClientRect();
    const panel = document.getElementById("subtab-ft8").getBoundingClientRect();
    const shown = [...document.querySelectorAll("#tab-digital-modes > .sub-tab-panel")]
      .filter((element) => getComputedStyle(element).display !== "none")
      .map((element) => element.id);
    return {
      sidebarIsColumn: bar.height > bar.width,
      panelBesideSidebar: Math.round(panel.left) >= Math.round(bar.right),
      panelsShown: shown,
      decoders: document.querySelectorAll("#tab-digital-modes > .sub-tab-bar .sub-tab").length,
    };
  });
  assert.ok(digital.sidebarIsColumn, "the decoder list is not a sidebar");
  assert.ok(digital.panelBesideSidebar, "the decoder panel does not sit beside the sidebar");
  assert.deepEqual(digital.panelsShown, ["subtab-ft8"], `panels shown: ${JSON.stringify(digital.panelsShown)}`);
  assert.ok(digital.decoders >= 10, `only ${digital.decoders} decoders in the sidebar`);

  // Each decoder's list fills its panel. FT8, FT4, FT2 and WSPR size against
  // the panel with flex, so a panel sized to its own content collapsed them to
  // their 120px minimum with the rest of the page left empty; the marine lists
  // were sized by a viewport formula that stopped matching when the panel
  // changed shape.
  for (const [subtab, list] of [["ft8", "ft8-messages"], ["wspr", "wspr-messages"],
    ["ais", "ais-messages"], ["aprs", "aprs-packets"], ["hf-aprs", "hf-aprs-packets"]]) {
    await page.locator(`.sub-tab[data-subtab="${subtab}"]`).click();
    await page.waitForTimeout(150);
    const filled = await page.evaluate((id) => {
      const element = document.getElementById(id);
      const panel = element.closest(".sub-tab-panel");
      return {
        list: Math.round(element.getBoundingClientRect().height),
        panel: Math.round(panel.getBoundingClientRect().height),
        scrolls: getComputedStyle(element).overflowY,
      };
    }, list);
    assert.ok(filled.list > filled.panel * 0.6,
      `${subtab}: the list is ${filled.list}px in a ${filled.panel}px panel`);
    assert.equal(filled.scrolls, "auto", `${subtab}: the list does not scroll on its own`);
  }
  await page.locator('.tab[data-tab="main"]').click();
  await page.waitForTimeout(200);

  // Map links from decode rows, before anything has opened the Map tab. The
  // lazy map module used to install these globals itself, so an AIS pin threw
  // "not a function" and an APRS link silently did nothing until the tab had
  // been visited once.
  const mapLinkReady = await page.evaluate(() => ({
    position: typeof window.navigateToAprsMap,
    locator: typeof window.navigateToMapLocator,
    mapModuleLoaded: !!window.trx.modules.map,
  }));
  assert.equal(mapLinkReady.position, "function", "navigateToAprsMap is missing before the map loads");
  assert.equal(mapLinkReady.locator, "function", "navigateToMapLocator is missing before the map loads");
  assert.equal(mapLinkReady.mapModuleLoaded, false, "the map module was already loaded, so this proves nothing");

  await page.evaluate(() => { window.navigateToAprsMap(52.2, 21.0); });
  await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" });
  await page.waitForTimeout(500);
  const followed = await page.evaluate(() => ({
    path: location.pathname,
    active: [...document.querySelectorAll(".tab-bar .tab.active")].map((tab) => tab.dataset.tab || tab.id),
    mapHeight: Math.round(document.getElementById("aprs-map").getBoundingClientRect().height),
  }));
  assert.equal(followed.path, "/map", `the map link left the page on ${followed.path}`);
  assert.ok(followed.active.includes("map"), `the strip marks ${JSON.stringify(followed.active)}`);
  assert.ok(followed.mapHeight > 100, `the map came up ${followed.mapHeight}px tall`);
  await page.locator('.tab[data-tab="main"]').click();
  await page.waitForTimeout(200);

  // Section order in the tray. "Advanced radio controls" is built at runtime,
  // so it lands wherever ui-core puts it rather than where the markup says —
  // appending, as it once did, always left it last.
  const sections = await page.evaluate(() =>
    [...document.querySelectorAll(".controls-tray > details")].map((section) =>
      section.querySelector("summary").textContent.trim()));
  assert.deepEqual(sections, ["Advanced radio controls", "Audio controls", "Scheduler controls"],
    `tray sections are ${JSON.stringify(sections)}`);

  // Mode is a button group over a hidden <select>, which stays the value a
  // dozen call sites and several plugins read. The click has to reach it, and
  // the select must not take part in layout while it does.
  const modeBefore = await page.evaluate(() => ({
    buttons: document.querySelectorAll("#mode-picker button").length,
    value: document.getElementById("mode").value,
    active: document.querySelector("#mode-picker button.active")?.dataset.mode,
  }));
  assert.ok(modeBefore.buttons > 1, `mode picker rendered ${modeBefore.buttons} buttons`);
  assert.equal(modeBefore.active, modeBefore.value, "mode picker disagrees with the select");
  const target = await page.evaluate(() => {
    const other = [...document.querySelectorAll("#mode-picker button")]
      .find((btn) => btn.dataset.mode !== document.getElementById("mode").value);
    return other?.dataset.mode;
  });
  await page.locator(`#mode-picker button[data-mode="${target}"]`).click();
  await page.waitForTimeout(200);
  const modeAfter = await page.evaluate(() => ({
    value: document.getElementById("mode").value,
    active: document.querySelector("#mode-picker button.active")?.dataset.mode,
    selectWidth: Math.round(document.getElementById("mode").getBoundingClientRect().width),
  }));
  assert.equal(modeAfter.value, target, `clicking ${target} left the select at ${modeAfter.value}`);
  assert.equal(modeAfter.active, target, "the clicked mode is not the marked one");
  assert.ok(modeAfter.selectWidth <= 2, `the hidden select still occupies ${modeAfter.selectWidth}px`);

  // Mode-specific controls live on their own row, which has to leave with them:
  // an empty one would still take a track and a gap in the tray and draw its
  // divider under the controls every rig has.
  const modeRowState = async () => page.evaluate(() => {
    const row = document.getElementById("mode-controls-row");
    return { display: getComputedStyle(row).display, height: Math.round(row.getBoundingClientRect().height) };
  });
  await page.locator('#mode-picker button[data-mode="WFM"]').click();
  await page.waitForTimeout(250);
  const withWfm = await modeRowState();
  assert.notEqual(withWfm.display, "none", "WFM controls did not bring their row up");
  assert.ok(withWfm.height > 0, `WFM row has no height (${withWfm.height}px)`);
  await page.locator('#mode-picker button[data-mode="FM"]').click();
  await page.waitForTimeout(250);
  const withoutWfm = await modeRowState();
  assert.equal(withoutWfm.display, "none", "the mode row stayed behind with nothing in it");

  // Scheduler controls read left to right: step, hand back, then the entry on
  // air. The separator is drawn by the current-entry block, so it can only sit
  // in the right place if that block is last.
  const schedulerRow = await page.evaluate(() => [...document.querySelectorAll(".scheduler-action-row > *")]
    .map((el) => el.id || [...el.children].map((c) => c.id).join("+")));
  assert.deepEqual(schedulerRow,
    ["scheduler-prev-btn+scheduler-next-btn", "scheduler-release-btn", "scheduler-cycle-status"],
    `scheduler control order is ${JSON.stringify(schedulerRow)}`);

  // The footer status pill colours its dot from data-state, so a hint written
  // straight to textContent would leave the dot stuck on the previous state.
  const hint = await page.evaluate(() => {
    const element = document.getElementById("power-hint");
    return { state: element.dataset.state, text: element.textContent.trim() };
  });
  assert.ok(["ok", "busy", "error"].includes(hint.state), `status pill state is ${hint.state}`);
  assert.equal(hint.state, "ok", `fixture reports "${hint.text}" but the pill is ${hint.state}`);

  // Rig names, and they have to survive the state stream. The updates carry
  // only rig ids — /rigs is what knows the names — and applying one used to
  // clear the names, so the picker and the header fell back to the lowercase
  // ids a second after load and stayed there.
  await page.waitForTimeout(1500);
  const rigLabels = await page.evaluate(() => ({
    options: [...document.getElementById("header-rig-switch-select").options].map((o) => o.textContent),
    subtitle: document.getElementById("rig-subtitle").textContent,
  }));
  assert.deepEqual(rigLabels.options, ["Primary fixture", "Secondary fixture"],
    `the picker reads ${JSON.stringify(rigLabels.options)}`);
  assert.equal(rigLabels.subtitle, "Rig: Primary fixture",
    `the header reads "${rigLabels.subtitle}"`);

  const rigPicker = page.locator("#header-rig-switch-select");
  await rigPicker.locator("option").nth(1).waitFor({ state: "attached" });
  await rigPicker.selectOption("rig-b");
  await page.waitForTimeout(100);
  assert.deepEqual(selectedRigs, ["rig-b"]);

  await page.locator('.tab[data-tab="map"]').click();
  await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" });
  assert.equal(new URL(page.url()).pathname, "/map");

  // The selected destination is marked by a box on all four sides, so a rule
  // that drops one edge (the mobile nav used to lose its bottom border) is a
  // regression even though the tab still reads as "active".
  const activeTab = await page.evaluate(() => {
    const style = getComputedStyle(document.querySelector(".tab-bar-nav .tab.active"));
    return ["Top", "Right", "Bottom", "Left"].map((side) => ({
      width: style.getPropertyValue(`border-${side.toLowerCase()}-width`),
      color: style.getPropertyValue(`border-${side.toLowerCase()}-color`),
    }));
  });
  for (const edge of activeTab) {
    assert.notEqual(edge.width, "0px", `active tab border: ${JSON.stringify(activeTab)}`);
    assert.ok(!/rgba\(0, 0, 0, 0\)|transparent/.test(edge.color), `active tab border: ${JSON.stringify(activeTab)}`);
  }

  // The map is full-bleed: it breaks out of the centred .card column and
  // reaches both viewport edges, without pushing the page sideways.
  const stage = await page.evaluate(() => {
    const rect = document.getElementById("map-stage").getBoundingClientRect();
    return {
      left: Math.round(rect.left),
      right: Math.round(rect.right),
      viewport: document.documentElement.clientWidth,
      sideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
      gapToFooter: Math.round(document.querySelector(".footer").getBoundingClientRect().top - rect.bottom),
      pageScrolls: document.documentElement.scrollHeight > document.documentElement.clientHeight + 1,
    };
  });
  assert.equal(stage.left, 0, `map stage starts at ${stage.left}px, not the viewport edge`);
  assert.equal(stage.right, stage.viewport, `map stage ends at ${stage.right}px, not ${stage.viewport}px`);
  assert.equal(stage.sideways, false, "full-bleed map makes the page scroll sideways");
  // ...and fills the column down to the footer. Capping the height at a
  // fraction of the viewport left a dead band that grew with the window.
  assert.ok(stage.gapToFooter <= 16,
    `${stage.gapToFooter}px of dead space between the map and the footer`);
  assert.equal(stage.pageScrolls, false, "the map grew past the viewport");

  await page.locator('.tab[data-tab="main"]').click();
  assert.equal(new URL(page.url()).pathname, "/");

  // About is an occasional destination, so it lives behind More at every
  // width rather than in the operating tab strip.
  await page.locator("#mobile-more-btn").click();
  await page.locator('[data-navigate-tab="about"]').click();
  await page.locator("#tab-about").waitFor({ state: "visible" });
  assert.equal(new URL(page.url()).pathname, "/about");

  await page.goBack();
  await page.locator("#tab-main").waitFor({ state: "visible" });
  assert.equal(new URL(page.url()).pathname, "/");
  assert.deepEqual(runtimeErrors, []);

  // Refreshing or deep-linking must mark the destination, not Tools. The first
  // route navigation runs while the card is still behind the loading state, so
  // a test that asked whether the tab was displayed saw "none" for every tab
  // and lit Tools up on every refresh of every page.
  for (const [route, tab, toolsLit] of [["/map", "map", false], ["/about", "about", true]]) {
    await page.goto(`${fixture.origin}${route}`, { waitUntil: "domcontentloaded" });
    await page.locator(`#tab-${tab}`).waitFor({ state: "visible" });
    const marked = await page.evaluate(() => ({
      actives: [...document.querySelectorAll(".tab-bar .tab.active")].map((t) => t.dataset.tab || t.id),
      tools: document.getElementById("mobile-more-btn").classList.contains("active"),
    }));
    assert.ok(marked.actives.includes(tab), `${route} marks ${JSON.stringify(marked.actives)}`);
    assert.equal(marked.tools, toolsLit, `${route}: Tools active is ${marked.tools}`);
  }
  await page.goto(`${fixture.origin}/`, { waitUntil: "domcontentloaded" });
  await page.locator("#tab-main").waitFor({ state: "visible" });
  assert.deepEqual(runtimeErrors, []);

  // --- Layout regressions -------------------------------------------------
  // Every fault below shipped at some point while the rest of this file
  // passed, because nothing here looked at geometry: a header whose height
  // tracked the viewport, controls that stretched, a tab strip that ran under
  // the controls, and a dropdown that opened underneath the spectrum.
  for (const width of [1440, 1280, 1100, 900]) {
    await page.setViewportSize({ width, height: 900 });
    await page.waitForTimeout(250);
    const header = await page.evaluate(() => {
      const bar = document.querySelector(".tab-bar");
      const nav = document.querySelector(".tab-bar-nav");
      const actions = document.querySelector(".top-bar-actions");
      const controls = [...actions.children]
        .filter((el) => !el.hidden && el.getBoundingClientRect().height > 0)
        .map((el) => Math.round(el.getBoundingClientRect().height));
      return {
        barHeight: Math.round(bar.getBoundingClientRect().height),
        // The tabs, not the strip: with the strip allowed to overflow its box
        // shrinks while its content paints across the controls, so the
        // container's own rect never registers the collision.
        overlap: Math.round(Math.max(...[...nav.querySelectorAll(".tab")]
          .filter((tab) => tab.offsetParent !== null)
          .map((tab) => tab.getBoundingClientRect().right))
          - actions.getBoundingClientRect().left),
        heights: [...new Set(controls)],
        pageScrollsSideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
      };
    });
    assert.ok(header.barHeight <= 96, `header is ${header.barHeight}px at ${width}px; it should stay one row`);
    assert.ok(header.overlap <= 0, `tab strip overlaps the controls by ${header.overlap}px at ${width}px`);
    assert.ok(header.heights.length <= 2, `controls have heights ${header.heights.join(", ")} at ${width}px`);
    assert.equal(header.pageScrollsSideways, false, `page scrolls sideways at ${width}px`);
  }

  // A dropdown must paint over the page, not inside the header: fixed
  // positioning escapes clipping but not the header's stacking context.
  await page.setViewportSize({ width: 1280, height: 900 });
  await page.waitForTimeout(250);
  const menu = await page.evaluate(() => {
    document.getElementById("mobile-more-btn").click();
    const element = document.getElementById("mobile-more-menu");
    const rect = element.getBoundingClientRect();
    const hit = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
    return { width: Math.round(rect.width), height: Math.round(rect.height), onTop: element.contains(hit) };
  });
  assert.ok(menu.height > 40 && menu.width > 80, `menu rendered ${menu.width}x${menu.height}`);
  assert.ok(menu.onTop, "menu is painted underneath the page");

  // Wider text than this machine renders. This suite passed on macOS twice
  // while CI, whose system font is wider, put the tab strip into the controls —
  // the second time by 9px at 1440px with no scaling at all, because the fit
  // test was an arithmetic estimate whose fixed allowance for the gaps did not
  // cover them at those metrics. A single scale factor cannot stand in for
  // another platform's fonts, so sweep: somewhere in this range is whatever CI
  // renders, and the strip has to hold at every step of it.
  const applyTextScale = (scale) => page.addStyleTag({ content: `
    .tab-bar .title { font-size: ${1.05 * scale}rem !important; }
    .tab-bar .subtitle { font-size: ${0.78 * scale}rem !important; }
    .tab-bar .tab { font-size: ${0.95 * scale}rem !important; }
    .tab-bar select, .tab-bar button { font-size: ${0.95 * scale}rem !important; }
  ` });
  const measureBar = () => page.evaluate(() => {
    const nav = document.querySelector(".tab-bar-nav");
    const actions = document.querySelector(".top-bar-actions");
    const tabs = [...nav.querySelectorAll(".tab")].filter((tab) => tab.offsetParent !== null);
    return {
      overlap: Math.round(Math.max(...tabs.map((tab) => tab.getBoundingClientRect().right))
        - actions.getBoundingClientRect().left),
      iconsOnly: nav.classList.contains("nav-icons-only"),
    };
  });

  for (const scale of [1.0, 1.15, 1.3, 1.5, 1.75, 2.0]) {
    await applyTextScale(scale);
    // 1100px is the narrowest bar in the app: the bookmark gutters take 9.5rem
    // a side above that width, leaving less room than 900px has.
    for (const width of [1440, 1280, 1100, 900]) {
      await page.setViewportSize({ width, height: 900 });
      await page.waitForTimeout(120);
      const crowded = await measureBar();
      assert.ok(crowded.overlap <= 0,
        `at ${scale}x text the tab strip overlaps the controls by ${crowded.overlap}px at ${width}px`);
    }
  }

  // A station name long enough that the bar cannot hold it, which is the rung
  // below icons: the identity has to give, not the strip.
  await page.evaluate(() => {
    document.getElementById("rig-subtitle").textContent =
      "Rig: Shack SDR — RTL-SDR v4 on the attic dipole, north-west";
  });
  await applyTextScale(1.6);
  for (const width of [1440, 1100]) {
    await page.setViewportSize({ width, height: 900 });
    await page.waitForTimeout(200);
    const crowded = await measureBar();
    assert.ok(crowded.overlap <= 0,
      `with a long station name the tab strip overlaps the controls by ${crowded.overlap}px at ${width}px`);
  }

  // ...and when the text changes under a bar that is not resized. The rig name
  // arrives from the server, a web font swaps in: neither is a window resize,
  // and the strip used to sit there as it was.
  await page.setViewportSize({ width: 1440, height: 900 });
  await page.waitForTimeout(200);
  await applyTextScale(2.4);
  await page.waitForTimeout(400);
  const unresized = await measureBar();
  assert.ok(unresized.overlap <= 0,
    `text grew without a resize and the strip overlaps by ${unresized.overlap}px`);
  assert.equal(unresized.iconsOnly, true, "the strip kept its labels with no room for them");

  // The frequency readouts are typed into, so the browser remembers what went
  // in and offers it back in a dropdown over the reading — Edge does this by
  // default. Nothing here wants to be autofilled from what was tuned last week.
  const autofill = await page.evaluate(() => ["freq", "center-freq"].map((id) => {
    const input = document.getElementById(id);
    return { id, autocomplete: input?.getAttribute("autocomplete") ?? null };
  }));
  for (const field of autofill) {
    assert.equal(field.autocomplete, "off",
      `#${field.id} offers autofill (autocomplete=${field.autocomplete})`);
  }

} finally {
  await browser.close();
  await fixture.close();
}