"""
Layouts measured in a browser instead of read out of the stylesheet.

`test_layout_responsive.py` says, in its own docstring, that a layout cannot be
measured here because there is no browser in the suite. There is one now —
Chrome is what the video work has been verified against — and the difference
matters: `width: 330px` in a rule tells you nothing about whether the thing
lands on the screen. That depends on where its anchor sits, which depends on
everything to its right.

The transfers panel is the case that proved it. 330 px wide, anchored to the
right edge of its button — but that button is not at the right edge of the
screen, the bell and the user menu come after it. Measured before the fix:

    320 px viewport -> panel at -138..192, 138 px off the left
    360 px          -> -98..232
    412 px          -> -46..284

What is cut off is the left-hand side, which is where the file names are, so
what was left on screen was a strip of progress bars belonging to nothing —
reported as "on mobile you only see the right-hand side, without the content".

Every assertion here is a rectangle, not a declaration.
"""

import json
import shutil
import subprocess
import textwrap
from pathlib import Path

import pytest

HARNESS = Path(__file__).parent / "harness" / "layout_probe.py"
STATIC = Path(__file__).resolve().parents[1] / "src" / "meshbay_hub" / "static"

pytestmark = pytest.mark.skipif(
    shutil.which("google-chrome") is None or not (STATIC / "style.css").exists(),
    reason="Chrome or the SPA stylesheet is not available")

# The nav as `Nav()` renders it: the transfers widget is not last — the bell and
# the user menu follow it, which is the whole reason the panel hangs off.
NAV = textwrap.dedent("""
    <nav class="nav">
      <div class="nav-left">
        <button class="nav-hamburger">&#9776;</button>
        <a class="nav-brand" href="#/">MeshBay</a>
      </div>
      <div class="nav-right">
        <div class="transfer-wrap">
          <button class="nav-notif transfer-btn">&#8595;</button>
          <div class="transfer-panel">
            <div class="transfer-head">Transfers<button class="btn-secondary">Clear</button></div>
            <div class="transfer-item">
              <div class="transfer-line">
                <span class="transfer-kind">&#8595;</span>
                <span class="transfer-name">Some Saga S03E01 - A Long Enough Title.mp4</span>
                <button class="transfer-cancel">&#10005;</button>
              </div>
              <div class="dl-progress"><div class="dl-fill" style="width:42%"></div></div>
              <div class="transfer-meta"><span>210 MB / 493 MB</span><span>3.1 MB/s</span></div>
            </div>
          </div>
        </div>
        <a class="nav-notif" href="#/">&#128276;</a>
        <div class="user-menu"><button class="nav-btn">someone</button></div>
      </div>
    </nav>
""")


WIDTHS = [320, 360, 412, 768, 1024]
SELECTORS = [".transfer-panel", ".transfer-name"]


@pytest.fixture(scope="module")
def measured(tmp_path_factory):
    """One browser for every width, because launching one apiece cost the
    suite three minutes."""
    fragment = tmp_path_factory.mktemp("layout") / "fragment.html"
    fragment.write_text(NAV)
    proc = subprocess.run(
        ["python3", str(HARNESS), ",".join(str(w) for w in WIDTHS),
         str(fragment), *SELECTORS],
        capture_output=True, text=True, timeout=180)
    assert proc.returncode == 0, f"probe failed: {proc.stdout}{proc.stderr}"
    out = json.loads(proc.stdout)
    assert "error" not in out, f"no measurement: {out}"
    for w in WIDTHS:
        assert out[str(w)]["viewport"]["w"] == w, (
            f"asked for {w} px and measured at {out[str(w)]['viewport']['w']}")
    return out


def _box(measured, width: int, selector: str) -> dict:
    return measured[str(width)]["boxes"][selector]


@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_transfers_panel_fits_a_phone(measured, width):
    """The reported defect, as a rectangle."""
    box = _box(measured, width, ".transfer-panel")
    assert box is not None, "the panel did not render"
    assert box["offLeft"] == 0, (
        f"{box['offLeft']} px of the panel is off the left of a {width} px "
        "screen — and the left is where the file names are")
    assert box["offRight"] == 0, (
        f"{box['offRight']} px of the panel is off the right of a {width} px screen")


@pytest.mark.parametrize("width", [320, 360])
def test_the_file_name_gets_room_to_be_read(measured, width):
    """Fitting on screen is not the same as being legible.

    A panel could satisfy the test above by being narrow enough to show
    nothing. The name is the one part a viewer needs.
    """
    box = _box(measured, width, ".transfer-name")
    assert box is not None and box["width"] >= 180, (
        f"the file name has {box['width'] if box else 0} px on a {width} px "
        "screen, which is not enough to tell two downloads apart")


def test_the_desktop_panel_is_untouched(measured):
    """The fix is a media query, and it must stay inside it."""
    box = _box(measured, 1024, ".transfer-panel")
    assert box["width"] == 330, (
        f"the desktop panel is now {box['width']} px — the mobile rule has "
        "escaped its breakpoint")
    assert box["offLeft"] == 0 and box["offRight"] == 0


def test_it_does_not_stretch_across_a_tablet(measured):
    """Pinned to both edges, a panel would be 750 px wide at 768."""
    box = _box(measured, 768, ".transfer-panel")
    assert box["width"] <= 440, (
        f"{box['width']} px of panel on a tablet, which is a list of two "
        "filenames stretched over most of the screen")


