"""UIE-04: E2E tests for theme toggle — data-theme cycling and localStorage persistence."""
from __future__ import annotations
import pytest


def test_theme_cycles_on_click(page, live_server: str) -> None:
    """Clicking theme button cycles data-theme attribute: auto -> light -> dark -> auto."""
    page.goto(f"{live_server}/", wait_until="domcontentloaded")

    # Initial state: auto — the attribute must be ABSENT, not "auto". Pico's
    # OS-dark block is keyed on `:root:not([data-theme])`, so any value pins
    # Pico to its light theme while app.css follows the OS into dark.
    initial_theme = page.evaluate("document.documentElement.getAttribute('data-theme')")
    assert initial_theme is None

    # Click once -> light
    page.click("button[aria-label='auto']")
    page.wait_for_function(
        "document.documentElement.getAttribute('data-theme') === 'light'",
        timeout=2000,
    )
    assert page.evaluate("document.documentElement.getAttribute('data-theme')") == "light"

    # Click again -> dark
    page.click("button[aria-label='light']")
    page.wait_for_function(
        "document.documentElement.getAttribute('data-theme') === 'dark'",
        timeout=2000,
    )
    assert page.evaluate("document.documentElement.getAttribute('data-theme')") == "dark"

    # Click again -> auto, which removes the attribute again
    page.click("button[aria-label='dark']")
    page.wait_for_function(
        "!document.documentElement.hasAttribute('data-theme')",
        timeout=2000,
    )


def test_theme_persists_across_reload(page, live_server: str) -> None:
    """After clicking theme toggle, the chosen theme is restored on reload."""
    page.goto(f"{live_server}/", wait_until="domcontentloaded")

    # Switch to light mode
    page.click("button[aria-label='auto']")
    page.wait_for_function(
        "document.documentElement.getAttribute('data-theme') === 'light'",
        timeout=2000,
    )

    # Reload the page
    page.reload(wait_until="domcontentloaded")

    # Theme should still be light (from localStorage)
    theme_after_reload = page.evaluate("document.documentElement.getAttribute('data-theme')")
    assert theme_after_reload == "light"

    # Cleanup: reset to auto
    page.evaluate("localStorage.setItem('imptune_theme', 'auto')")