import os
from pathlib import Path

import pytest

if os.getenv("STACKCHAIN_RUN_RELEASE_E2E") != "1":
    pytest.skip("packaged mobile Following journey runs only in its gated CI job", allow_module_level=True)
pytest.importorskip("playwright.sync_api")
from playwright.sync_api import expect, sync_playwright


ROOT = Path(__file__).parents[2]
FRONTEND = ROOT / "frontend"


def test_following_queue_is_phone_usable_at_narrow_viewport():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=True)
        page = browser.new_page(viewport={"width": 320, "height": 568})
        page.set_content((FRONTEND / "index.html").read_text())
        page.add_style_tag(path=FRONTEND / "dashboard.css")

        row = page.locator('[data-mobile-queue="following"]')
        expect(row).to_have_count(1)
        page.locator("#following-list").evaluate("""node => {
          node.innerHTML = '<button class="following-card" type="button"><span><strong>Quiet issue with a long mobile title</strong><small>stackchain/api #42 · open · just now</small></span><span aria-hidden="true">›</span></button>';
        }""")
        page.locator("#following-sheet").evaluate("node => node.showModal()")

        expect(page.locator("#following-sheet")).to_be_visible()
        expect(page.locator(".following-card")).to_be_visible()
        assert page.locator(".following-card").bounding_box()["height"] >= 44
        assert page.locator("#close-following").bounding_box()["height"] >= 44
        overflow = page.evaluate("document.documentElement.scrollWidth > document.documentElement.clientWidth")
        assert overflow is False
        browser.close()