/* ============================================================
   Modal de anuncio "Mis Ligas" (ligas privadas)
   ------------------------------------------------------------
   Da a conocer las ligas privadas e impulsa una acción: crear liga.
   Recrea el handoff de diseño sobre el patrón de la app (tokens var(--*)).

   Reglas de disparo (decididas con el equipo):
     · Audiencia: colaborador Quantia (isCorp, no invitado) con 0 ligas.
     · Cadencia:  a lo más 1 vez cada 12 h.
     · Tope:      máximo 4 impresiones.
     · Fin:       hasta el 13-jun-2026 23:59 (Lima), lo que pase primero.
     · Para en cuanto el colaborador tiene ≥1 liga (creada o unida).
   Persistencia: localStorage por dispositivo (sin backend, sin analítica).
   La impresión se marca AL MOSTRAR (no al cerrar) para no repetir al recargar.
   ============================================================ */
(function () {
  "use strict";

  const MAX_SHOWS = 4;
  const COOLDOWN_MS = 12 * 3600 * 1000;                 // 12 horas
  // 13-jun-2026 23:59:59 en Lima (UTC-5, sin DST) = 14-jun-2026 04:59:59 UTC
  const END_TS = Date.UTC(2026, 5, 14, 4, 59, 59);
  const KEY = (uid) => `quiniela_leagues_announce_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" —otro
  // modal abierto, flujo /join, pantalla— las evalúa App, que conoce ese estado).
  function eligible(now) {
    const Q = window.QStore, Ql = window.QLeagues;
    if (!Q || !Ql) return false;
    const me = Q.current;
    if (!me || me.guest) return false;                  // solo colaboradores
    if (!Ql.isCorp(me.email)) return false;             // de dominio Quantia
    if ((Ql.mine || []).length !== 0) return false;     // 0 ligas (para si ya tiene)
    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 de 12 h
    return true;
  }

  // Métricas → Firebase Analytics (window.QAnalytics, no-op si no está disponible).
  function track(event) { if (window.QAnalytics) window.QAnalytics.log(event); }

  /* ---------- modal (presentacional) ---------- */
  function LeaguesAnnounceModal({ onCreate, onDismiss }) {
    const { useEffect, useRef } = React;
    const createRef = useRef(null);
    const cardRef = useRef(null);
    const prevFocus = useRef(null);

    useEffect(() => {
      prevFocus.current = document.activeElement;
      if (createRef.current) createRef.current.focus();
      const onKey = (e) => {
        if (e.key === "Escape") { onDismiss(); return; }
        if (e.key !== "Tab") return;
        // focus trap dentro de la tarjeta
        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);
        // retorno de foco al disparador al cerrar
        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="la-title" aria-describedby="la-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">⚽ Nuevo · Ligas privadas</span>
            <div className="la-podium" aria-hidden="true">
              <div className="la-spot">
                <div className="la-ava la-a2">AN</div>
                <div className="la-bar la-b2">2</div>
              </div>
              <div className="la-spot">
                <div className="la-crown">
                  <svg viewBox="0 0 26 20" fill="currentColor"><path d="M2 6l4.2 3.4L11 2.4c.5-.8 1.7-.8 2.2 0l4.6 7L22 6c.9-.7 2.2.1 2 1.2l-1.9 9.5c-.1.7-.8 1.3-1.6 1.3H5.5c-.8 0-1.5-.6-1.6-1.3L2 7.2C1.8 6.1 3.1 5.3 4 6z" /></svg>
                </div>
                <div className="la-ava la-first la-ayou">TÚ</div>
                <div className="la-bar la-b1">1</div>
              </div>
              <div className="la-spot">
                <div className="la-ava la-a3">EF</div>
                <div className="la-bar la-b3">3</div>
              </div>
            </div>
          </div>

          <div className="la-body">
            <h1 id="la-title">Arma tu liga y demuestra quién manda.</h1>
            <p className="la-lead" id="la-desc">
              Crea una <strong>liga privada</strong> y rétate solo con los tuyos —amigos, familia o la barra de
              la oficina—, <strong>aparte de la tabla general de Quantia</strong>. Pasa el link por WhatsApp y mira quién se queda con el podio.
            </p>
            <div className="la-actions">
              <button className="la-btn-primary" ref={createRef} onClick={onCreate}>
                Crear mi liga
                <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={onDismiss}>Quizás luego</button>
            </div>
            <p className="la-note">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
              Te toma un minuto
              <span className="la-dot"></span>
              Hasta 20 jugadores
            </p>
          </div>
        </div>
      </div>
    );
  }

  window.QLeaguesAnnounce = { eligible, markShown, track, LeaguesAnnounceModal, MAX_SHOWS, COOLDOWN_MS, END_TS };
  window.LeaguesAnnounceModal = LeaguesAnnounceModal;
})();