/* DetalleIglesia → window. Props: { iglesia }.
   El header (back + nombre) vive en app.jsx como DetailHeader, estilo Facebook. */
(function () {
  const { useState, useEffect } = React;
  const { HorarioSemanal, tiempoRelativo, useAuth, MESES, ConfirmModal } = window;

  const fmtDist = (km) => {
    if (km == null || isNaN(km)) return null;
    return km < 1 ? `${Math.round(km * 1000)} m` : `${km.toFixed(1)} km`;
  };

  // "15 Oct 2026" — formato absoluto corto para la entrada "Publicado".
  const fmtFechaAbs = (ts) => {
    const t = Number(ts);
    if (!t || isNaN(t)) return "";
    const d = new Date(t);
    const mes = (MESES && MESES[d.getMonth()]) || "";
    return d.getDate() + " " + mes.slice(0, 3) + " " + d.getFullYear();
  };

  function DetalleIglesia({ iglesia, onAutorTap, onReclamar }) {
    const { user } = (typeof useAuth === "function" ? useAuth() : {}) || {};
    const [confirmarDenuncia, setConfirmarDenuncia] = useState(false);
    const [avisoDenuncia, setAvisoDenuncia] = useState(false);

    // Iglesias "no reclamadas" (scrape de Google Maps): pueden ser
    // reclamadas por pastores. Suscribimos a mi reclamo sobre esta
    // iglesia para mostrar "Pendiente de revisión" si ya envié.
    const noReclamada = iglesia && iglesia.reclamada === false;
    const esPastor = typeof window.puedeVer === "function" && window.puedeVer("panel_pastor");
    const [miReclamo, setMiReclamo] = useState(null);
    useEffect(function () {
      if (!noReclamada) { setMiReclamo(null); return; }
      if (!user || !user.uid) { setMiReclamo(null); return; }
      if (typeof window.suscribirMiReclamoSobre !== "function") return;
      const unsub = window.suscribirMiReclamoSobre(user.uid, iglesia.id, setMiReclamo);
      return function () { if (typeof unsub === "function") unsub(); };
    }, [noReclamada, user && user.uid, iglesia && iglesia.id]);

    // Si el creador es el usuario actual, usar sus datos como fallback frescos
    // (cubre iglesias antiguas que no guardaron creado_por_nombre/photo).
    const esMio = user && iglesia.creado_por && user.uid === iglesia.creado_por;
    const autorNombre =
      iglesia.creado_por_nombre ||
      (esMio ? (user.displayName || user.email || "Usuario") : "Usuario CultoRD");
    const autorFoto =
      iglesia.creado_por_photo ||
      (esMio ? (user.photoURL || "") : "");
    const autorInicial = (autorNombre[0] || "U").toUpperCase();
    const handleWA = (e) => {
      e.stopPropagation();
      const num = (iglesia.whatsapp || "").replace(/\D/g, "");
      if (num) window.open("https://wa.me/" + num, "_blank", "noopener");
    };
    const handleComoLlegar = () => {
      if (iglesia.lat && iglesia.lng) {
        const url = `https://www.google.com/maps/dir/?api=1&destination=${iglesia.lat},${iglesia.lng}`;
        window.open(url, "_blank", "noopener");
      }
    };
    const handleCompartir = async () => {
      // Deep link al perfil de la iglesia dentro de CultoRD (requiere cuenta para ver).
      const origin = window.location.origin;
      const deepLink = `${origin}/?i=${encodeURIComponent(iglesia.id)}`;
      const partes = [
        `🏠 ${iglesia.nombre}`,
        iglesia.direccion_texto ? `📍 ${iglesia.direccion_texto}` : "",
        iglesia.descripcion ? `\n${iglesia.descripcion}` : "",
        `\nVer en CultoRD: ${deepLink}`,
      ].filter(Boolean);
      const text = partes.join("\n");

      if (navigator.share) {
        try {
          await navigator.share({ title: iglesia.nombre, text, url: deepLink });
          return;
        } catch (_) { /* cancelado o no soportado */ }
      }
      // Fallback: WhatsApp Web con el texto precargado
      const wa = `https://wa.me/?text=${encodeURIComponent(text)}`;
      window.open(wa, "_blank", "noopener");
    };

    return (
      <div className="fade-in bg-[#F9F9F9] dark:bg-gray-900 pb-32">
        {/* Hero */}
        {iglesia.imagen_url && (
          <div className="relative h-[220px] w-full overflow-hidden bg-[#E5E5E5]">
            <img
              src={iglesia.imagen_url}
              alt=""
              className="w-full h-full object-cover"
              referrerPolicy="no-referrer"
            />
            <div
              className="absolute inset-x-0 bottom-0 h-24 pointer-events-none"
              style={{ background: "linear-gradient(to top, rgba(0,0,0,0.55), transparent)" }}
            />
          </div>
        )}

        {/* Info principal */}
        <div className="px-5 mt-4">
          <div className="card-soft p-5">
            <h1 className="text-2xl font-black text-[#3C3C3C] dark:text-gray-100 leading-tight">
              {iglesia.nombre}
            </h1>
            {(fmtDist(iglesia.distancia_km) || iglesia.direccion_texto) && (
              <div className="mt-2 flex items-start gap-1.5 text-sm">
                <span className="flex-shrink-0" aria-hidden>📍</span>
                <div className="text-[#777] dark:text-gray-400 font-semibold min-w-0">
                  {fmtDist(iglesia.distancia_km) && (
                    <span className="font-black text-[#3C3C3C] dark:text-gray-200">
                      {fmtDist(iglesia.distancia_km)}
                    </span>
                  )}
                  {fmtDist(iglesia.distancia_km) && iglesia.direccion_texto && <span> · </span>}
                  {iglesia.direccion_texto && <span>{iglesia.direccion_texto}</span>}
                </div>
              </div>
            )}
            {iglesia.descripcion && (
              <p className="mt-3 text-sm font-semibold text-[#555] dark:text-gray-300 leading-relaxed">
                {iglesia.descripcion}
              </p>
            )}
          </div>
        </div>

        {/* Banner No reclamada */}
        {noReclamada && (
          <div className="px-5 mt-4">
            <div className="card-soft p-4" style={{ borderLeft: "4px solid #F59E0B" }}>
              <div className="flex items-center gap-2 mb-1.5">
                <span className="text-lg" aria-hidden>⚠️</span>
                <span className="text-sm font-black uppercase tracking-wide text-[#92400E] dark:text-amber-300">
                  Iglesia no reclamada
                </span>
              </div>
              <p className="text-sm font-semibold text-[#555] dark:text-gray-300 leading-relaxed">
                Esta iglesia todavía no ha sido reclamada por su pastor en CultoRD.
                La información pública proviene de Google Maps; los horarios y el
                contacto directo no están disponibles hasta que un pastor la reclame.
              </p>
              {esPastor && user && !miReclamo && (
                <button
                  type="button"
                  onClick={() => { if (typeof onReclamar === "function") onReclamar(iglesia); }}
                  className="mt-3 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#2563EB] text-white text-sm font-black active:opacity-80 transition"
                >
                  <span aria-hidden>🙋</span>
                  <span>Reclamar esta iglesia</span>
                </button>
              )}
              {miReclamo && miReclamo.estado === "pendiente" && (
                <div className="mt-3 px-3 py-2 rounded-lg bg-[#FEF3C7] dark:bg-amber-900/30 text-[#92400E] dark:text-amber-300 text-xs font-bold">
                  Tu reclamo está en revisión por el equipo de CultoRD.
                </div>
              )}
              {miReclamo && miReclamo.estado === "rechazado" && (
                <div className="mt-3 px-3 py-2 rounded-lg bg-[#FEE2E2] dark:bg-red-900/30 text-[#B91C1C] dark:text-red-300 text-xs font-bold">
                  Tu reclamo fue rechazado{miReclamo.razon_rechazo ? ": " + miReclamo.razon_rechazo : "."}
                </div>
              )}
              {!esPastor && (
                <p className="mt-3 text-xs font-semibold text-[#777] dark:text-gray-400">
                  ¿Eres el pastor? Ingresa con tu perfil de pastor para poder reclamarla.
                </p>
              )}
            </div>
          </div>
        )}

        {/* Acciones */}
        <div className="px-5 mt-4 grid grid-cols-3 gap-3">
          <button
            onClick={handleComoLlegar}
            className="card-soft py-4 flex flex-col items-center gap-1.5 active:scale-[0.98] transition"
          >
            <span className="text-2xl" aria-hidden>🧭</span>
            <span className="text-xs font-black text-[#2563EB] uppercase tracking-wide">Cómo llegar</span>
          </button>
          <button
            onClick={handleWA}
            className="card-soft py-4 flex flex-col items-center gap-1.5 active:scale-[0.98] transition"
          >
            <span className="text-2xl" aria-hidden>💬</span>
            <span className="text-xs font-black text-[#25D366] uppercase tracking-wide">WhatsApp</span>
          </button>
          <button
            onClick={handleCompartir}
            className="card-soft py-4 flex flex-col items-center gap-1.5 active:scale-[0.98] transition"
          >
            <span className="text-2xl" aria-hidden>↗️</span>
            <span className="text-xs font-black text-[#3C3C3C] dark:text-gray-200 uppercase tracking-wide">Compartir</span>
          </button>
        </div>

        {/* Horarios */}
        <div className="px-5 mt-6">
          <h3 className="text-lg font-black text-[#3C3C3C] dark:text-gray-100 mb-3">Horarios</h3>
          <HorarioSemanal horario={iglesia.horario} proximo_culto={iglesia.proximo_culto} />
        </div>

        {/* Timeline: autor · actualizado · publicado (siempre visible) */}
        <div className="px-5 mt-8">
          <div className="flex flex-col gap-2.5 text-xs">
            {/* Autor — clickable */}
            <button
              type="button"
              onClick={() => onAutorTap && onAutorTap(iglesia.creado_por)}
              className="flex items-center gap-2.5 text-left active:opacity-70 transition"
            >
              {autorFoto ? (
                <img
                  src={autorFoto}
                  alt=""
                  className="w-6 h-6 rounded-full object-cover bg-[#E5E5E5] flex-shrink-0"
                  referrerPolicy="no-referrer"
                />
              ) : (
                <div className="w-6 h-6 rounded-full bg-[#9AA0A6] dark:bg-gray-600 flex items-center justify-center text-[10px] font-black text-white flex-shrink-0">
                  {autorInicial}
                </div>
              )}
              <span className="font-semibold text-[#777] dark:text-gray-400 truncate flex items-center gap-1">
                <span className="truncate">Autor {autorNombre}</span>
                {iglesia.verificada && (
                  <span className="text-[#2563EB]" aria-label="Verificada">✓</span>
                )}
              </span>
            </button>

            {/* Actualizado — sólo si hubo cambios posteriores a la creación */}
            {iglesia.updatedAt && iglesia.createdAt && Number(iglesia.updatedAt) > Number(iglesia.createdAt) + 60000 && (
              <div className="flex items-center gap-2.5 text-[#9AA0A6] dark:text-gray-500 font-medium">
                <span className="w-6 flex-shrink-0 text-center" aria-hidden>·</span>
                <span>Actualizado {tiempoRelativo ? tiempoRelativo(iglesia.updatedAt) : ""}</span>
              </div>
            )}

            {/* Publicado — nunca cambia */}
            {iglesia.createdAt && (
              <div className="flex items-center gap-2.5 text-[#9AA0A6] dark:text-gray-500 font-medium">
                <span className="w-6 flex-shrink-0 text-center" aria-hidden>·</span>
                <span>Publicado {fmtFechaAbs(iglesia.createdAt)}</span>
              </div>
            )}
          </div>

          {/* Denunciar — acción discreta. TODO: conectar con colección de denuncias. */}
          <button
            type="button"
            onClick={() => setConfirmarDenuncia(true)}
            className="mt-4 flex items-center gap-1.5 text-xs font-semibold text-[#9AA0A6] dark:text-gray-500 active:text-[#DC2626] transition"
          >
            <span aria-hidden>🚩</span>
            <span>Denunciar</span>
          </button>
        </div>

        {ConfirmModal && (
          <ConfirmModal
            abierto={confirmarDenuncia}
            titulo="Denunciar esta iglesia"
            mensaje="Revisaremos su reporte y tomaremos acción si corresponde."
            textoConfirmar="Enviar denuncia"
            tono="peligro"
            onCancelar={() => setConfirmarDenuncia(false)}
            onConfirmar={() => {
              setConfirmarDenuncia(false);
              setAvisoDenuncia(true);
            }}
          />
        )}
        {ConfirmModal && (
          <ConfirmModal
            abierto={avisoDenuncia}
            titulo="Gracias"
            mensaje="Su denuncia fue recibida. El equipo CultoRD la revisará."
            textoConfirmar="Entendido"
            textoCancelar={null}
            onConfirmar={() => setAvisoDenuncia(false)}
            onCancelar={() => setAvisoDenuncia(false)}
          />
        )}
      </div>
    );
  }

  window.DetalleIglesia = DetalleIglesia;
})();