/* GestionarIglesia → window. Pantalla completa de administración de HORARIOS.
   Props: { iglesia, onClose }.
   - Portal a document.body, ESC cierra, body scroll lock.
   - Carga los horarios via window.obtenerIglesia(id).horario (array de slots).
   - EditorSlot es un bottom sheet modal para crear/editar/eliminar slots.
   - NO modifica otros campos de la iglesia (perfil). */
(function () {
  const { useState, useEffect, useMemo, useRef } = React;
  const { useAuth, BackIcon, TIPOS_CULTO, ConfirmModal } = window;

  const BRAND = "#2563EB";
  const DANGER = "#DC2626";

  // dia se persiste como número 0..6 (JS Date.getDay() convención: 0=Dom).
  const DIAS_NOMBRE = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
  const DIAS_CORTO = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"];
  const DIAS_LETRA = ["D", "L", "M", "M", "J", "V", "S"];
  // Orden UI admin: Lun → Dom.
  const ORDEN_ADMIN = [1, 2, 3, 4, 5, 6, 0];

  function getTipo(t) {
    const table = TIPOS_CULTO || {};
    return table[t] || table.otro || { label: "Otro", color: "#6B7280" };
  }

  function fmtHora12(hhmm) {
    if (!hhmm) return "";
    const [hStr, mStr] = hhmm.split(":");
    const h = Number(hStr);
    const m = Number(mStr);
    if (isNaN(h) || isNaN(m)) return hhmm;
    const period = h >= 12 ? "PM" : "AM";
    const hr = h % 12 || 12;
    return hr + ":" + String(m).padStart(2, "0") + " " + period;
  }

  function hhmmGreater(a, b) {
    // devuelve true si a > b como HH:MM string
    return String(a || "").localeCompare(String(b || "")) > 0;
  }

  // ============================================================
  //  EditorSlot — bottom sheet
  // ============================================================
  // Fila de menú tipo settings: emoji tintado + título + subtítulo + chevron.
  // Usada en la vista "menu" de GestionarIglesia para listar las secciones.
  function MenuFila({ emoji, tint, titulo, subtitulo, onTap, colorTexto, colorSecundario, dividerColor, mostrarDivider }) {
    return (
      <button
        type="button"
        onClick={onTap}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          width: "100%",
          padding: "14px 14px",
          background: "transparent",
          border: "none",
          borderBottom: mostrarDivider ? "1px solid " + dividerColor : "none",
          cursor: "pointer",
          textAlign: "left",
          fontFamily: "inherit",
        }}
      >
        <div
          aria-hidden
          style={{
            width: 40, height: 40, borderRadius: 12,
            background: tint,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 18, flexShrink: 0,
          }}
        >
          {emoji}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div
            style={{
              fontSize: 14, fontWeight: 900, color: colorTexto,
              lineHeight: 1.2,
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
            }}
          >
            {titulo}
          </div>
          {subtitulo && (
            <div
              style={{
                fontSize: 11, fontWeight: 600, color: colorSecundario,
                marginTop: 2,
                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
              }}
            >
              {subtitulo}
            </div>
          )}
        </div>
        <svg
          width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden
          style={{ color: colorSecundario, flexShrink: 0 }}
        >
          <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>
    );
  }

  function EditorSlot({ slot, iglesiaId, abierto, onClose, onGuardado }) {
    const esNuevo = !slot;

    const dark =
      typeof document !== "undefined" &&
      document.querySelector(".app-frame")?.classList.contains("dark");

    const [titulo, setTitulo] = useState("");
    const [tipo, setTipo] = useState("culto");
    const [dia, setDia] = useState(1); // Lunes por default
    const [horaInicio, setHoraInicio] = useState("08:00");
    const [horaFin, setHoraFin] = useState("09:00");
    const [activo, setActivo] = useState(true);
    const [guardando, setGuardando] = useState(false);
    const [eliminando, setEliminando] = useState(false);
    const [error, setError] = useState("");

    useEffect(() => {
      if (!abierto) return;
      setError("");
      if (slot) {
        setTitulo(slot.titulo || "");
        setTipo(slot.tipo || "culto");
        setDia(typeof slot.dia === "number" ? slot.dia : 1);
        setHoraInicio(slot.hora_inicio || "08:00");
        setHoraFin(slot.hora_fin || "09:00");
        setActivo(slot.activo !== false);
      } else {
        setTitulo("");
        setTipo("culto");
        setDia(1);
        setHoraInicio("08:00");
        setHoraFin("09:00");
        setActivo(true);
      }
    }, [abierto, slot && slot.id]);

    useEffect(() => {
      if (!abierto) return;
      const onKey = (e) => { if (e.key === "Escape" && !guardando && !eliminando) onClose && onClose(); };
      document.addEventListener("keydown", onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        document.removeEventListener("keydown", onKey);
        document.body.style.overflow = prev;
      };
    }, [abierto, guardando, eliminando, onClose]);

    const colorTexto = dark ? "#F0F0F0" : "#111827";
    const colorSecundario = dark ? "#9CA3AF" : "#6B7280";
    const colorBorde = dark ? "#2A2A2A" : "#E5E7EB";
    const bgPanel = dark ? "#0F0F10" : "#FFFFFF";
    const bgInput = dark ? "#1A1A1A" : "#FFFFFF";
    const bgSoft = dark ? "#1F2937" : "#F3F4F6";

    const puedeGuardar =
      !guardando &&
      !eliminando &&
      titulo.trim().length > 0 &&
      !!tipo &&
      typeof dia === "number" && dia >= 0 && dia <= 6 &&
      !!horaInicio &&
      !!horaFin &&
      hhmmGreater(horaFin, horaInicio);

    const handleGuardar = async () => {
      if (!puedeGuardar) {
        setError(
          hhmmGreater(horaFin, horaInicio)
            ? "Completa todos los campos."
            : "La hora de fin debe ser posterior a la de inicio."
        );
        return;
      }
      setGuardando(true);
      setError("");
      try {
        const datos = {
          dia,
          hora_inicio: horaInicio,
          hora_fin: horaFin,
          titulo: titulo.trim(),
          tipo,
          activo,
        };
        if (esNuevo) {
          await window.agregarSlotHorario(iglesiaId, datos);
        } else {
          await window.actualizarSlotHorario(iglesiaId, slot.id, datos);
        }
        setGuardando(false);
        if (onGuardado) onGuardado();
        if (onClose) onClose();
      } catch (err) {
        console.error("[EditorSlot] guardar falló:", err);
        setGuardando(false);
        setError((err && err.message) || "No pudimos guardar el horario.");
      }
    };

    const [confirmarEliminar, setConfirmarEliminar] = useState(false);

    const ejecutarEliminar = async () => {
      setConfirmarEliminar(false);
      setEliminando(true);
      setError("");
      try {
        await window.eliminarSlotHorario(iglesiaId, slot.id);
        setEliminando(false);
        if (onGuardado) onGuardado();
        if (onClose) onClose();
      } catch (err) {
        console.error("[EditorSlot] eliminar falló:", err);
        setEliminando(false);
        setError((err && err.message) || "No pudimos eliminar el horario.");
      }
    };

    const handleEliminar = () => {
      if (esNuevo || !slot || !slot.id) return;
      setConfirmarEliminar(true);
    };

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

    const labelStyle = {
      display: "block",
      fontSize: 11,
      fontWeight: 800,
      textTransform: "uppercase",
      letterSpacing: 0.4,
      color: colorSecundario,
      marginBottom: 8,
    };
    const inputBase = {
      width: "100%",
      padding: "12px 14px",
      borderRadius: 12,
      border: "1.5px solid " + colorBorde,
      background: bgInput,
      color: colorTexto,
      fontSize: 15,
      fontWeight: 600,
      outline: "none",
      boxSizing: "border-box",
      fontFamily: "inherit",
    };

    const tipos = Object.keys(TIPOS_CULTO || { culto: {} });

    const content = (
      <div
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 80,
          background: "rgba(0,0,0,0.45)",
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
          animation: "cr-fade 150ms ease-out",
        }}
        onClick={() => { if (!guardando && !eliminando) onClose && onClose(); }}
      >
        <style>{`
          @keyframes cr-fade { from { opacity: 0 } to { opacity: 1 } }
          @keyframes cr-slide-up { from { transform: translateY(100%) } to { transform: translateY(0) } }
        `}</style>
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            width: "100%",
            maxWidth: 430,
            maxHeight: "92vh",
            overflowY: "auto",
            background: bgPanel,
            borderTopLeftRadius: 22,
            borderTopRightRadius: 22,
            padding: "14px 16px calc(16px + env(safe-area-inset-bottom))",
            boxShadow: "0 -10px 30px rgba(0,0,0,0.25)",
            animation: "cr-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1)",
          }}
        >
          {/* Handle */}
          <div
            style={{
              width: 44,
              height: 4,
              borderRadius: 4,
              background: dark ? "#374151" : "#D1D5DB",
              margin: "0 auto 12px",
            }}
          />

          {/* Header */}
          <div style={{ display: "flex", alignItems: "center", marginBottom: 14 }}>
            <h2 style={{ flex: 1, margin: 0, fontSize: 17, fontWeight: 900, color: colorTexto }}>
              {esNuevo ? "Nuevo horario" : "Editar horario"}
            </h2>
            <button
              type="button"
              onClick={() => { if (!guardando && !eliminando) onClose && onClose(); }}
              aria-label="Cerrar"
              style={{
                width: 34, height: 34, borderRadius: 999,
                border: "none", background: bgSoft, color: colorTexto,
                fontSize: 16, fontWeight: 900, cursor: "pointer",
              }}
            >
              ✕
            </button>
          </div>

          {/* Título */}
          <div style={{ marginBottom: 14 }}>
            <label style={labelStyle}>Título *</label>
            <input
              type="text"
              value={titulo}
              onChange={(e) => setTitulo(e.target.value)}
              placeholder="Ej. Culto de Oración"
              maxLength={80}
              style={inputBase}
            />
          </div>

          {/* Tipo: chips scrolleables */}
          <div style={{ marginBottom: 14 }}>
            <label style={labelStyle}>Tipo *</label>
            <div
              style={{
                display: "flex",
                gap: 8,
                overflowX: "auto",
                paddingBottom: 4,
                WebkitOverflowScrolling: "touch",
              }}
            >
              {tipos.map((k) => {
                const t = getTipo(k);
                const sel = tipo === k;
                return (
                  <button
                    key={k}
                    type="button"
                    onClick={() => setTipo(k)}
                    style={{
                      flex: "0 0 auto",
                      padding: "8px 14px",
                      borderRadius: 999,
                      border: "1.5px solid " + (sel ? t.color : colorBorde),
                      background: sel ? t.color : "transparent",
                      color: sel ? "#FFFFFF" : colorTexto,
                      fontSize: 13,
                      fontWeight: 800,
                      cursor: "pointer",
                      whiteSpace: "nowrap",
                      transition: "background 120ms ease",
                    }}
                  >
                    {t.label}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Día: 7 pills (Lun → Dom) */}
          <div style={{ marginBottom: 14 }}>
            <label style={labelStyle}>Día *</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "nowrap" }}>
              {ORDEN_ADMIN.map((n) => {
                const sel = dia === n;
                return (
                  <button
                    key={n}
                    type="button"
                    onClick={() => setDia(n)}
                    aria-label={DIAS_NOMBRE[n]}
                    style={{
                      flex: 1,
                      minWidth: 0,
                      padding: "10px 0",
                      borderRadius: 12,
                      border: "1.5px solid " + (sel ? BRAND : colorBorde),
                      background: sel ? BRAND : "transparent",
                      color: sel ? "#FFFFFF" : colorTexto,
                      fontSize: 14,
                      fontWeight: 900,
                      cursor: "pointer",
                    }}
                  >
                    {DIAS_LETRA[n]}
                  </button>
                );
              })}
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: colorSecundario, marginTop: 6 }}>
              {DIAS_NOMBRE[dia]}
            </div>
          </div>

          {/* Horas */}
          <div style={{ display: "flex", gap: 10, marginBottom: 14 }}>
            <div style={{ flex: 1 }}>
              <label style={labelStyle}>Inicio *</label>
              <input
                type="time"
                value={horaInicio}
                onChange={(e) => setHoraInicio(e.target.value)}
                style={inputBase}
              />
            </div>
            <div style={{ flex: 1 }}>
              <label style={labelStyle}>Fin *</label>
              <input
                type="time"
                value={horaFin}
                onChange={(e) => setHoraFin(e.target.value)}
                style={inputBase}
              />
            </div>
          </div>

          {/* Toggle activo */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "12px 14px",
              borderRadius: 12,
              background: bgSoft,
              marginBottom: 14,
            }}
          >
            <div>
              <div style={{ fontSize: 14, fontWeight: 800, color: colorTexto }}>Activo</div>
              <div style={{ fontSize: 11, fontWeight: 600, color: colorSecundario, marginTop: 2 }}>
                Los horarios inactivos no se muestran a los usuarios.
              </div>
            </div>
            <button
              type="button"
              onClick={() => setActivo(!activo)}
              aria-pressed={activo}
              aria-label="Activar horario"
              style={{
                position: "relative",
                width: 52,
                height: 30,
                borderRadius: 999,
                border: "none",
                background: activo ? "#58CC02" : (dark ? "#374151" : "#CBD5E1"),
                cursor: "pointer",
                transition: "background 150ms",
                flexShrink: 0,
              }}
            >
              <span
                style={{
                  position: "absolute",
                  top: 3,
                  left: 3,
                  width: 24,
                  height: 24,
                  borderRadius: "50%",
                  background: "#FFFFFF",
                  transform: activo ? "translateX(22px)" : "translateX(0)",
                  transition: "transform 180ms cubic-bezier(0.22, 1, 0.36, 1)",
                  boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
                }}
              />
            </button>
          </div>

          {/* Error */}
          {error && (
            <div
              style={{
                padding: "10px 12px",
                borderRadius: 10,
                background: dark ? "rgba(220,38,38,0.15)" : "#FEE2E2",
                color: DANGER,
                fontSize: 13,
                fontWeight: 700,
                marginBottom: 12,
              }}
            >
              {error}
            </div>
          )}

          {/* Botones */}
          <div style={{ display: "flex", gap: 10 }}>
            {!esNuevo && (
              <button
                type="button"
                onClick={handleEliminar}
                disabled={guardando || eliminando}
                style={{
                  flex: "0 0 auto",
                  padding: "14px 16px",
                  borderRadius: 14,
                  border: "1.5px solid " + DANGER,
                  background: "transparent",
                  color: DANGER,
                  fontSize: 14,
                  fontWeight: 800,
                  cursor: (guardando || eliminando) ? "default" : "pointer",
                  opacity: (guardando || eliminando) ? 0.6 : 1,
                }}
              >
                {eliminando ? "Eliminando…" : "Eliminar"}
              </button>
            )}
            <button
              type="button"
              onClick={handleGuardar}
              disabled={!puedeGuardar}
              style={{
                flex: 1,
                padding: "14px 16px",
                borderRadius: 14,
                border: "none",
                background: puedeGuardar ? BRAND : (dark ? "#1F2937" : "#D1D5DB"),
                color: puedeGuardar ? "#FFFFFF" : (dark ? "#6B7280" : "#9CA3AF"),
                fontSize: 15,
                fontWeight: 900,
                cursor: puedeGuardar ? "pointer" : "not-allowed",
                transition: "opacity 120ms",
              }}
            >
              {guardando ? "Guardando…" : (esNuevo ? "Guardar" : "Guardar cambios")}
            </button>
          </div>
        </div>
        {ConfirmModal && (
          <ConfirmModal
            abierto={confirmarEliminar}
            titulo="Eliminar horario"
            mensaje="Esta acción no se puede deshacer."
            textoConfirmar="Eliminar"
            tono="peligro"
            cargando={eliminando}
            onCancelar={() => setConfirmarEliminar(false)}
            onConfirmar={ejecutarEliminar}
          />
        )}
      </div>
    );

    return ReactDOM.createPortal(content, document.body);
  }

  // ============================================================
  //  GestionarIglesia — pantalla principal
  // ============================================================
  function GestionarIglesia({ iglesia, onClose }) {
    const { user } = (typeof useAuth === "function" ? useAuth() : {}) || {};
    const [perfil, setPerfil] = useState(null);
    const [horario, setHorario] = useState([]);
    const [cargando, setCargando] = useState(true);
    const [editorAbierto, setEditorAbierto] = useState(false);
    const [slotEditando, setSlotEditando] = useState(null);
    const [errorCarga, setErrorCarga] = useState("");
    const [refreshTick, setRefreshTick] = useState(0);
    const [editarDatosAbierto, setEditarDatosAbierto] = useState(false);
    const [togglingActiva, setTogglingActiva] = useState(false);
    const [eliminando, setEliminando] = useState(false);
    const [errorAccion, setErrorAccion] = useState("");
    const [subiendoImg, setSubiendoImg] = useState(false);
    const [progresoImg, setProgresoImg] = useState(0);
    const [errorImg, setErrorImg] = useState("");

    const iglesiaId = iglesia && iglesia.id;
    const nombreIglesia = (perfil && perfil.nombre) || (iglesia && iglesia.nombre) || "";

    const dark =
      typeof document !== "undefined" &&
      document.querySelector(".app-frame")?.classList.contains("dark");

    // Detección de permisos: el pastor dueño (iglesias_admin) ve todo;
    // los miembros con rol(es) activo(s) en esta iglesia ven sólo las
    // secciones de su scope.
    //   editor_contenido           → datos, imagen, ubicación.
    //   programas_congregacional   → horario semanal.
    // Toggle Activa y Zona peligro son SIEMPRE exclusivos del pastor.
    // Las reglas RTDB replican estos límites en el servidor.
    const perfilUsuario = typeof window.miPerfil === "function" ? window.miPerfil() : null;
    const esPastorOwner =
      !!(perfilUsuario &&
         perfilUsuario.iglesias_admin &&
         perfilUsuario.iglesias_admin[iglesiaId] === true);
    const esSuper = typeof window.esSuperadmin === "function" && user
      ? window.esSuperadmin(user)
      : false;

    // Índice inverso /users/{uid}/roles/{iglesiaId} — reactivo.
    const [rolesEnIglesia, setRolesEnIglesia] = useState({});
    useEffect(function () {
      if (esPastorOwner) {
        // El pastor dueño no depende de roles; se evita la lectura.
        setRolesEnIglesia({});
        return;
      }
      if (!user || !user.uid || !iglesiaId || !window.db) return;
      const ref = window.db.ref("users/" + user.uid + "/roles/" + iglesiaId);
      const handler = function (snap) {
        setRolesEnIglesia(snap && snap.exists() ? (snap.val() || {}) : {});
      };
      ref.on("value", handler, function (err) {
        console.warn("[GestionarIglesia] suscribir roles denegado:", err && err.code);
        setRolesEnIglesia({});
      });
      return function () { ref.off("value", handler); };
    }, [user && user.uid, iglesiaId, esPastorOwner]);

    const esEditorContenido = !esPastorOwner && rolesEnIglesia.editor_contenido === true;
    const esProgramas = !esPastorOwner && rolesEnIglesia.programas_congregacional === true;

    // Permisos efectivos por sección (pastor engloba todo).
    const puedeEditarDatos     = esPastorOwner || esEditorContenido;
    const puedeGestionarHorarios = esPastorOwner || esProgramas;
    const puedeTogglearActiva  = esPastorOwner;
    const puedeEliminarIglesia = esPastorOwner;

    // Banner informativo — solo para no-owners con uno o más roles.
    const bannerRoles = (function () {
      if (esPastorOwner) return null;
      if (esEditorContenido && esProgramas) {
        return {
          emoji: "🔑",
          texto: "Tiene varios roles activos en esta iglesia. Puede modificar datos, imagen, ubicación y el horario semanal.",
          borde: dark ? "#374151" : "#C7D2FE",
          fondo: dark ? "#1F2937" : "#EEF2FF",
          color: dark ? "#C7D2FE" : "#3730A3",
        };
      }
      if (esProgramas) {
        return {
          emoji: "📅",
          texto: "Está gestionando horarios como Programas Congregacional. Solo puede modificar el calendario semanal.",
          borde: dark ? "#1E3A8A" : "#BFDBFE",
          fondo: dark ? "#0B1B3D" : "#EFF6FF",
          color: dark ? "#93C5FD" : "#1E40AF",
        };
      }
      if (esEditorContenido) {
        return {
          emoji: "✏️",
          texto: "Está editando como Editor de Contenido. Solo puede modificar datos, imagen y ubicación de esta iglesia.",
          borde: dark ? "#374151" : "#FED7AA",
          fondo: dark ? "#1F2937" : "#FFF7ED",
          color: dark ? "#FCD34D" : "#9A3412",
        };
      }
      return null;
    })();

    const recargar = async () => {
      if (!iglesiaId || typeof window.obtenerIglesia !== "function") {
        setCargando(false);
        return;
      }
      try {
        const full = await window.obtenerIglesia(iglesiaId);
        setPerfil((full && full.perfil) || null);
        setHorario((full && Array.isArray(full.horario)) ? full.horario : []);
        setErrorCarga("");
      } catch (err) {
        console.warn("[GestionarIglesia] obtenerIglesia falló:", err);
        setErrorCarga("No pudimos cargar los datos.");
      } finally {
        setCargando(false);
      }
    };

    useEffect(() => {
      setCargando(true);
      recargar();
      // eslint-disable-next-line
    }, [iglesiaId, refreshTick]);

    useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
      document.addEventListener("keydown", onKey);
      return () => document.removeEventListener("keydown", onKey);
    }, [onClose]);

    const colorTexto = dark ? "#F0F0F0" : "#111827";
    const colorSecundario = dark ? "#9CA3AF" : "#6B7280";
    const colorMuted = dark ? "#6B7280" : "#9CA3AF";
    const colorBorde = dark ? "#2A2A2A" : "#E5E7EB";
    const bgPanel = dark ? "#0F0F10" : "#FFFFFF";
    const bgCard = dark ? "#1A1A1A" : "#FFFFFF";
    const bgSoft = dark ? "#111827" : "#F9FAFB";

    const horarioPorDia = useMemo(() => {
      const map = {};
      for (let i = 0; i <= 6; i++) map[i] = [];
      (horario || []).forEach((s) => {
        if (!s) return;
        const n = typeof s.dia === "number" ? s.dia : Number(s.dia);
        if (isNaN(n) || n < 0 || n > 6) return;
        map[n].push(s);
      });
      for (let i = 0; i <= 6; i++) {
        map[i].sort((a, b) => String(a.hora_inicio || "").localeCompare(String(b.hora_inicio || "")));
      }
      return map;
    }, [horario]);

    const diasConSlots = ORDEN_ADMIN.filter((n) => (horarioPorDia[n] || []).length > 0);
    const total = (horario || []).length;

    const abrirNuevo = () => {
      setSlotEditando(null);
      setEditorAbierto(true);
    };
    const abrirEditar = (slot) => {
      setSlotEditando(slot);
      setEditorAbierto(true);
    };
    const cerrarEditor = () => {
      setEditorAbierto(false);
      setSlotEditando(null);
    };
    const handleGuardado = () => {
      setRefreshTick((t) => t + 1);
    };

    const abrirEditarDatos = () => {
      setErrorAccion("");
      setEditarDatosAbierto(true);
    };
    const cerrarEditarDatos = () => {
      setEditarDatosAbierto(false);
      setRefreshTick((t) => t + 1); // el wizard pudo haber actualizado perfil
    };

    const [confirmarPausa, setConfirmarPausa] = useState(false);

    const ejecutarToggleActiva = async (nueva) => {
      setTogglingActiva(true);
      setErrorAccion("");
      try {
        await window.actualizarIglesia(iglesiaId, { activa: nueva });
        setPerfil((p) => p ? Object.assign({}, p, { activa: nueva }) : p);
      } catch (err) {
        console.error("[GestionarIglesia] toggle activa falló:", err);
        setErrorAccion("No pudimos cambiar el estado.");
      } finally {
        setTogglingActiva(false);
      }
    };

    const handleToggleActiva = () => {
      if (!perfil || !iglesiaId || togglingActiva) return;
      const nueva = !(perfil.activa === true);
      if (!nueva) {
        setConfirmarPausa(true);
      } else {
        ejecutarToggleActiva(true);
      }
    };

    const onCambiarImagen = async (e) => {
      const file = e.target.files && e.target.files[0];
      e.target.value = "";
      if (!file || !iglesiaId) return;
      if (!/^image\//.test(file.type)) {
        setErrorImg("Debe ser una imagen (jpg, png, webp).");
        return;
      }
      if (file.size > 10 * 1024 * 1024) {
        setErrorImg("Imagen muy grande (máx 10 MB).");
        return;
      }
      if (typeof window.subirImagenIglesia !== "function") {
        setErrorImg("Módulo de imágenes no disponible.");
        return;
      }
      setErrorImg("");
      setSubiendoImg(true);
      setProgresoImg(0);
      try {
        await window.subirImagenIglesia(iglesiaId, file, (pct) => setProgresoImg(pct));
        setRefreshTick((t) => t + 1);
      } catch (err) {
        console.error("[GestionarIglesia] subir imagen falló:", err);
        setErrorImg((err && err.message) || "No pudimos subir la imagen.");
      } finally {
        setSubiendoImg(false);
      }
    };

    const [confirmarEliminarIglesia, setConfirmarEliminarIglesia] = useState(false);

    // Vista actual dentro de GestionarIglesia. El patrón cambió a un
    // menú tipo settings con sub-pantallas dedicadas (estilo iOS).
    //   "menu"        → lista de secciones + toggle + eliminar discreto.
    //   "horarios"    → gestión del calendario semanal (CTA agregar va aquí).
    //   "actividades" → GestionarActividades inline.
    const [vistaActual, setVistaActual] = useState("menu");

    const handleEliminarIglesia = () => {
      if (!iglesiaId || !user || !user.uid || eliminando) return;
      setConfirmarEliminarIglesia(true);
    };

    const ejecutarEliminarIglesia = async () => {
      setConfirmarEliminarIglesia(false);
      setEliminando(true);
      setErrorAccion("");
      try {
        await window.eliminarIglesia(user.uid, iglesiaId);
        if (onClose) onClose();
      } catch (err) {
        console.error("[GestionarIglesia] eliminar iglesia falló:", err);
        setErrorAccion("No pudimos eliminar la iglesia.");
        setEliminando(false);
      }
    };

    const activa = !!(perfil && perfil.activa === true);
    const iglesiaParaWizard = perfil
      ? Object.assign({ id: iglesiaId }, perfil)
      : null;

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

    // Si el usuario está editando los datos de la iglesia, renderizamos el
    // wizard inline en lugar del panel de gestión para aprovechar el mismo
    // cuerpo de la app (Header + BottomNav siguen visibles).
    if (editarDatosAbierto && window.RegistrarIglesia && iglesiaParaWizard) {
      return React.createElement(window.RegistrarIglesia, {
        abierto: true,
        iglesiaInicial: iglesiaParaWizard,
        onClose: cerrarEditarDatos,
        onCreado: () => setRefreshTick((t) => t + 1),
      });
    }

    // Sub-vista "actividades": GestionarActividades inline.
    if (vistaActual === "actividades" && window.GestionarActividades && iglesiaId) {
      return React.createElement(window.GestionarActividades, {
        iglesiaId: iglesiaId,
        iglesia: { id: iglesiaId, nombre: nombreIglesia, imagen_url: (perfil && perfil.imagen_url) || "" },
        onCerrar: () => setVistaActual("menu"),
      });
    }

    return (
      <div className="fade-in" style={{ paddingBottom: 96 }}>
        {/* Encabezado inline dentro del body (no barra sticky propia) */}
        <div style={{ display: "flex", alignItems: "flex-start", gap: 6, padding: "16px 16px 10px" }}>
          <button
            type="button"
            onClick={onClose}
            aria-label="Atrás"
            style={{
              width: 32,
              height: 32,
              borderRadius: 999,
              border: "none",
              background: "transparent",
              color: colorTexto,
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
              marginLeft: -6,
            }}
          >
            {BackIcon ? <BackIcon /> : <span style={{ fontSize: 20 }}>←</span>}
          </button>
          <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
            <div style={{ fontSize: 18, fontWeight: 900, color: colorTexto, lineHeight: 1.15 }}>
              Gestionar
            </div>
            <div
              style={{
                fontSize: 12,
                fontWeight: 700,
                color: colorSecundario,
                marginTop: 2,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {nombreIglesia}
            </div>
          </div>
        </div>

        {/* Body */}
        <div style={{ padding: "6px 16px 24px" }}>
            {bannerRoles && (
              <div
                style={{
                  marginBottom: 14,
                  padding: "10px 12px",
                  borderRadius: 12,
                  border: "1px solid " + bannerRoles.borde,
                  background: bannerRoles.fondo,
                  display: "flex",
                  alignItems: "flex-start",
                  gap: 10,
                }}
              >
                <div style={{ fontSize: 18, lineHeight: 1 }} aria-hidden>{bannerRoles.emoji}</div>
                <div
                  style={{
                    fontSize: 12,
                    fontWeight: 700,
                    color: bannerRoles.color,
                    lineHeight: 1.4,
                  }}
                >
                  {bannerRoles.texto}
                </div>
              </div>
            )}
            {/* Vista MENU: lista de secciones + toggle + eliminar discreto */}
            {vistaActual === "menu" && !cargando && perfil && (
              <React.Fragment>
                <div
                  style={{
                    background: bgCard,
                    borderRadius: 14,
                    overflow: "hidden",
                    border: "1px solid " + colorBorde,
                    marginBottom: 14,
                  }}
                >
                  {puedeEditarDatos && (
                    <MenuFila
                      emoji="🏠"
                      tint={dark ? "#1F2937" : "#E0EAFF"}
                      titulo="Datos de la iglesia"
                      subtitulo={perfil.nombre || "Nombre, descripción, imagen y ubicación"}
                      onTap={abrirEditarDatos}
                      colorTexto={colorTexto}
                      colorSecundario={colorSecundario}
                      dividerColor={colorBorde}
                      mostrarDivider={puedeGestionarHorarios || (esPastorOwner)}
                    />
                  )}
                  {puedeGestionarHorarios && (
                    <MenuFila
                      emoji="📅"
                      tint={dark ? "#1F2937" : "#EEF2FF"}
                      titulo="Horarios semanales"
                      subtitulo={
                        total === 0
                          ? "Aún no hay horarios"
                          : total + (total === 1 ? " horario publicado" : " horarios publicados")
                      }
                      onTap={function () { setVistaActual("horarios"); }}
                      colorTexto={colorTexto}
                      colorSecundario={colorSecundario}
                      dividerColor={colorBorde}
                      mostrarDivider={esPastorOwner}
                    />
                  )}
                  {(esPastorOwner || esSuper) && (
                    <MenuFila
                      emoji="✨"
                      tint={dark ? "#1F2937" : "#FFF7ED"}
                      titulo="Actividades"
                      subtitulo="Retiros, vigilias y otros eventos"
                      onTap={function () { setVistaActual("actividades"); }}
                      colorTexto={colorTexto}
                      colorSecundario={colorSecundario}
                      dividerColor={colorBorde}
                      mostrarDivider={false}
                    />
                  )}
                </div>

                {/* Toggle Activa — sólo pastor dueño. */}
                {puedeTogglearActiva && (
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      padding: "12px 14px",
                      marginBottom: 14,
                      borderRadius: 14,
                      border: "1px solid " + colorBorde,
                      background: bgCard,
                    }}
                  >
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 800, color: colorTexto }}>
                        {activa ? "Iglesia activa" : "Iglesia pausada"}
                      </div>
                      <div style={{ fontSize: 11, fontWeight: 600, color: colorSecundario, marginTop: 2 }}>
                        {activa
                          ? "Visible en el radar y el feed."
                          : "Oculta para los usuarios hasta que la actives."}
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={handleToggleActiva}
                      aria-pressed={activa}
                      aria-label={activa ? "Pausar iglesia" : "Activar iglesia"}
                      disabled={togglingActiva}
                      style={{
                        position: "relative",
                        width: 52, height: 30,
                        borderRadius: 999,
                        border: "none",
                        background: activa ? "#58CC02" : (dark ? "#374151" : "#CBD5E1"),
                        cursor: togglingActiva ? "default" : "pointer",
                        opacity: togglingActiva ? 0.6 : 1,
                        flexShrink: 0,
                        transition: "background 150ms",
                      }}
                    >
                      <span
                        style={{
                          position: "absolute",
                          top: 3, left: 3,
                          width: 24, height: 24,
                          borderRadius: "50%",
                          background: "#FFFFFF",
                          transform: activa ? "translateX(22px)" : "translateX(0)",
                          transition: "transform 180ms cubic-bezier(0.22, 1, 0.36, 1)",
                          boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
                        }}
                      />
                    </button>
                  </div>
                )}

                {errorAccion && (
                  <div
                    style={{
                      marginBottom: 10,
                      padding: "10px 12px",
                      borderRadius: 10,
                      background: dark ? "rgba(220,38,38,0.15)" : "#FEE2E2",
                      color: DANGER,
                      fontSize: 13,
                      fontWeight: 700,
                    }}
                  >
                    {errorAccion}
                  </div>
                )}

                {/* Eliminar iglesia — botón discreto, pequeño, al final. */}
                {puedeEliminarIglesia && (
                  <div style={{ marginTop: 36, textAlign: "center" }}>
                    <button
                      type="button"
                      onClick={handleEliminarIglesia}
                      disabled={eliminando}
                      style={{
                        background: "transparent",
                        border: "none",
                        padding: "6px 12px",
                        color: colorMuted,
                        fontSize: 11,
                        fontWeight: 700,
                        letterSpacing: 0.3,
                        cursor: eliminando ? "default" : "pointer",
                        opacity: eliminando ? 0.6 : 1,
                        textDecoration: "underline",
                        fontFamily: "inherit",
                      }}
                    >
                      {eliminando ? "Eliminando…" : "Eliminar iglesia"}
                    </button>
                  </div>
                )}
              </React.Fragment>
            )}

            {/* Sub-vista Horarios: back + título + listado + CTA agregar */}
            {vistaActual === "horarios" && (
              <div>
                <button
                  type="button"
                  onClick={function () { setVistaActual("menu"); }}
                  style={{
                    display: "inline-flex", alignItems: "center", gap: 6,
                    padding: "4px 2px", marginBottom: 6,
                    background: "transparent", border: "none",
                    color: BRAND, fontSize: 12, fontWeight: 800,
                    cursor: "pointer", fontFamily: "inherit",
                    letterSpacing: 0.2,
                  }}
                >
                  <span aria-hidden>←</span>
                  <span>Gestionar</span>
                </button>
                <div style={{ fontSize: 18, fontWeight: 900, color: colorTexto, marginBottom: 4 }}>
                  Horarios semanales
                </div>
                <div style={{ fontSize: 12, fontWeight: 700, color: colorSecundario, marginBottom: 14 }}>
                  {total === 0
                    ? "Aún no has publicado horarios"
                    : total + (total === 1 ? " horario publicado" : " horarios publicados")}
                </div>
              </div>
            )}

            {vistaActual === "horarios" && puedeGestionarHorarios && cargando && (
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  padding: "48px 16px",
                  gap: 12,
                }}
              >
                <div
                  style={{
                    width: 28,
                    height: 28,
                    border: "3px solid " + colorBorde,
                    borderTopColor: BRAND,
                    borderRadius: "50%",
                    animation: "cr-spin 0.9s linear infinite",
                  }}
                />
                <style>{`@keyframes cr-spin { to { transform: rotate(360deg); } }`}</style>
                <div style={{ fontSize: 13, fontWeight: 700, color: colorSecundario }}>
                  Cargando horarios…
                </div>
              </div>
            )}

            {vistaActual === "horarios" && puedeGestionarHorarios && !cargando && errorCarga && (
              <div
                style={{
                  padding: 14,
                  borderRadius: 14,
                  background: dark ? "rgba(220,38,38,0.15)" : "#FEE2E2",
                  color: DANGER,
                  fontSize: 13,
                  fontWeight: 700,
                  marginBottom: 12,
                }}
              >
                {errorCarga}
              </div>
            )}

            {vistaActual === "horarios" && puedeGestionarHorarios && !cargando && !errorCarga && total === 0 && (
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                  padding: "32px 18px",
                  gap: 10,
                  border: "1.5px dashed " + colorBorde,
                  borderRadius: 18,
                  background: bgSoft,
                }}
              >
                <div style={{ fontSize: 44, lineHeight: 1 }} aria-hidden>📅</div>
                <div style={{ fontSize: 16, fontWeight: 900, color: colorTexto }}>
                  Aún no has agregado horarios
                </div>
                <div
                  style={{
                    fontSize: 13,
                    fontWeight: 600,
                    color: colorSecundario,
                    maxWidth: 300,
                    lineHeight: 1.45,
                  }}
                >
                  Agrega los cultos y actividades de tu iglesia para que aparezcan en el radar de los usuarios.
                </div>
              </div>
            )}

            {vistaActual === "horarios" && puedeGestionarHorarios && !cargando && !errorCarga && total > 0 && (
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {diasConSlots.map((n) => (
                  <div key={n}>
                    <div
                      style={{
                        fontSize: 11,
                        fontWeight: 900,
                        textTransform: "uppercase",
                        letterSpacing: 1,
                        color: colorSecundario,
                        marginBottom: 8,
                        paddingLeft: 2,
                      }}
                    >
                      {DIAS_NOMBRE[n]}
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                      {horarioPorDia[n].map((slot) => {
                        const t = getTipo(slot.tipo);
                        const inactivo = slot.activo === false;
                        return (
                          <div
                            key={slot.id}
                            style={{
                              position: "relative",
                              display: "flex",
                              gap: 12,
                              alignItems: "stretch",
                              padding: "12px 12px 12px 16px",
                              borderRadius: 14,
                              border: "1px solid " + colorBorde,
                              background: bgCard,
                              overflow: "hidden",
                              opacity: inactivo ? 0.55 : 1,
                            }}
                          >
                            <div
                              aria-hidden
                              style={{
                                position: "absolute",
                                left: 0, top: 0, bottom: 0,
                                width: 5,
                                background: t.color,
                              }}
                            />
                            <div style={{ flex: 1, minWidth: 0 }}>
                              <div style={{ display: "flex", alignItems: "baseline", gap: 6, flexWrap: "wrap" }}>
                                <span style={{ fontSize: 16, fontWeight: 900, color: colorTexto, lineHeight: 1.1 }}>
                                  {fmtHora12(slot.hora_inicio)}
                                </span>
                                <span style={{ fontSize: 11, fontWeight: 700, color: colorSecundario }}>
                                  — {fmtHora12(slot.hora_fin)}
                                </span>
                                {inactivo && (
                                  <span
                                    style={{
                                      fontSize: 9,
                                      fontWeight: 900,
                                      letterSpacing: 0.6,
                                      textTransform: "uppercase",
                                      padding: "2px 6px",
                                      borderRadius: 999,
                                      background: dark ? "#374151" : "#E5E7EB",
                                      color: colorSecundario,
                                    }}
                                  >
                                    Pausado
                                  </span>
                                )}
                              </div>
                              <div
                                style={{
                                  fontSize: 14,
                                  fontWeight: 800,
                                  color: colorTexto,
                                  marginTop: 3,
                                  overflow: "hidden",
                                  textOverflow: "ellipsis",
                                  whiteSpace: "nowrap",
                                }}
                              >
                                {slot.titulo || "(sin título)"}
                              </div>
                              <div
                                style={{
                                  fontSize: 10,
                                  fontWeight: 900,
                                  letterSpacing: 0.6,
                                  textTransform: "uppercase",
                                  color: t.color,
                                  marginTop: 2,
                                }}
                              >
                                {t.label}
                              </div>
                            </div>
                            <button
                              type="button"
                              onClick={() => abrirEditar(slot)}
                              aria-label="Editar horario"
                              style={{
                                alignSelf: "center",
                                width: 38, height: 38,
                                borderRadius: 999,
                                border: "none",
                                background: dark ? "#1F2937" : "#EFF6FF",
                                color: BRAND,
                                fontSize: 16,
                                cursor: "pointer",
                                flexShrink: 0,
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                              }}
                            >
                              ✏️
                            </button>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* CTA "+ Agregar horario" — dentro de la sub-vista horarios */}
            {vistaActual === "horarios" && puedeGestionarHorarios && (
              <div style={{ padding: "16px 0 0" }}>
                <button
                  type="button"
                  onClick={abrirNuevo}
                  style={{
                    width: "100%",
                    padding: "14px 16px",
                    borderRadius: 14,
                    border: "none",
                    background: BRAND,
                    color: "#FFFFFF",
                    fontSize: 15,
                    fontWeight: 900,
                    cursor: "pointer",
                    boxShadow: "0 6px 14px rgba(37,99,235,0.35)",
                  }}
                >
                  + Agregar horario
                </button>
              </div>
            )}
          </div>

          <EditorSlot
            slot={slotEditando}
            iglesiaId={iglesiaId}
            abierto={editorAbierto}
            onClose={cerrarEditor}
            onGuardado={handleGuardado}
          />

          {ConfirmModal && (
            <ConfirmModal
              abierto={confirmarPausa}
              titulo="Pausar iglesia"
              mensaje="Dejará de aparecer para los usuarios. Puede volver a activarla cuando quiera."
              textoConfirmar="Pausar"
              tono="peligro"
              cargando={togglingActiva}
              onCancelar={() => setConfirmarPausa(false)}
              onConfirmar={() => {
                setConfirmarPausa(false);
                ejecutarToggleActiva(false);
              }}
            />
          )}
          {ConfirmModal && (
            <ConfirmModal
              abierto={confirmarEliminarIglesia}
              titulo={"Eliminar \"" + (nombreIglesia || "esta iglesia") + "\""}
              mensaje="Esta acción no se puede deshacer. La iglesia dejará de aparecer para todos los usuarios."
              textoConfirmar="Eliminar"
              tono="peligro"
              cargando={eliminando}
              onCancelar={() => setConfirmarEliminarIglesia(false)}
              onConfirmar={ejecutarEliminarIglesia}
            />
          )}
      </div>
    );
  }

  Object.assign(window, { GestionarIglesia, EditorSlot });
})();