"""
UX Crime Scene — Gradio frontend (real 3-step wizard).

Local dev:
    export MODAL_ENDPOINT_URL="https://<your>--ux-crime-scene-qwen-web.modal.run"
    python app.py
"""

from __future__ import annotations

import base64
import html
import io
import os
import time
import traceback
import urllib.parse
from pathlib import Path

import gradio as gr
from PIL import Image

from annotate import annotate
from detective import (CaseFile, investigate_agentic, save_case, fetch_case,
                       publish_case, fetch_board)
from extras import interrogate, prosecute, reconstruct_all, synthesize_voice, voice_script

# Optional power-ups: shown only when their backend is configured (graceful).
HAS_VOICE = bool(os.environ.get("TTS_ENDPOINT_URL", "").strip())
HAS_FLUX = bool(os.environ.get("FLUX_ENDPOINT_URL", "").strip())

HERE = Path(__file__).parent
ASSETS = HERE / "assets"

# Public URL of the tool (set this to the Space URL in production).
TOOL_URL = os.environ.get("PUBLIC_URL", "").strip() or \
    "https://huggingface.co/spaces/build-small-hackathon/ux-crime-scene"

ASSET_VARS = {
    "paper.jpg": "--asset-paper",
    "emblem.png": "--asset-emblem",
    "magnifier.png": "--asset-magnifier",
    "grade_seal.png": "--asset-grade",
    "stamp_confidential.png": "--asset-stamp-confidential",
    "stamp_guilty.png": "--asset-stamp-guilty",
    "desk_topdown.jpg": "--asset-desk",
}
_MIME = {".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg"}

STATIC_CSS = (HERE / "styles.css").read_text(encoding="utf-8")


def esc(v) -> str:
    return html.escape(str(v))


def _build_asset_style() -> tuple[str, dict[str, bool]]:
    overrides, present = [], {}
    for fname, var in ASSET_VARS.items():
        path = ASSETS / fname
        ok = path.exists()
        present[fname] = ok
        if ok:
            raw = path.read_bytes()
            mime = _MIME.get(path.suffix.lower(), "image/png")
            b64 = base64.b64encode(raw).decode("ascii")
            overrides.append(f"{var}: url('data:{mime};base64,{b64}');")
    if present.get("emblem.png"):
        overrides.append("--emblem-display: block;")
    style = "<style>\n:root{\n" + "\n".join(overrides) + "\n}\n</style>" if overrides else ""
    return style, present


ASSET_STYLE, ASSET_PRESENT = _build_asset_style()


def _asset_data_uri(fname: str) -> str:
    """Base64 data-URI for a finished asset, or '' if it isn't there."""
    path = ASSETS / fname
    if not path.exists():
        return ""
    mime = _MIME.get(path.suffix.lower(), "image/png")
    return f"data:{mime};base64,{base64.b64encode(path.read_bytes()).decode('ascii')}"


# The Inspector character (transparent PNGs). `point` accuses the evidence on the
# verdict screen; `lean` examines the scene during the sweep. Embedded once.
INSPECTOR_POINT = _asset_data_uri("inspector_point.png")
INSPECTOR_LEAN = _asset_data_uri("inspector_lean.png")
INSPECTOR_NOTES = _asset_data_uri("inspector_notes.png")
INSPECTOR_EXAMINE = _asset_data_uri("inspector_examine.png")
INSPECTOR_FINGER = _asset_data_uri("inspector_finger.png")

# Most Wanted assets for the board screen (the home entry is now a plain button).
MW_SIGN_URI = _asset_data_uri("mostwanted/sign.png")
MW_INSPECTOR_URI = INSPECTOR_LEAN or INSPECTOR_EXAMINE   # decorative, fills the board's side column


def _inspector_rotator_html() -> str:
    """During the sweep step, the Inspector rotates through the 4 corners of
    the viewport with different poses (lean=examines, notes=writing,
    examine=thinking, finger=pointing). Each slide gets its own animation
    timing so corners + poses cycle in lockstep."""
    # Corners chosen so each figure faces/points TOWARD the laptop in the centre:
    #   finger points down-right -> top-left
    #   notes faces left         -> top-right
    #   examine faces right      -> bottom-left  (looks toward the laptop)
    #   lean peers down-right    -> bottom-right
    poses = [
        ("finger",  INSPECTOR_FINGER,  "tl"),
        ("notes",   INSPECTOR_NOTES,   "tr"),
        ("examine", INSPECTOR_EXAMINE, "bl"),
        ("lean",    INSPECTOR_LEAN,    "br"),
    ]
    items = []
    for i, (pose, uri, corner) in enumerate(poses):
        if not uri:
            continue
        items.append(
            f'<div class="ir-slide ir-{corner}" style="--i:{i}" data-pose="{pose}">'
            f'<img src="{uri}" alt=""/></div>'
        )
    if not items:
        return ""
    return f'<div class="inspector-rotator" aria-hidden="true">{"".join(items)}</div>'

# ---------------------------------------------------------------------------
# Audio: noir soundtrack + SFX, embedded and driven client-side. A head <script>
# runs natively (unlike gr.HTML innerHTML scripts) so it can build the floating
# sound bubble and play SFX on button clicks / wizard-screen changes.
# ---------------------------------------------------------------------------
AUDIO_FILES = {
    "music": "music.mp3",
    "click": "sfx_click.mp3",
    "scan": "sfx_scan.mp3",
    "verdict": "sfx_verdict.mp3",
    "thud": "sfx_thud.mp3",
}

_AUDIO_JS = """
(function(){
  if (window.__uxcSound) return; window.__uxcSound = true;

  var music = null, verdictPlayed = false;
  // Master switch. Initial value comes from the consent gate (or a stored pref).
  var pref = sessionStorage.getItem('uxc_sound');   // 'on' | 'off' | null
  var state = { on: pref === 'on' };

  function ensureMusic(){
    if(!music){ music = new Audio(AUD.music); music.loop = true; music.volume = 0.5; }
    return music;
  }
  function alleyVideo(){ return document.getElementById('intro-alley-video'); }

  function applyState(){
    var b = document.getElementById('sound-bubble');
    var av = alleyVideo();
    if (state.on){
      ensureMusic(); music.play().catch(function(){});
      if (av){ av.muted = false; try{ av.volume = 1.0; }catch(e){} }
      if (b){ b.classList.add('on'); var t=b.querySelector('.sb-txt'); if(t) t.textContent='SOUND ON'; }
    } else {
      if (music) music.pause();
      if (av){ av.muted = true; }
      if (b){ b.classList.remove('on'); var t=b.querySelector('.sb-txt'); if(t) t.textContent='SOUND OFF'; }
    }
  }

  // Public API — the consent gate + bubble + SFX hooks all go through this.
  window.UXC = window.UXC || {};
  window.UXC.setSound = function(on){ state.on = !!on; sessionStorage.setItem('uxc_sound', on ? 'on':'off'); applyState(); };
  window.UXC.toggleSound = function(){ window.UXC.setSound(!state.on); };
  window.UXC.isSoundOn = function(){ return state.on; };
  window.UXC.play = function(key, vol){
    if (!state.on) return;                  // master gate: nothing plays when off
    try { var a = new Audio(AUD[key]); a.volume = (vol==null?0.6:vol); a.play().catch(function(){}); } catch(e){}
  };

  // Floating master toggle (bottom-right). Controls EVERYTHING now.
  function makeBubble(){
    if (document.getElementById('sound-bubble')) return;
    var b = document.createElement('button');
    b.id = 'sound-bubble'; b.type = 'button';
    b.setAttribute('aria-label','Toggle all sound');
    b.innerHTML = '<span class="sb-ico">\\u266A</span><span class="sb-txt">SOUND OFF</span>';
    document.body.appendChild(b);
    b.addEventListener('click', function(){ window.UXC.toggleSound(); });
    applyState();
  }
  if (document.readyState!=='loading') makeBubble();
  else document.addEventListener('DOMContentLoaded', makeBubble);

  // SFX: button clicks
  document.addEventListener('click', function(e){
    var t = e.target && e.target.closest && e.target.closest('#investigate-btn, #newcase-btn');
    if (t) window.UXC.play('click', 0.6);
  }, true);
  // SFX: thud when an image is dropped/picked
  var thudFired = false;
  document.addEventListener('change', function(e){
    var inp = e.target && e.target.matches && e.target.matches('#evidence-drop input[type=file]');
    if (inp && !thudFired){ window.UXC.play('thud', 0.85); thudFired = true; setTimeout(function(){thudFired=false;}, 1500); }
  }, true);
  // SFX: a single stamp hit on the verdict reveal
  function vis(sel){ var el=document.querySelector(sel); return !!(el && el.offsetParent !== null); }
  new MutationObserver(function(){
    var verdict = vis('.screen-verdict');
    if (verdict && !verdictPlayed){ verdictPlayed=true; window.UXC.play('verdict', 0.55); }
    if (!verdict){ verdictPlayed=false; }
  }).observe(document.body, {attributes:true, childList:true, subtree:true, attributeFilter:['style','class']});
})();
"""


def _build_audio_head() -> str:
    import json
    urls = {}
    for key, fname in AUDIO_FILES.items():
        p = ASSETS / "audio" / fname
        if p.exists():
            b64 = base64.b64encode(p.read_bytes()).decode("ascii")
            urls[key] = f"data:audio/mpeg;base64,{b64}"
    if not urls:
        return ""
    return "<script>\nvar AUD=" + json.dumps(urls) + ";\n" + _AUDIO_JS + "\n</script>"


AUDIO_HEAD = _build_audio_head()


_VOICE_JS = """
(function(){
  if (window.__uxcVoice) return; window.__uxcVoice = true;
  var V = VOICE_LINES || [];
  if (!V.length) return;
  var bag = [], lastIdx = -1, current = null, timer = null;
  function refill(){
    bag = V.map(function(_,i){ return i; });
    for (var i=bag.length-1;i>0;i--){ var j=Math.floor(Math.random()*(i+1)); var t=bag[i];bag[i]=bag[j];bag[j]=t; }
    if (bag.length>1 && bag[0]===lastIdx){ var t=bag[0];bag[0]=bag[1];bag[1]=t; }   // no immediate repeat
  }
  function sweepActive(){
    // Active the moment the laptop (sweep) is in the DOM — voices start right
    // away, even under the brief intro video (which has no audio of its own).
    var laptop = document.querySelector('.laptop-stage');
    if (!laptop) return false;
    var verdict = document.querySelector('.screen-verdict');
    if (verdict && verdict.getBoundingClientRect().height > 100) return false;
    return true;
  }
  function stop(){ if(timer){clearTimeout(timer);timer=null;} if(current){try{current.pause();}catch(e){} current=null;} }
  function schedule(ms){ clearTimeout(timer); timer = setTimeout(playOne, ms); }
  function playOne(){
    if (!sweepActive()){ stop(); return; }
    if (!window.UXC || !window.UXC.isSoundOn()){ schedule(2500); return; }   // respect master sound switch
    if (current){ schedule(1500); return; }
    if (bag.length===0) refill();
    var idx = bag.shift(); lastIdx = idx;
    try {
      var a = new Audio(V[idx]); a.volume = 0.46; current = a;   /* ~50% */
      a.onended = function(){ current=null; schedule(2600 + Math.random()*3200); };
      a.onerror = function(){ current=null; schedule(1800); };
      a.play().catch(function(){ current=null; schedule(2200); });
    } catch(e){ schedule(2200); }
  }
  new MutationObserver(function(){
    if (sweepActive()){ if (!timer && !current) schedule(1000); }
    else { stop(); }
  }).observe(document.body, {childList:true, subtree:true, attributes:true, attributeFilter:['class','style']});
})();
"""


def _build_voice_head() -> str:
    import json
    folder = ASSETS / "audio"
    uris = []
    for i in range(1, 13):
        p = folder / f"voice_{i:02d}.mp3"
        if p.exists():
            b64 = base64.b64encode(p.read_bytes()).decode("ascii")
            uris.append(f"data:audio/mpeg;base64,{b64}")
    if not uris:
        return ""
    return "<script>\nvar VOICE_LINES=" + json.dumps(uris) + ";\n" + _VOICE_JS + "\n</script>"


VOICE_HEAD = _build_voice_head()


def _bg_video_uri() -> str:
    p = ASSETS / "video" / "bg.mp4"
    if not p.exists():
        return ""
    return "data:video/mp4;base64," + base64.b64encode(p.read_bytes()).decode("ascii")


BG_VIDEO_URI = _bg_video_uri()


def _build_bg_video() -> str:
    """Fixed, dimmed, looping noir video behind everything (if present)."""
    if not BG_VIDEO_URI:
        return ""
    return (
        '<div id="bg-video-wrap"><video id="bg-video" autoplay loop muted playsinline '
        'preload="auto"><source src="' + BG_VIDEO_URI +
        '" type="video/mp4"></video></div>'
    )


