from playwright.sync_api import sync_playwright
import os

OUT = os.path.abspath("shots")
os.makedirs(OUT, exist_ok=True)
URL = "http://localhost:4321/diensten/gevelreiniging"

def set_slider(page, pct):
    page.evaluate(
        """(p) => { const el = document.querySelector('[data-ba]'); if (el) { el.style.setProperty('--pos', p + '%'); const r = el.querySelector('.ba__range'); if (r) r.value = p; } }""",
        pct,
    )

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    ctx = browser.new_context(viewport={"width": 1440, "height": 900}, device_scale_factor=1)
    page = ctx.new_page()
    page.goto(URL, wait_until="networkidle", timeout=60000)
    page.wait_for_timeout(1500)
    page.screenshot(path=os.path.join(OUT, "dienst-hero.png"))
    print("OK dienst-hero.png  status-title:", page.title())

    # scroll voor lazy images + reveals
    height = page.evaluate("document.body.scrollHeight")
    for y in range(0, height, 420):
        page.evaluate(f"window.scrollTo(0, {y})")
        page.wait_for_timeout(110)
    page.evaluate("window.scrollTo(0, 0)")
    page.wait_for_timeout(800)

    # resultaat-galerij
    el = page.query_selector(".svc-result")
    if el:
        el.scroll_into_view_if_needed()
        page.wait_for_timeout(700)
        el.screenshot(path=os.path.join(OUT, "dienst-result.png")); print("OK dienst-result.png")
    else:
        print("!! geen .svc-result gevonden")

    page.evaluate("window.scrollTo(0, 0)")
    page.wait_for_timeout(400)
    page.screenshot(path=os.path.join(OUT, "dienst-full.png"), full_page=True)
    print("OK dienst-full.png")

    # axe
    try:
        page.add_script_tag(url="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js")
        page.wait_for_timeout(500)
        res = page.evaluate("""async () => {
            const r = await axe.run(document, {runOnly:['wcag2a','wcag2aa','wcag21aa']});
            return r.violations.map(v=>({id:v.id, impact:v.impact, n:v.nodes.length, help:v.help, sample:(v.nodes[0]&&v.nodes[0].target)||[]}));
        }""")
        print("=== AXE ===")
        if not res:
            print("geen axe-violations")
        for v in res:
            print(f"[{v['impact']}] {v['id']} x{v['n']} :: {v['help']}  e.g. {v['sample']}")
    except Exception as e:
        print("AXE FAILED:", e)

    # headings
    heads = page.eval_on_selector_all("h1,h2,h3", "els=>els.map(e=>e.tagName+': '+e.textContent.trim().slice(0,46))")
    print("=== HEADINGS ==="); [print(h) for h in heads]

    # overflow
    for w in (1440, 768, 390):
        c = browser.new_context(viewport={"width": w, "height": 900})
        pp = c.new_page(); pp.goto(URL, wait_until="networkidle", timeout=60000)
        sw = pp.evaluate("document.documentElement.scrollWidth"); cw = pp.evaluate("document.documentElement.clientWidth")
        print(f"viewport {w}: scrollWidth={sw} clientWidth={cw} overflow={'JA' if sw>cw+1 else 'nee'}")
        c.close()

    # mobile shot
    m = browser.new_context(viewport={"width": 390, "height": 844}, device_scale_factor=2)
    mp = m.new_page()
    mp.goto(URL, wait_until="networkidle", timeout=60000)
    mp.wait_for_timeout(800)
    mh = mp.evaluate("document.body.scrollHeight")
    for y in range(0, mh, 360):
        mp.evaluate(f"window.scrollTo(0, {y})")
        mp.wait_for_timeout(90)
    mp.evaluate("window.scrollTo(0, 0)")
    mp.wait_for_timeout(700)
    mp.screenshot(path=os.path.join(OUT, "dienst-mobile.png"), full_page=True)
    print("OK dienst-mobile.png")

    # 404 check
    r404 = browser.new_context().new_page()
    resp = r404.goto("http://localhost:4321/diensten/bestaat-niet", wait_until="domcontentloaded", timeout=30000)
    print("404-check /diensten/bestaat-niet ->", resp.status if resp else "geen response")

    browser.close()