/* InstalarBanner → window. Banner sticky-bottom que invita al user a
   instalar la PWA. Tres estados:
     - Ya instalada  → no renderiza.
     - Chrome/Android/Edge (deferredInstallPrompt disponible) → botón
       "Instalar" dispara el prompt nativo.
     - iOS Safari → botón "Cómo" abre ModalInstalarIOS.

   Se oculta si el user lo dismissió hace < 7 días
   (localStorage: cultord_install_dismissed = timestamp).

   Aparece con delay de 3s para no molestar al abrir.

   Props:
     onOcultar?: () => void  (opcional, padre puede usarlo).
*/
(function () {
  const { useEffect, useMemo, useState } = React;

  const DISMISS_KEY = "cultord_install_dismissed";
  const DISMISS_MS = 7 * 24 * 60 * 60 * 1000; // 7 días
  const APARICION_MS = 400;

  function dismissedActivo() {
    try {
      const raw = localStorage.getItem(DISMISS_KEY);
      if (!raw) return false;
      const ts = parseInt(raw, 10);
      if (!isFinite(ts)) return false;
      return (Date.now() - ts) < DISMISS_MS;
    } catch (_) { return false; }
  }

  function InstalarBanner({ onOcultar, offsetBottom = 68 }) {
    const [visible, setVisible] = useState(false);
    const [hayPrompt, setHayPrompt] = useState(!!window.deferredInstallPrompt);
    const [modalIOS, setModalIOS] = useState(false);
    const [cerrado, setCerrado] = useState(false);

    const instalada = typeof window.estaInstalada === "function" && window.estaInstalada();
    const iosSafari = typeof window.esIOS === "function" && window.esIOS();

    // ¿Podemos mostrar el banner?
    // - Instalada → nunca.
    // - Si dismissió en los últimos 7 días → no.
    // - Android/Desktop → sólo si tenemos deferredInstallPrompt.
    // - iOS → siempre que no esté instalada (modo PWA).
    // - Otros browsers sin soporte → no.
    const puedeMostrar = useMemo(() => {
      if (instalada) {
        console.log("[InstalarBanner] oculto: app ya instalada");
        return false;
      }
      if (dismissedActivo()) {
        console.log("[InstalarBanner] oculto: user dismissó hace < 7 días");
        return false;
      }
      if (hayPrompt) {
        console.log("[InstalarBanner] mostrando → prompt nativo disponible");
        return true;
      }
      if (iosSafari) {
        console.log("[InstalarBanner] mostrando → iOS Safari (modal instrucciones)");
        return true;
      }
      console.log("[InstalarBanner] oculto: sin soporte de install en este browser");
      return false;
    }, [instalada, iosSafari, hayPrompt]);

    // Aparece después de 3 segundos.
    useEffect(() => {
      if (!puedeMostrar) { setVisible(false); return; }
      const t = setTimeout(() => setVisible(true), APARICION_MS);
      return () => clearTimeout(t);
    }, [puedeMostrar]);

    // Escucha el evento custom cuando beforeinstallprompt se captura
    // después de que el componente ya se montó (ej: usuario visita por
    // segunda vez con browser que guardó la condición).
    useEffect(() => {
      function onInstallable() { setHayPrompt(true); }
      function onInstalled() {
        setVisible(false);
        setCerrado(true);
        if (typeof onOcultar === "function") onOcultar();
      }
      window.addEventListener("cultord:installable", onInstallable);
      window.addEventListener("cultord:installed", onInstalled);
      return () => {
        window.removeEventListener("cultord:installable", onInstallable);
        window.removeEventListener("cultord:installed", onInstalled);
      };
    }, [onOcultar]);

    if (instalada || cerrado || !visible) return null;

    async function handleInstalar() {
      if (iosSafari && !hayPrompt) {
        setModalIOS(true);
        return;
      }
      const prompt = window.deferredInstallPrompt;
      if (!prompt) {
        console.warn("[InstalarBanner] sin deferredInstallPrompt — no se puede instalar ahora");
        return;
      }
      try {
        prompt.prompt();
        const choice = await prompt.userChoice;
        console.log("[InstalarBanner] userChoice:", choice && choice.outcome);
        window.deferredInstallPrompt = null;
        setHayPrompt(false);
        if (choice && choice.outcome === "dismissed") {
          registrarDismiss();
          setCerrado(true);
        }
      } catch (e) {
        console.warn("[InstalarBanner] prompt falló:", e);
      }
    }

    function registrarDismiss() {
      try { localStorage.setItem(DISMISS_KEY, String(Date.now())); } catch (_) {}
    }

    function handleCerrar() {
      registrarDismiss();
      setCerrado(true);
      if (typeof onOcultar === "function") onOcultar();
    }

    const ctaLabel = iosSafari && !hayPrompt ? "Cómo" : "Agregar";

    return (
      <React.Fragment>
        <div
          role="region"
          aria-label="Instalar CultoRD"
          style={{
            position: "fixed",
            left: "50%",
            transform: "translateX(-50%)",
            bottom: "calc(" + offsetBottom + "px + env(safe-area-inset-bottom, 0px))",
            width: "calc(100% - 16px)",
            maxWidth: 414,
            zIndex: 50,
            background: "linear-gradient(135deg, #2563EB 0%, #1E40AF 100%)",
            color: "#FFFFFF",
            borderRadius: 16,
            boxShadow: "0 10px 30px -10px rgba(30, 64, 175, 0.45), 0 4px 10px rgba(0,0,0,0.1)",
            padding: "12px 14px",
            display: "flex",
            alignItems: "center",
            gap: 12,
            animation: "instalarBannerSlideUp 300ms cubic-bezier(0.2, 0.9, 0.3, 1)",
          }}
        >
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            background: "rgba(255,255,255,0.18)",
            display: "flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0,
            overflow: "hidden",
          }} aria-hidden="true">
            <img
              src="/icon-192.svg"
              alt=""
              style={{ width: 34, height: 34, display: "block" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}
            />
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 14, fontWeight: 900,
              lineHeight: 1.2,
            }}>
              Agrega CultoRD a tu teléfono
            </div>
            <div style={{
              fontSize: 11, fontWeight: 500,
              opacity: 0.9,
              marginTop: 2,
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
            }}>
              Accede rápido desde tu pantalla de inicio
            </div>
          </div>

          <button
            type="button"
            onClick={handleInstalar}
            style={{
              flexShrink: 0,
              padding: "8px 14px",
              borderRadius: 999,
              border: "none",
              background: "#FFFFFF",
              color: "#2563EB",
              fontWeight: 900,
              fontSize: 12,
              letterSpacing: 0.3,
              cursor: "pointer",
              fontFamily: "inherit",
            }}
          >
            {ctaLabel}
          </button>

          <button
            type="button"
            onClick={handleCerrar}
            aria-label="Cerrar"
            style={{
              flexShrink: 0,
              width: 28, height: 28,
              borderRadius: 999,
              border: "none",
              background: "rgba(255,255,255,0.15)",
              color: "#FFFFFF",
              opacity: 0.75,
              cursor: "pointer",
              fontFamily: "inherit",
              fontWeight: 900,
              fontSize: 14,
              lineHeight: 1,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
          >
            ✕
          </button>

          <style>{`
            @keyframes instalarBannerSlideUp {
              from { transform: translate(-50%, 100%); opacity: 0; }
              to   { transform: translate(-50%, 0);    opacity: 1; }
            }
          `}</style>
        </div>

        {window.ModalInstalarIOS && (
          <window.ModalInstalarIOS
            abierto={modalIOS}
            onClose={() => setModalIOS(false)}
          />
        )}
      </React.Fragment>
    );
  }

  window.InstalarBanner = InstalarBanner;
})();