/* ============================================================
   FINAZ — Pantalla en vivo · PANTALLA + APP
   8 bloques interactivos · profundidad Básico/Intermedio/Avanzado
   ============================================================ */
const { useState: useS, useEffect: useE, useContext: useC, useMemo: useM } = React;

function num(id, hl) { return hlClass(id, hl); }

/* Cabecera de bloque con copy según profundidad */
function Block({ n, copyKey, D, children, flush }) {
  const c = window.LIVE.copy[copyKey];
  return (
    <section className={"lv-block" + (flush ? " is-flush" : "")}>
      <header className="lv-blockhd">
        <span className="lv-blockn">{n}</span>
        <h2>{c.titulo[D]}</h2>
      </header>
      {c.lead[D] && <p className="lv-lead" dangerouslySetInnerHTML={{ __html: c.lead[D] }} />}
      {children}
    </section>
  );
}

/* ---------- Bloque: Activos movidos ---------- */
function MoversBlock({ D }) {
  const { setSel, hl } = useC(LiveCtx);
  const L = window.LIVE;
  const list = D === 0 ? L.values.slice(0, 6) : D === 1 ? L.values.slice(0, 9) : L.values;
  const maxAbs = Math.max(...L.values.map(v => Math.abs(v.pct)));
  return (
    <div className="lv-movers">
      {D === 2 && <div className="lv-movhd"><span>Valor</span><span>Sector</span><span className="r">Peso</span><span className="r">Var.</span></div>}
      {list.map(v => (
        <button key={v.id} className={"lv-movrow" + (D === 2 ? " is-table" : "") + num(v.id, hl)} onClick={() => setSel({ type: "value", id: v.id })}>
          <span className="lv-movt">{v.t}<i>{v.nombre}</i></span>
          {D === 2 && <span className="lv-movsec">{v.sector}</span>}
          {D !== 2 && <span className="lv-movbar"><span className="lv-movbarfill" style={{ width: (Math.abs(v.pct) / maxAbs * 100) + "%", background: v.pct < 0 ? "var(--down)" : "var(--up)" }} /></span>}
          {D === 2 && <span className="lv-movpeso r">{fmtNum(v.peso, 1)}%</span>}
          <span className="lv-movpct r" style={{ color: v.pct < 0 ? "var(--down)" : "var(--up)" }}>{pctStr(v.pct)}</span>
        </button>
      ))}
      {D !== 2 && <div className="lv-movhint">Pulsa un valor para ver por qué se mueve y sus noticias →</div>}
    </div>
  );
}

/* ---------- Bloque: Noticias (cadena causal) ---------- */
function NewsBlock({ D }) {
  const { setSel, setHl, hl } = useC(LiveCtx);
  const L = window.LIVE;
  return (
    <div className="lv-news">
      {L.news.map(n => (
        <button key={n.id}
          className={"lv-newsrow" + num(n.id, hl)}
          onMouseEnter={() => setHl({ set: new Set([n.id, ...n.affects]) })}
          onMouseLeave={() => setHl({ set: new Set() })}
          onFocus={() => setHl({ set: new Set([n.id, ...n.affects]) })}
          onBlur={() => setHl({ set: new Set() })}
          onClick={() => setSel({ type: "news", id: n.id })}>
          <span className="lv-newstime">{n.hora}</span>
          <span className={"lv-newsdot lv-imp-" + n.impacto} />
          <span className="lv-newsmain">
            <span className="lv-newssrc">{n.fuente}{D !== 0 && <span className={"lv-newsimp lv-imp-" + n.impacto}>{n.impacto}</span>}</span>
            <span className="lv-newstitle">{n.titular}</span>
            {D !== 0 && <span className="lv-newseff">→ {n.efecto}</span>}
          </span>
          <span className="lv-newsarrow">›</span>
        </button>
      ))}
    </div>
  );
}

