/* Embedded static pages (Home navy, Médicos, Programa Lealtad)
 * Renders the original hand-built HTML with its CSS scoped under a wrapper
 * class so it can't collide with styles.css. Internal links carry data-nav
 * and are routed through the SPA navigate().
 */

function EmbeddedPage({ data, scope, navigate, onMount }) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onClick = (e) => {
      const a = e.target.closest("[data-nav]");
      if (a && el.contains(a)) {
        e.preventDefault();
        navigate(a.getAttribute("data-nav"));
        window.scrollTo({ top: 0, behavior: "instant" });
      }
    };
    el.addEventListener("click", onClick);
    const cleanup = onMount ? onMount(el) : null;
    return () => { el.removeEventListener("click", onClick); if (cleanup) cleanup(); };
  }, [data, navigate, onMount]);

  if (!data) return null;
  return (
    <React.Fragment>
      <style>{data.css}</style>
      <div className={scope} ref={ref} dangerouslySetInnerHTML={{ __html: data.html }} />
    </React.Fragment>
  );
}

/* Home behavior: tabs de audiencias, accesos rapidos por ID real,
 * submit del buscador y carrusel manual de destacados.
 * Todo queda dentro del wrapper .embed-home; no toca las otras paginas embebidas. */
function makeInitHome(openStudy, navigate, openArticle) {
  return function initHome(el) {
    const offs = [];

    /* Tabs de audiencias */
    const tabs = el.querySelector("#tabs");
    if (tabs) {
      const onTab = (e) => {
        const btn = e.target.closest(".tab");
        if (!btn) return;
        const key = btn.getAttribute("data-tab");
        el.querySelectorAll("#tabs .tab").forEach(t => t.classList.toggle("active", t === btn));
        el.querySelectorAll(".panel").forEach(p => p.classList.toggle("active", p.id === "panel-" + key));
      };
      tabs.addEventListener("click", onTab);
      offs.push(() => tabs.removeEventListener("click", onTab));
    }

    /* Accesos rapidos -> detalle del estudio por ID real del prototipo */
    const onStudy = (e) => {
      const a = e.target.closest("[data-study]");
      if (!a || !el.contains(a)) return;
      e.preventDefault();
      if (openStudy) openStudy(a.getAttribute("data-study"));
    };
    el.addEventListener("click", onStudy);
    offs.push(() => el.removeEventListener("click", onStudy));

    /* Tarjetas del bloque Blog -> artículo real del prototipo */
    const onArticle = (e) => {
      const a = e.target.closest("[data-article]");
      if (!a || !el.contains(a)) return;
      e.preventDefault();
      if (openArticle) openArticle(a.getAttribute("data-article"));
    };
    el.addEventListener("click", onArticle);
    offs.push(() => el.removeEventListener("click", onArticle));

    /* Buscador del hero -> catalogo (destino real; no simula resultados) */
    const form = el.querySelector(".search-field");
    if (form) {
      const onSubmit = (e) => { e.preventDefault(); if (navigate) navigate("catalogo"); };
      form.addEventListener("submit", onSubmit);
      offs.push(() => form.removeEventListener("submit", onSubmit));
    }

    /* Carrusel de destacados: flechas accesibles, sin autoplay */
    const track = el.querySelector("#dest-track");
    if (track) {
      const arrows = el.querySelectorAll("[data-dest]");
      const step = () => {
        const card = track.querySelector(".dest-card");
        return card ? card.offsetWidth + 20 : 320;
      };
      const sync = () => {
        const max = track.scrollWidth - track.clientWidth - 2;
        arrows.forEach(b => {
          const isPrev = b.getAttribute("data-dest") === "prev";
          b.disabled = isPrev ? track.scrollLeft <= 2 : track.scrollLeft >= max;
        });
      };
      const onArrow = (e) => {
        const b = e.currentTarget;
        track.scrollBy({ left: b.getAttribute("data-dest") === "prev" ? -step() : step(), behavior: "smooth" });
      };
      arrows.forEach(b => b.addEventListener("click", onArrow));
      track.addEventListener("scroll", sync);
      window.addEventListener("resize", sync);
      sync();
      offs.push(() => {
        arrows.forEach(b => b.removeEventListener("click", onArrow));
        track.removeEventListener("scroll", sync);
        window.removeEventListener("resize", sync);
      });
    }

    return () => offs.forEach(f => f());
  };
}

function HomeNavy({ navigate, openStudy, openArticle }) {
  /* El bloque Blog del Home vive en src/embed-home.js, fuente real de la Home
   * embebida. Sus tarjetas navegan por data-article / data-nav. */
  const onMount = React.useCallback(
    (el) => makeInitHome(openStudy, navigate, openArticle)(el),
    [openStudy, navigate, openArticle]
  );
  return <EmbeddedPage data={window.EMBED_HOME} scope="embed-home" navigate={navigate} onMount={onMount} />;
}
function MedicosNavy({ navigate }) {
  return <EmbeddedPage data={window.EMBED_MEDICOS} scope="embed-medicos" navigate={navigate} />;
}
function LealtadPage({ navigate }) {
  return <EmbeddedPage data={window.EMBED_LEALTAD} scope="embed-lealtad" navigate={navigate} />;
}

Object.assign(window, { EmbeddedPage, HomeNavy, MedicosNavy, LealtadPage });