def _sound_gate_html() -> str:
    """A consent screen shown FIRST: noir smoke background + a question + two
    buttons. YES grants audio (music + all SFX + intro sound); NO runs everything
    silent but never nags. The floating bubble can flip the choice any time."""
    smoke = (
        f'<video class="sg-smoke" autoplay loop muted playsinline preload="auto">'
        f'<source src="{BG_VIDEO_URI}" type="video/mp4"></video>'
        if BG_VIDEO_URI else ""
    )
    return f"""
<div id="sound-gate">
  {smoke}
  <div class="sg-scrim"></div>
  <div class="sg-inner">
    <div class="sg-emblem"></div>
    <div class="sg-kicker">PRECINCT 7 · UX DIVISION</div>
    <h2>This case has a soundtrack.</h2>
    <p>The Inspector works best with the blinds drawn and the volume up —
       rain, jazz, the click of the typewriter.<br>Roll the audio?</p>
    <div class="sg-btns">
      <button type="button" class="sg-yes" onclick="window.UXCGate&&UXCGate.decide(true)">▸ Yes, with sound</button>
      <button type="button" class="sg-no"  onclick="window.UXCGate&&UXCGate.decide(false)">Keep it quiet</button>
    </div>
    <div class="sg-foot">You can flip the sound any time with the ♪ button.</div>
  </div>
</div>
"""


SOUND_GATE_HTML = _sound_gate_html()

# Controller for the consent gate — lives in <head> so it runs natively.
SOUND_GATE_HEAD = """
<script>
(function(){
  if (window.__uxcGate) return; window.__uxcGate = true;
  function alley(){ return document.getElementById('intro-alley-video'); }
  function startAlley(withSound){
    var av = alley();
    if (!av) return;
    av.muted = !withSound;
    if (withSound){ try{ av.volume = 1.0; }catch(e){} }
    try { av.currentTime = 0; } catch(e){}
    av.play().catch(function(){ av.muted = true; av.play().catch(function(){}); });
  }
  window.UXCGate = {
    decide: function(on){
      if (window.UXC && window.UXC.setSound) window.UXC.setSound(on);
      var g = document.getElementById('sound-gate');
      if (g){ g.classList.add('gone'); setTimeout(function(){ if(g) g.remove(); }, 650); }
      sessionStorage.setItem('uxc_intro_seen', '1');   // alley runs once per session
      startAlley(on);
    }
  };
  function init(){
    // Shared result link (?case=ID): skip the gate + alley, land on the verdict.
    var shared = /[?&]case=/.test(location.search);
    var seen = sessionStorage.getItem('uxc_intro_seen') === '1';
    var g = document.getElementById('sound-gate');
    var av = alley();
    if (seen || shared){
      if (g) g.remove();
      var ia = document.getElementById('intro-alley'); if (ia) ia.remove();
      return;
    }
    // hold the alley paused at frame 0 until the user decides
    if (av){ try{ av.pause(); av.currentTime = 0; }catch(e){} }
  }
  if (document.readyState !== 'loading') init();
  else document.addEventListener('DOMContentLoaded', init);
  setTimeout(init, 250); setTimeout(init, 800);
})();
</script>
"""


def _intro_video_uri() -> str:
    """Base64 data-URI for the cinematic intro clip (detective opens laptop,
    camera pushes into the glowing screen). Used at the top of the sweep step,
    crossfading into the real scan of the user's screenshot."""
    p = ASSETS / "intro_detective.mp4"
    if not p.exists():
        return ""
    return "data:video/mp4;base64," + base64.b64encode(p.read_bytes()).decode("ascii")


def _laptop_frame() -> tuple[str, dict]:
    """Return (data URI, screen-rect spec dict) for the laptop overlay if both
    files are present; else ('', {})."""
    png = ASSETS / "laptop_frame.png"
    spec = ASSETS / "laptop_frame.json"
    if not (png.exists() and spec.exists()):
        return "", {}
    import json
    uri = "data:image/png;base64," + base64.b64encode(png.read_bytes()).decode("ascii")
    return uri, json.load(open(spec))


BG_VIDEO_HTML = _build_bg_video()
INTRO_VIDEO_URI = _intro_video_uri()
LAPTOP_URI, LAPTOP_SPEC = _laptop_frame()


def _intro_alley_uri() -> str:
    p = ASSETS / "intro_alley.mp4"
    if not p.exists():
        return ""
    return "data:video/mp4;base64," + base64.b64encode(p.read_bytes()).decode("ascii")


INTRO_ALLEY_URI = _intro_alley_uri()


def _intro_alley_html() -> str:
    """First-load cinematic intro (alley walk to PRECINCT 7). Held paused by the
    sound gate, then played (with/without sound) once the user chooses. Sound is
    governed entirely by the consent gate + the floating bubble."""
    if not INTRO_ALLEY_URI:
        return ""
    return f"""
<div id="intro-alley">
  <video id="intro-alley-video" muted playsinline preload="auto"
         onended="document.getElementById('intro-alley').classList.add('ended'); setTimeout(function(){{var e=document.getElementById('intro-alley'); if(e) e.remove();}}, 1200);">
    <source src="{INTRO_ALLEY_URI}" type="video/mp4">
  </video>
  <div class="intro-vignette"></div>
  <button type="button" class="skip-intro" onclick="
    var e=document.getElementById('intro-alley');
    if(e){{ var v=e.querySelector('video'); if(v) v.pause(); e.classList.add('ended'); setTimeout(function(){{e.remove();}},800); }}
    sessionStorage.setItem('uxc_intro_seen','1');
  ">Skip intro ▸</button>
</div>
"""


INTRO_ALLEY_HTML = _intro_alley_html()


def _laptop_overlay_html() -> str:
    """Single fixed laptop image at the bottom of the viewport (its empty
    'screen' lines up with the wizard above it). On phones/tablets it folds
    away to avoid the floating laptop look."""
    if not LAPTOP_URI:
        return ""
    return f'<div id="laptop-overlay" aria-hidden="true"><img src="{LAPTOP_URI}" alt=""/></div>'


LAPTOP_OVERLAY_HTML = _laptop_overlay_html()
HAS_PAPER = ASSET_PRESENT.get("paper.jpg", False)
HAS_GRADE = ASSET_PRESENT.get("grade_seal.png", False)
HAS_STAMP = ASSET_PRESENT.get("stamp_confidential.png", False)
HAS_MAGNIFIER = ASSET_PRESENT.get("magnifier.png", False)

SEV_COLORS = {"capital": "#c0392b", "high": "#e74c3c", "medium": "#e67e22", "low": "#f1c40f"}
VALID_SEV = set(SEV_COLORS)


def _sev_class(sev: str) -> str:
    return sev if sev in VALID_SEV else "medium"


def _img_data_uri(image: Image.Image, max_side: int | None = None, jpeg: bool = False) -> str:
    """Encode a PIL image as a data URI. Optionally downscale (keeps the DOM light
    on big screenshots) and use JPEG (much smaller than PNG for photos)."""
    img = image.convert("RGB")
    if max_side and max(img.size) > max_side:
        img = img.copy()
        img.thumbnail((max_side, max_side), Image.LANCZOS)
    buf = io.BytesIO()
    if jpeg:
        img.save(buf, format="JPEG", quality=82)
        mime = "image/jpeg"
    else:
        img.save(buf, format="PNG")
        mime = "image/png"
    return f"data:{mime};base64," + base64.b64encode(buf.getvalue()).decode("ascii")


# ---------------------------------------------------------------------------
# Loading scene
# ---------------------------------------------------------------------------
def _loading_html(image: Image.Image) -> str:
    uri = _img_data_uri(image, max_side=1280, jpeg=True)   # light: it's just the scan backdrop
    mag_class = "magnifier has-asset" if HAS_MAGNIFIER else "magnifier"

    # FULL-SCREEN cinematic intro video: covers the entire viewport while it
    # plays. When it ends, fade it out and reveal the laptop + scan beneath.
    # During the video, the rest of the sweep UI (the laptop, meta bar, inspector)
    # is hidden by .has-intro on .sweep-viewer.
    intro = ""
    intro_class = ""
    if INTRO_VIDEO_URI:
        intro = (
            '<div class="intro-fullscreen">'
            '<video class="intro-video" autoplay muted playsinline preload="auto" '
            'onended="this.classList.add(\'ended\'); this.parentElement.classList.add(\'ended\'); '
            'document.querySelector(\'.sweep-viewer\').classList.remove(\'has-intro\');">'
            f'<source src="{INTRO_VIDEO_URI}" type="video/mp4"></video></div>'
        )
        intro_class = "has-intro"

    # Position the scan inside the laptop screen rect (json from process_laptop.py).
    # If the laptop asset isn't present, fall back to no frame.
    s = LAPTOP_SPEC
    if s:
        screen_style = (
            f'left:{s["screen_left_pct"]:.3f}%;top:{s["screen_top_pct"]:.3f}%;'
            f'width:{s["screen_width_pct"]:.3f}%;height:{s["screen_height_pct"]:.3f}%'
        )
        laptop_img = f'<img class="laptop-frame-img" src="{LAPTOP_URI}" alt=""/>' if LAPTOP_URI else ''
        body = f"""
<div class="laptop-stage">
  {laptop_img}
  <div class="laptop-screen" style="{screen_style}">
    <div class="scan-stage">
      <img class="scan-photo" src="{uri}" alt="scanning"/>
      <div class="{mag_class}"><div class="glass"></div><div class="handle"></div></div>
      <div class="scan-grain"></div>
    </div>
  </div>
  {_inspector_rotator_html()}
</div>"""
    else:
        body = f"""
<div class="scan-stage">
  <img class="scan-photo" src="{uri}" alt="scanning"/>
  <div class="{mag_class}"><div class="glass"></div><div class="handle"></div></div>
  <div class="scan-grain"></div>
</div>"""

    return f"""
{intro}
<div class="viewer big sweep-viewer {intro_class}">
  {body}
  <div class="scan-status-bar">
    <span class="rec"><span class="rec-dot">●</span> REC</span>
    <span class="scan-ch">CAM·07 · <span class="scan-time" data-start="{int(time.time()*1000)}">00:00</span></span>
    <span class="scan-status">
      <span>Sweeping the scene for suspects…</span>
      <span>Marking the evidence…</span>
      <span>Examining each exhibit up close…</span>
      <span>Confirming the charges…</span>
      <span>Filing the report…</span>
    </span>
  </div>
  <div class="scan-progress" role="progressbar" aria-label="Investigation in progress">
    <span class="sp-bar"></span>
  </div>
  <div class="scan-eta">A thorough investigation takes 1–3 minutes — the Inspector doesn't rush. First case of the night can take a little longer while the lab warms up.</div>
</div>
"""


# Live timer for the .scan-time element. Lives in <head> so it runs natively
# (gr.HTML innerHTML scripts get sanitized). It polls every second; cheap.
SCAN_TIMER_HEAD = """
<script>
(function(){
  if (window.__uxcScanTimer) return; window.__uxcScanTimer = true;
  setInterval(function(){
    document.querySelectorAll('.scan-time').forEach(function(t){
      var start = parseInt(t.getAttribute('data-start'),10);
      if (!start) return;
      var s = Math.max(0, Math.floor((Date.now()-start)/1000));
      var m = Math.floor(s/60), r = s%60;
      t.textContent = (m<10?'0':'')+m+':'+(r<10?'0':'')+r;
    });
  }, 1000);
})();
</script>"""


# ---------------------------------------------------------------------------
# Interactive evidence board (full-width, large)
# ---------------------------------------------------------------------------
def _board_html(image: Image.Image, case: CaseFile) -> str:
    uri = _img_data_uri(image)
    W, H = image.size
    pins, rects = [], []
    for i, ev in enumerate(case.evidence):
        x1, y1, x2, y2 = ev.bbox
        color = SEV_COLORS.get(ev.severity, "#e74c3c")
        lpct, tpct = x1 / W * 100, y1 / H * 100
        wpct = max(0.0, (x2 - x1)) / W * 100
        hpct = max(0.0, (y2 - y1)) / H * 100
        cxpct = (x1 + x2) / 2 / W * 100
        cypct = (y1 + y2) / 2 / H * 100
        flip = "flip" if cxpct > 62 else ""
        rects.append(
            f'<div class="ev-rect" style="--c:{color};--i:{i};'
            f'left:{lpct:.2f}%;top:{tpct:.2f}%;width:{wpct:.2f}%;height:{hpct:.2f}%"></div>'
        )
        # Pin is centered on the bbox so it always sits on the marked region.
        pins.append(
            f'<a class="ev-pin {flip}" href="#ev-row-{esc(ev.id)}" '
            f'style="--c:{color};--i:{i};left:{cxpct:.2f}%;top:{cypct:.2f}%">'
            f'<span class="ring"></span>'
            f'<span class="num">{esc(ev.id)}</span>'
            f'<span class="pop"><b>{esc(ev.crime)}</b>'
            f'<span class="pop-sev {_sev_class(ev.severity)}">{esc(ev.severity)}</span></span>'
            f"</a>"
        )
    return f"""
<div class="viewer big">
  <div class="board-stage">
    <img class="board-photo" src="{uri}" alt="Annotated screenshot with numbered evidence markers"/>
    {''.join(rects)}
    {''.join(pins)}
  </div>
  <div class="board-hint">▸ Tap a numbered marker to jump to that charge in the file</div>
</div>
"""


