/* Perfil + ThemeToggleRow + SelectorPerfilToggleRow → window.
   Estructura: foto + nombre, tarjeta "Administración" con acceso a Mis Iglesias,
   sección "Mis roles activos" (si aplica), ajustes (toggle tema + reabrir
   selector de perfil), cerrar sesión, versión pequeña al pie. */
(function () {
  const { useState, useEffect } = React;
  const { useAuth, useTheme, MisIglesias } = window;
  const getGestionarIglesia = function () { return window.GestionarIglesia; };
  const getGestionarActividades = function () { return window.GestionarActividades; };

  const TIPO_LABEL = {
    amigo:   { titulo: "Amigo",   emoji: "🤝", color: "#00796B" },
    miembro: { titulo: "Miembro", emoji: "🏠", color: "#2563EB" },
    pastor:  { titulo: "Pastor",  emoji: "🕊️", color: "#7C3AED" },
  };

  function ThemeToggleRow() {
    const { dark, toggle } = useTheme();
    return (
      <div className="px-5 py-4 flex justify-between items-center">
        <span className="font-bold text-[#777]">Modo oscuro</span>
        <button onClick={toggle}
                className="relative w-14 h-8 rounded-full transition"
                style={{ background: dark ? "#58CC02" : "#CCC", boxShadow: "inset 0 2px 4px rgba(0,0,0,0.2)" }}>
          <span className="absolute top-1 left-1 w-6 h-6 rounded-full bg-white transition-transform flex items-center justify-center text-xs"
                style={{ transform: dark ? "translateX(24px)" : "translateX(0)" }}>
            {dark ? "🌙" : "☀️"}
          </span>
        </button>
      </div>
    );
  }

  // Toggle para pedir el selector de perfil en el PRÓXIMO inicio de sesión.
  // Guarda la preferencia en /users/{uid}/perfil/mostrar_selector_proximo_inicio.
  // - No abre el selector inmediatamente. El snapshot en app.jsx se captura
  //   al inicio de la sesión, así que activar aquí se respeta en el próximo login.
  // - Mientras esté activo, el selector volverá a mostrarse al iniciar sesión
  //   hasta que elija un perfil (lo que apaga el flag automáticamente) o hasta
  //   que lo apague desde este mismo toggle.
  function SelectorPerfilToggleRow({ user }) {
    const [guardando, setGuardando] = useState(false);
    const [error, setError] = useState("");
    const perfil = typeof window.miPerfil === "function" ? window.miPerfil() : null;
    const activo = !!(perfil && perfil.mostrar_selector_proximo_inicio);

    const onToggle = async () => {
      if (guardando || !user || !user.uid) return;
      setError("");
      setGuardando(true);
      try {
        if (typeof window.setMostrarSelectorProximoInicio !== "function") {
          throw new Error("setMostrarSelectorProximoInicio no disponible");
        }
        await window.setMostrarSelectorProximoInicio(user.uid, !activo);
      } catch (e) {
        console.warn("[Perfil] setMostrarSelectorProximoInicio falló:", e);
        setError("No pudimos guardar la preferencia. Intente de nuevo.");
      } finally {
        setGuardando(false);
      }
    };

    return (
      <div className="px-5 py-4">
        <div className="flex justify-between items-center">
          <div className="flex-1 pr-3 min-w-0">
            <div className="font-bold text-[#777] text-sm">
              Mostrar perfiles al iniciar sesión
            </div>
            <div className="text-[11px] font-semibold text-[#AAA] mt-0.5 leading-snug">
              Se aplica en el próximo inicio de sesión. Se apaga solo al elegir un perfil.
            </div>
          </div>
          <button
            type="button"
            onClick={onToggle}
            disabled={guardando}
            className="relative w-14 h-8 rounded-full transition flex-shrink-0"
            style={{
              background: activo ? "#58CC02" : "#CCC",
              boxShadow: "inset 0 2px 4px rgba(0,0,0,0.2)",
              opacity: guardando ? 0.7 : 1,
              cursor: guardando ? "default" : "pointer",
            }}
            aria-pressed={activo}
            aria-label="Mostrar perfiles al iniciar sesión"
          >
            <span
              className="absolute top-1 left-1 w-6 h-6 rounded-full bg-white transition-transform flex items-center justify-center text-xs"
              style={{ transform: activo ? "translateX(24px)" : "translateX(0)" }}
            >
              {activo ? "✓" : ""}
            </span>
          </button>
        </div>
        {error && (
          <div className="mt-2 text-[11px] font-bold text-[#DC2626] bg-[#FEE2E2] rounded-lg px-3 py-2">
            {error}
          </div>
        )}
      </div>
    );
  }

  function TipoActualRow() {
    const perfil = typeof window.miPerfil === "function" ? window.miPerfil() : null;
    const tipo = perfil && typeof perfil.tipo === "string" ? perfil.tipo : null;
    const info = tipo && TIPO_LABEL[tipo] ? TIPO_LABEL[tipo] : null;
    if (!info) return null;
    return (
      <div className="px-5 py-4 flex justify-between items-center">
        <span className="font-bold text-[#777] text-sm">Mi perfil</span>
        <span
          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-black"
          style={{ background: info.color + "1A", color: info.color }}
        >
          <span aria-hidden>{info.emoji}</span>
          {info.titulo}
        </span>
      </div>
    );
  }

  function pillTiempoMiRol(item, ahora, dark) {
    const UNA_HORA = 60 * 60 * 1000;
    const UN_DIA = 24 * UNA_HORA;
    if (item.expira_en == null) {
      return dark
        ? { bg: "#064E3B", fg: "#6EE7B7", label: "Indefinido" }
        : { bg: "#DCFCE7", fg: "#166534", label: "Indefinido" };
    }
    const ms = item.expira_en - ahora;
    const totalSeg = Math.max(0, Math.floor(ms / 1000));
    const totalMin = Math.floor(totalSeg / 60);
    const totalHr = Math.floor(totalMin / 60);
    const dias = Math.floor(totalHr / 24);
    let label;
    if (ms <= 0) label = "Expirado";
    else if (dias >= 1) label = dias + "d " + (totalHr % 24) + "h";
    else if (totalHr >= 1) label = totalHr + "h " + (totalMin % 60) + "m";
    else if (totalMin >= 1) label = totalMin + "m";
    else label = totalSeg + "s";

    if (ms <= 0) return { bg: "#FFE4E4", fg: "#B32020", label: label };
    if (ms < UNA_HORA) return { bg: "#FF4B4B", fg: "#FFFFFF", label: label };
    if (ms < UN_DIA) return { bg: "#FFC800", fg: "#3C3C3C", label: label };
    return dark
      ? { bg: "#064E3B", fg: "#6EE7B7", label: label }
      : { bg: "#DCFCE7", fg: "#166534", label: label };
  }

  function MiRolRow({ item, ahora, dark, onAbrirEditor, onAbrirActividades, onAvisoFuturo }) {
    const pill = pillTiempoMiRol(item, ahora, dark);
    const rol = item.rol || {};
    const ig = item.iglesia || {};
    // Routing por rol:
    //   editor_contenido / programas_congregacional → GestionarIglesia
    //   actividades_espirituales                    → GestionarActividades
    //   otros                                       → toast "Próximamente"
    const abreGestionar =
      item.rolId === "editor_contenido" || item.rolId === "programas_congregacional";
    const abreActividades = item.rolId === "actividades_espirituales";

    const handleTap = function () {
      const igLite = {
        id: ig.id,
        nombre: ig.nombre || "",
        imagen_url: ig.imagen_url || "",
      };
      if (abreGestionar) {
        onAbrirEditor && onAbrirEditor(igLite);
      } else if (abreActividades) {
        onAbrirActividades && onAbrirActividades(igLite);
      } else {
        onAvisoFuturo && onAvisoFuturo();
      }
    };

    return (
      <button
        type="button"
        onClick={handleTap}
        className="w-full flex items-center gap-3 px-4 py-3 text-left active:scale-[0.99] transition"
        style={{ background: "transparent", border: "none", cursor: "pointer", fontFamily: "inherit" }}
      >
        <div
          className="w-11 h-11 rounded-full flex items-center justify-center text-xl flex-shrink-0"
          style={{ background: dark ? "#1F2937" : "#E0EAFF" }}
          aria-hidden
        >
          {rol.emoji || "⭐"}
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-black text-sm text-[#3C3C3C] dark:text-gray-100 truncate">
            {rol.nombre || item.rolId}
          </div>
          <div className="text-xs font-semibold text-[#777] dark:text-gray-400 mt-0.5 truncate">
            🏠 {ig.nombre || "Sin nombre"}
          </div>
        </div>
        <span
          style={{
            background: pill.bg, color: pill.fg,
            padding: "3px 9px", borderRadius: 999,
            fontSize: 10, fontWeight: 900, letterSpacing: 0.3,
            flexShrink: 0, whiteSpace: "nowrap",
          }}
        >
          {pill.label}
        </span>
        <svg
          width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden
          className="text-[#9AA0A6] flex-shrink-0"
        >
          <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>
    );
  }

  // Dataset completo de provincias (32). Viene cargado desde
  // /js/lib/provincias.js → window.PROVINCIAS_RD + PROVINCIAS_POR_REGION.
  // Para no depender del orden de carga, resolvemos perezosamente con
  // fallback mínimo (Distrito Nacional) si aún no está disponible.
  function leerProvinciasPorRegion() {
    return (window.PROVINCIAS_POR_REGION && typeof window.PROVINCIAS_POR_REGION === "object")
      ? window.PROVINCIAS_POR_REGION
      : { "Ozama": [{ id: "distrito_nacional", nombre: "Distrito Nacional", region: "Ozama" }] };
  }
  const PROVINCIA_DEFAULT = "Distrito Nacional";

  function DescubrimientoSection({ user }) {
    const { dark } = useTheme();
    const perfil = typeof window.miPerfil === "function" ? window.miPerfil() : null;

    // Valores vigentes con fallback a defaults. No escribimos nada hasta
    // que el user toca algo explícitamente.
    const alcanceGuardado = (perfil && typeof perfil.alcance_km === "number") ? perfil.alcance_km : 5;
    const modoGuardado = (perfil && typeof perfil.modo_ubicacion === "string") ? perfil.modo_ubicacion : "gps";
    const provinciaGuardada = (perfil && typeof perfil.provincia_manual === "string") ? perfil.provincia_manual : "";

    const [feedback, setFeedback] = useState("");
    const [guardando, setGuardando] = useState(false);
    const [error, setError] = useState("");

    useEffect(function () {
      if (!feedback) return;
      const t = setTimeout(function () { setFeedback(""); }, 1800);
      return function () { clearTimeout(t); };
    }, [feedback]);

    async function onElegirAlcance(km) {
      if (!user || !user.uid || guardando) return;
      if (km === alcanceGuardado) return;
      setError("");
      setGuardando(true);
      try {
        await window.actualizarAlcance(user.uid, km);
        setFeedback("Alcance actualizado ✓");
      } catch (e) {
        console.warn("[Perfil] actualizarAlcance falló:", e);
        setError("No pudimos guardar el alcance.");
      } finally {
        setGuardando(false);
      }
    }

    async function onElegirModo(nuevoModo) {
      if (!user || !user.uid || guardando) return;
      if (nuevoModo === modoGuardado) return;
      setError("");
      setGuardando(true);
      try {
        if (nuevoModo === "gps") {
          await window.actualizarModoUbicacion(user.uid, "gps", null);
          setFeedback("Usando GPS automático");
        } else {
          // Provincia por defecto en modo manual (primera de la lista
          // disponible). El user puede cambiarla abajo.
          var provInicial = provinciaGuardada || PROVINCIA_DEFAULT;
          await window.actualizarModoUbicacion(user.uid, "manual", provInicial);
          setFeedback("Usando provincia manual");
        }
      } catch (e) {
        console.warn("[Perfil] actualizarModoUbicacion falló:", e);
        setError("No pudimos guardar el modo de ubicación.");
      } finally {
        setGuardando(false);
      }
    }

    async function onElegirProvincia(prov) {
      if (!user || !user.uid || guardando) return;
      if (prov === provinciaGuardada) return;
      setError("");
      setGuardando(true);
      try {
        await window.actualizarModoUbicacion(user.uid, "manual", prov);
        setFeedback("Provincia actualizada ✓");
      } catch (e) {
        console.warn("[Perfil] actualizarModoUbicacion manual falló:", e);
        setError("No pudimos guardar la provincia.");
      } finally {
        setGuardando(false);
      }
    }

    const colorPill = dark ? "#F0F0F0" : "#3C3C3C";
    const bordePill = dark ? "#2A2A2A" : "#E5E7EB";
    const bgPillInactive = dark ? "#1A1A1A" : "#FFFFFF";

    return (
      <div className="w-full mt-6">
        <h2 className="text-sm font-black uppercase tracking-wide text-[#9AA0A6] dark:text-gray-500 mb-1 px-1">
          📍 Descubrimiento
        </h2>
        <p className="text-xs font-semibold text-[#777] dark:text-gray-400 mb-3 px-1">
          Configura cómo descubres iglesias cerca de ti
        </p>

        {/* Alcance */}
        <div className="card-soft p-4 mb-3">
          <div className="text-xs font-black uppercase tracking-wide text-[#777] dark:text-gray-400 mb-2">
            Alcance de descubrimiento
          </div>
          <div style={{
            display: "flex",
            gap: 6,
            flexWrap: "wrap",
          }}>
            {[2, 5, 10, 15, 25].map(function (km) {
              const active = alcanceGuardado === km;
              return (
                <button
                  key={km}
                  type="button"
                  onClick={function () { onElegirAlcance(km); }}
                  disabled={guardando}
                  style={{
                    height: 38,
                    padding: "0 14px",
                    borderRadius: 999,
                    border: "1px solid " + (active ? "#2563EB" : bordePill),
                    background: active ? "#2563EB" : bgPillInactive,
                    color: active ? "#FFFFFF" : colorPill,
                    fontSize: 13,
                    fontWeight: 800,
                    letterSpacing: 0.2,
                    cursor: guardando ? "default" : "pointer",
                    fontFamily: "inherit",
                    transition: "background 150ms, color 150ms, border-color 150ms",
                  }}
                >
                  {km} km
                </button>
              );
            })}
          </div>
          <p className="text-[11px] font-semibold text-[#9AA0A6] dark:text-gray-500 mt-2">
            Iglesias y actividades dentro de este rango aparecerán en tu feed.
          </p>
        </div>

        {/* Modo de ubicación */}
        <div className="card-soft p-4">
          <div className="text-xs font-black uppercase tracking-wide text-[#777] dark:text-gray-400 mb-2">
            Ubicación
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <ModoRadio
              activo={modoGuardado === "gps"}
              emoji="📡"
              titulo="GPS automático"
              descripcion="Usa tu ubicación actual del dispositivo"
              onTap={function () { onElegirModo("gps"); }}
              disabled={guardando}
              dark={dark}
            />
            <ModoRadio
              activo={modoGuardado === "manual"}
              emoji="🗺️"
              titulo="Provincia manual"
              descripcion="Elige una provincia si prefieres no usar GPS"
              onTap={function () { onElegirModo("manual"); }}
              disabled={guardando}
              dark={dark}
            />
          </div>

          {modoGuardado === "manual" && (
            <div style={{ marginTop: 10 }}>
              <label
                htmlFor="descubrimiento-provincia"
                className="block text-[11px] font-bold uppercase tracking-wide text-[#777] dark:text-gray-400 mb-1"
              >
                Provincia
              </label>
              <select
                id="descubrimiento-provincia"
                value={provinciaGuardada || PROVINCIA_DEFAULT}
                onChange={function (e) { onElegirProvincia(e.target.value); }}
                disabled={guardando}
                style={{
                  width: "100%",
                  height: 44,
                  padding: "0 12px",
                  borderRadius: 12,
                  border: "1px solid " + bordePill,
                  background: dark ? "#141415" : "#FFFFFF",
                  color: colorPill,
                  fontSize: 14,
                  fontWeight: 700,
                  fontFamily: "inherit",
                  appearance: "none",
                  WebkitAppearance: "none",
                  backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239AA0A6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "right 12px center",
                  paddingRight: 36,
                }}
              >
                {(function () {
                  var grupos = leerProvinciasPorRegion();
                  return Object.keys(grupos).map(function (region) {
                    return (
                      <optgroup key={region} label={region}>
                        {grupos[region].map(function (p) {
                          return (<option key={p.id} value={p.nombre}>{p.nombre}</option>);
                        })}
                      </optgroup>
                    );
                  });
                })()}
              </select>
            </div>
          )}
        </div>

        {feedback && (
          <div
            style={{
              marginTop: 10,
              padding: "8px 12px",
              borderRadius: 10,
              background: dark ? "#064E3B" : "#DCFCE7",
              color: dark ? "#6EE7B7" : "#166534",
              fontSize: 12,
              fontWeight: 800,
              textAlign: "center",
              letterSpacing: 0.2,
            }}
          >
            {feedback}
          </div>
        )}
        {error && (
          <div
            style={{
              marginTop: 10,
              padding: "8px 12px",
              borderRadius: 10,
              background: dark ? "#2A0F10" : "#FEF2F2",
              color: "#DC2626",
              fontSize: 12,
              fontWeight: 800,
              textAlign: "center",
            }}
          >
            {error}
          </div>
        )}
      </div>
    );
  }

  function ModoRadio({ activo, emoji, titulo, descripcion, onTap, disabled, dark }) {
    const BRAND = "#2563EB";
    const bg = activo
      ? (dark ? "#0B1B3D" : "#EFF6FF")
      : (dark ? "#141415" : "#F9FAFB");
    const borde = activo ? BRAND : (dark ? "#2A2A2A" : "#E5E7EB");
    const colorTitulo = activo ? BRAND : (dark ? "#F0F0F0" : "#3C3C3C");
    const colorDesc = dark ? "#9CA3AF" : "#6B7280";
    return (
      <button
        type="button"
        onClick={onTap}
        disabled={disabled}
        aria-pressed={activo}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          padding: "10px 12px",
          borderRadius: 14,
          border: "1.5px solid " + borde,
          background: bg,
          cursor: disabled ? "default" : "pointer",
          fontFamily: "inherit",
          textAlign: "left",
          width: "100%",
        }}
      >
        <div
          aria-hidden
          style={{
            width: 40, height: 40, borderRadius: 12,
            background: activo ? (dark ? "#1F2937" : "#FFFFFF") : (dark ? "#1A1A1A" : "#FFFFFF"),
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 20, flexShrink: 0,
          }}
        >
          {emoji}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 900, color: colorTitulo, lineHeight: 1.2 }}>
            {titulo}
          </div>
          <div style={{ fontSize: 11, fontWeight: 600, color: colorDesc, marginTop: 2 }}>
            {descripcion}
          </div>
        </div>
        <div
          aria-hidden
          style={{
            width: 20, height: 20, borderRadius: 999,
            border: "2px solid " + (activo ? BRAND : (dark ? "#374151" : "#CBD5E1")),
            background: "transparent",
            display: "flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0,
          }}
        >
          {activo && (
            <div style={{ width: 10, height: 10, borderRadius: 999, background: BRAND }} />
          )}
        </div>
      </button>
    );
  }

  function Perfil({ onLogout, onRegistrarIglesia, onAbrirPanelSuper, onAbrirPanelPastor }) {
    const { user, signOut } = useAuth();
    const { dark } = useTheme();
    const [misIglesiasAbierto, setMisIglesiasAbierto] = useState(false);
    const [misRoles, setMisRoles] = useState([]);
    // iglesia objeto ({id,nombre,imagen_url}) cuando un rol activo abre
    // una pantalla de gestión desde esta sección.
    const [editarIglesia, setEditarIglesia] = useState(null);
    const [actividadesIglesia, setActividadesIglesia] = useState(null);
    // Tick para refrescar pills de tiempo restante sin pedir datos.
    const [ahora, setAhora] = useState(Date.now());
    const [rolNoDisponibleAviso, setRolNoDisponibleAviso] = useState(false);

    const photo = user && user.photoURL;
    const name = (user && user.displayName) || "Usuario";
    const initial = name[0].toUpperCase();

    useEffect(function () {
      if (!user || !user.uid || typeof window.suscribirMisRolesActivos !== "function") {
        setMisRoles([]);
        return;
      }
      const unsub = window.suscribirMisRolesActivos(user.uid, function (arr) {
        setMisRoles(Array.isArray(arr) ? arr : []);
      });
      return function () { if (typeof unsub === "function") unsub(); };
    }, [user && user.uid]);

    useEffect(function () {
      if (!misRoles || misRoles.length === 0) return;
      const id = setInterval(function () { setAhora(Date.now()); }, 60000);
      return function () { clearInterval(id); };
    }, [misRoles && misRoles.length]);

    useEffect(function () {
      if (!rolNoDisponibleAviso) return;
      const t = setTimeout(function () { setRolNoDisponibleAviso(false); }, 2200);
      return function () { clearTimeout(t); };
    }, [rolNoDisponibleAviso]);

    const handleLogout = async () => {
      await signOut();
      if (onLogout) onLogout();
    };

    // Cuando abre "Mis Iglesias", reemplazamos el cuerpo de Perfil por esa
    // pantalla inline — el header y la BottomNav de la app siguen visibles.
    if (misIglesiasAbierto && MisIglesias) {
      return (
        <MisIglesias
          onClose={() => setMisIglesiasAbierto(false)}
          onSeleccionar={(ig) => console.log("[Perfil] gestionar iglesia:", ig && ig.id, ig)}
          onRegistrarIglesia={() => {
            setMisIglesiasAbierto(false);
            if (typeof onRegistrarIglesia === "function") onRegistrarIglesia();
          }}
        />
      );
    }

    // Si un rol editor_contenido/programas_congregacional abre
    // GestionarIglesia, lo hacemos inline aquí mismo. Mismo patrón que
    // MisIglesias: early-return reemplazando el cuerpo de Perfil.
    if (editarIglesia && getGestionarIglesia()) {
      return React.createElement(getGestionarIglesia(), {
        iglesia: editarIglesia,
        onClose: function () { setEditarIglesia(null); },
      });
    }

    // Rol actividades_espirituales → GestionarActividades (inline).
    if (actividadesIglesia && getGestionarActividades()) {
      return React.createElement(getGestionarActividades(), {
        iglesiaId: actividadesIglesia.id,
        iglesia: actividadesIglesia,
        onCerrar: function () { setActividadesIglesia(null); },
      });
    }

    return (
      <div className="fade-in flex flex-col items-center px-5 pt-4 pb-32">
        <div className="w-28 h-28 rounded-full bg-[#E5E5E5] overflow-hidden flex items-center justify-center text-4xl font-black text-[#999]">
          {photo ? <img src={photo} alt="" className="w-full h-full object-cover" referrerPolicy="no-referrer" /> : initial}
        </div>
        <h1 className="mt-5 text-2xl font-black text-[#3C3C3C] dark:text-gray-100">{name}</h1>

        {/* Mi perfil: badge con el tipo actual del usuario. Sube a quedar
            pegado al avatar+nombre para que sea lo primero visible
            después de la cabecera. */}
        <div className="w-full card-soft mt-5">
          <TipoActualRow />
        </div>

        {/* Administración */}
        <div className="w-full mt-6">
          <h2 className="text-sm font-black uppercase tracking-wide text-[#9AA0A6] dark:text-gray-500 mb-2 px-1">
            Administración
          </h2>

          {typeof onAbrirPanelSuper === "function" && (
            <button
              type="button"
              onClick={() => onAbrirPanelSuper()}
              className="card-soft w-full flex items-center gap-3 px-4 py-3 text-left active:scale-[0.99] transition mb-2"
            >
              <div className="w-11 h-11 rounded-full bg-[#FEF3C7] dark:bg-yellow-900/40 flex items-center justify-center text-xl flex-shrink-0">
                👑
              </div>
              <div className="flex-1 min-w-0">
                <div className="font-black text-sm text-[#3C3C3C] dark:text-gray-100">
                  Panel Superadmin
                </div>
                <div className="text-xs font-semibold text-[#777] dark:text-gray-400 mt-0.5">
                  Gestiona la plataforma completa
                </div>
              </div>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden className="text-[#9AA0A6] flex-shrink-0">
                <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          )}

          {typeof onAbrirPanelPastor === "function" && (
            <button
              type="button"
              onClick={() => onAbrirPanelPastor()}
              className="card-soft w-full flex items-center gap-3 px-4 py-3 text-left active:scale-[0.99] transition mb-2"
            >
              <div className="w-11 h-11 rounded-full bg-[#DCE7F7] dark:bg-blue-900/40 flex items-center justify-center text-xl flex-shrink-0">
                🕊️
              </div>
              <div className="flex-1 min-w-0">
                <div className="font-black text-sm text-[#3C3C3C] dark:text-gray-100">
                  Panel del Pastor
                </div>
                <div className="text-xs font-semibold text-[#777] dark:text-gray-400 mt-0.5">
                  Administra miembros, amigos y roles
                </div>
              </div>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden className="text-[#9AA0A6] flex-shrink-0">
                <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          )}

          <button
            type="button"
            onClick={() => setMisIglesiasAbierto(true)}
            className="card-soft w-full flex items-center gap-3 px-4 py-3 text-left active:scale-[0.99] transition"
          >
            <div className="w-11 h-11 rounded-full bg-[#E0EAFF] dark:bg-blue-900/40 flex items-center justify-center text-xl flex-shrink-0">
              🏠
            </div>
            <div className="flex-1 min-w-0">
              <div className="font-black text-sm text-[#3C3C3C] dark:text-gray-100">
                Mis iglesias
              </div>
              <div className="text-xs font-semibold text-[#777] dark:text-gray-400 mt-0.5">
                Gestiona las iglesias que administras
              </div>
            </div>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden className="text-[#9AA0A6] flex-shrink-0">
              <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>

          {/* Agregar CultoRD a la pantalla de inicio del teléfono.
              El componente decide si mostrarse (oculta si ya instalada
              o si el browser no soporta PWA install). */}
          {window.InstalarAppRow && <window.InstalarAppRow />}
        </div>

        {/* Descubrimiento y Ubicación: alcance + modo de ubicación.
            Va justo después de Administración para que los ajustes que
            impactan feed/Radar queden cerca del resto de gestión. */}
        <DescubrimientoSection user={user} />

        {/* Mis roles activos — solo visible si tiene al menos uno. */}
        {misRoles.length > 0 && (
          <div className="w-full mt-6">
            <h2 className="text-sm font-black uppercase tracking-wide text-[#9AA0A6] dark:text-gray-500 mb-2 px-1">
              Mis roles activos
            </h2>
            <div className="card-soft divide-y divide-[#EEE] dark:divide-gray-700 overflow-hidden">
              {misRoles.map(function (item) {
                return (
                  <MiRolRow
                    key={item.iglesiaId + "_" + item.rolId}
                    item={item}
                    ahora={ahora}
                    dark={dark}
                    onAbrirEditor={function (iglesia) { setEditarIglesia(iglesia); }}
                    onAbrirActividades={function (iglesia) { setActividadesIglesia(iglesia); }}
                    onAvisoFuturo={function () { setRolNoDisponibleAviso(true); }}
                  />
                );
              })}
            </div>
            {rolNoDisponibleAviso && (
              <div
                style={{
                  marginTop: 10,
                  padding: "10px 12px",
                  borderRadius: 10,
                  background: dark ? "#1F2937" : "#F3F4F6",
                  color: dark ? "#D1D5DB" : "#4B5563",
                  fontSize: 12,
                  fontWeight: 700,
                  textAlign: "center",
                }}
              >
                Próximamente podrá usar este rol desde la app.
              </div>
            )}
          </div>
        )}

        {/* Ajustes */}
        <div className="w-full card-soft mt-4 divide-y divide-[#EEE] dark:divide-gray-700">
          <SelectorPerfilToggleRow user={user} />
          <ThemeToggleRow />
        </div>

        <button
          onClick={handleLogout}
          className="mt-6 inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-bold text-[#DC2626] hover:bg-[#FEE2E2] dark:hover:bg-red-900/20 transition"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M15 17l5-5-5-5M20 12H9M12 19H5a2 2 0 01-2-2V7a2 2 0 012-2h7"
                  stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          Cerrar sesión
        </button>

        <div className="mt-3 text-[10px] font-semibold text-[#BBB] dark:text-gray-600 tracking-wide">
          v1.1.0
        </div>
      </div>
    );
  }

  Object.assign(window, { Perfil, ThemeToggleRow });
})();