/* AceptarInvitacion → window. Landing pública para enlaces /i/XXXXXX.
   Portal en document.body, zIndex 90 (por encima de todo).
   Props: { codigo, onCerrar, onRegistrarIglesia }
   Estados visuales: valida | expirada | usada | invalida | aceptado

   Formato "carta": saludo bíblico rotado, cuerpo corto según tipo,
   despedida firmada por CultoRD. Compacto para mobile sin scroll.

   - Si no hay user al tap Aceptar: signInGoogle() + flag en sessionStorage
     para auto-aceptar cuando vuelva (popup o redirect).
   - Tipo "pastor": tras aceptar abre el wizard RegistrarIglesia. */
(function () {
  const { useState, useEffect, useMemo, useRef } = React;
  const { useAuth, useTheme } = window;

  const BRAND = "#2563EB";
  const GREEN = "#58CC02";
  const GREEN_SHADOW = "#46A302";
  const AMBER = "#FFC800";
  const DANGER = "#FF4B4B";
  const INK = "#2A2A2A";
  const MUTED = "#777";
  const PAPER = "#FFFDF8";

  const STORAGE_KEY = "cultord_pending_invite";

  // 10 saludos cristianos/bíblicos evangélicos. Siempre formal (usted).
  const SALUDOS = [
    "La paz del Señor sea con usted",
    "Gracia y paz a usted, de parte de Dios nuestro Padre",
    "Paz a esta casa",
    "El Señor esté con usted",
    "Shalom, hermano en Cristo",
    "Que la gracia de nuestro Señor Jesús le acompañe",
    "Misericordia, paz y amor le sean multiplicados",
    "Paz sea con usted, y amor con fe",
    "Que el Dios de paz esté con usted siempre",
    "Bendiciones en el nombre de Jesucristo",
  ];

  const DESPEDIDAS = [
    "Con amor en Cristo,",
    "En Cristo,",
    "Un abrazo fraternal en el Señor,",
    "Bendiciones,",
    "Su hermano en la fe,",
  ];

  function hashRotacion(codigo, len) {
    let n = 0;
    const s = String(codigo || "");
    for (let i = 0; i < s.length; i++) n = (n + s.charCodeAt(i)) >>> 0;
    return len > 0 ? n % len : 0;
  }

  // Lee /invitaciones/{codigo} desde RTDB y clasifica. Async.
  async function clasificarAsync(codigo) {
    const limpio = String(codigo || "").trim();
    if (!/^\d{6}$/.test(limpio)) return { estado: "invalida", invitacion: null };
    if (!window.db) return { estado: "invalida", invitacion: null };
    try {
      const snap = await window.db.ref("invitaciones/" + limpio).once("value");
      if (!snap.exists()) return { estado: "invalida", invitacion: null };
      const inv = snap.val() || {};
      inv.codigo = limpio;
      if (inv.usado) return { estado: "usada", invitacion: inv };
      if (typeof inv.expira_en === "number" && inv.expira_en < Date.now()) {
        return { estado: "expirada", invitacion: inv };
      }
      return { estado: "valida", invitacion: inv };
    } catch (e) {
      console.warn("[AceptarInvitacion] no se pudo leer invitación:", e);
      return { estado: "invalida", invitacion: null };
    }
  }

  function formatoTiempoRestante(ms) {
    if (ms <= 0) return "Expiró";
    const segundos = Math.floor(ms / 1000);
    const minutos = Math.floor(segundos / 60);
    const horas = Math.floor(minutos / 60);
    const dias = Math.floor(horas / 24);
    if (dias >= 1) return "Expira en " + dias + "d " + (horas % 24) + "h";
    if (horas >= 1) return "Expira en " + horas + "h " + (minutos % 60) + "m";
    if (minutos >= 1) return "Expira en " + minutos + "m";
    return "Expira en " + segundos + "s";
  }

  function pillTiempo(ms) {
    const UNA_HORA = 60 * 60 * 1000;
    const UN_DIA = 24 * UNA_HORA;
    if (ms < UNA_HORA) return { bg: DANGER, fg: "#FFFFFF" };
    if (ms < UN_DIA)   return { bg: AMBER,  fg: "#3C3C3C" };
    return { bg: GREEN, fg: "#FFFFFF" };
  }

  function nombreRol(inv) {
    if (!inv) return "";
    return inv.rol_nombre || inv.rol || "un rol de servicio";
  }

  function labelBotonPorTipo(tipo, procesando, tieneUser) {
    if (procesando) return tieneUser ? "Procesando..." : "Abriendo sesión...";
    if (!tieneUser) return "Iniciar sesión y continuar";
    if (tipo === "pastor")  return "Aceptar y registrar mi iglesia";
    if (tipo === "miembro") return "Aceptar y unirme";
    if (tipo === "rol")     return "Aceptar este llamado";
    if (tipo === "amigo")   return "Aceptar y entrar";
    return "Aceptar invitación";
  }

  function AceptarInvitacion({ codigo, onCerrar, onRegistrarIglesia }) {
    const { user, signInGoogle } = useAuth();
    const { dark } = (typeof useTheme === "function" ? useTheme() : null) || { dark: false };
    const [estado, setEstado] = useState("cargando");
    const [invitacion, setInvitacion] = useState(null);
    const [aceptado, setAceptado] = useState(false);
    const [procesando, setProcesando] = useState(false);
    const [errorLogin, setErrorLogin] = useState("");
    const [ahora, setAhora] = useState(Date.now());
    const autoHechoRef = useRef(false);

    const bgBackdrop = dark ? "#0F0F10" : "#FFFFFF";
    const bgPaper = dark ? "#1A1A1A" : PAPER;
    const colorTexto = dark ? "#F0F0F0" : INK;
    const colorMuted = dark ? "#9CA3AF" : MUTED;
    const colorBordeCarta = dark ? "#2A2A2A" : "#EEE6D0";
    const colorDashed = dark ? "#2A2A2A" : "#D9D1B5";
    const bgBotonCerrar = dark ? "rgba(26,26,26,0.92)" : "rgba(255,255,255,0.92)";
    const colorBotonCerrar = dark ? "#F0F0F0" : INK;
    const colorError = dark ? "#FCA5A5" : DANGER;
    const bgAvisoPastor = dark ? "#3F2F00" : "#FFF8E1";
    const colorAvisoPastor = dark ? "#FDE68A" : "#6B5A00";
    const colorAvisoBorde = dark ? "#6B5A00" : "#FFE082";
    const sombraCartaExtra = dark ? "0 2px 0 #0A0A0A" : "0 2px 0 #E9E4D7";

    useEffect(function () {
      let cancelado = false;
      setEstado("cargando");
      setInvitacion(null);
      clasificarAsync(codigo).then(function (r) {
        if (cancelado) return;
        setEstado(r.estado);
        setInvitacion(r.invitacion);
      });
      return function () { cancelado = true; };
    }, [codigo]);

    const saludo = useMemo(function () {
      return SALUDOS[hashRotacion(codigo, SALUDOS.length)];
    }, [codigo]);
    const despedida = useMemo(function () {
      return DESPEDIDAS[hashRotacion(codigo + "f", DESPEDIDAS.length)];
    }, [codigo]);

    useEffect(function () {
      if (estado !== "valida") return;
      const t = setInterval(function () { setAhora(Date.now()); }, 30000);
      return function () { clearInterval(t); };
    }, [estado]);

    useEffect(function () {
      if (estado !== "valida" || !invitacion) return;
      if (typeof invitacion.expira_en === "number" && invitacion.expira_en < ahora) {
        setEstado("expirada");
      }
    }, [ahora, estado, invitacion]);

    async function ejecutarAceptacion() {
      if (typeof window.usarInvitacion !== "function") {
        setProcesando(false);
        return false;
      }
      const ctx = user ? { uid: user.uid, email: user.email, user: user } : null;
      const ok = await window.usarInvitacion(codigo, ctx);
      if (ok) {
        setAceptado(true);
        setProcesando(false);
        const esPastor = invitacion && invitacion.tipo === "pastor";
        setTimeout(function () {
          if (esPastor && typeof onRegistrarIglesia === "function") {
            onRegistrarIglesia();
          }
          if (typeof onCerrar === "function") onCerrar();
        }, 1500);
        return true;
      }
      const reclass = await clasificarAsync(codigo);
      setEstado(reclass.estado);
      setInvitacion(reclass.invitacion);
      setProcesando(false);
      return false;
    }

    useEffect(function () {
      if (!user) return;
      if (estado !== "valida") return;
      if (autoHechoRef.current) return;
      let cancelado = false;
      try {
        const pending = sessionStorage.getItem(STORAGE_KEY);
        if (pending && pending === String(codigo)) {
          autoHechoRef.current = true;
          sessionStorage.removeItem(STORAGE_KEY);
          setProcesando(true);
          clasificarAsync(codigo).then(function (reclass) {
            if (cancelado) return;
            if (reclass.estado === "valida") {
              ejecutarAceptacion();
            } else {
              setEstado(reclass.estado);
              setInvitacion(reclass.invitacion);
              setProcesando(false);
            }
          });
        }
      } catch (_) { /* noop */ }
      return function () { cancelado = true; };
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [user, estado]);

    async function onAceptar() {
      setErrorLogin("");
      if (!user) {
        try { sessionStorage.setItem(STORAGE_KEY, String(codigo)); } catch (_) {}
        setProcesando(true);
        try {
          await signInGoogle();
        } catch (e) {
          setProcesando(false);
          setErrorLogin("No pudimos iniciar sesión. Intenta de nuevo.");
          try { sessionStorage.removeItem(STORAGE_KEY); } catch (_) {}
        }
        return;
      }
      setProcesando(true);
      ejecutarAceptacion();
    }

    if (typeof document === "undefined") return null;

    const overlay = (
      <div
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 90,
          background: bgBackdrop,
          overflowY: "auto",
        }}
      >
        <button
          type="button"
          onClick={onCerrar}
          aria-label="Cerrar"
          style={{
            position: "absolute",
            top: 12,
            right: 12,
            width: 36,
            height: 36,
            borderRadius: 999,
            border: "none",
            background: bgBotonCerrar,
            color: colorBotonCerrar,
            fontSize: 20,
            fontWeight: 700,
            cursor: "pointer",
            boxShadow: dark ? "0 2px 8px rgba(0,0,0,0.4)" : "0 2px 8px rgba(0,0,0,0.08)",
            zIndex: 2,
          }}
        >
          ×
        </button>

        <div
          style={{
            position: "relative",
            minHeight: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "16px 14px",
          }}
        >
          <div
            style={{
              width: "100%",
              maxWidth: 380,
              background: bgPaper,
              borderRadius: 18,
              padding: "18px 20px 20px",
              boxShadow: (dark ? "0 10px 30px rgba(0,0,0,0.5), " : "0 10px 30px rgba(0,0,0,0.08), ") + sombraCartaExtra,
              border: "1px solid " + colorBordeCarta,
              animation: "aceptarInvScale 200ms cubic-bezier(.2,.9,.3,1.2)",
            }}
          >
            {estado === "cargando" && renderCargando()}
            {estado === "valida"   && renderCarta()}
            {estado === "expirada" && renderEstadoError("⏰", "Este enlace expiró", "Por favor solicite uno nuevo a quien se lo envió.")}
            {estado === "usada"    && renderEstadoError("✓", "Este enlace ya fue usado", "Cada código solo sirve una vez.")}
            {estado === "invalida" && renderEstadoError("❌", "Enlace no válido", "El código no existe o está mal escrito.")}
          </div>
        </div>

        {aceptado && (
          <div
            style={{
              position: "fixed",
              left: "50%",
              bottom: 40,
              transform: "translateX(-50%)",
              background: GREEN,
              color: "#FFFFFF",
              padding: "12px 20px",
              borderRadius: 14,
              fontWeight: 800,
              fontSize: 15,
              boxShadow: "0 6px 20px rgba(88,204,2,0.45)",
              zIndex: 3,
              animation: "aceptarInvFade 200ms ease-out",
            }}
          >
            ¡Invitación aceptada!
          </div>
        )}

        <style>{`
          @keyframes aceptarInvFade { from { opacity: 0 } to { opacity: 1 } }
          @keyframes aceptarInvScale {
            from { opacity: 0; transform: scale(0.96); }
            to { opacity: 1; transform: scale(1); }
          }
          .acept-btn { transition: transform 120ms ease, box-shadow 120ms ease; }
          .acept-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 ${GREEN_SHADOW} !important; }
        `}</style>
      </div>
    );

    return ReactDOM.createPortal(overlay, document.body);

    // --- Renderers ---

    function renderCarta() {
      const msRestantes = invitacion && typeof invitacion.expira_en === "number"
        ? invitacion.expira_en - ahora : 0;
      const hayExp = invitacion && typeof invitacion.expira_en === "number";
      const pill = hayExp ? pillTiempo(msRestantes) : { bg: GREEN, fg: "#FFFFFF" };
      const tipo = invitacion.tipo;
      const label = labelBotonPorTipo(tipo, procesando, !!user);

      return (
        <div>
          {/* Encabezado: icon + marca */}
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
            <img
              src="/icon-192.svg"
              alt="CultoRD"
              width="44"
              height="44"
              style={{ borderRadius: 10, boxShadow: "0 3px 10px rgba(37,99,235,0.25)" }}
            />
            <div style={{ lineHeight: 1.1 }}>
              <div style={{ fontSize: 14, fontWeight: 900, color: colorTexto }}>CultoRD</div>
              <div style={{ fontSize: 11, color: colorMuted, marginTop: 2 }}>Carta de invitación</div>
            </div>
          </div>

          <div style={{ borderTop: "1px dashed " + colorDashed, marginBottom: 12 }} />

          {/* Saludo */}
          <div style={{ fontSize: 15, fontWeight: 700, color: BRAND, marginBottom: 10, fontStyle: "italic" }}>
            {saludo}
            {invitacion.destinatario_nombre ? ", " + invitacion.destinatario_nombre : ""},
          </div>

          {/* Cuerpo según tipo */}
          <div style={{ fontSize: 14.5, color: colorTexto, lineHeight: 1.5, marginBottom: 12 }}>
            {tipo === "pastor" && (
              <span>
                Desde <strong>CultoRD</strong> le extendemos una invitación
                privilegiada para que{" "}
                {invitacion.iglesia_nombre
                  ? <span>registre a <strong>{invitacion.iglesia_nombre}</strong></span>
                  : <strong>registre su iglesia</strong>}
                {" "}en la app y comparta con la comunidad su horario,
                ubicación y actividades espirituales.
              </span>
            )}
            {tipo === "miembro" && (
              <span>
                Desde <strong>CultoRD</strong> le invitamos a unirse como{" "}
                <strong>miembro</strong>
                {invitacion.iglesia_nombre
                  ? <span> de <strong>{invitacion.iglesia_nombre}</strong></span>
                  : <span> de la comunidad</span>}
                , para caminar juntos en la fe.
              </span>
            )}
            {tipo === "rol" && (
              <span>
                <strong>{invitacion.creado_por_nombre || "Un pastor"}</strong>{" "}
                le llama a servir en{" "}
                <strong>{invitacion.iglesia_nombre || "su iglesia"}</strong>{" "}
                con el rol de{" "}
                <strong style={{ color: BRAND }}>{nombreRol(invitacion)}</strong>.
              </span>
            )}
            {tipo === "amigo" && (
              <span>
                Desde <strong>CultoRD</strong> le extendemos la mano para que
                conozca la <strong>comunidad evangélica</strong>
                {invitacion.iglesia_nombre
                  ? <span> de <strong>{invitacion.iglesia_nombre}</strong></span>
                  : <span> de República Dominicana</span>}
                . Descubra iglesias, horarios y actividades espirituales
                cerca de usted.
              </span>
            )}
          </div>

          {tipo === "pastor" && (
            <div style={{
              fontSize: 11.5, color: colorAvisoPastor, background: bgAvisoPastor,
              border: "1px solid " + colorAvisoBorde, borderRadius: 10,
              padding: "7px 10px", marginBottom: 12, lineHeight: 1.4,
            }}>
              ⚠️ Si no es pastor, por favor ignore este mensaje.
            </div>
          )}

          {/* Despedida */}
          <div style={{ fontSize: 14, color: colorTexto, marginBottom: 2, fontStyle: "italic" }}>
            {despedida}
          </div>
          <div style={{ fontSize: 14, color: colorTexto, fontWeight: 800, marginBottom: 14 }}>
            — El equipo de CultoRD
          </div>

          {/* Pill de tiempo */}
          <div style={{ textAlign: "center", marginBottom: 12 }}>
            <span style={{
              display: "inline-block",
              background: pill.bg, color: pill.fg,
              fontSize: 12, fontWeight: 800,
              padding: "5px 11px", borderRadius: 999,
            }}>
              ⏱ {hayExp ? formatoTiempoRestante(msRestantes) : "Sin expiración"}
            </span>
          </div>

          {errorLogin && (
            <div style={{ fontSize: 12.5, color: colorError, marginBottom: 10, fontWeight: 600, textAlign: "center" }}>
              {errorLogin}
            </div>
          )}

          {/* Botón */}
          <button
            type="button"
            onClick={onAceptar}
            disabled={procesando}
            className="acept-btn"
            style={{
              width: "100%",
              minHeight: 52,
              border: "none",
              borderRadius: 13,
              background: GREEN,
              color: "#FFFFFF",
              fontSize: 15,
              fontWeight: 800,
              cursor: procesando ? "default" : "pointer",
              boxShadow: "0 4px 0 " + GREEN_SHADOW + ", 0 2px 6px rgba(0,0,0,0.06)",
              opacity: procesando ? 0.85 : 1,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 8,
              padding: "8px 12px",
              lineHeight: 1.2,
            }}
          >
            <span aria-hidden="true" style={{ fontSize: 18 }}>✓</span>
            <span>{label}</span>
          </button>
        </div>
      );
    }

    function renderCargando() {
      return (
        <div style={{ textAlign: "center", padding: "24px 4px" }}>
          <div style={{ fontSize: 40, lineHeight: 1, marginBottom: 12 }} aria-hidden="true">⏳</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: colorTexto, marginBottom: 4 }}>Cargando su invitación...</div>
          <div style={{ fontSize: 13, color: colorMuted }}>Un momento, por favor.</div>
        </div>
      );
    }

    function renderEstadoError(icono, titulo, descripcion) {
      return (
        <div style={{ textAlign: "center", padding: "8px 4px" }}>
          <div style={{ fontSize: 56, lineHeight: 1, marginBottom: 10 }} aria-hidden="true">{icono}</div>
          <div style={{ fontSize: 19, fontWeight: 900, color: colorTexto, marginBottom: 6 }}>{titulo}</div>
          {descripcion && (
            <div style={{ fontSize: 13.5, color: colorMuted, marginBottom: 18, lineHeight: 1.4 }}>{descripcion}</div>
          )}
          <button
            type="button"
            onClick={onCerrar}
            style={{
              width: "100%",
              height: 48,
              border: "none",
              borderRadius: 13,
              background: BRAND,
              color: "#FFFFFF",
              fontSize: 15,
              fontWeight: 800,
              cursor: "pointer",
              boxShadow: "0 3px 0 #1E4ED8",
            }}
          >
            Volver al inicio
          </button>
        </div>
      );
    }
  }

  window.AceptarInvitacion = AceptarInvitacion;
})();