"""Watchlist sidebar component — session-scoped personal watchlist."""
import streamlit as st
import streamlit.components.v1 as components
from services.data_service import get_latest_price, get_company_info
from utils.security import escape_html


def render_watchlist():
    """Render the personal watchlist section in the sidebar.

    Displays a section label, then one clickable row per saved ticker showing
    symbol · price · Δ%. Clicking a row sets st.session_state["ticker"] and
    triggers a rerun. Shows an empty-state message when the list is empty.

    Must be called from within a `with st.sidebar:` block.
    """
    watchlist = st.session_state.get("watchlist", [])

    # Process any pending click from the JS click handler
    clicked = st.session_state.get("_wl_click", "")
    if clicked and clicked in watchlist:
        st.session_state["ticker"] = clicked
        st.session_state["_wl_click"] = ""
        st.rerun()

    # Hidden click receiver — JS will set this input's value on row click
    st.text_input("wl_click_receiver", key="_wl_click", label_visibility="collapsed")

    # Build rows HTML (string concatenation, NOT f-strings — JS {} would break)
    rows_html = ""
    for sym in watchlist:
        try:
            price = get_latest_price(sym)
            info = get_company_info(sym) or {}
            prev = info.get("regularMarketPreviousClose") or info.get("previousClose")
            sym_e = escape_html(sym)
            if price is not None and prev and prev > 0:
                chg_pct = (price - prev) / prev * 100
                sign = "+" if chg_pct >= 0 else "−"
                chg_cls = "pos" if chg_pct >= 0 else "neg"
                chg_str = sign + f"{abs(chg_pct):.2f}%"
                px_str = "$" + f"{price:,.2f}"
            elif price is not None:
                chg_cls = "flat"
                chg_str = "—"
                px_str = "$" + f"{price:,.2f}"
            else:
                chg_cls = "flat"
                chg_str = "—"
                px_str = "—"
            rows_html += (
                "<div class='wl-row' data-sym='" + sym_e + "' onclick='selectTicker(this.dataset.sym)'>"
                "<span class='wl-sym'>" + sym_e + "</span>"
                "<span class='wl-px'>" + px_str + "</span>"
                "<span class='wl-chg " + chg_cls + "'>" + chg_str + "</span>"
                "</div>"
            )
        except Exception:
            sym_e = escape_html(sym)
            rows_html += (
                "<div class='wl-row' data-sym='" + sym_e + "' onclick='selectTicker(this.dataset.sym)'>"
                "<span class='wl-sym'>" + sym_e + "</span>"
                "<span class='wl-px wl-err'>—</span>"
                "<span class='wl-chg flat'>—</span>"
                "</div>"
            )

    if not rows_html:
        content_html = "<div class='wl-empty'>No saved tickers</div>"
    else:
        content_html = rows_html

    height = 28 + max(len(watchlist), 1) * 34 + 16  # label + rows + buffer

    # Build the full HTML block (string concat, not f-string — JS {} would break)
    html = (
        "<style>"
        "* { margin: 0; padding: 0; box-sizing: border-box; }"
        "body { background: transparent; overflow: hidden; font-family: 'IBM Plex Mono', monospace; }"
        ".wl-label { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 600;"
        "  text-transform: uppercase; letter-spacing: 0.14em; color: #5E5849; padding: 0 0 6px; display: block; }"
        ".wl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px;"
        "  align-items: center; padding: 6px 4px; border-bottom: 1px solid #232934;"
        "  cursor: pointer; transition: background 0.1s; }"
        ".wl-row:last-child { border-bottom: none; }"
        ".wl-row:hover { background: #11151C; }"
        ".wl-sym { font-size: 12px; color: #F2ECDC; font-weight: 500; }"
        ".wl-px { font-size: 12px; color: #C7C0AE; font-variant-numeric: tabular-nums; text-align: right; }"
        ".wl-chg { font-size: 11px; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }"
        ".wl-chg.pos { color: #4F8C5E; }"
        ".wl-chg.neg { color: #B5494B; }"
        ".wl-chg.flat { color: #8E8676; }"
        ".wl-empty { font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; color: #5E5849;"
        "  font-style: italic; padding: 4px 0 8px; }"
        "</style>"
        "<span class='wl-label'>Watchlist</span>"
        + content_html +
        "<script>"
        "function selectTicker(sym) {"
        "  try {"
        "    var inputs = window.parent.document.querySelectorAll('input[type=text]');"
        "    var target = null;"
        "    for (var i = 0; i < inputs.length; i++) {"
        "      var inp = inputs[i];"
        "      if (inp.getAttribute('aria-label') === 'wl_click_receiver') { target = inp; break; }"
        "    }"
        "    if (!target) return;"
        "    var setter = Object.getOwnPropertyDescriptor(window.parent.HTMLInputElement.prototype, 'value').set;"
        "    setter.call(target, sym);"
        "    target.dispatchEvent(new window.parent.Event('input', { bubbles: true }));"
        "  } catch(e) { console.warn('watchlist click failed', e); }"
        "}"
        "</script>"
    )

    components.html(html, height=height, scrolling=False)