@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_page_does_not_scroll_sideways(measured, width):
    """The other half of "it fits": nothing pushed the document wider."""
    r = measured[str(width)]
    assert r["docScrollW"] <= r["viewport"]["w"], (
        f"the document scrolls to {r['docScrollW']} px on a {width} px screen")


# ── The grouped panel (§8.2) ────────────────────────────────────────────────
#
# The panel gained groups, a header summary and a waiting row. Every one of
# those can push something off a 320 px screen, and none of it can be seen by
# reading the stylesheet: what decides where the panel lands is the button it
# hangs from, which is not at the right edge. That is the defect this file was
# written for, and it comes back with any change to the header's width.

GROUPED = textwrap.dedent("""
    <nav class="nav">
      <div class="nav-left">
        <button class="nav-hamburger">&#9776;</button>
        <a class="nav-brand" href="#/">MeshBay</a>
      </div>
      <div class="nav-right">
        <div class="transfer-wrap">
          <button class="nav-notif transfer-btn">&#8595;</button>
          <div class="transfer-panel">
            <div class="transfer-head">
              <span class="transfer-head-title">Transfers</span>
              <span class="transfer-head-summary">2 running &middot; 3 waiting</span>
              <button class="btn-secondary">Clear finished</button>
            </div>
            <div class="transfer-group">
              <div class="transfer-group-head">Running</div>
              <div class="transfer-item transfer-running">
                <div class="transfer-line">
                  <span class="transfer-kind">&#8595;</span>
                  <span class="transfer-name">Some Saga S03E01 - A Long Enough Title.mp4</span>
                  <button class="transfer-cancel">&#10005;</button>
                </div>
                <div class="dl-progress"><div class="dl-fill" style="width:42%"></div></div>
                <div class="transfer-meta"><span>210 MB / 493 MB</span>
                  <span>3.1 MB/s &middot; 4 min left</span></div>
              </div>
            </div>
            <div class="transfer-group">
              <div class="transfer-group-head">Waiting</div>
              <div class="transfer-item transfer-queued">
                <div class="transfer-line">
                  <span class="transfer-kind">&#8595;</span>
                  <span class="transfer-name">Another File With A Long Name.mkv</span>
                  <button class="transfer-cancel">&#10005;</button>
                </div>
                <div class="dl-progress dl-waiting"></div>
                <div class="transfer-meta"><span>Waiting &mdash; your slots are busy</span>
                  <span>1.2 GB</span></div>
              </div>
            </div>
          </div>
        </div>
        <a class="nav-notif" href="#/">&#128276;</a>
        <div class="user-menu"><button class="nav-btn">someone</button></div>
      </div>
    </nav>
""")

GROUPED_SELECTORS = [".transfer-panel", ".transfer-head", ".transfer-head-summary",
                     ".transfer-group-head", ".transfer-name",
                     ".transfer-item.transfer-queued .dl-progress"]


@pytest.fixture(scope="module")
def grouped(tmp_path_factory):
    fragment = tmp_path_factory.mktemp("grouped") / "fragment.html"
    fragment.write_text(GROUPED)
    proc = subprocess.run(
        ["python3", str(HARNESS), ",".join(str(w) for w in WIDTHS),
         str(fragment), *GROUPED_SELECTORS],
        capture_output=True, text=True, timeout=180)
    assert proc.returncode == 0, f"probe failed: {proc.stdout}{proc.stderr}"
    out = json.loads(proc.stdout)
    assert "error" not in out, f"no measurement: {out}"
    return out


def test_the_grouped_panel_stays_on_a_phone_screen(grouped):
    for width in WIDTHS:
        box = grouped[str(width)]["boxes"][".transfer-panel"]
        assert box["offLeft"] == 0, (
            f"at {width} px the panel hangs {box['offLeft']} px off the left — "
            "which is where the file names are")
        assert box["offRight"] == 0, (
            f"at {width} px the panel hangs {box['offRight']} px off the right")


def test_the_file_name_is_on_screen_in_every_group(grouped):
    for width in WIDTHS:
        box = grouped[str(width)]["boxes"][".transfer-name"]
        assert box["offLeft"] == 0 and box["offRight"] == 0, (
            f"at {width} px a file name is cut off: {box}")
        assert box["width"] > 40, "the name column collapsed to nothing"


def test_the_header_summary_does_not_push_the_header_taller(grouped):
    """It is the one part of the header that grows with what is happening. If
    it wraps, the header changes height as transfers come and go and every row
    below it moves — on the narrowest screen, repeatedly."""
    for width in WIDTHS:
        head = grouped[str(width)]["boxes"][".transfer-head"]
        summary = grouped[str(width)]["boxes"][".transfer-head-summary"]
        assert head["height"] <= 48, (
            f"at {width} px the header is {head['height']} px tall — it wrapped")
        assert summary["height"] <= 24, (
            f"at {width} px the summary wrapped to {summary['height']} px")


def test_the_waiting_bar_is_as_wide_as_a_progress_bar(grouped):
    """A waiting row has no inner fill element — the stripes are on the track
    itself. Getting that wrong renders a zero-width bar, which reads as a
    transfer stuck at 0% rather than one that has not started."""
    for width in WIDTHS:
        bar = grouped[str(width)]["boxes"][
            ".transfer-item.transfer-queued .dl-progress"]
        assert bar["width"] > 100, (
            f"at {width} px the waiting bar is {bar['width']} px wide")
        assert bar["height"] >= 3, "the waiting bar has no height"