/* ============================================================
   Modal de novedades — Tabla de terceros + pantalla Eliminatorias
   ------------------------------------------------------------
   Avisa que la pantalla Tabla muestra la carrera de los 8 mejores
   terceros y que Eliminatorias permite ver el cuadro (quién juega
   contra quién). Reusa el shell .la-* del aviso de Ligas.

   Reglas de disparo:
     · Audiencia: cualquier usuario registrado (colaborador o invitado).
     · Cadencia:  a lo más 1 vez cada 20 h.
     · Tope:      máximo 3 impresiones.
     · Fin:       hasta el 27-jun-2026 23:59 (Lima) — cierre de la fase de grupos.
   Persistencia: localStorage por dispositivo (sin backend).
   La impresión se marca AL MOSTRAR (no al cerrar) para no repetir al recargar.
   ============================================================ */
(function () {
  "use strict";

  const MAX_SHOWS = 3;
  const COOLDOWN_MS = 20 * 3600 * 1000;                 // 20 horas
  // 27-jun-2026 23:59:59 en Lima (UTC-5) = 28-jun-2026 04:59:59 UTC
  const END_TS = Date.UTC(2026, 5, 28, 4, 59, 59);
  const KEY = (uid) => `quiniela_whatsnew_terceros_v1_${uid || "anon"}`;

  function readState(uid) {
    try { return JSON.parse(localStorage.getItem(KEY(uid))) || { count: 0, last: 0 }; }
    catch (e) { return { count: 0, last: 0 }; }
  }
  function markShown(uid, now) {
    try {
      const s = readState(uid);
      localStorage.setItem(KEY(uid), JSON.stringify({ count: (s.count || 0) + 1, last: now }));
    } catch (e) {}
  }

  // Elegibilidad de FRECUENCIA/AUDIENCIA (las reglas de "no interrumpir" las evalúa App).
  function eligible(now) {
    const Q = window.QStore;
    if (!Q) return false;
    const me = Q.current;
    if (!me) return false;                              // cualquier registrado
    if (now > END_TS) return false;                     // campaña terminada
    const s = readState(me.userId);
    if ((s.count || 0) >= MAX_SHOWS) return false;      // tope de impresiones
    if (now - (s.last || 0) < COOLDOWN_MS) return false; // cooldown
    return true;
  }

  function track(event) { if (window.QAnalytics) window.QAnalytics.log(event); }

  /* ---------- modal (presentacional) ---------- */
  function WhatsNewModal({ onGoStandings, onGoBracket, onDismiss }) {
    const { useEffect, useRef } = React;
    const primaryRef = useRef(null);
    const cardRef = useRef(null);
    const prevFocus = useRef(null);

    useEffect(() => {
      prevFocus.current = document.activeElement;
      if (primaryRef.current) primaryRef.current.focus();
      const onKey = (e) => {
        if (e.key === "Escape") { onDismiss(); return; }
        if (e.key !== "Tab") return;
        const f = cardRef.current ? cardRef.current.querySelectorAll(
          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') : [];
        if (!f.length) return;
        const first = f[0], last = f[f.length - 1];
        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
      };
      document.addEventListener("keydown", onKey);
      return () => {
        document.removeEventListener("keydown", onKey);
        if (prevFocus.current && prevFocus.current.focus) { try { prevFocus.current.focus(); } catch (e) {} }
      };
    }, []);

    const onScrim = (e) => { if (e.target === e.currentTarget) onDismiss(); };

    return (
      <div className="la-scrim" onClick={onScrim}>
        <div className="la-modal" role="dialog" aria-modal="true" aria-labelledby="wn-title" aria-describedby="wn-desc" ref={cardRef}>
          <div className="la-handle" aria-hidden="true"></div>
          <button className="la-close" onClick={onDismiss} aria-label="Cerrar">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>

          <div className="la-hero">
            <span className="la-badge">✨ Novedad · Camino a 16avos</span>
            <div className="wn-tiles" aria-hidden="true">
              <div className="wn-tile">
                <div className="wn-tile-cap">Eliminatorias</div>
                <div className="wn-row2"><span className="wn-fl">🇦🇷</span><span className="wn-line"></span><span className="wn-x">vs</span><span className="wn-line"></span><span className="wn-fl">🇭🇷</span></div>
                <div className="wn-row2"><span className="wn-fl">🇧🇷</span><span className="wn-line"></span><span className="wn-x">vs</span><span className="wn-line"></span><span className="wn-fl">🇲🇦</span></div>
                <div className="wn-row2"><span className="wn-fl">🇪🇸</span><span className="wn-line"></span><span className="wn-x">vs</span><span className="wn-line"></span><span className="wn-fl">🇨🇲</span></div>
              </div>
              <div className="wn-tile">
                <div className="wn-tile-cap">Mejores terceros</div>
                <div className="wn-row"><span className="wn-rk">1</span><span className="wn-fl">🇭🇷</span><span className="wn-line" style={{ width: "58%" }}></span><b>4</b></div>
                <div className="wn-row"><span className="wn-rk">2</span><span className="wn-fl">🇲🇦</span><span className="wn-line" style={{ width: "52%" }}></span><b>3</b></div>
                <div className="wn-cut"></div>
                <div className="wn-row dim"><span className="wn-rk">3</span><span className="wn-fl">🇨🇴</span><span className="wn-line" style={{ width: "44%" }}></span><b>2</b></div>
              </div>
            </div>
          </div>

          <div className="la-body">
            <h1 id="wn-title">Se van armando los 16avos</h1>
            <p className="la-lead" id="wn-desc">
              En <strong>Eliminatorias</strong> ves quién clasifica en vivo. En <strong>Tabla</strong>, la
              carrera de los mejores terceros.
            </p>
            <div className="la-actions">
              <button className="la-btn-primary" ref={primaryRef} onClick={onGoBracket}>
                Ver Eliminatorias
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
              </button>
              <button className="la-btn-ghost" onClick={onGoStandings}>Ver Tabla de Terceros</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.QWhatsNew = { eligible, markShown, track, WhatsNewModal, MAX_SHOWS, COOLDOWN_MS, END_TS };
  window.WhatsNewModal = WhatsNewModal;
})();