/* FINAZ — UI compartida entre los tres gráficos (intradía, drawdown, cadena).
   Garantiza un lenguaje visual coherente: panel narrativo, reproductor,
   tarjetas de glosario/noticia, fuentes/disclaimer, capas y popover. */
(function () {
  "use strict";
  const e = React.createElement;

  // Barra del reproductor (botón play + progreso)
  function PlayBar({ playing, idle, progress, onToggle, idleLabel }) {
    return e("div", { className: "fz-narrhead" },
      e("button", { className: "fz-play" + (playing ? " playing" : ""), onClick: onToggle },
        e("span", { className: "fz-playicon" }, playing ? "❚❚" : "▶"),
        playing ? "Pausar" : (idle ? (idleLabel || "Reproducir explicación") : "Reanudar")
      ),
      e("div", { className: "fz-progwrap" },
        e("div", { className: "fz-prog", style: { width: (Math.max(0, Math.min(1, progress)) * 100) + "%" } }))
    );
  }

  // Tarjeta narrativa (tag + título + cuerpo + hijos)
  function NarrativeCard({ tag, kind, time, title, body, summary, anim, children }) {
    return e("div", { className: "fz-narr" + (summary ? " summary" : ""), key: anim },
      e("div", { className: "fz-narrtag" + (kind ? " k-" + kind : "") + (summary ? " summary" : "") },
        tag, time && e("span", { className: "fz-narrtime" }, time)),
      e("h2", { className: "fz-narrtitle" }, title),
      body && e("p", { className: "fz-narrbody" }, body),
      children
    );
  }

  // Tarjetas extra: glosario / noticia
  // cards: [{ type:'term'|'news', label, head, headline?, text }]
  function ExtraCards({ cards }) {
    if (!cards || !cards.length) return null;
    return e("div", { className: "fz-extrawrap" },
      cards.map((c, i) => e("div", { className: "fz-extra " + (c.type === "news" ? "news" : "term"), key: i },
        e("div", { className: "fz-extrahead" },
          e("span", { className: "fz-extrak" + (c.type === "news" ? " alt" : "") }, c.label),
          c.head || ""),
        c.headline && e("h4", null, c.headline),
        e("p", null, c.text)
      ))
    );
  }

  // Cuadrícula de estadísticas
  function StatGrid({ stats }) {
    return e("div", { className: "fz-statgrid" },
      stats.map(([l, v]) => e("div", { className: "fz-stat", key: l },
        e("span", { className: "fz-statl" }, l),
        e("span", { className: "fz-statv" }, typeof v === "number" ? v.toLocaleString("es-ES") : v))));
  }

  // Chips de capas
  function LayerChips({ layers, defs, onToggle, label }) {
    return e("div", { className: "fz-layers" },
      label !== false && e("span", { className: "fz-layerlab" }, label || "Capas"),
      defs.map(([k, lab]) => e("button", { key: k, className: "fz-chip" + (layers[k] ? " on" : ""), onClick: () => onToggle(k) },
        e("span", { className: "fz-dot" }), lab)));
  }

  // Fuentes + disclaimer
  function SourcesFooter({ on, source, disclaimer }) {
    return e("footer", { className: "fz-sources" + (on ? " on" : "") },
      e("div", { className: "fz-srcline" }, e("span", { className: "fz-srctag" }, "FUENTE"), e("span", null, source)),
      e("div", { className: "fz-disc" }, e("span", { className: "fz-srctag warn" }, "AVISO"), e("span", null, disclaimer))
    );
  }

  // Popover pedagógico (hover sobre nodo/marcador): coords en % del contenedor
  function Popover({ marker }) {
    const left = (marker.x / marker.width) * 100;
    const top = (marker.y / marker.height) * 100;
    const flip = left > 62;
    return e("div", { className: "fz-pop " + marker.kind + (flip ? " flip" : ""), style: { left: left + "%", top: top + "%" } },
      marker.kind === "news"
        ? e(React.Fragment, null,
            e("div", { className: "fz-pophead" }, e("span", { className: "fz-popk alt" }, "Noticia"), marker.head),
            e("h4", null, marker.headline),
            e("p", null, marker.text))
        : e(React.Fragment, null,
            e("div", { className: "fz-pophead" }, e("span", { className: "fz-popk" }, marker.label || "Glosario"), marker.head || ""),
            e("h4", null, marker.term),
            e("p", null, marker.text))
    );
  }

  window.FinazUI = { e, PlayBar, NarrativeCard, ExtraCards, StatGrid, LayerChips, SourcesFooter, Popover };
})();