/* global React, window */
// =====================================================================
// V4 Soluciones — página completa
// Nivel 1 + 2: hero split + counters + Platinum badge + búsqueda +
// íconos en chips + tarjetas con chips meta + gancho trim +
// modal con tabs + sticky CTA + soluciones relacionadas + URL ?cat=
// =====================================================================

window.V4SolucionesPage = function V4SolucionesPage() {
  window.useReveal();
  const { useState, useEffect, useRef, useMemo, useCallback } = React;
  const Icon = window.IKIcon;

  // ------- i18n -------
  const { lang, t } = window.useV4();
  const c = t.soluciones;
  const fmt = (tpl, vars) => (tpl || "").replace(/\{(\w+)\}/g, (_, k) => vars[k] ?? "");

  // ------- Datos localizados (recalculan cuando cambia el idioma) -------
  const categorias = useMemo(() => window.IK_localizeCategorias(lang), [lang]);
  const soluciones = useMemo(() => window.IK_localizeSoluciones(lang), [lang]);

  // ------- State: URL-backed category + local search + modal -------
  const readUrlCat = () => {
    try {
      const p = new URLSearchParams(window.location.search);
      const c = p.get("cat");
      if (!c) return "all";
      if (c === "all") return "all";
      return categorias.some((x) => x.id === c) ? c : "all";
    } catch (_) {return "all";}
  };
  const [activeCat, setActiveCat] = useState(readUrlCat);
  const [query, setQuery] = useState("");
  const [openId, setOpenId] = useState(null);
  const [activeTab, setActiveTab] = useState("resumen");

  // Persist active category in URL (no history pollution)
  useEffect(() => {
    try {
      const url = new URL(window.location.href);
      if (activeCat === "all") url.searchParams.delete("cat");else
      url.searchParams.set("cat", activeCat);
      window.history.replaceState({}, "", url.toString());
    } catch (_) {}
  }, [activeCat]);

  const dialogRef = useRef(null);
  const lastTriggerRef = useRef(null);

  // ------- Conteos por categoría (chips) -------
  const counts = useMemo(() => {
    const c = { all: soluciones.length };
    for (const s of soluciones) c[s.categoria] = (c[s.categoria] || 0) + 1;
    return c;
  }, [soluciones]);

  // ------- Filtrado combinado: categoría + búsqueda -------
  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return soluciones.filter((s) => {
      if (activeCat !== "all" && s.categoria !== activeCat) return false;
      if (!q) return true;
      const catName = (categorias.find((c) => c.id === s.categoria) || {}).nombre || "";
      const hay = (s.titulo + " " + s.gancho + " " + catName).toLowerCase();
      return hay.includes(q);
    });
  }, [soluciones, categorias, activeCat, query]);

  // ------- Solución abierta -------
  const open = useMemo(
    () => soluciones.find((s) => s.id === openId) || null,
    [soluciones, openId]
  );

  const relacionadas = useMemo(() => {
    if (!open) return [];
    return soluciones.
    filter((s) => s.categoria === open.categoria && s.id !== open.id).
    slice(0, 3);
  }, [soluciones, open]);

  // ------- Abrir / cerrar modal con <dialog> nativo -------
  const openSolution = useCallback((id, trigger) => {
    lastTriggerRef.current = trigger || null;
    setOpenId(id);
    setActiveTab("resumen");
  }, []);

  const closeSolution = useCallback(() => {
    const dlg = dialogRef.current;
    if (dlg && dlg.open) {
      try {dlg.close();} catch (_) {}
    }
    setOpenId(null);
    setTimeout(() => {
      const el = lastTriggerRef.current;
      if (el && typeof el.focus === "function") el.focus();
    }, 0);
  }, []);

  useEffect(() => {
    const dlg = dialogRef.current;
    if (!dlg) return;
    if (open && !dlg.open) {
      try {dlg.showModal();} catch (_) {dlg.setAttribute("open", "");}
      const closeBtn = dlg.querySelector(".sol-modal__close");
      if (closeBtn) closeBtn.focus();
      document.body.style.overflow = "hidden";
    } else if (!open && dlg.open) {
      try {dlg.close();} catch (_) {}
      document.body.style.overflow = "";
    }
    return () => {document.body.style.overflow = "";};
  }, [open]);

  useEffect(() => {
    const dlg = dialogRef.current;
    if (!dlg) return;
    const onCancel = (e) => {e.preventDefault();closeSolution();};
    const onClose = () => {setOpenId(null);document.body.style.overflow = "";};
    dlg.addEventListener("cancel", onCancel);
    dlg.addEventListener("close", onClose);
    return () => {
      dlg.removeEventListener("cancel", onCancel);
      dlg.removeEventListener("close", onClose);
    };
  }, [closeSolution]);

  const onBackdropClick = (e) => {
    if (e.target === dialogRef.current) closeSolution();
  };

  const catMeta = (id) => categorias.find((c) => c.id === id) || { nombre: id, icon: "sparkles" };

  // ------- Helpers para las meta-chips de la tarjeta -------
  // Mostramos sólo la PRIMERA frase del gancho — siempre es la más punzante,
  // termina en signo de puntuación natural (sin "…" feo) y deja altura uniforme
  // en el grid. El gancho completo vive en el modal (tab "Resumen").
  const firstSentence = (txt) => {
    if (!txt) return "";
    const m = txt.match(/^[^.!?]*[.!?]/);
    return (m ? m[0] : txt).trim();
  };

  const cardMeta = (s) => {
    // s.ficha es array [{ kind, k, v }] — buscar por kind estable, no por texto traducido.
    const find = (kind) => (s.ficha || []).find((e) => e.kind === kind);
    const tiempo = find("time")?.v || "";
    const productos = find("prods")?.v || "";
    // Limpiar productos (quitar add-on note si es muy largo)
    const prodShort = productos.split(/\s*\(/)[0].trim();
    return { tiempo, prodShort };
  };

  return (
    <React.Fragment>
      <window.V4Nav active="solutions" />

      {/* =================================================
                     HERO — split layout (texto + visual de cards)
                 ================================================= */}
      <section className="sol-hero">
        <div className="sol-hero__inner sol-hero__split" data-reveal>
          {/* Columna texto */}
          <div className="sol-hero__copy">
            <p className="sol-hero__eyebrow">
              <span className="sol-hero__platinum" aria-label={c.platinum} style={{ color: "rgb(118, 95, 255)" }}>
                <Icon name="sparkles" size={14} /> {c.platinum}
              </span>
            </p>
            <h1 className="sol-hero__title">
              {c.hero_t1} <em><span style={{ color: "rgb(0, 200, 200)" }}>{c.hero_t1_em}</span></em>
              <br />{c.hero_t2}
            </h1>
            <p className="sol-hero__sub">{c.hero_sub}</p>

            {/* Stats / counters */}
            <dl className="sol-hero__stats" aria-label="">
              <div className="sol-hero__stat">
                <dt className="sol-hero__stat-k">{c.stat_soluciones}</dt>
                <dd className="sol-hero__stat-v">
                  <window.CountUp to={soluciones.length} />
                </dd>
              </div>
              <div className="sol-hero__stat">
                <dt className="sol-hero__stat-k">{c.stat_categorias}</dt>
                <dd className="sol-hero__stat-v">
                  <window.CountUp to={categorias.length} />
                </dd>
              </div>
            </dl>
          </div>

          {/* Columna visual: tarjetas apiladas en perspectiva */}
          <div className="sol-hero__visual" aria-hidden="true">
            {soluciones.slice(0, 4).map((s, i) => {
              const meta = catMeta(s.categoria);
              return (
                <div key={s.id} className={`sol-hero__minicard sol-hero__minicard--${i + 1}`}>
                  <div className="sol-hero__minicard-icn">
                    <Icon name={meta.icon} size={18} />
                  </div>
                  <div className="sol-hero__minicard-cat">{meta.nombre}</div>
                  <div className="sol-hero__minicard-title">{s.titulo}</div>
                  <div className="sol-hero__minicard-bar" />
                </div>);

            })}
            <div className="sol-hero__visual-glow" />
          </div>
        </div>
      </section>

      {/* =================================================
                     FILTROS — "Todas" fijo izq · scroll categorías · búsqueda fija der
                 ================================================= */}
      <nav className="sol-filters" aria-label={c.filter_aria_main}>
        <div className="sol-filters__inner">
          {/* Todas — FIXED LEFT */}
          <button
            type="button" role="tab"
            className="sol-chip sol-chip--all"
            aria-pressed={activeCat === "all"}
            onClick={() => setActiveCat("all")} style={{ backgroundColor: "rgb(118, 95, 255)", borderColor: "rgb(118, 95, 255)" }}>
            
            <Icon name="sparkles" size={15} />
            {c.chip_all}
            <span className="sol-chip__count" style={{ backgroundColor: "rgb(255, 255, 255)" }}>{counts.all || 0}</span>
          </button>

          {/* Scrolling band: categorías — auto-marquee */}
          <div className="sol-filters__scroll" role="tablist" aria-label={c.filter_aria_categorias}>
            <div className="sol-filters__track">
              {/* Render twice for seamless infinite loop */}
              {[0, 1].map((copy) =>
              <div key={copy} className="sol-filters__row" aria-hidden={copy === 1 ? "true" : undefined}>
                  {categorias.map((cat) =>
                <button
                  key={`${copy}-${cat.id}`}
                  type="button"
                  role={copy === 0 ? "tab" : undefined}
                  tabIndex={copy === 0 ? 0 : -1}
                  className="sol-chip"
                  aria-pressed={activeCat === cat.id}
                  onClick={() => setActiveCat(cat.id)}>
                  
                      <Icon name={cat.icon} size={15} />
                      {cat.nombre}
                      <span className="sol-chip__count">{counts[cat.id] || 0}</span>
                    </button>
                )}
                </div>
              )}
            </div>
          </div>

          {/* Search — FIXED RIGHT */}
          <div className="sol-search">
            <span className="sol-search__icn"><Icon name="search" size={18} /></span>
            <input
              type="search"
              className="sol-search__input"
              placeholder={c.search_placeholder}
              aria-label={c.search_aria}
              value={query}
              onChange={(e) => setQuery(e.target.value)} />
            
            {query &&
            <button
              type="button"
              className="sol-search__clear"
              aria-label={c.search_clear}
              onClick={() => setQuery("")}>
              
                <Icon name="x" size={14} />
              </button>
            }
          </div>
        </div>
      </nav>

      {/* =================================================
                     GRID
                 ================================================= */}
      <section className="sol-grid-section" aria-label={c.grid_aria}>
        <div className="sol-grid-section__inner">
          <div className="sol-grid-meta" aria-live="polite">
            <span>
              {(() => {
                const n = filtered.length;
                const base = fmt(n === 1 ? c.meta_showing_one : c.meta_showing_many, { n });
                // wrap the number in <strong> via split
                const parts = base.split(String(n));
                return (
                  <>
                    {parts[0]}<strong>{n}</strong>{parts[1] || ""}
                    {activeCat !== "all" && <> {c.meta_in} <strong>{catMeta(activeCat).nombre}</strong></>}
                    {query && <> {c.meta_matching} <strong>"{query}"</strong></>}
                  </>
                );
              })()}
            </span>
            {(activeCat !== "all" || query) &&
            <button
              type="button"
              className="sol-grid-meta__reset"
              onClick={() => {setActiveCat("all");setQuery("");}}>
              
                {c.meta_reset}
                <Icon name="x" size={12} />
              </button>
            }
          </div>

          {filtered.length === 0 ?
          <div className="sol-empty">
              <div className="sol-empty__icn"><Icon name="search" size={32} /></div>
              <h3>{c.empty_title}</h3>
              <p>{c.empty_sub}</p>
              <button
              type="button"
              className="sol-empty__btn"
              onClick={() => {setActiveCat("all");setQuery("");}}>
              {fmt(soluciones.length === 1 ? c.empty_btn_one : c.empty_btn_many, { n: soluciones.length })}</button>
            </div> :

          <div className="sol-grid">
              {filtered.map((s) => {
              const meta = catMeta(s.categoria);
              const { tiempo, prodShort } = cardMeta(s);
              return (
                <article key={s.id}>
                    <button
                    type="button"
                    className="sol-card"
                    onClick={(e) => openSolution(s.id, e.currentTarget)}
                    aria-label={fmt(c.card_aria, { title: s.titulo })}>
                    
                      <div className="sol-card__head">
                        <span className="sol-card__cat">
                          <span className="sol-card__cat-icn"><Icon name={meta.icon} size={14} /></span>
                          {meta.nombre}
                        </span>
                        {s.badge && <span className="sol-card__badge">{s.badge}</span>}
                      </div>
                      <h2 className="sol-card__title">{s.titulo}</h2>
                      <p className="sol-card__hook">{firstSentence(s.gancho)}</p>

                      {/* Meta chips */}
                      <div className="sol-card__meta">
                        {tiempo &&
                      <span className="sol-card__metachip">
                            <Icon name="clock" size={13} /> {tiempo}
                          </span>
                      }
                        {prodShort &&
                      <span className="sol-card__metachip">
                            <Icon name="plug" size={13} /> {prodShort}
                          </span>
                      }
                      </div>

                      <div className="sol-card__foot">
                        <span className="sol-card__cta">
                          {c.card_cta}
                          <Icon name="arrowRight" size={14} />
                        </span>
                      </div>
                    </button>
                  </article>);

            })}
            </div>
          }
        </div>
      </section>

      {/* =================================================
                     MODAL — tabs + sticky CTA + relacionadas
                 ================================================= */}
      <dialog
        ref={dialogRef}
        className="sol-modal"
        aria-labelledby="sol-modal-title"
        onClick={onBackdropClick}>
        
        {open && (() => {
          const meta = catMeta(open.categoria);
          const tabs = [
          { id: "resumen",    label: c.tab_resumen },
          { id: "features",   label: c.tab_features },
          { id: "ficha",      label: c.tab_ficha },
          { id: "beneficios", label: c.tab_beneficios }];

          return (
            <div className="sol-modal__panel" onClick={(e) => e.stopPropagation()}>
              {/* HEAD */}
              <header className="sol-modal__head">
                <button
                  type="button"
                  className="sol-modal__close"
                  onClick={closeSolution}
                  aria-label={c.modal_close}>
                  
                  <Icon name="x" size={18} />
                </button>
                <p className="sol-modal__cat">
                  <span className="sol-modal__cat-icn"><Icon name={meta.icon} size={16} /></span>
                  {meta.nombre}
                  {open.badge && <span className="sol-modal__badge">{open.badge}</span>}
                </p>
                <h2 id="sol-modal-title" className="sol-modal__title">{open.titulo}</h2>

                {/* Tabs */}
                <div className="sol-tabs" role="tablist" aria-label={c.tabs_aria}>
                  {tabs.map((tab) =>
                  <button
                    key={tab.id}
                    type="button"
                    role="tab"
                    className="sol-tab"
                    aria-selected={activeTab === tab.id}
                    onClick={() => setActiveTab(tab.id)}>
                    {tab.label}</button>
                  )}
                </div>
              </header>

              {/* BODY */}
              <div className="sol-modal__body">
                {activeTab === "resumen" &&
                <section className="sol-block" aria-label={c.tab_resumen}>
                    <h3 className="sol-block__label">{c.section_problem}</h3>
                    <p className="sol-block__text">{open.problema}</p>
                    <h3 className="sol-block__label sol-block__label--mt">{c.section_hook}</h3>
                    <p className="sol-block__text sol-block__text--lead">{open.gancho}</p>
                  </section>
                }

                {activeTab === "features" &&
                <section className="sol-block" aria-label={c.tab_features}>
                    <h3 className="sol-block__label">{c.section_features}</h3>
                    <ul className="sol-block__list">
                      {open.caracteristicas.map((item, i) => <li key={i}>{item}</li>)}
                    </ul>
                  </section>
                }

                {activeTab === "ficha" &&
                <section className="sol-block" aria-label={c.tab_ficha}>
                    <h3 className="sol-block__label">{c.section_ficha}</h3>
                    <div className="sol-ficha">
                      {open.ficha.map((entry) =>
                    <div key={entry.kind || entry.k} className="sol-ficha__item">
                          <span className="sol-ficha__k">{entry.k}</span>
                          <span className="sol-ficha__v">{entry.v}</span>
                        </div>
                    )}
                    </div>
                  </section>
                }

                {activeTab === "beneficios" &&
                <section className="sol-block" aria-label={c.tab_beneficios}>
                    <h3 className="sol-block__label">{c.section_benefits}</h3>
                    <ul className="sol-block__list">
                      {open.beneficios.map((b, i) => <li key={i}>{b}</li>)}
                    </ul>
                  </section>
                }

                {/* Soluciones relacionadas */}
                {relacionadas.length > 0 &&
                <section className="sol-related" aria-label={c.related_aria}>
                    <h3 className="sol-block__label">{c.section_related} {meta.nombre}</h3>
                    <div className="sol-related__grid">
                      {relacionadas.map((r) =>
                    <button
                      key={r.id}
                      type="button"
                      className="sol-related__card"
                      onClick={() => {setOpenId(r.id);setActiveTab("resumen");}}>
                      
                          <div className="sol-related__t">{r.titulo}</div>
                          <div className="sol-related__a">
                            {c.card_cta} <Icon name="arrowRight" size={13} />
                          </div>
                        </button>
                    )}
                    </div>
                  </section>
                }
              </div>

              {/* STICKY FOOTER */}
              <footer className="sol-modal__foot">
                <p className="sol-modal__foot-note">{c.foot_note}</p>
                <a
                  href={window.IK_CALENDAR_URL}
                  target="_blank"
                  rel="noopener"
                  className="sol-modal__cta">
                  
                  {c.cta}
                  <Icon name="arrowRight" size={16} />
                </a>
              </footer>
            </div>);

        })()}
      </dialog>

      <window.V5Contact />
      <window.V4Footer />
    </React.Fragment>);

};