# ---------------------------------------------------------------------------
# Error dossier
# ---------------------------------------------------------------------------
def _render_error_html(message: str) -> str:
    return f"""
<div class="case-file">
  <div class="stamp-confidential">UNSOLVED</div>
  <div class="cf-meta">
    <div class="cf-num">CASE FILE&nbsp;&nbsp;Nº&nbsp;XXXX</div>
    <div class="cf-num">STATUS&nbsp;&nbsp;<span class="redacted">UNRESOLVED</span></div>
  </div>
  <div class="cf-title">Line Went Dead Mid-Interrogation</div>
  <div class="cf-summary">The wire to the crime lab went dead. Start a new case and try again.</div>
  <h3>Field Notes</h3>
  <div class="evidence-item" style="--i:0">
    <div class="ev-num">!</div>
    <div><div class="ev-crime">Investigation Interrupted</div>
    <div class="ev-test">{esc(message)}</div></div>
    <div class="ev-sev high">RETRY</div>
  </div>
</div>
"""


_FONT_DIR = ASSETS / "fonts"
_FONT_FILES = {
    "display": _FONT_DIR / "Anton-Regular.ttf",       # big condensed titles
    "type": _FONT_DIR / "SpecialElite-Regular.ttf",   # typewriter body
    "label": _FONT_DIR / "Oswald.ttf",                # uppercase labels
}


def _card_font(size: int, role: str = "display"):
    from PIL import ImageFont
    p = _FONT_FILES.get(role)
    if p and p.exists():
        try:
            return ImageFont.truetype(str(p), size=size)
        except (OSError, IOError):
            pass
    for n in ("DejaVuSans-Bold.ttf", "arialbd.ttf"):
        try:
            return ImageFont.truetype(n, size=size)
        except (OSError, IOError):
            continue
    return ImageFont.load_default()


def _make_share_card(annotated: Image.Image, case: CaseFile) -> Image.Image:
    """Compose a branded share image in the app's noir style: charcoal header
    (UX CRIME SCENE + grade seal) + the annotated screenshot + a cream case-file
    footer with the title, the top charges, and the verdict."""
    from PIL import ImageDraw

    src = annotated.convert("RGB")
    if src.width > 1200:
        src = src.copy(); src.thumbnail((1200, 100000), Image.LANCZOS)
    W = src.width

    # Match the on-screen language: cleared (A/B) = green, everything else = blood.
    sev_color = {"A": (46, 158, 91), "B": (46, 158, 91)}.get(case.grade, (192, 57, 43))
    INK = (26, 24, 22); CREAM = (237, 228, 207); BLOOD = (192, 57, 43); GOLD = (241, 196, 15)

    head_h = 104
    # footer height scales with how many charges we list (up to 3)
    charges = case.evidence[:3]
    foot_h = 150 + len(charges) * 34
    card = Image.new("RGB", (W, head_h + src.height + foot_h), INK)
    card.paste(src, (0, head_h))
    d = ImageDraw.Draw(card)

    # ---- header ----
    d.rectangle([0, 0, W, head_h], fill=(24, 22, 20))
    d.rectangle([0, head_h - 5, W, head_h], fill=BLOOD)
    d.text((28, 20), "UX CRIME SCENE", font=_card_font(46, "display"), fill=CREAM)
    d.text((30, 74), "PRECINCT 7 · UX DIVISION · THE NIGHT INSPECTOR",
           font=_card_font(15, "label"), fill=GOLD)
    # grade seal (right)
    bs = 72; bx, by = W - bs - 28, (head_h - bs) // 2
    d.ellipse([bx - 4, by - 4, bx + bs + 4, by + bs + 4], outline=GOLD, width=2)
    d.ellipse([bx, by, bx + bs, by + bs], fill=sev_color, outline=(0, 0, 0), width=3)
    gf = _card_font(48, "display")
    gb = d.textbbox((0, 0), case.grade, font=gf)
    d.text((bx + (bs - (gb[2] - gb[0])) / 2 - gb[0], by + (bs - (gb[3] - gb[1])) / 2 - gb[1]),
           case.grade, font=gf, fill=(255, 255, 255))

    # ---- footer (case file) ----
    fy = head_h + src.height
    d.rectangle([0, fy, W, card.height], fill=CREAM)
    d.rectangle([0, fy, W, fy + 5], fill=BLOOD)
    y = fy + 20
    title = case.case_title if len(case.case_title) <= 46 else case.case_title[:45] + "…"
    d.text((28, y), title.upper(), font=_card_font(34, "display"), fill=INK); y += 48
    # top charges
    for i, ev in enumerate(charges, 1):
        cc = {"capital": (192, 57, 43), "high": (231, 76, 60), "medium": (230, 126, 34),
              "low": (200, 160, 20)}.get(ev.severity, (120, 40, 30))
        d.ellipse([28, y + 2, 50, y + 24], fill=cc)
        nb = d.textbbox((0, 0), str(i), font=_card_font(15, "display"))
        d.text((28 + (22 - (nb[2]-nb[0]))/2 - nb[0], y + 3), str(i), font=_card_font(15, "display"), fill=(255,255,255))
        ct = ev.crime if len(ev.crime) <= 58 else ev.crime[:57] + "…"
        d.text((62, y + 2), ct, font=_card_font(19, "type"), fill=(50, 40, 30)); y += 34
    y += 8
    _cleared = str(case.grade).upper() in {"A", "B"}
    _vtail = ("scene came back clean" if _cleared
              else f"{len(case.evidence)} crimes against the user")
    d.text((28, y), f"VERDICT: {case.verdict}  ·  {_vtail}",
           font=_card_font(22, "display"),
           fill=(46, 158, 91) if _cleared else BLOOD); y += 36
    d.text((28, y), "Put your own UI on trial → build-small-hackathon/ux-crime-scene",
           font=_card_font(16, "type"), fill=(110, 92, 66))
    return card


def _share_card_uri(annotated: Image.Image | None, case: CaseFile) -> str:
    """Data URI of the branded share card (falls back to the bare annotated shot)."""
    if annotated is None:
        return ""
    try:
        return _img_data_uri(_make_share_card(annotated, case), jpeg=True)
    except Exception:
        return _img_data_uri(annotated, max_side=1700, jpeg=True)


def _hero_html(clean: Image.Image, case: CaseFile) -> str:
    """The verdict hero: the CLEAN screenshot with the Inspector's evidence circles
    DRAWN ON live (animated grease-pencil ellipses via SVG, stamped numbers,
    revealed one by one). Hover a circle for the charge; click to jump to the file.
    The download button serves the baked PIL version (same circles, static)."""
    disp = _img_data_uri(clean, max_side=1700, jpeg=True)
    W, H = clean.size

    circles, pins = [], []
    for i, ev in enumerate(case.evidence):
        x1, y1, x2, y2 = ev.bbox
        color = SEV_COLORS.get(ev.severity, "#e74c3c")
        # pad the ellipse out so it ENCIRCLES the element
        px = max(6, (x2 - x1) * 0.07)
        py = max(6, (y2 - y1) * 0.07)
        cx, cy = (x1 + x2) / 2, (y1 + y2) / 2
        rx, ry = (x2 - x1) / 2 + px, (y2 - y1) / 2 + py
        circles.append(
            f'<ellipse class="draw-ring" pathLength="1" cx="{cx:.0f}" cy="{cy:.0f}" '
            f'rx="{rx:.0f}" ry="{ry:.0f}" stroke="{color}" filter="url(#rough)" '
            f'style="--i:{i}"/>'
        )
        # numbered placard pinned to the top-left of the circle. Clamp so the
        # badge never hangs off the image edge (it's translated -50%,-50%), which
        # would otherwise force a horizontal scrollbar on narrow screens.
        lpct = min(96.0, max(3.0, (cx - rx) / W * 100))
        tpct = min(96.0, max(4.0, (cy - ry) / H * 100))
        cxpct = cx / W * 100
        flip = "flip" if cxpct > 62 else ""
        pins.append(
            f'<a class="ev-pin {flip}" href="#ev-row-{esc(ev.id)}" '
            f'aria-label="Charge {esc(ev.id)}: {esc(ev.crime)} ({esc(ev.severity)})" '
            f'style="--c:{color};--i:{i};left:{lpct:.2f}%;top:{tpct:.2f}%">'
            f'<span class="num">{esc(ev.id)}</span>'
            f'<span class="pop"><b>#{esc(ev.id)} · {esc(ev.crime)}</b>{esc(ev.testimony)}</span>'
            f"</a>"
        )

    # Severity legend — decode the marker colours (only the ones actually present).
    _sev_order = ["capital", "high", "medium", "low"]
    _present = [s for s in _sev_order if any(ev.severity == s for ev in case.evidence)]
    legend_items = "".join(
        f'<span class="lg-item"><span class="lg-dot" '
        f'style="background:{SEV_COLORS.get(s, "#e74c3c")}"></span>{s}</span>'
        for s in _present
    )
    legend_html = (
        f'<div class="hero-legend" aria-label="Severity legend">{legend_items}</div>'
        if legend_items else ""
    )

    # The verdict masthead lives in the topbar and the download in the share panel
    # now (broadcast layout) — the hero is the pure evidence feed.
    insp = (f'<img class="feed-insp" src="{INSPECTOR_NOTES}" alt=""/>'
            if INSPECTOR_NOTES else "")
    return f"""
<div class="feed-tag">EXHIBIT A — CHARGES CIRCLED ON THE REAL PIXELS · hover a marker · click to jump to the file</div>
{legend_html}
<div class="hero-wrap">
  <img class="hero-photo" src="{disp}" alt="Screenshot under investigation"/>
  <svg class="hero-svg" viewBox="0 0 {W} {H}" preserveAspectRatio="none" aria-hidden="true">
    <defs>
      <filter id="rough"><feTurbulence type="fractalNoise" baseFrequency="0.012 0.018"
        numOctaves="2" seed="7" result="n"/>
        <feDisplacementMap in="SourceGraphic" in2="n" scale="9"/></filter>
    </defs>
    {''.join(circles)}
  </svg>
  {''.join(pins)}
  {insp}
</div>
"""


def _archive_html() -> str:
    """The Precinct Archive: a records-room drawer of famous interfaces the
    Inspector has already booked. Folders link to REAL stored cases (?case=ID).
    Renders nothing if the manifest is missing (graceful)."""
    import json as _json

    manifest_path = ASSETS / "archive" / "manifest.json"
    if not manifest_path.exists():
        return ""
    try:
        cases = _json.loads(manifest_path.read_text(encoding="utf-8"))
    except Exception:
        return ""

    folders = []
    for i, c in enumerate(cases):
        if not c.get("case_id"):
            continue
        try:
            thumb = _img_data_uri(
                Image.open(ASSETS / "archive" / c["thumb"]).convert("RGB"),
                max_side=420, jpeg=True,
            )
        except Exception:
            continue
        cleared = str(c.get("grade", "")).upper() in {"A", "B"}
        seal_cls = "arch-seal good" if cleared else "arch-seal"
        stamp = "" if cleared else '<div class="arch-stamp">GUILTY</div>'
        n = c.get("n_crimes", 0)
        line2 = "case dismissed" if cleared else f"{n} charge{'s' if n != 1 else ''} on file"
        folders.append(f"""
    <a class="arch-folder" href="?case={esc(c['case_id'])}" target="_blank" rel="noopener"
       style="--i:{i}">
      <span class="arch-tab">CASE {esc(str(i + 1).zfill(2))}{esc(c['case_id'][:2].upper())}</span>
      <span class="arch-clip"></span>
      <span class="arch-shot"><img src="{thumb}" alt="{esc(c['site'])}"/></span>
      {stamp}
      <span class="arch-meta">
        <span class="arch-line"><b>{esc(c['site'])}</b><br>{esc(c['title'])}<br>{esc(line2)}</span>
        <span class="{seal_cls}">{esc(c.get('grade', '?'))}</span>
      </span>
    </a>""")
    if not folders:
        return ""

    return f"""
<div class="archive-details" id="precinct-archive">
  <div class="archive-summary" role="button" tabindex="0">— or browse the precinct archive: famous scenes, already booked —</div>
  <div class="arch-drawer">
    <div class="arch-drawer-tag">DRAWER C-7 · CLOSED CASES</div>
    <div class="arch-rail">{''.join(folders)}</div>
    <div class="arch-hint">— every folder reopens its full case file —</div>
  </div>
</div>"""


# Brand icons (inline SVG, white fill) for the share buttons.
_SVG_X = ('<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308'
          'l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08'
          'l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>')
_SVG_WA = ('<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.057 24l1.687-6.163'
           'a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488'
           'a11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448zM6.6'
           ' 20.13c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892'
           '-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648zM17.5 14.382c-.074-.124-.272-.198'
           '-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.767.967-.94 1.165'
           '-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059'
           '-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521'
           '-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372'
           '-.272.297-1.04 1.016-1.04 2.479s1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489'
           '1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>')