/* ---------- Bloque: Macro ---------- */
function MacroBlock({ D }) {
  const F = window.FINAZ_FACTS, { setHl, hl } = useC(LiveCtx);
  const m = F.macro, o = F.otros;
  return (
    <div className="lv-macro">
      <div className="lv-macrostats">
        <div className="lv-mstat">
          <div className="lv-mstatk"><Term id="ipc">IPC EEUU</Term></div>
          <div className="lv-mstatv" style={{ color: "var(--down)" }}>{m.ipcEEUU.v}%</div>
          <div className="lv-mstats">esperado {m.ipcEEUU.esperado}%</div>
        </div>
        <div className="lv-mstat">
          <div className="lv-mstatk">Recortes 2026</div>
          <div className="lv-mstatv" style={{ color: "var(--amber)" }}>{m.recortesPrev.antes} → {m.recortesPrev.ahora}</div>
          <div className="lv-mstats">descontados por el mercado</div>
        </div>
        <div className={"lv-mstat is-link" + num("macro:bono", hl)}
          onMouseEnter={() => setHl({ set: new Set(["macro:bono", "n0", "n1"]) })} onMouseLeave={() => setHl({ set: new Set() })}>
          <div className="lv-mstatk"><Term id="bono">Bono ES 10A</Term></div>
          <div className="lv-mstatv" style={{ color: "var(--amber)" }}>{fmtNum(o.bono10ES.v, 2)}%</div>
          <div className="lv-mstats">+{o.bono10ES.bps} <Term id="pb">pb</Term> hoy</div>
        </div>
      </div>
      {D >= 1 && (
        <div className="lv-macrochart">
          <div className="lv-macrocharthd">Curva de tipos · España {D === 2 && <span className="lv-tag">tramo largo ↑</span>}</div>
          <YieldCurve data={m.curva} color="#9fe06a" grid="rgba(120,210,170,.06)" text="#5f8a76" h={180} w={540} />
        </div>
      )}
      {D === 2 && (
        <div className="lv-macrospark">
          <span>Bono ES 10A · últimas 6 sesiones</span>
          <Spark data={m.bonoSemana} color="#9fe06a" w={150} h={36} strokeW={2.2} />
          <b style={{ color: "var(--amber)" }}>{fmtNum(o.bono10ES.v, 2)}%</b>
        </div>
      )}
      <p className="lv-macronote">Con la inflación al alza, los <Term id="tipos">tipos</Term> se mantienen altos más tiempo. Eso sube la <Term id="descuento">tasa de descuento</Term> y los beneficios futuros «valen menos hoy».</p>
    </div>
  );
}

/* ---------- Bloque: Sectores ---------- */
function SectorsBlock({ D }) {
  const { setSel, setHl, hl } = useC(LiveCtx);
  const L = window.LIVE;
  const cellColor = pct => {
    const a = Math.min(Math.abs(pct) / 3, 1);
    if (Math.abs(pct) < 0.2) return "rgba(120,210,170,0.06)";
    const base = pct >= 0 ? "108,228,166" : "255,125,158";
    return `rgba(${base},${0.08 + a * 0.18})`;
  };
  return (
    <div className="lv-sectors">
      {L.sectors.map(s => (
        <button key={s.id}
          className={"lv-seccell" + num(s.id, hl)}
          style={{ background: cellColor(s.pct), borderColor: s.pct < 0 ? "rgba(255,125,158,.3)" : s.pct > 0 ? "rgba(108,228,166,.3)" : "rgba(120,210,170,.18)" }}
          onMouseEnter={() => setHl({ set: new Set([s.id, ...s.news]) })}
          onMouseLeave={() => setHl({ set: new Set() })}
          onClick={() => setSel({ type: "sector", id: s.id })}>
          <span className="lv-sechd"><b>{s.n}</b><i style={{ color: s.pct < 0 ? "var(--down)" : s.pct > 0 ? "var(--up)" : "var(--mut)" }}>{pctStr(s.pct)}</i></span>
          {D !== 0 && <span className="lv-secsens">{"●".repeat(s.sens)}<span className="lv-secsensoff">{"●".repeat(5 - s.sens)}</span></span>}
          {D === 2 && <span className="lv-secrazon">{s.razon}</span>}
        </button>
      ))}
    </div>
  );
}

/* ---------- Bloque: Conceptos ---------- */
function ConceptsBlock({ D }) {
  const F = window.FINAZ_FACTS;
  const list = D === 0 ? F.conceptos.slice(0, 4) : F.conceptos;
  return (
    <div className="lv-concepts">
      {list.map((c, i) => (
        <div key={i} className="lv-concept">
          <div className="lv-conceptk">{c.k}</div>
          <div className="lv-conceptd">{c.d}</div>
          {D !== 0 && <div className="lv-conceptej"><b>Hoy:</b> {c.ej}</div>}
        </div>
      ))}
    </div>
  );
}

