/* ============================================================
   FINAZ — Pantalla en vivo · PRIMITIVAS INTERACTIVAS
   Term (hover-definición) · highlight cruzado · SidePanel · DepthDial
   ============================================================ */
const { useState: useStateLV, useContext, createContext, useEffect: useEffectLV, useRef } = React;

const LiveCtx = createContext(null);

/* Clase de resaltado: miembro de la cadena => is-hl; con cadena activa pero no miembro => is-dim */
function hlClass(id, hl) {
  if (!hl || !hl.set || hl.set.size === 0) return "";
  return hl.set.has(id) ? " is-hl" : " is-dim";
}

/* Término con definición al pasar el ratón */
function Term({ id, children }) {
  const t = window.LIVE.terms[id];
  if (!t) return <span>{children}</span>;
  return (
    <span className="lv-term" tabIndex={0}>
      {children}
      <span className="lv-pop" role="tooltip">
        <span className="lv-popt">{t.t}</span>
        <span className="lv-popd">{t.d}</span>
      </span>
    </span>
  );
}

/* Mando de profundidad */
function DepthDial({ depth, setDepth }) {
  const labels = ["Básico", "Intermedio", "Avanzado"];
  const subs = ["Sin jerga", "Equilibrado", "Datos completos"];
  return (
    <div className="lv-dial" role="tablist" aria-label="Nivel de detalle">
      <span className="lv-diallbl">Nivel de detalle</span>
      <div className="lv-dialtrack">
        <div className="lv-dialthumb" style={{ transform: `translateX(${depth * 100}%)` }} />
        {labels.map((l, i) => (
          <button key={i} role="tab" aria-selected={depth === i} className={"lv-dialseg" + (depth === i ? " is-on" : "")} onClick={() => setDepth(i)}>
            <span className="lv-dialsegl">{l}</span>
            <span className="lv-dialsegs">{subs[i]}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* Reloj en vivo */
function LiveClock() {
  const [t, setT] = useStateLV(() => nowStr());
  useEffectLV(() => {
    const iv = setInterval(() => setT(nowStr()), 1000);
    return () => clearInterval(iv);
  }, []);
  function nowStr() {
    const d = new Date();
    return d.toLocaleTimeString("es-ES", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
  }
  return <span className="lv-clock"><span className="lv-clockdot" />EN VIVO · {t}</span>;
}

/* ----- Panel lateral de detalle ----- */
function SidePanel() {
  const { sel, setSel, setHl } = useContext(LiveCtx);
  const F = window.FINAZ_FACTS, L = window.LIVE;
  const open = !!sel;
  // bloquear scroll de fondo cuando está abierto
  let body = null, head = null;

  if (sel) {
    if (sel.type === "value") {
      const v = L.values.find(x => x.id === sel.id);
      const relNews = L.sectors.find(s => s.id === v.secId)?.news.map(nid => L.news.find(n => n.id === nid)) || [];
      head = <PanelHead tag={v.t} title={v.nombre} sub={v.sector} pct={v.pct} />;
      body = (
        <>
          <PanelChart serie={v.serie} pct={v.pct} />
          <PanelRow k="Variación" v={pctStr(v.pct)} col={v.pct < 0 ? "var(--down)" : "var(--up)"} />
          <PanelRow k="Peso en el IBEX" v={fmtNum(v.peso, 1) + "%"} />
          <PanelRow k="Sector" v={v.sector} />
          <div className="lv-why"><span className="lv-whyk">Por qué se mueve</span>{v.motivo}.</div>
          <PanelNews list={relNews} onPick={n => setSel({ type: "news", id: n.id })} />
          <PanelSource txt="IBEX 35 · precios de cierre de sesión" />
        </>
      );
    } else if (sel.type === "sector") {
      const s = L.sectors.find(x => x.id === sel.id);
      const vals = s.valores.map(vid => L.values.find(v => v.id === vid));
      const relNews = s.news.map(nid => L.news.find(n => n.id === nid));
      head = <PanelHead tag={"SECTOR"} title={s.n} sub={`Sensibilidad a tipos ${s.sens}/5`} pct={s.pct} />;
      body = (
        <>
          <PanelRow k="Variación media" v={pctStr(s.pct)} col={s.pct < 0 ? "var(--down)" : "var(--up)"} />
          <div className="lv-sens">Sensibilidad a tipos {"●".repeat(s.sens)}<span className="lv-sensoff">{"●".repeat(5 - s.sens)}</span></div>
          <div className="lv-why"><span className="lv-whyk">Por qué reacciona</span>{s.razon}.</div>
          {vals.length > 0 && <div className="lv-paneltitle">Valores del sector</div>}
          <div className="lv-chips">
            {vals.map(v => (
              <button key={v.id} className="lv-chip" onClick={() => setSel({ type: "value", id: v.id })}>
                {v.t} <b style={{ color: v.pct < 0 ? "var(--down)" : "var(--up)" }}>{pctStr(v.pct)}</b>
              </button>
            ))}
          </div>
          <PanelNews list={relNews} onPick={n => setSel({ type: "news", id: n.id })} />
          <PanelSource txt="FINAZ · clasificación sectorial propia" />
        </>
      );
    } else if (sel.type === "news") {
      const n = L.news.find(x => x.id === sel.id);
      const affSec = n.affects.filter(a => a.startsWith("sec:")).map(a => L.sectors.find(s => s.id === a)).filter(Boolean);
      const affVal = n.affects.filter(a => a.startsWith("val:")).map(a => L.values.find(v => v.id === a)).filter(Boolean);
      head = <PanelHead tag={n.fuente} title={n.titular} sub={n.hora + " · impacto " + n.impacto} />;
      body = (
        <>
          <div className="lv-why"><span className="lv-whyk">Qué implica</span>{n.efecto}.</div>
          {n.term && <div className="lv-termbox"><b>{L.terms[n.term].t}.</b> {L.terms[n.term].d}</div>}
          {(affSec.length > 0) && <div className="lv-paneltitle">Sectores que mueve</div>}
          <div className="lv-chips">
            {affSec.map(s => (
              <button key={s.id} className="lv-chip" onMouseEnter={() => setHl({ set: new Set([s.id]) })} onMouseLeave={() => setHl({ set: new Set() })} onClick={() => setSel({ type: "sector", id: s.id })}>
                {s.n} <b style={{ color: s.pct < 0 ? "var(--down)" : "var(--up)" }}>{pctStr(s.pct)}</b>
              </button>
            ))}
          </div>
          {affVal.length > 0 && <><div className="lv-paneltitle">Valores afectados</div>
            <div className="lv-chips">{affVal.map(v => (
              <button key={v.id} className="lv-chip" onClick={() => setSel({ type: "value", id: v.id })}>{v.t} <b style={{ color: v.pct < 0 ? "var(--down)" : "var(--up)" }}>{pctStr(v.pct)}</b></button>
            ))}</div></>}
          <PanelSource txt={"Fuente declarada · " + n.fuente} />
        </>
      );
    }
  }

  return (
    <>
      <div className={"lv-backdrop" + (open ? " is-open" : "")} onClick={() => setSel(null)} />
      <aside className={"lv-panel" + (open ? " is-open" : "")} aria-hidden={!open}>
        {sel && (
          <>
            <button className="lv-panelclose" onClick={() => setSel(null)} aria-label="Cerrar">✕</button>
            {head}
            <div className="lv-panelbody">{body}</div>
            <div className="lv-paneldisc">{F.disclaimer}</div>
          </>
        )}
      </aside>
    </>
  );
}

function PanelHead({ tag, title, sub, pct }) {
  return (
    <header className="lv-panelhead">
      <span className="lv-paneltag">{tag}</span>
      <h3>{title}</h3>
      <div className="lv-panelsub">{sub}</div>
      {pct != null && <div className="lv-panelpct" style={{ color: pct < 0 ? "var(--down)" : "var(--up)" }}>{pctStr(pct)}</div>}
    </header>
  );
}
function PanelChart({ serie, pct }) {
  const col = pct < 0 ? "#ff7d9e" : "#6ce4a6";
  return (
    <div className="lv-panelchart">
      <LineChart data={serie} baseline={100} color={col} grid="rgba(120,210,170,.08)" text="#79ab93" h={120} w={360} dot strokeW={2.4} pad={10} />
    </div>
  );
}
function PanelRow({ k, v, col }) {
  return <div className="lv-panelrow"><span>{k}</span><b style={col ? { color: col } : {}}>{v}</b></div>;
}
function PanelNews({ list, onPick }) {
  if (!list || list.length === 0) return null;
  return (
    <>
      <div className="lv-paneltitle">Noticias relacionadas</div>
      <div className="lv-pnews">
        {list.map(n => (
          <button key={n.id} className="lv-pnewsitem" onClick={() => onPick(n)}>
            <span className="lv-pnewsh">{n.hora} · {n.fuente}</span>
            <span className="lv-pnewst">{n.titular}</span>
          </button>
        ))}
      </div>
    </>
  );
}
function PanelSource({ txt }) {
  return <div className="lv-source"><span className="lv-sourceico">⌖</span>{txt}</div>;
}

Object.assign(window, { LiveCtx, hlClass, Term, DepthDial, LiveClock, SidePanel });