def _open(page, base_url):
    page.goto(base_url)
    page.wait_for_selector(".photo-card")


def test_grid_arrow_navigation_moves_focus_ring(base_url, page):
    # Venice (2 photos) is high-confidence; click it to load its detail.
    _open(page, base_url)
    page.click("text=Venice")
    page.wait_for_selector(".photo-card")
    cards = page.query_selector_all(".photo-card")
    assert len(cards) == 2
    page.keyboard.press("ArrowRight")
    # second card gains the focus ring class
    assert "ring-4" in (page.query_selector_all(".photo-card")[1].get_attribute("class"))


def test_lightbox_opens_and_closes(base_url, page):
    _open(page, base_url)
    page.click("text=Venice")
    page.wait_for_selector(".photo-card")
    page.keyboard.press("ArrowRight")
    page.keyboard.press("Enter")
    assert page.is_visible("#lb")
    page.keyboard.press("Escape")
    page.wait_for_selector("#lb", state="hidden")


def test_cluster_switching_with_brackets(base_url, page):
    _open(page, base_url)
    page.click("text=Venice")
    page.wait_for_selector(".photo-card")
    page.keyboard.press("]")            # move to the next cluster
    page.wait_for_function(
        "document.querySelectorAll('.photo-card').length === 1")  # Rome has 1 photo


def test_approve_updates_status(base_url, page):
    _open(page, base_url)
    page.click("text=Venice")
    page.wait_for_selector("#cluster-name")
    page.once("dialog", lambda d: d.accept())   # no dialog expected, but be safe
    page.click("text=Approve (A)")
    page.wait_for_selector("text=approved")
    assert "approved" in page.inner_text("body")