#!/usr/bin/env python3
"""check_html.py - static smoke test for a single-file web app.

    python check_html.py app.html

Checks (exit code 1 on any finding):
  - every <script> block parses (node --check; module scripts as .mjs)
  - <script type="importmap"> is valid JSON with an "imports" object
  - inline handlers (onclick="...") used together with a module script: they
    cannot see module-scope functions -> use addEventListener inside the module
  - ids referenced via getElementById('x') / querySelector('#x') exist in the HTML
  - mobile basics: viewport meta, no alert/confirm/prompt, input font-size >= 16px,
    no fixed pixel widths >= 100px on inputs, popups/modals with max-height + overflow:auto
"""
import json, re, subprocess, sys, tempfile
from pathlib import Path

def main(path: str) -> int:
    html = Path(path).read_text(encoding="utf-8")
    findings = []
    scripts = re.findall(r"<script\b([^>]*)>(.*?)</script>", html, re.S | re.I)
    has_module = any('type="module"' in a or "type='module'" in a for a, _ in scripts)

    for i, (attrs, body) in enumerate(scripts, 1):
        if "importmap" in attrs:
            try:
                im = json.loads(body)
                if not isinstance(im.get("imports"), dict):
                    findings.append(f"script {i}: importmap has no 'imports' object")
            except json.JSONDecodeError as e:
                findings.append(f"script {i}: importmap is not valid JSON ({e})")
            continue
        if "src=" in attrs or not body.strip():
            continue
        suffix = ".mjs" if "module" in attrs else ".js"
        with tempfile.NamedTemporaryFile("w", suffix=suffix, delete=False, encoding="utf-8") as f:
            f.write(body); tmp = f.name
        r = subprocess.run(["node", "--check", tmp], capture_output=True, text=True)
        if r.returncode:
            msg = r.stderr.strip().splitlines()
            findings.append(f"script {i}: syntax error - " + " | ".join(l for l in msg if l.strip())[:300])

    if has_module:
        for m in re.finditer(r"\son(\w+)\s*=\s*[\"']([^\"']+)[\"']", html):
            findings.append(f"inline on{m.group(1)}=\"{m.group(2)[:40]}\" with a module script "
                            "- handler can't reach module scope; use addEventListener")

    ids = set(re.findall(r"\bid\s*=\s*[\"']([^\"']+)[\"']", html))
    used = set(re.findall(r"getElementById\(\s*[\"']([^\"']+)[\"']", html))
    used |= set(re.findall(r"querySelector(?:All)?\(\s*[\"']#([A-Za-z_][\w-]*)[\"']", html))
    for u in sorted(used - ids):
        findings.append(f"element id '{u}' is referenced in JS but does not exist in the HTML")

    # --- mobile basics -------------------------------------------------------
    if not re.search(r"<meta[^>]+name=[\"']viewport[\"'][^>]*width=device-width", html, re.I):
        findings.append('missing <meta name="viewport" content="width=device-width, initial-scale=1"> '
                        "- the page renders as a tiny desktop page on phones")
    for m in re.finditer(r"\b(alert|confirm|prompt)\s*\(", "\n".join(b for a, b in scripts if "src=" not in a)):
        findings.append(f"{m.group(1)}() blocks and looks bad on phones - use a toast / small popup instead")
    css = "\n".join(re.findall(r"<style\b[^>]*>(.*?)</style>", html, re.S | re.I))
    for m in re.finditer(r"(?:^|})\s*([^{}]*\b(?:input|select|textarea)\b[^{}]*)\{([^}]*)\}", css):
        fs = re.search(r"font-size\s*:\s*(\d+(?:\.\d+)?)px", m.group(2))
        if fs and float(fs.group(1)) < 16:
            findings.append(f"font-size {fs.group(1)}px on '{m.group(1).strip()[:40]}' - below 16px iOS zooms in on focus; "
                            "keep 16px and make fields compact with padding/width")
    for m in re.finditer(r"(?:^|})\s*([^{}]*\b(?:input|select)\b[^{}]*)\{([^}]*)\}", css):
        if re.search(r"(?<![-\w])width\s*:\s*(\d{3,})px", m.group(2)):
            findings.append(f"fixed pixel width >=100px on '{m.group(1).strip()[:40]}' - size fields to their "
                            "content with ch units (e.g. width:5ch) or max-width")
    for m in re.finditer(r"(?:^|})\s*([^{}]*(?:popup|modal|dialog|sheet|overlay)[^{}]*)\{([^}]*)\}", css, re.I):
        body = m.group(2)
        if re.search(r"position\s*:\s*(fixed|absolute)", body) and not (
                re.search(r"max-height", body) and re.search(r"overflow(-y)?\s*:\s*(auto|scroll)", body)):
            findings.append(f"popup-like '{m.group(1).strip()[:40]}' is positioned but has no max-height + overflow:auto "
                            "- it can cover the screen and cannot scroll")

    for f_ in findings:
        print("✗", f_)
    print("ok" if not findings else f"{len(findings)} finding(s)")
    return 1 if findings else 0

if __name__ == "__main__":
    if len(sys.argv) != 2:
        print(__doc__); sys.exit(2)
    sys.exit(main(sys.argv[1]))