import os
from pathlib import Path

import pytest

if os.getenv("STACKCHAIN_RUN_RELEASE_E2E") != "1":
    pytest.skip("packaged pinned-work 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"


@pytest.mark.parametrize("viewport", [
    {"width": 320, "height": 568},
    {"width": 390, "height": 844},
])
def test_operator_pins_and_reopens_frequent_work_without_phone_overflow(viewport):
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=True)
        page = browser.new_page(viewport=viewport)
        page.set_content((FRONTEND / "index.html").read_text())
        page.add_style_tag(path=FRONTEND / "dashboard.css")
        page.add_script_tag(path=FRONTEND / "mobile-recent-work.js")
        page.evaluate("""() => {
          const values = new Map();
          const storage = {
            getItem:key => values.get(key) || null,
            setItem:(key, value) => values.set(key, value),
          };
          const item = {
            kind:'issue', repository:'stackchain/stackchain-dashboard', number:1477,
            title:'Pin frequent work across signed-in mobile devices',
          };
          window.opened = [];
          window.recentWork = createMobileRecentWork({
            storage, getLogin:() => 'timmy', document,
            section:document.querySelector('#mobile-recent-work'),
            list:document.querySelector('#mobile-recent-work-list'),
            pinnedSection:document.querySelector('#mobile-pinned-work'),
            pinnedList:document.querySelector('#mobile-pinned-work-list'),
            status:document.querySelector('#mobile-recent-work-status'),
            openRoute:route => window.opened.push(route),
          });
          window.recentWork.record(item);
          window.recentWork.pin(item);
          document.querySelector('#mobile-queue-sheet').showModal();
        }""")

        expect(page.locator("#mobile-pinned-work")).to_be_visible()
        expect(page.locator("#mobile-recent-work")).to_be_visible()
        expect(page.locator("#mobile-recent-work-status")).to_have_text("Sync pending.")
        open_button = page.get_by_role(
            "button", name="Open Pin frequent work across signed-in mobile devices, issue stackchain/stackchain-dashboard #1477"
        ).first
        pin_button = page.get_by_role(
            "button", name="Unpin Pin frequent work across signed-in mobile devices"
        )
        for control in (open_button, pin_button):
            bounds = control.bounding_box()
            assert bounds and bounds["height"] >= 44
            assert bounds["x"] >= 0 and bounds["x"] + bounds["width"] <= viewport["width"]
        assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")

        open_button.focus()
        open_button.press("Enter")
        assert page.evaluate("window.opened") == [
            "#/my-work/issue/stackchain/stackchain-dashboard/1477"
        ]
        browser.close()