_SVG_FB = ('<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.073c0-6.627-5.373-12-12-12'
           's-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669'
           '4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532'
           '3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>')
_SVG_LI = ('<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569'
           'c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046'
           'c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065'
           ' 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729'
           'v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>')


def _case_url(case_id: str | None) -> str:
    """The shareable URL: the unique result link if we stored it, else the tool."""
    if case_id:
        sep = "&" if "?" in TOOL_URL else "?"
        return f"{TOOL_URL}{sep}case={urllib.parse.quote(case_id)}"
    return TOOL_URL


# ---------------------------------------------------------------------------
# MOST WANTED — a living, public board: the worst interfaces the precinct has
# booked, ranked by crimes. Seeded with the real archive cases (always full),
# styled like a noir city notice-wall. Uses custom assets when present, else a
# bespoke CSS treatment. Every poster reopens its real case (?case=ID).
# ---------------------------------------------------------------------------
_GRADE_GROUP = {"A": "g-clear", "B": "g-clear", "C": "g-c", "D": "g-d", "F": "g-f"}


def _most_wanted_html(published: list[dict] | None = None) -> str:
    import json as _json

    mpath = ASSETS / "archive" / "manifest.json"
    seeds = []
    if mpath.exists():
        try:
            seeds = [c for c in _json.loads(mpath.read_text(encoding="utf-8"))
                     if c.get("case_id")]
        except Exception:
            seeds = []

    # the founding cases (real famous sites) carry a local thumbnail; user-
    # published cases carry an inline thumb_b64. Unify into one entry shape.
    seed_ids = {c["case_id"] for c in seeds}
    entries = []
    for c in seeds:
        try:
            thumb = _img_data_uri(
                Image.open(ASSETS / "archive" / c["thumb"]).convert("RGB"),
                max_side=380, jpeg=True)
        except Exception:
            continue
        entries.append({"id": c["case_id"], "name": c.get("site") or c.get("title", "a case"),
                        "title": c.get("title", ""), "grade": c.get("grade", "?"),
                        "n": int(c.get("n_crimes", 0)), "thumb": thumb})
    n_user = 0
    for c in (published or []):
        cid = str(c.get("id", ""))
        if not cid or cid in seed_ids:        # never duplicate a founding case
            continue
        seed_ids.add(cid)
        tb = c.get("thumb_b64", "")
        thumb = f"data:image/jpeg;base64,{tb}" if tb else ""
        entries.append({"id": cid, "name": c.get("site") or c.get("title") or "a booked case",
                        "title": c.get("title", ""), "grade": c.get("grade", "?"),
                        "n": int(c.get("n_crimes", 0) or 0), "thumb": thumb, "user": True})
        n_user += 1
    if not entries:
        return ""
    entries.sort(key=lambda e: (-e["n"], str(e["grade"])))

    # aggregate stats (real, from the booked cases) — grows with user publishes
    stats = {}
    spath = ASSETS / "mostwanted" / "city_stats.json"
    if spath.exists():
        try:
            stats = _json.loads(spath.read_text(encoding="utf-8"))
        except Exception:
            stats = {}
    n_sites = len(entries)
    n_crimes = stats.get("crimes_on_file", 0) + sum(e["n"] for e in entries if e.get("user"))
    if not stats.get("crimes_on_file"):
        n_crimes = sum(e["n"] for e in entries)
    top = stats.get("top_crimes", [])
    top1 = top[0]["name"] if top else "Buried CTA"

    sign = _asset_data_uri("mostwanted/sign.png")
    wall = _asset_data_uri("mostwanted/wall.jpg")
    title = (f'<img class="mw-sign" src="{sign}" alt="MOST WANTED"/>' if sign
             else '<h1 class="mw-title">MOST WANTED</h1>')
    # the wall is painted as a FIXED, full-viewport body background (set via a CSS var)
    # so it covers the whole screen — no black strip behind the back button / margins.
    wall_var = (f"<style>body.uxc-mostwanted{{--mw-wall:url('{wall}')}}</style>"
                if wall else "")

    rows = []
    for i, e in enumerate(entries, 1):
        gcls = _GRADE_GROUP.get(str(e["grade"]).upper(), "g-c")
        n = e["n"]
        rankcls = f"mw-rank r{i}" if i <= 3 else "mw-rank"
        flag = '<span class="mw-fresh">NEW</span>' if e.get("user") else ""
        charge = esc(e["title"]) if e.get("title") else "multiple counts on file"
        rows.append(f"""
      <a class="mw-rec" href="?case={esc(e['id'])}" target="_blank" rel="noopener">
        <span class="{rankcls}">{i}</span>
        <span class="mw-shot"><img src="{e['thumb']}" alt="{esc(e['name'])}"/>{flag}</span>
        <span class="mw-meta">
          <b class="mw-site">{esc(e['name'])}</b>
          <span class="mw-charge"><i>TOP CHARGE</i> {charge}</span>
        </span>
        <span class="mw-count"><b>{n}</b><span>crime{'s' if n != 1 else ''}</span></span>
        <span class="mw-seal {gcls}" title="case grade">{esc(e['grade'])}</span>
        <span class="mw-view">VIEW ▸</span>
      </a>""")

    bars = ""
    if top:
        mx = max(t["count"] for t in top) or 1
        bars = "".join(
            f'<div class="mw-epi"><span class="mw-en">{esc(t["name"])}</span>'
            f'<span class="mw-eb"><i style="width:{int(t["count"]/mx*100)}%"></i></span>'
            f'<span class="mw-ec">{t["count"]}</span></div>'
            for t in top)

    report = (f'"Another night in Precinct 7. {n_sites} interfaces booked, {n_crimes} crimes '
              f'on file, and not one came back clean. The <em>{esc(top1)}</em> is the city\'s '
              f'favourite crime — an epidemic, not a habit. Drag your own corner of the web in. '
              f'Nobody\'s innocent."')

    return f"""{wall_var}
<div class="mw-wrap">
  <div class="mw-inner">
    <div class="mw-head">{title}
      <div class="mw-sub">PRECINCT 7 · THE CITY'S WORST INTERFACES — BOOKED BY THE PUBLIC</div>
      <div class="mw-stats">
        <div class="mw-stat"><b>{n_sites}</b><span>SITES BOOKED</span></div>
        <div class="mw-stat"><b>{n_crimes}</b><span>CRIMES ON FILE</span></div>
        <div class="mw-stat"><b>{esc(top1)}</b><span>#1 CITY-WIDE CRIME</span></div>
      </div>
    </div>
    <div class="mw-grid">
      <div class="mw-board">
        <div class="mw-bh">▸ RANKED BY CRIMES ON FILE — the worst the precinct has booked</div>
        {''.join(rows)}
      </div>
      <div class="mw-side">
        <div class="mw-report"><div class="mw-rh"><b>▤</b> THE INSPECTOR'S CITY REPORT</div>
          <div class="mw-body">{report}</div>
          <div class="mw-rh" style="margin-top:12px"><b>☣</b> THE CITY'S TOP CRIMES</div>
          {bars}
        </div>
        {(f'<div class="mw-mug"><img src="{MW_INSPECTOR_URI}" alt="The Inspector"/>'
          '<span>THE INSPECTOR · STILL ON THE BEAT</span></div>') if MW_INSPECTOR_URI else ''}
        <button type="button" class="mw-back-board">◂&nbsp; BACK TO THE DESK — put YOUR UI on trial</button>
      </div>
    </div>
  </div>
</div>
"""


# ---------------------------------------------------------------------------
# Step wizard bar
# ---------------------------------------------------------------------------
_STEP_LABELS = ["Evidence", "Investigating", "Verdict"]


def _steps_html(active: int, error: bool = False) -> str:
    parts = []
    for i, lbl in enumerate(_STEP_LABELS):
        cls = "active" if i == active else ("done" if i < active else "")
        if error and i == 2:
            cls, lbl = "error", "Case Cold"
        parts.append(f'<div class="step {cls}"><div class="dot">{i+1}</div><div class="lbl">{lbl}</div></div>')
        if i < len(_STEP_LABELS) - 1:
            parts.append('<div class="sep"></div>')
    return f'<div class="steps">{"".join(parts)}</div>'


# ---------------------------------------------------------------------------
# Wizard handlers (toggle screen visibility)
# ---------------------------------------------------------------------------
def _start(image: Image.Image | None):
    """Click → go to the Investigating screen with the scan running. Instant."""
    if image is None:
        return gr.update(), gr.update(), gr.update(), _steps_html(0)
    return (
        gr.update(visible=False),         # hide upload screen
        gr.update(visible=True),          # show sweep screen
        _loading_html(image),             # scan viewer
        _steps_html(1),
    )


def run_investigation(image: Image.Image | None):
    """Do the work, then reveal the Verdict screen.

    The hero image is the PIL-annotated screenshot (markers baked at exact pixel
    coords) — the single source of truth for marker placement. We dropped the
    HTML %-overlay board because its percentage mapping mis-placed markers while
    the PIL render was always correct; this also removes the duplicate image."""
    # Reset the power-up panels for the fresh case (cleared chat, hidden voice/reco).
    _reset = (gr.update(value="", visible=False),   # reco_out
              gr.update(value="", visible=False),   # voice_out
              [], _chat_html([]))                   # st_chat, chat_html
    if image is None:
        return (gr.update(visible=False), gr.update(visible=True),
                "", "", _render_error_html("No screenshot in the evidence bag."),
                "", _steps_html(2, error=True),
                None, None, None, *_reset)
    try:
        case = investigate_agentic(image)
    except Exception as e:
        traceback.print_exc()
        return (gr.update(visible=False), gr.update(visible=True),
                "", "", _render_error_html(f"{type(e).__name__}: {e}"),
                "", _steps_html(2, error=True),
                None, None, None, *_reset)
    try:
        annotated = annotate(image, case)
    except Exception as e:
        traceback.print_exc()
        annotated = None

    # Persist the result so it gets a unique shareable link (graceful: None if it
    # fails -> sharing falls back to the tool link).
    try:
        case_id = save_case(image, case)
    except Exception:
        case_id = None

    return (
        gr.update(visible=False),                    # hide sweep
        gr.update(visible=True),                     # show verdict
        _topbar_html(case),                          # verdict masthead
        _hero_html(image, case),                     # the evidence feed
        _file_panel_html(case),                      # case file (right rail)
        _share_panel_html(case, case_id, _share_card_uri(annotated, case)),
        _steps_html(2),
        image,                                       # st_image (for power-ups)
        case,                                        # st_case
        case_id,                                     # st_case_id (for publish)
        gr.update(value=RECO_DEVELOPING_HTML, visible=True),   # reco: developing…
        gr.update(value=VOICE_DEVELOPING_HTML, visible=True),  # voice: developing…
        [],                                          # st_chat
        _chat_html([]),                              # chat_html
    )


# ---------------------------------------------------------------------------
# Verdict broadcast layout: topbar, file panel, reconstruction grid, share panel
# ---------------------------------------------------------------------------
def _topbar_html(case: CaseFile) -> str:
    """The verdict masthead: emblem logo + grade seal + typed case title."""
    cleared = str(case.grade).upper() in {"A", "B"}
    n = len(case.evidence)
    tail = ("SCENE CAME BACK CLEAN" if cleared
            else f"{n} CHARGE{'S' if n != 1 else ''} ON FILE")
    emblem = _asset_data_uri("emblem.png")
    logo = (f'<span class="vt-logo"><img src="{emblem}" alt=""/></span>' if emblem else "")
    gcls = "vt-grade cleared" if cleared else "vt-grade"
    return f"""
<div class="vt-bar">
  <span class="vt-seg">
    {logo}
    <span class="vt-brand"><b>UX CRIME SCENE</b>PRECINCT 7 · UX DIVISION</span>
  </span>
  <span class="vt-seg vt-seg-case">
    <span class="{gcls}">{esc(case.grade)}</span>
    <span class="vt-text">
      <span class="vt-title twjs">{esc(case.case_title)}</span>
      <span class="vt-sub">VERDICT: {esc(case.verdict)} · {tail} · CASE Nº {esc(case.case_number)}</span>
    </span>
  </span>
</div>
"""


def _file_panel_html(case: CaseFile) -> str:
    """The case file as a dark broadcast panel (right rail)."""
    cleared = str(case.grade).upper() in {"A", "B"}
    stamp = "CLEARED" if cleared else "GUILTY"
    rows = "".join(
        f"""
      <div class="fp-charge" id="ev-row-{esc(ev.id)}" style="--i:{i}">
        <span class="fp-num">{esc(ev.id)}</span>
        <div class="fp-body">
          <div class="fp-crime">{esc(ev.crime)} · <i class="fp-sev {_sev_class(ev.severity)}">{esc(ev.severity)}</i></div>
          <div class="fp-test twjs">"{esc(ev.testimony)}"</div>
        </div>
      </div>"""
        for i, ev in enumerate(case.evidence)
    )
    return f"""
<div class="file-panel{' cleared' if cleared else ''}">
  <div class="fp-head"><span><b>▸</b> CASE FILE Nº {esc(case.case_number)}</span><span class="fp-stamp">{stamp}</span></div>
  <div class="fp-scroll">
    <div class="fp-summary twjs">{esc(case.scene_summary)}</div>
    {rows}
    <div class="fp-closing twjs">"{esc(case.closing_statement)}"</div>
  </div>
</div>
"""


