"""PROCESSING screen — a staged reveal. The generator that drives it lives in app.py (it also
toggles screens and produces the final card); this module owns the screen + fact-rendering HTML.
Real parsed facts feed the reveal (Task 2); scores are computed after (Task 3).
"""
from __future__ import annotations

import gradio as gr


def build():
    with gr.Column(visible=False, elem_id="screen-processing") as col:
        gr.HTML("<div id='omc-title' style='font-size:22px'>Reading your conversations…</div>")
        log = gr.HTML(elem_id="omc-proclog")
    return col, {"log": log}


def wrap(lines: list[str]) -> str:
    return "<div class='omc-proc-wrap'>" + "".join(lines) + "</div>"


def fact(text: str, muted: bool = False) -> str:
    cls = "omc-fact muted" if muted else "omc-fact"
    return f"<div class='{cls}'><span class='dot'></span><span>{text}</span></div>"


def error(text: str) -> str:
    """A prominent error row — shown instead of a fake card when scoring can't produce real results."""
    from html import escape
    return (f"<div class='omc-error'><span class='dot'></span>"
            f"<span><b>⚠ Couldn't score this</b><br>{escape(text)}</span></div>")


def fact_num(n: int, label: str) -> str:
    return (f"<div class='omc-fact'><span class='dot'></span>"
            f"<span><span class='num'>{n:,}</span> {label}</span></div>")


def progress_bar(done: int, total: int, label: str = "signals analyzed") -> str:
    """Live scoring bar. total==0 (counts not known yet) renders an indeterminate sweep."""
    if total <= 0:
        return ("<div class='omc-progress'><div class='omc-progress-track'>"
                "<div class='omc-progress-fill indet'></div></div>"
                f"<div class='omc-progress-label'><span>{label}…</span></div></div>")
    pct = max(0, min(100, round(100 * done / total)))
    return (
        "<div class='omc-progress'>"
        f"<div class='omc-progress-track'><div class='omc-progress-fill' style='width:{pct}%'></div></div>"
        "<div class='omc-progress-label'>"
        f"<span><span class='num'>{done:,}</span> / {total:,} {label}</span>"
        f"<span class='pct'>{pct}%</span></div></div>"
    )


def lang_block(english: int, other: int) -> str:
    total = max(english + other, 1)
    en_pct = 100 * english / total
    return (
        "<div class='omc-fact' style='display:block'>"
        f"<div><span class='num' style='color:#34D3B0'>English {english:,}</span> scored "
        f"/ other {other:,} not scored</div>"
        f"<div class='omc-langbar'><div class='en' style='width:{en_pct:.0f}%'></div>"
        f"<div class='other' style='width:{100 - en_pct:.0f}%'></div></div>"
        f"<div class='omc-lang-legend'>{en_pct:.0f}% of turns scored</div>"
        "</div>"
    )