/* ---------- Bloque: Escenarios ---------- */
function ScenariosBlock({ D }) {
  const F = window.FINAZ_FACTS;
  return (
    <div className="lv-scen">
      {F.escenarios.map((s, i) => (
        <div key={i} className="lv-scenitem">
          <div className="lv-scenhd"><span className="lv-scentype">{s.tipo}</span><span className="lv-scenwhen">{s.cuando}</span></div>
          <div className="lv-scent">{s.t}</div>
          <div className="lv-scenq">{s.que}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Hero en vivo ---------- */
function LiveHero({ D, live }) {
  const F = window.FINAZ_FACTS;
  const o = F.otros;
  const up = live.pct >= 0;
  const stats = [
    ["EuroStoxx 50", pctStr(F.europa[1].pct), F.europa[1].pct < 0],
    ["Bono ES 10A", fmtNum(o.bono10ES.v, 2) + "%", null, "amber"],
    ["EUR/USD", fmtNum(o.eurusd.v, 4), false],
    ["Brent", fmtNum(o.brent.v, 1) + "$", o.brent.pct < 0],
    ["VIX", fmtNum(o.vix.v, 1), o.vix.pct > 0],
  ];
  const shown = D === 0 ? stats.slice(0, 3) : stats;
  return (
    <div className="lv-hero">
      <div className="lv-herohd">
        <div className="lv-herohdl">
          <span className="lv-heroname">IBEX 35</span>
          <span className="lv-heroval" style={{ color: up ? "var(--up)" : "var(--down)" }}>{fmtNum(live.val, 2)}<span className="lv-herotick">{up ? "▲" : "▼"}</span></span>
          <span className="lv-herochg" style={{ color: up ? "var(--up)" : "var(--down)" }}>{pctStr(live.pct)} · {fmtNum(live.val - F.indice.cierreAyer, 1)} pts</span>
        </div>
        <LiveClock />
      </div>

      <LiveCandleChart depth={D} />

      <div className="lv-herostats">
        {shown.map((s, i) => (
          <div key={i} className="lv-herostat">
            <span className="lv-herostatk">{s[0]}</span>
            <span className="lv-herostatv" style={{ color: s[3] === "amber" ? "var(--amber)" : s[2] == null ? "#cdd6e2" : s[2] ? "var(--down)" : "var(--up)" }}>{s[1]}</span>
          </div>
        ))}
        <div className="lv-herohint">Pasa el ratón por el gráfico · pulsa un evento para ver la noticia</div>
      </div>
    </div>
  );
}

/* ====================== APP ====================== */
function LiveApp() {
  const F = window.FINAZ_FACTS;
  const [depth, setDepthRaw] = useS(() => parseInt(localStorage.getItem("finaz-depth") || "1", 10));
  const [hl, setHl] = useS({ set: new Set() });
  const [sel, setSel] = useS(null);
  const [live, setLive] = useS({ val: F.indice.valor, pct: F.indice.cambioPct });

  const setDepth = d => { setDepthRaw(d); localStorage.setItem("finaz-depth", d); };

  // Simulación de ticks en vivo
  useE(() => {
    const center = F.indice.valor, spread = 2.4;
    const iv = setInterval(() => {
      const val = center + (Math.random() - 0.5) * 2 * spread;
      const pct = (val - F.indice.cierreAyer) / F.indice.cierreAyer * 100;
      setLive({ val, pct });
    }, 2000);
    return () => clearInterval(iv);
  }, []);

  // Esc cierra panel
  useE(() => {
    const h = e => { if (e.key === "Escape") setSel(null); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);

  const D = depth;
  return (
    <LiveCtx.Provider value={{ depth: D, hl, setHl, sel, setSel }}>
      <div className="lv-app">
        <header className="lv-topbar">
          <div className="lv-brand"><span className="lv-logo">FINAZ</span><span className="lv-brandsub">en vivo</span></div>
          <div className="lv-question">{F.episode.pregunta}</div>
          <DepthDial depth={D} setDepth={setDepth} />
        </header>

        <main className="lv-scroll" id="lv-scroll">
          <div className="lv-stage">
            <Block n="01" copyKey="pasado" D={D} flush>
              <LiveHero D={D} live={live} />
            </Block>

            <div className="lv-cols">
              <Block n="03" copyKey="noticias" D={D}><NewsBlock D={D} /></Block>
              <Block n="02" copyKey="activos" D={D}><MoversBlock D={D} /></Block>
            </div>

            <Block n="04" copyKey="macro" D={D}><MacroBlock D={D} /></Block>
            <Block n="05" copyKey="sectores" D={D}><SectorsBlock D={D} /></Block>
            <Block n="06" copyKey="conceptos" D={D}><ConceptsBlock D={D} /></Block>
            <Block n="07" copyKey="escenarios" D={D}><ScenariosBlock D={D} /></Block>

            <Block n="08" copyKey="resumen" D={D}>
              <div className="lv-summary">
                <p>La bolsa <b>no cae porque las empresas vayan mal</b>: cae porque subió el <Term id="tipos">precio del dinero</Term>. Con la inflación al alza, el mercado exige más rentabilidad y paga menos por los mismos beneficios. Es <Term id="rotacion">rotación</Term>, no huida: el capital se mueve de los sectores sensibles a tipos hacia la banca.</p>
                <div className="lv-summarydisc">⌖ {F.disclaimer}</div>
              </div>
            </Block>
            <div className="lv-footspace" />
          </div>
        </main>

        <div className="lv-discbar"><span className="lv-discdot" />{F.disclaimer}</div>
        <SidePanel />
      </div>
    </LiveCtx.Provider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LiveApp />);