def _reco_grid_html(items, total_charges: int) -> str:
    """Per-charge before/after comparators: thumbnail strip + :target modals with
    a draggable split slider (the range input is wired by COMPARE_HEAD JS)."""
    if not items:
        return ('<div class="reco-note">The lab could not develop any reconstruction — '
                'the wire may be cold. Try again in a moment.</div>')
    thumbs, modals = [], []
    for ev, before, after in items:
        b = _img_data_uri(before, max_side=720, jpeg=True)
        a = _img_data_uri(after, max_side=720, jpeg=True)
        fix = esc(getattr(ev, "fix", "") or "a cleaner, higher-contrast treatment")
        thumbs.append(f"""
      <a class="rk" href="#cmp-{esc(ev.id)}">
        <span class="rk-num">{esc(ev.id)}</span>
        <img src="{a}" alt="Reconstruction of exhibit {esc(ev.id)}"/>
        <span class="rk-zoom"><span>⤢ COMPARE BEFORE / AFTER</span></span>
        <span class="rk-badge">REBUILT BY FLUX ✚</span>
      </a>""")
        modals.append(f"""
  <div class="cmp-modal" id="cmp-{esc(ev.id)}">
    <a class="cmp-bg" href="#hero-img" aria-label="Close"></a>
    <div class="cmp-box">
      <a class="cmp-close" href="#hero-img">✕</a>
      <div class="cmp-h">▣ THE RECONSTRUCTION — EXHIBIT #{esc(ev.id)}</div>
      <div class="cmp-s">"{esc(ev.crime)}" · remedy: {fix} · rebuilt live by FLUX.2 Klein</div>
      <div class="cmp">
        <img class="cmp-before" src="{b}" alt="before"/>
        <img class="cmp-after" src="{a}" alt="after"/>
        <div class="cmp-handle"></div>
        <span class="cmp-lb l">AS FOUND</span><span class="cmp-lb r">REBUILT ✚</span>
        <input class="cmp-rng" type="range" min="0" max="100" value="50" aria-label="Compare before and after"/>
      </div>
    </div>
  </div>""")
    note = ""
    if len(items) < total_charges:
        note = (f'<div class="reco-note">{len(items)} of {total_charges} exhibits developed — '
                f'the rest resisted the lab.</div>')
    return f'<div class="rk-strip">{"".join(thumbs)}</div>{"".join(modals)}{note}'


def _share_panel_html(case: CaseFile, case_id: str | None, dl_uri: str = "") -> str:
    url = _case_url(case_id)
    cleared = str(case.grade).upper() in {"A", "B"}
    tail = ("The scene came back clean." if cleared
            else f"{len(case.evidence)} crimes against the user.")
    text = (f"THE INSPECTOR'S VERDICT: {case.grade} — \"{case.case_title}\". "
            f"{tail} See the full case file:")
    enc_text = urllib.parse.quote(text)
    enc_url = urllib.parse.quote(url)
    tweet = f"https://twitter.com/intent/tweet?text={enc_text}&url={enc_url}"
    whatsapp = f"https://wa.me/?text={urllib.parse.quote(text + ' ' + url)}"
    facebook = f"https://www.facebook.com/sharer/sharer.php?u={enc_url}&quote={enc_text}"
    linkedin = f"https://www.linkedin.com/sharing/share-offsite/?url={enc_url}"
    dl = (f'<a class="sp-dl" href="{dl_uri}" download="ux-crime-scene-{esc(case.case_number)}.jpg">'
          f'↓ DOWNLOAD THE SHARE CARD</a>' if dl_uri else "")
    return f"""
<div class="share-panel">
  <div class="sp-row1">
    {dl}
    <a class="sp-btn x" href="{tweet}" target="_blank" rel="noopener" aria-label="Share on X">{_SVG_X}</a>
    <a class="sp-btn wa" href="{whatsapp}" target="_blank" rel="noopener" aria-label="Share on WhatsApp">{_SVG_WA}</a>
    <a class="sp-btn fb" href="{facebook}" target="_blank" rel="noopener" aria-label="Share on Facebook">{_SVG_FB}</a>
    <a class="sp-btn li" href="{linkedin}" target="_blank" rel="noopener" aria-label="Share on LinkedIn">{_SVG_LI}</a>
  </div>
  <div class="sp-row2">
    <span class="sp-link" id="sp-link">{esc(url)}</span>
    <button type="button" class="sp-copy" data-link="{esc(url)}">⧉ COPY</button>
  </div>
</div>
"""


VOICE_DEVELOPING_HTML = ("""
<div class="lab-load">
  <span class="ll-ring"></span>
  <div class="ll-txt">THE INSPECTOR IS CLEARING HIS THROAT
    <span class="ll-bar"></span>
    <small>recording the narration on reel Nº 7…</small>
  </div>
</div>""")

_AVATAR_URI = _asset_data_uri("inspector_avatar.png")


def _voice_player_html(wav_b64: str) -> str:
    """The verdict tape player: red round ▶, a waveform that FILLS with gold as
    it plays (click anywhere on it to seek), and a reel-style time readout.
    The <audio> is embedded as a data URI; the head JS drives everything."""
    # deterministic pseudo-random bar heights — looks like a real waveform
    bars = "".join(f'<i style="--h:{6 + (i * 53 + 17) % 22}px"></i>' for i in range(28))
    return f"""
<div class="vp">
  <button class="vp-btn" type="button" aria-label="Play the verdict">▶</button>
  <div class="vp-main">
    <div class="vp-wave" title="Click to scrub the tape">{bars}</div>
    <div class="vp-meta">
      <span class="vp-time">0:00</span>
      <span class="vp-lbl">REEL Nº 7 · THE VERDICT, READ ALOUD</span>
      <span class="vp-dur">–:––</span>
    </div>
  </div>
  <audio preload="auto" src="data:audio/wav;base64,{wav_b64}"></audio>
</div>
"""


def do_publish(image, case, case_id):
    """Opt-in: book this case onto the public MOST WANTED board.
    Returns (note, publish_btn, mw_view_btn)."""
    if image is None or case is None or not case_id:
        return (gr.update(value='<div class="pub-note">File a fresh case first.</div>',
                          visible=True), gr.update(), gr.update())
    ok = publish_case(image, case, case_id)
    if ok:
        # booked — retire the publish button, surface the "see it on the board" jump
        return (gr.update(value='<div class="pub-note ok">✓ Booked. Your case is on the '
                                'public <b>MOST WANTED</b> board now.</div>', visible=True),
                gr.update(visible=False), gr.update(visible=True))
    return (gr.update(value='<div class="pub-note">The booking desk is cold — try again '
                            'in a moment.</div>', visible=True), gr.update(), gr.update())


def refresh_board():
    """Rebuild the board with the live published cases merged into the seeds."""
    return _most_wanted_html(fetch_board())


def _is_in_most_wanted(cid) -> bool:
    """True if this case is already on the board — a founding seed case (local check)
    or a user-published one (board check). Used to swap the 'publish' button for a
    'see it on the board' jump when there's nothing left to publish."""
    if not cid:
        return False
    cid = str(cid)
    import json as _json
    try:
        seeds = _json.loads((ASSETS / "archive" / "manifest.json").read_text(encoding="utf-8"))
        if any(str(c.get("case_id")) == cid for c in seeds):
            return True
    except Exception:
        pass
    try:
        if any(str(c.get("id")) == cid for c in (fetch_board() or [])):
            return True
    except Exception:
        pass
    return False


def _publish_or_view(case_id):
    """(publish_btn, mw_view_btn) — show 'add to board' for a fresh case, or
    'see it on the board' when the case is already booked."""
    if _is_in_most_wanted(case_id):
        return gr.update(visible=False), gr.update(visible=True)
    return gr.update(visible=True), gr.update(visible=False)


def do_voice(case: CaseFile | None):
    """Narrate the verdict automatically once it's filed. The head JS auto-plays
    the result ONLY if the master ♪ toggle is on; otherwise the player just waits."""
    if case is None:
        return gr.update()
    path = synthesize_voice(voice_script(case))
    if not path:
        return gr.update(value='<div class="reco-note">The voice line went dead — '
                               'the verdict stays on paper tonight.</div>', visible=True)
    try:
        wav_b64 = base64.b64encode(Path(path).read_bytes()).decode("ascii")
    except Exception:
        return gr.update(value='<div class="reco-note">The tape jammed — no narration '
                               'tonight.</div>', visible=True)
    return gr.update(value=_voice_player_html(wav_b64), visible=True)


# ---------------------------------------------------------------------------
# Interrogation chat — rendered as our own HTML (mockup-faithful bubbles),
# driven by a plain list in gr.State. No gr.Chatbot.
# ---------------------------------------------------------------------------
GRILL_GREETING = ("Court's in session. Doubt a charge? Make the defense talk, or push for a "
                  "conviction — I rule from the evidence, not from sweet talk. Press a move below "
                  "or speak freely.")

# THE TRIAL — guiding "moves" that frame the open chat as a courtroom. Each chip
# just fills the input + sends (TRIAL_CHIPS_HEAD JS), so this adds ZERO new Gradio
# components/outputs and never touches the verdict layout — only one chip row.
_TRIAL_MOVES = [
    ("⚖", "ON THE STAND",
     "Put the worst charge on the stand — let the guilty element defend itself in its own voice, then rule on whether the defense holds up against the evidence."),
    ("🔍", "CROSS-EXAMINE",
     "Cross-examine that defense. Where exactly does its excuse fall apart against what's visible in the screenshot?"),
    ("⛓", "CONFESS",
     "No more dodging — get the confession. In plain words, which crime does the most damage to the user, and why is it guilty?"),
    ("🔨", "THE VERDICT",
     "Court's adjourned. Deliver your closing verdict on this interface — who's the worst offender and what's the sentence?"),
]
TRIAL_CHIPS_HTML = (
    '<div class="trial-chips">'
    + "".join(
        f'<button type="button" class="trial-chip" data-prompt="{esc(p)}">'
        f'<span class="tc-ico">{ico}</span>{esc(label)}</button>'
        for ico, label, p in _TRIAL_MOVES
    )
    + "</div>"
)


def _bot_row(inner_html: str) -> str:
    av = (f'<span class="avatar" style="background-image:url({_AVATAR_URI})"></span>'
          if _AVATAR_URI else "")
    return f'<div class="brow">{av}<div class="mb">{inner_html}</div></div>'


def _chat_html(history, typing: bool = False) -> str:
    rows = []
    if not history:
        rows.append(_bot_row(esc(GRILL_GREETING)))
    else:
        for m in history:
            text = esc(_msg_text(m.get("content", "")))
            if m.get("role") == "user":
                rows.append(f'<div class="mu">{text}</div>')
            else:
                rows.append(_bot_row(text))
    if typing:
        rows.append(_bot_row('<span class="typing"><i></i><i></i><i></i></span>'))
    return f'<div class="grill-box" id="grill-box">{"".join(rows)}</div>'


RECO_DEVELOPING_HTML = ("""
<div class="lab-load">
  <span class="ll-ring"></span>
  <div class="ll-txt">THE LAB IS DEVELOPING THE RECONSTRUCTIONS
    <span class="ll-bar"></span>
    <small>one rebuild per charge — the first case of the night can take a couple of minutes</small>
  </div>
</div>""")


def _prosecution_html(statement: str) -> str:
    """Render THE PROSECUTION's opening statement (argued by NVIDIA Nemotron)."""
    return (
        '<div class="prosecution-box" id="prosecution-box">'
        '<div class="pb-head"><span class="pb-seal">⚖</span>THE PROSECUTION'
        '<small>opening statement · argued by NVIDIA&nbsp;Nemotron</small></div>'
        f'<div class="pb-body">{esc(statement)}</div>'
        '</div>'
    )


def do_prosecute(case: CaseFile | None):
    """THE PROSECUTION's opening statement — a SEPARATE small model (NVIDIA
    Nemotron) presses the charges the vision agent filed. Runs after each verdict;
    stays hidden if the prosecutor backend is unavailable or there are no charges."""
    # NOTE: visibility is driven by CONTENT, not the `visible` flag — a gr.HTML
    # created visible=False does not reliably re-show via a later gr.update
    # (same Gradio quirk as the mw-view button). The component is always
    # visible=True; an empty value renders nothing.
    if case is None:
        return gr.update(value="")
    try:
        statement = prosecute(case)
    except Exception:
        statement = None
    if not statement:
        return gr.update(value="")
    return gr.update(value=_prosecution_html(statement))


def do_reconstruct(image: Image.Image | None, case: CaseFile | None):
    """Rebuild every charged element with FLUX and render the comparator strip.
    Runs automatically after each verdict — no click needed."""
    if image is None or case is None:
        return gr.update()        # nothing to develop (error case / plain home load)
    try:
        items = reconstruct_all(image, case)
    except Exception:
        items = []
    return gr.update(value=_reco_grid_html(items, len(case.evidence)), visible=True)


def grill_user(history, question):
    """Step 1 (instant): drop the visitor's question into the room."""
    history = list(history or [])
    q = (question or "").strip()
    if q:
        history.append({"role": "user", "content": q})
        # show the question + the Inspector's typing dots in the SAME update,
        # so the room never goes silent while he thinks
        return history, _chat_html(history, typing=True), ""
    return history, _chat_html(history), ""


def _msg_text(content) -> str:
    """Chatbot round-trips message content as either a string or a list of
    content blocks — normalise to plain text."""
    if isinstance(content, str):
        return content
    if isinstance(content, dict):
        return str(content.get("text", ""))
    if isinstance(content, list):
        return " ".join(_msg_text(part) for part in content).strip()
    return str(content or "")


def grill_answer(history, image, case):
    """Step 2 (streamed): a 'thinking' beat lands at once, then the Inspector's
    answer types itself out chunk by chunk — a live interrogation, not a wait."""
    history = list(history or [])
    if not history or history[-1].get("role") != "user":
        yield history, _chat_html(history)
        return
    if image is None or case is None:
        history.append({"role": "assistant",
                        "content": "…There's no case in front of me, friend. File one first."})
        yield history, _chat_html(history)
        return
    question = _msg_text(history[-1]["content"])
    yield history, _chat_html(history, typing=True)   # keep the dots while he thinks
    answer = interrogate(image, case, question)
    history.append({"role": "assistant", "content": ""})
    step = max(3, len(answer) // 50)                # ~50 frames per reply
    for i in range(step, len(answer) + step, step):
        history[-1]["content"] = answer[:i]
        yield history, _chat_html(history)
        time.sleep(0.025)


def _load_shared_case(request: gr.Request):
    """If the page was opened with ?case=ID, fetch that stored result and jump
    straight to its Verdict screen. Otherwise change nothing (normal flow)."""
    no_change = tuple(gr.skip() for _ in range(15))
    cid = None
    try:
        if request is not None:
            cid = request.query_params.get("case")
    except Exception:
        cid = None
    if not cid:
        return no_change
    data = fetch_case(cid)
    if not data:
        return no_change
    image, case = data
    try:
        annotated = annotate(image, case)
    except Exception:
        annotated = None
    return (
        gr.update(visible=False),                 # upload
        gr.update(visible=False),                 # sweep
        gr.update(visible=True),                  # verdict
        _topbar_html(case),
        _hero_html(image, case),
        _file_panel_html(case),
        _share_panel_html(case, cid, _share_card_uri(annotated, case)),
        _steps_html(2),
        image,                                    # st_image
        case,                                     # st_case
        cid,                                      # st_case_id
        gr.update(value=RECO_DEVELOPING_HTML, visible=True),   # reco: developing…
        gr.update(value=VOICE_DEVELOPING_HTML, visible=True),  # voice: developing…
        [],                                       # st_chat
        _chat_html([]),                           # chat_html
    )


def _new_case():
    """Reset to step 1."""
    return (
        gr.update(visible=True),    # upload
        gr.update(visible=False),   # sweep
        gr.update(visible=False),   # verdict
        None,                       # clear image
        gr.update(interactive=False),  # disable button until new image
        _steps_html(0),
        None,                       # st_image
        None,                       # st_case
        None,                       # st_case_id
        gr.update(value="", visible=False),    # reco_out
        gr.update(value="", visible=False),    # voice_out
        [],                         # st_chat
        _chat_html([]),             # chat_html
    )


# ---------------------------------------------------------------------------
# UI
# ---------------------------------------------------------------------------
PAGE_LOADER_HTML = """
<div id="page-loader">
  <div class="pl-scan"></div>
  <div class="pl-emblem"></div>
  <div class="pl-title">PRECINCT 7 — UX DIVISION</div>
  <div class="pl-sub">OPENING THE CASE FILE…</div>
</div>
"""

HEADER_HTML = """
<div id="ux-header">
  <div class="ux-head-row">
    <div class="emblem"></div>
    <div class="ux-head-text">
      <div class="badge">PRECINCT 7 · UX DIVISION</div>
      <h1>UX CRIME SCENE</h1>
      <p>Drop any UI screenshot. The Inspector works the scene and files a savage,
      honest report — every charge points to a real flaw.</p>
    </div>
  </div>
</div>
"""

FOOTER_HTML = """<div class="status-line" style="margin-top:28px">
Filed at Precinct 7 · Build Small Hackathon · Eyes: Qwen2.5-VL-7B · Reconstruction: FLUX.2 Klein · Voice: Kokoro-82M · all on Modal · Booking on Hugging Face
</div>"""

FONTS_HEAD = """
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&family=Oswald:wght@500;700&family=Anton&display=swap" rel="stylesheet">
"""

UPLOAD_CLASS_HEAD = """
<script>
(function(){
  if (window.__uxcUploadClass) return; window.__uxcUploadClass = true;
  // Determine the ACTIVE step by the rendered height of the LATER screens, not
  // by the upload itself (the upload is position:fixed/100vh when active, so it
  // can't self-report). Gradio collapses hidden groups to height 0.
  function h(el){ return el ? el.getBoundingClientRect().height : 0; }
  function tick(){
    var sH = h(document.querySelector('.screen-sweep'));
    var vH = h(document.querySelector('.screen-verdict'));
    var mH = h(document.querySelector('.screen-mostwanted'));
    document.body.classList.toggle('uxc-mostwanted', mH >= 8);
    // the Most Wanted board is a full screen of its own — never let the desk
    // overlays (laptop, alley, desk bg) think we're on the upload step there.
    document.body.classList.toggle('uxc-upload', sH < 8 && vH < 8 && mH < 8);
    document.body.classList.toggle('uxc-sweep', sH >= 8);
    document.body.classList.toggle('uxc-verdict', vH >= 8);
    placeExtras();
  }
  function placeExtras(){
    var drop = document.querySelector('#evidence-drop');
    var extras = document.querySelector('.poladrop-extras');
    if (!drop) return;
    // Move tape + guide into the polaroid (if extras wrapper exists with them)
    if (extras) {
      var tT = extras.querySelector('.tape-top');
      var tB = extras.querySelector('.tape-bot');
      var g  = extras.querySelector('.poladrop-guide');
      if (tT && tT.parentElement !== drop) drop.appendChild(tT);
      if (tB && tB.parentElement !== drop) drop.appendChild(tB);
      if (g  && g.parentElement  !== drop) drop.appendChild(g);
      extras.remove();
    }
  }
  tick();
  new MutationObserver(tick).observe(document.body, {attributes:true, childList:true, subtree:true, attributeFilter:['style','class']});
})();
</script>
"""

PASTE_HEAD = """
<script>
(function(){
  if (window.__uxcPaste) return; window.__uxcPaste = true;
  document.addEventListener('paste', function(e){
    var items = (e.clipboardData || window.clipboardData || {}).items || [];
    for (var i = 0; i < items.length; i++){
      if (items[i].type && items[i].type.indexOf('image') === 0){
        var file = items[i].getAsFile();
        var input = document.querySelector('#evidence-drop input[type=file]');
        if (input && file){
          var dt = new DataTransfer(); dt.items.add(file);
          input.files = dt.files;
          input.dispatchEvent(new Event('change', {bubbles:true}));
          e.preventDefault();
        }
        return;
      }
    }
  });
})();
</script>
"""

_OG_IMG = ("https://huggingface.co/spaces/build-small-hackathon/"
           "ux-crime-scene/resolve/main/assets/og_image.jpg")
_OG_URL = "https://huggingface.co/spaces/build-small-hackathon/ux-crime-scene"
_OG_TITLE = "UX Crime Scene — every interface hides a crime"
_OG_DESC = ("Drop a screenshot of any UI and THE INSPECTOR, a film-noir detective, "
            "circles every UX flaw and files a verdict. Built for the Build Small Hackathon.")
# Custom Open Graph / Twitter cards. Gradio injects generic defaults ("Gradio",
# "Click to try out the app!"); ours are emitted in <head> AFTER them so scrapers
# that honour the last value pick up the branded card. (A per-case image isn't
# possible on a Gradio SPA — meta tags are static, not server-rendered per URL.)
SOCIAL_META_HEAD = f"""
<meta property="og:title" content="{_OG_TITLE}" />
<meta property="og:description" content="{_OG_DESC}" />
<meta property="og:image" content="{_OG_IMG}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="{_OG_URL}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="UX Crime Scene" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{_OG_TITLE}" />
<meta name="twitter:description" content="A film-noir detective investigates your UI as a crime scene." />
<meta name="twitter:image" content="{_OG_IMG}" />
<meta name="description" content="{_OG_DESC}" />
"""

POLAROID_GUARD_HEAD = """
<script>
/* Polaroid anti-balloon guard: while Gradio swaps upload<->preview states it
   briefly STACKS both content blocks inside #evidence-drop, doubling the card
   height for a few frames. On every subtree mutation, keep only the LAST tall
   content block visible; when a single block remains, restore it. */
(function(){
  var raf = null;
  function guard(){
    raf = null;
    var drop = document.querySelector('#evidence-drop');
    if (!drop) return;
    var kids = Array.prototype.filter.call(drop.children, function(k){
      return k.tagName === 'DIV' && !/poladrop|tape-/.test(k.className || '');
    });
    var tall = kids.filter(function(k){ return k.offsetHeight > 60; });
    if (tall.length > 1) {
      for (var i = 0; i < tall.length - 1; i++) tall[i].style.display = 'none';
    } else {
      kids.forEach(function(k){ if (k.style.display === 'none') k.style.display = ''; });
    }
  }
  function schedule(){ if (!raf) raf = requestAnimationFrame(guard); }
  function arm(){
    var drop = document.querySelector('#evidence-drop');
    if (!drop) { setTimeout(arm, 400); return; }
    new MutationObserver(schedule).observe(drop, {childList:true, subtree:true, attributes:true});
    schedule();
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', arm);
  else arm();
})();
</script>
"""

ARCHIVE_TOGGLE_HEAD = """
<script>
/* Precinct Archive: delegated open/close toggle (plain div, not <details> —
   the native element renders display:none inside Gradio's prose container). */
(function(){
  function toggle(e){
    var s = e.target.closest('.archive-summary');
    if (!s) return;
    var d = s.closest('.archive-details');
    if (d) d.classList.toggle('open');
  }
  document.addEventListener('click', toggle);
  document.addEventListener('keydown', function(e){
    if ((e.key === 'Enter' || e.key === ' ') && e.target.classList &&
        e.target.classList.contains('archive-summary')) { e.preventDefault(); toggle(e); }
  });
})();
</script>
"""

DESKTOP_NOTICE_HEAD = """
<script>
(function(){
  if (window.__uxcDeskNotice) return; window.__uxcDeskNotice = true;
  function build(){
    if (innerWidth > 1024) return;                     // desktop: no banner
    if (sessionStorage.getItem('uxc_desk_notice') === '1') return;
    if (document.getElementById('desk-notice')) return;
    var b = document.createElement('div');
    b.id = 'desk-notice';
    b.innerHTML = '<span class="dn-ico">🖥️</span>'
      + '<span class="dn-txt">This is a noir case best cracked on a <b>computer</b> — '
      + 'the full cinematic experience lives on desktop. It still works here.</span>'
      + '<button class="dn-x" type="button" aria-label="Dismiss">✕</button>';
    document.body.appendChild(b);
    b.querySelector('.dn-x').addEventListener('click', function(){
      b.classList.add('gone'); sessionStorage.setItem('uxc_desk_notice','1');
      setTimeout(function(){ b.remove(); }, 400);
    });
  }
  if (document.readyState !== 'loading') build();
  else document.addEventListener('DOMContentLoaded', build);
})();
</script>"""

ROTATOR_HEAD = """
<script>
(function(){
  if (window.__uxcRot) return; window.__uxcRot = true;
  var idx = 0, timer = null, lastCount = 0;
  function step(){
    var slides = Array.prototype.slice.call(document.querySelectorAll('.inspector-rotator .ir-slide'));
    var sv = document.querySelector('.sweep-viewer');
    var hidden = sv && sv.classList.contains('has-intro');
    // fresh sweep -> restart from the first figure
    if (slides.length !== lastCount){ lastCount = slides.length; idx = 0; }
    if (!slides.length || hidden){ schedule(700); return; }   // wait out the intro / no sweep
    var on = idx % slides.length;
    for (var i=0;i<slides.length;i++){ slides[i].classList.toggle('ir-on', i === on); }
    idx++;
    schedule(4200);                 // ~4.2s per figure, ONE at a time, guaranteed
  }
  function schedule(ms){ clearTimeout(timer); timer = setTimeout(step, ms); }
  schedule(400);
})();
</script>"""

BOOT_COVER_HEAD = """
<script>
(function(){
  if (window.__uxcBoot) return; window.__uxcBoot = true;
  function cover(){
    var c = document.getElementById('boot-cover');
    if (!c){ c = document.createElement('div'); c.id = 'boot-cover'; document.body.appendChild(c); }
    c.classList.add('show');
  }
  function uncover(){ var c = document.getElementById('boot-cover'); if (c) c.classList.remove('show'); }
  // The instant FILE THE CASE is clicked, drop a black cover so the button can't
  // be seen flashing while Gradio swaps screens and the intro video mounts.
  document.addEventListener('click', function(e){
    var t = e.target && e.target.closest && e.target.closest('#investigate-btn');
    if (t && !t.disabled){ cover(); setTimeout(uncover, 3000); }   // hard fallback
  }, true);
  // Once the full-screen intro is up (its own black bg covers), drop the boot cover.
  new MutationObserver(function(){
    if (document.querySelector('.intro-fullscreen')) setTimeout(uncover, 150);
  }).observe(document.body, {childList:true, subtree:true});

  // Shared result link (?case=ID): show a clear "opening the case file" screen
  // (NOT a dim) until the stored verdict has loaded, then fade it out.
  if (/[?&]case=/.test(location.search)){
    var ld = document.createElement('div');
    ld.id = 'case-loading';
    ld.innerHTML = '<div class="cl-emblem"></div>'
      + '<div class="cl-kicker">PRECINCT 7 · UX DIVISION</div>'
      + '<div class="cl-title">OPENING THE CASE FILE…</div>'
      + '<div class="cl-dots"><i></i><i></i><i></i></div>';
    document.body.appendChild(ld);
    var t0 = Date.now();
    var iv = setInterval(function(){
      var v = document.querySelector('.screen-verdict');
      var ready = v && v.getBoundingClientRect().height > 200;
      if (ready || Date.now() - t0 > 20000){
        ld.classList.add('gone');
        setTimeout(function(){ if (ld) ld.remove(); }, 700);
        clearInterval(iv);
      }
    }, 150);
  }
})();
</script>"""

# Broadcast-verdict interactions: the before/after split slider, the copy-link
# button, and a typewriter effect for case-file text. Delegated listeners (the
# HTML arrives via gr.HTML innerHTML, where inline <script> never runs).
COMPARE_HEAD = """
<script>
(function(){
  if (window.__uxcCompare) return; window.__uxcCompare = true;
  // before/after split slider
  document.addEventListener('input', function(e){
    var r = e.target;
    if (!r.classList || !r.classList.contains('cmp-rng')) return;
    var cmp = r.closest('.cmp'); if (!cmp) return;
    var after = cmp.querySelector('.cmp-after'), hnd = cmp.querySelector('.cmp-handle');
    if (after) after.style.clipPath = 'inset(0 0 0 ' + r.value + '%)';
    if (hnd) hnd.style.left = r.value + '%';
  }, true);
  // copy the case link
  document.addEventListener('click', function(e){
    var b = e.target.closest && e.target.closest('.sp-copy');
    if (!b) return;
    var link = b.getAttribute('data-link') || '';
    function done(){ var t = b.textContent; b.textContent = '✓ COPIED'; b.classList.add('ok');
      setTimeout(function(){ b.textContent = t; b.classList.remove('ok'); }, 1600); }
    if (navigator.clipboard && navigator.clipboard.writeText)
      navigator.clipboard.writeText(link).then(done).catch(function(){});
    else { var i = document.createElement('input'); i.value = link; document.body.appendChild(i);
      i.select(); try{ document.execCommand('copy'); done(); }catch(_e){} i.remove(); }
  }, true);
  // typewriter: any new .twjs element types itself out once
  function typeEl(el){
    if (el.__typed) return; el.__typed = true;
    var full = el.textContent; el.textContent = '';
    el.classList.add('tw-on');
    var i = 0, step = Math.max(1, Math.round(full.length / 90));   // ~1.5s per block
    (function tick(){
      i = Math.min(full.length, i + step);
      el.textContent = full.slice(0, i);
      if (i < full.length) setTimeout(tick, 16);
      else el.classList.remove('tw-on');
    })();
  }
  new MutationObserver(function(){
    document.querySelectorAll('.twjs').forEach(typeEl);
  }).observe(document.body, {childList:true, subtree:true});
  // The Inspector's narration — custom player. ▶ toggles play/pause; the wave
  // bars animate while playing; when a fresh narration arrives it auto-plays
  // ONLY if the master ♪ toggle is on.
  function vpAudio(vp){ return vp.querySelector('audio'); }
  function vpSet(vp, playing){
    vp.classList.toggle('playing', playing);
    var b = vp.querySelector('.vp-btn'); if (b) b.textContent = playing ? '❚❚' : '▶';
  }
  document.addEventListener('click', function(e){
    var b = e.target.closest && e.target.closest('.vp-btn');
    if (!b) return;
    var vp = b.closest('.vp'), a = vpAudio(vp);
    if (!a) return;
    if (a.paused){ a.play().catch(function(){}); } else { a.pause(); }
  }, true);
  document.addEventListener('play', function(e){
    var vp = e.target.closest && e.target.closest('.vp'); if (vp) vpSet(vp, true);
  }, true);
  document.addEventListener('pause', function(e){
    var vp = e.target.closest && e.target.closest('.vp'); if (vp) vpSet(vp, false);
  }, true);
  document.addEventListener('ended', function(e){
    var vp = e.target.closest && e.target.closest('.vp'); if (vp) vpSet(vp, false);
  }, true);
  function fmt(s){ s=Math.max(0,Math.floor(s||0)); return Math.floor(s/60)+':'+('0'+(s%60)).slice(-2); }
  // gold fill across the waveform + reel clock
  document.addEventListener('timeupdate', function(e){
    var vp = e.target.closest && e.target.closest('.vp'); if (!vp) return;
    var a = e.target, bars = vp.querySelectorAll('.vp-wave i');
    var p = a.duration ? a.currentTime / a.duration : 0;
    var on = Math.round(p * bars.length);
    bars.forEach(function(b, i){ b.classList.toggle('on', i < on); });
    var t = vp.querySelector('.vp-time'); if (t) t.textContent = fmt(a.currentTime);
  }, true);
  document.addEventListener('loadedmetadata', function(e){
    var vp = e.target.closest && e.target.closest('.vp'); if (!vp) return;
    var d = vp.querySelector('.vp-dur'); if (d) d.textContent = fmt(e.target.duration);
  }, true);
  // click the waveform to scrub the tape
  document.addEventListener('click', function(e){
    var w = e.target.closest && e.target.closest('.vp-wave'); if (!w) return;
    var vp = w.closest('.vp'), a = vpAudio(vp); if (!a || !a.duration) return;
    var r = w.getBoundingClientRect();
    a.currentTime = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * a.duration;
    if (a.paused) a.play().catch(function(){});
  }, true);
  var vpSeen = '';
  new MutationObserver(function(){
    var vp = document.querySelector('.vp'); if (!vp) return;
    var a = vpAudio(vp); if (!a || a.src === vpSeen) return;
    vpSeen = a.src;
    if (window.UXC && window.UXC.isSoundOn && window.UXC.isSoundOn()){
      a.play().catch(function(){});
    }
  }).observe(document.body, {childList:true, subtree:true});
  // keep the interrogation scrolled to the latest line while answers stream in
  new MutationObserver(function(){
    var box = document.getElementById('grill-box');
    if (box) box.scrollTop = box.scrollHeight;
  }).observe(document.body, {childList:true, subtree:true, characterData:true});
})();
</script>
"""

TRIAL_CHIPS_HEAD = """
<script>
(function(){
  if (window.__uxcTrial) return; window.__uxcTrial = true;
  // A trial "move" fills the interrogation input and fires it — same chat,
  // just guided. Native-value setter so Gradio/Svelte registers the change.
  document.addEventListener('click', function(e){
    var chip = e.target.closest && e.target.closest('.trial-chip');
    if (!chip) return;
    var ta = document.querySelector('#grill-input textarea');
    var send = document.querySelector('#grill-send');
    if (!ta || !send) return;
    var setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
    setter.call(ta, chip.getAttribute('data-prompt') || '');
    ta.dispatchEvent(new Event('input', {bubbles:true}));
    setTimeout(function(){ send.click(); }, 30);
  }, true);
})();
</script>
"""

# The whole app is designed for dark mode. Without ?__theme=dark a visitor on a
# light-mode system gets Gradio's light theme, which repaints the raw-HTML buttons
# (Trial chips, board back) grey and shifts some text colours. Force dark on first load.
FORCE_DARK_HEAD = """
<script>
(function(){
  try{
    var u = new URL(window.location.href);
    if (u.searchParams.get('__theme') !== 'dark'){
      u.searchParams.set('__theme','dark');
      window.location.replace(u.href);
    }
  }catch(e){}
})();
</script>
"""

MW_BACK_HEAD = """
<script>
(function(){
  if (window.__uxcMwBack) return; window.__uxcMwBack = true;
  // The board's "back to the desk" button lives inside the static board HTML; it
  // delegates to the real (hidden) Gradio button that owns the screen-toggle handler.
  document.addEventListener('click', function(e){
    var t = e.target.closest && e.target.closest('.mw-back-board');
    if (!t) return;
    var real = document.querySelector('#mw-back-btn');
    if (real) real.click();
  }, true);
})();
</script>
"""

HEAD = (FORCE_DARK_HEAD + "\n" + FONTS_HEAD + "\n" + ASSET_STYLE + "\n" + AUDIO_HEAD + "\n" + PASTE_HEAD
        + "\n" + TRIAL_CHIPS_HEAD + "\n" + MW_BACK_HEAD
        + "\n" + SCAN_TIMER_HEAD + "\n" + UPLOAD_CLASS_HEAD + "\n" + SOUND_GATE_HEAD
        + "\n" + BOOT_COVER_HEAD + "\n" + VOICE_HEAD + "\n" + ROTATOR_HEAD
        + "\n" + DESKTOP_NOTICE_HEAD + "\n" + ARCHIVE_TOGGLE_HEAD
        + "\n" + POLAROID_GUARD_HEAD + "\n" + COMPARE_HEAD + "\n" + SOCIAL_META_HEAD)


def build_app() -> gr.Blocks:
    with gr.Blocks(title="UX Crime Scene") as demo:
        # These four hold position:fixed/overlay content. Tag them so their
        # Gradio wrapper blocks collapse to 0 height (else they push the header
        # ~150px down with empty space).
        if SOUND_GATE_HTML:
            gr.HTML(SOUND_GATE_HTML, elem_classes="uxc-overlay")
        if INTRO_ALLEY_HTML:
            gr.HTML(INTRO_ALLEY_HTML, elem_classes="uxc-overlay")
        if BG_VIDEO_HTML:
            gr.HTML(BG_VIDEO_HTML, elem_classes="uxc-overlay")
        gr.HTML(PAGE_LOADER_HTML, elem_classes="uxc-overlay")
        gr.HTML(HEADER_HTML)
        steps = gr.HTML(_steps_html(0))

        # Held for the verdict power-ups (voice / reconstruction / interrogation).
        st_image = gr.State(None)
        st_case = gr.State(None)
        st_case_id = gr.State(None)   # the shareable id of the current verdict
        # Reliable source of truth for "is there evidence in the slot" — reading the
        # gr.Image back as an input after a programmatic clear returns a stale value,
        # so we track it explicitly and re-sync the FILE/REMOVE buttons from this.
        has_evidence = gr.State(False)

        # ----- STEP 1: Evidence (Polaroid on the detective's desk) -----
        with gr.Group(visible=True, elem_classes="screen screen-upload") as screen_upload:
            # Onboarding header over the desk: what the app is + what to drop.
            gr.HTML("""
<div class="desk-intro">
  <div class="desk-emblem"></div>
  <div class="desk-kicker">PRECINCT 7 · UX DIVISION</div>
  <h1 class="desk-title">UX CRIME SCENE</h1>
  <div class="desk-steps" aria-label="Step 1 of 3">
    <span class="ds-step on"><b>1</b> EVIDENCE</span><span class="ds-line"></span>
    <span class="ds-step"><b>2</b> INVESTIGATING</span><span class="ds-line"></span>
    <span class="ds-step"><b>3</b> VERDICT</span>
  </div>
  <p class="desk-sub">Drop a screenshot of <b>any website, app or screen</b>. The Inspector
  investigates it for UX crimes — confusing buttons, buried actions, dark patterns —
  and files a verdict with the evidence circled.</p>
</div>""")
            inp = gr.Image(
                type="pil",
                label="EVIDENCE PHOTO",
                height=320,
                sources=["upload", "clipboard"],
                elem_id="evidence-drop",
                show_label=True,
            )
            # Yellow crime-scene tape strapping the polaroid + the dropzone guide.
            # Injected as siblings; positioned absolutely into the polaroid via JS.
            gr.HTML("""
<div class="poladrop-extras" aria-hidden="true">
  <div class="poladrop-guide">
    <div class="pg-title">Drop the Evidence</div>
    <div class="pg-sub">drag a screenshot here<br>— or click to file it —</div>
  </div>
  <div class="tape-top"></div>
  <div class="tape-bot"></div>
</div>""")
            # Visible only once a photo is loaded — lets the user discard / swap it.
            clear_btn = gr.Button(
                "✕  REMOVE THE EVIDENCE",
                elem_id="clear-evidence-btn",
                visible=False,
            )
            btn = gr.Button(
                "FILE THE CASE",
                elem_id="investigate-btn",
                variant="primary",
                interactive=False,
            )
            # Cold-case drawer: one-click example evidence (loads into the polaroid;
            # the user still pulls the trigger with FILE THE CASE).
            gr.HTML('<div class="coldcase-head">no screenshot on you? grab a cold case</div>')
            with gr.Row(elem_id="coldcase-row"):
                ex_hf_btn = gr.Button("HUGGINGFACE.CO", elem_classes="coldcase-btn", size="sm")
                ex_nyt_btn = gr.Button("NYTIMES.COM", elem_classes="coldcase-btn", size="sm")
                ex_ebay_btn = gr.Button("EBAY.COM", elem_classes="coldcase-btn", size="sm")
                ex_gh_btn = gr.Button("GITHUB.COM", elem_classes="coldcase-btn", size="sm")

            def _load_example(name: str):
                return Image.open(ASSETS / "examples" / name).convert("RGB")

            ex_hf_btn.click(lambda: _load_example("huggingface.jpg"), outputs=[inp],
                            show_progress="hidden")
            ex_nyt_btn.click(lambda: _load_example("nytimes.jpg"), outputs=[inp],
                             show_progress="hidden")
            ex_ebay_btn.click(lambda: _load_example("ebay.jpg"), outputs=[inp],
                              show_progress="hidden")
            ex_gh_btn.click(lambda: _load_example("github.jpg"), outputs=[inp],
                            show_progress="hidden")
            # MOST WANTED entry — a secondary bone-outline button (clearly subordinate to
            # the red FILE THE CASE primary), with a one-line teaser of what's inside.
            gr.HTML('<div class="mw-enter-sub">the city\'s worst UIs — ranked by their crimes</div>')
            mw_enter_btn = gr.Button("MOST WANTED", elem_id="mw-enter-btn")

        # ----- THE CITY: Most Wanted public board -----
        with gr.Group(visible=False, elem_classes="screen screen-mostwanted") as screen_mw:
            mw_back_btn = gr.Button("◂  BACK TO THE DESK — put YOUR UI on trial",
                                    elem_id="mw-back-btn")
            mw_html = gr.HTML(_most_wanted_html())

        # ----- STEP 2: Investigating (the sweep) -----
        with gr.Group(visible=False, elem_classes="screen screen-sweep") as screen_sweep:
            sweep_view = gr.HTML()

        # ----- STEP 3: Verdict — the broadcast desk (P1-A layout) -----
        # masthead | evidence feed + right rail (file, interrogation) | bottom strip
        # (reconstruction, voice, share). One screen, no endless scrolling.
        with gr.Group(visible=False, elem_classes="screen screen-verdict") as screen_verdict:
            with gr.Row(elem_classes="va-top"):
                topbar = gr.HTML(elem_classes="va-topbar")
                new_case_btn = gr.Button("⌕  INVESTIGATE ANOTHER SCENE",
                                         elem_id="newcase-btn")
            # LEFT = evidence feed on top + TWO utility cards (reconstruction · share,
            # 50/50). RIGHT rail (tall) = THE VOICE bar on top → case file → prosecution
            # → trial chat. The voice is a slim horizontal player, ideal as a top bar.
            with gr.Row(elem_classes="va-body", equal_height=True):
                with gr.Column(scale=13, min_width=420, elem_classes="va-left"):
                    with gr.Column(elem_classes="va-feed"):
                        hero_img = gr.HTML(elem_id="hero-img")
                    with gr.Row(elem_classes="va-utilities", equal_height=True):
                        with gr.Column(scale=1, min_width=200,
                                       elem_classes="va-cell va-reco-cell",
                                       visible=HAS_FLUX):
                            gr.HTML('<div class="cell-ph"><b>▣</b> THE RECONSTRUCTION '
                                    '<span>one rebuild per charge · click a thumbnail to compare</span></div>')
                            reco_out = gr.HTML(visible=False)
                        with gr.Column(scale=1, min_width=200,
                                       elem_classes="va-cell va-share-cell"):
                            gr.HTML('<div class="cell-ph"><b>⎘</b> SHARE THE CASE '
                                    '<span>a unique link to this verdict</span></div>')
                            share_html = gr.HTML()
                            publish_btn = gr.Button("☠  ADD THIS CASE TO MOST WANTED",
                                                    elem_id="publish-btn")
                            # Created visible=True (then hidden by the publish/view logic) —
                            # Gradio won't reliably reveal a visible=False button later.
                            mw_view_btn = gr.Button("SEE IT ON THE MOST WANTED BOARD  ▸",
                                                    elem_id="mw-view-btn", visible=True)
                            publish_out = gr.HTML(visible=False)
                with gr.Column(scale=6, min_width=330, elem_classes="va-rail"):
                    # THE VOICE — a slim horizontal player bar at the TOP of the rail.
                    gr.HTML('<div class="rail-ph va-voice-head"><b>♪</b> THE VOICE '
                            '<span>narrates itself when ready · Kokoro-82M · honours the ♪ toggle</span></div>',
                            visible=HAS_VOICE)
                    voice_out = gr.HTML(visible=False, elem_classes="va-voice-out")
                    dossier = gr.HTML(elem_classes="va-file")
                    # THE PROSECUTION — its OWN section, BEFORE The Trial: a separate small
                    # model (NVIDIA Nemotron) opens the case over the filed charges. Async;
                    # the empty slot collapses to nothing until the statement loads.
                    prosecution_out = gr.HTML(value="", visible=True, elem_classes="prosecution-slot")
                    gr.HTML('<div class="rail-ph"><b>⚖</b> THE TRIAL '
                            '<span>put the interface on trial — press a move or speak freely</span></div>')
                    st_chat = gr.State([])
                    chat_html = gr.HTML(_chat_html([]), elem_id="grill-chat-wrap")
                    gr.HTML(TRIAL_CHIPS_HTML)
                    with gr.Row(elem_id="grill-row"):
                        grill_in = gr.Textbox(
                            show_label=False, scale=8, elem_id="grill-input",
                            placeholder="Address the court…",
                            container=False,
                        )
                        grill_send = gr.Button("ASK ▸", scale=1, elem_id="grill-send",
                                               variant="primary")

        gr.HTML(FOOTER_HTML)

        # Enable FILE THE CASE and reveal REMOVE THE EVIDENCE once a photo is loaded.
        # has_evidence is the durable record of the slot's state.
        def _on_evidence(img):
            has = img is not None
            return gr.update(interactive=has), gr.update(visible=has), has

        inp.change(_on_evidence, inputs=[inp], outputs=[btn, clear_btn, has_evidence])
        # Explicitly reset ALL of it (don't rely on the .change cascade firing for
        # programmatic clears): empty slot, FILE disabled, REMOVE hidden, flag cleared.
        clear_btn.click(
            lambda: (None, gr.update(interactive=False), gr.update(visible=False), False),
            outputs=[inp, btn, clear_btn, has_evidence], show_progress="hidden", queue=False,
        )

        # MOST WANTED board: enter from the desk, return to the desk. Pure screen
        # toggles run with queue=False so they're instant (never stuck behind a
        # long-running reconstruction/voice job in the queue).
        mw_enter_btn.click(
            lambda: (gr.update(visible=False), gr.update(visible=True)),
            outputs=[screen_upload, screen_mw], show_progress="hidden", queue=False,
        ).then(
            refresh_board, outputs=[mw_html], show_progress="hidden",
        )

        # Returning to the desk re-syncs FILE/REMOVE to the actual evidence slot.
        # The button updates run in a SEPARATE .then AFTER the screen is shown —
        # bundling them with the group-show lets the re-render clobber the child's
        # visibility, which is what left REMOVE stuck on after MOST WANTED.
        def _resync_evidence(has):
            return gr.update(interactive=bool(has)), gr.update(visible=bool(has))
        mw_back_btn.click(
            lambda: (gr.update(visible=True), gr.update(visible=False)),
            outputs=[screen_upload, screen_mw], show_progress="hidden", queue=False,
        ).then(
            _resync_evidence, inputs=[has_evidence],
            outputs=[btn, clear_btn], show_progress="hidden", queue=False,
        )
        # From a verdict, "see it on the board" jumps to the live MOST WANTED.
        mw_view_btn.click(
            lambda: (gr.update(visible=False), gr.update(visible=True)),
            outputs=[screen_verdict, screen_mw], show_progress="hidden", queue=False,
        ).then(
            refresh_board, outputs=[mw_html], show_progress="hidden",
        )
        publish_btn.click(
            do_publish, inputs=[st_image, st_case, st_case_id],
            outputs=[publish_out, publish_btn, mw_view_btn], show_progress="hidden",
        )

        ev = btn.click(
            _start, inputs=[inp],
            outputs=[screen_upload, screen_sweep, sweep_view, steps],
            show_progress="hidden",
        )
        ev.then(
            run_investigation, inputs=[inp],
            outputs=[screen_sweep, screen_verdict, topbar, hero_img, dossier,
                     share_html, steps, st_image, st_case, st_case_id, reco_out, voice_out,
                     st_chat, chat_html],
            show_progress="hidden",
        ).then(
            # A freshly filed case is never on the board yet — always offer to publish.
            lambda: (gr.update(visible=True), gr.update(visible=False)),
            outputs=[publish_btn, mw_view_btn], show_progress="hidden",
        ).then(
            # Clear any prior prosecution instantly so a new verdict never shows a
            # stale opening statement while the new one is being argued.
            lambda: gr.update(value=""), outputs=[prosecution_out],
            show_progress="hidden",
        ).then(
            # THE PROSECUTION opens the case — a separate small model (NVIDIA Nemotron)
            # presses the charges the vision agent filed.
            do_prosecute, inputs=[st_case], outputs=[prosecution_out],
            show_progress="hidden",
        ).then(
            # The Inspector records the narration himself — autoplay is gated by
            # the master ♪ toggle in the head JS.
            do_voice, inputs=[st_case], outputs=[voice_out],
            show_progress="hidden",
        ).then(
            # The lab develops the reconstructions automatically once the verdict is up.
            do_reconstruct, inputs=[st_image, st_case], outputs=[reco_out],
            show_progress="hidden",
        )

        # Back to step 1 — instant (queue=False) so it never waits behind the
        # reconstruction/voice jobs still finishing on the verdict we're leaving.
        new_case_btn.click(
            _new_case, inputs=None,
            outputs=[screen_upload, screen_sweep, screen_verdict, inp, btn, steps,
                     st_image, st_case, st_case_id, reco_out, voice_out, st_chat, chat_html],
            show_progress="hidden", queue=False,
        )

        # ----- Verdict power-ups -----
        # Interrogation: the question lands in the room instantly; the answer types out.
        grill_send.click(
            grill_user, inputs=[st_chat, grill_in],
            outputs=[st_chat, chat_html, grill_in], show_progress="hidden",
        ).then(
            grill_answer, inputs=[st_chat, st_image, st_case],
            outputs=[st_chat, chat_html], show_progress="hidden",
        )
        grill_in.submit(
            grill_user, inputs=[st_chat, grill_in],
            outputs=[st_chat, chat_html, grill_in], show_progress="hidden",
        ).then(
            grill_answer, inputs=[st_chat, st_image, st_case],
            outputs=[st_chat, chat_html], show_progress="hidden",
        )

        # Open a shared result link (?case=ID) -> jump straight to that verdict.
        demo.load(
            _load_shared_case, inputs=None,
            outputs=[screen_upload, screen_sweep, screen_verdict,
                     topbar, hero_img, dossier, share_html, steps,
                     st_image, st_case, st_case_id, reco_out, voice_out, st_chat, chat_html],
            show_progress="hidden",
        ).then(
            # If this case is already on the board, offer "see it" instead of "publish".
            _publish_or_view, inputs=[st_case_id],
            outputs=[publish_btn, mw_view_btn], show_progress="hidden",
        ).then(
            # THE PROSECUTION (NVIDIA Nemotron) opens the case for a shared verdict too.
            do_prosecute, inputs=[st_case], outputs=[prosecution_out],
            show_progress="hidden",
        ).then(
            do_voice, inputs=[st_case], outputs=[voice_out],
            show_progress="hidden",
        ).then(
            do_reconstruct, inputs=[st_image, st_case], outputs=[reco_out],
            show_progress="hidden",
        )

    return demo


if __name__ == "__main__":
    if not os.environ.get("MODAL_ENDPOINT_URL"):
        print("WARNING: MODAL_ENDPOINT_URL not set — the app will fail on submit.")
    build_app().launch(css=STATIC_CSS, head=HEAD, theme=gr.themes.Base())