/* IglesiaCard → window.
   Props: { iglesia, onTap }. Card tappable con avatar, imagen, bloque
   de próximo culto con badge dinámico y fila de acciones. */
(function () {
  const { useState } = React;
  const { DIAS } = window;

  const fmtDistancia = (km) =>
    km < 1 ? `${Math.round(km * 1000)} m` : `${km.toFixed(1)} km`;

  const fmtHora = (date) =>
    date.toLocaleTimeString("es-DO", { hour: "numeric", minute: "2-digit", hour12: true });

  // Normaliza el día del slot a índice 0..6 (0=Dom).
  const DIAS_NOMBRE = ["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"];
  function diaIdx(d) {
    if (typeof d === "number" && d >= 0 && d <= 6) return d;
    if (typeof d === "string") {
      const i = DIAS_NOMBRE.indexOf(d);
      if (i >= 0) return i;
      const n = Number(d);
      if (!isNaN(n) && n >= 0 && n <= 6) return n;
    }
    return -1;
  }
  function parseHHMM(s) {
    const [h, m] = String(s || "").split(":").map(Number);
    if (isNaN(h) || isNaN(m)) return null;
    return h * 60 + m;
  }

  // Escanea horario[] y devuelve el próximo slot: { titulo, minutos_para_empezar, duracion_min }.
  // "Próximo" incluye el slot en curso (m negativo, hasta 60 min pasado el inicio) → badge EN VIVO.
  function proximoDesdeHorario(horario) {
    const activos = (horario || []).filter((s) => s && s.activo !== false);
    if (activos.length === 0) return null;
    const now = new Date();
    const nowDay = now.getDay();
    const nowMin = now.getHours() * 60 + now.getMinutes();

    let mejor = null;
    activos.forEach((s) => {
      const d = diaIdx(s.dia);
      const ini = parseHHMM(s.hora_inicio);
      if (d < 0 || ini == null) return;
      const fin = parseHHMM(s.hora_fin);
      const dur = (fin != null && fin > ini) ? (fin - ini) : 60;
      let daysAhead = (d - nowDay + 7) % 7;
      let startAbs = daysAhead * 1440 + ini;
      const endAbs = startAbs + dur;
      // Si ya terminó hoy hace más de 60 min, usa la próxima semana.
      if (daysAhead === 0 && nowMin > endAbs + 60) {
        startAbs += 7 * 1440;
      }
      const m = startAbs - nowMin;
      if (mejor == null || m < mejor.minutos_para_empezar) {
        mejor = {
          titulo: s.titulo || "Culto",
          minutos_para_empezar: m,
          duracion_min: dur,
          tipo: s.tipo || "otro",
        };
      }
    });
    return mejor;
  }

  // Devuelve { variante, etiqueta, titulo, mostrar } según minutos_para_empezar.
  // variante: "live" | "pronto" | "hoy" | "despues" | "ninguno"
  function computeBadge(proximo) {
    if (!proximo || proximo.minutos_para_empezar == null) {
      return { variante: "ninguno" };
    }
    const m = proximo.minutos_para_empezar;
    const start = new Date(Date.now() + m * 60000);
    const end = new Date(start.getTime() + (proximo.duracion_min || 60) * 60000);

    if (m >= -60 && m <= 0) {
      return {
        variante: "live",
        etiqueta: "EN VIVO",
        titulo: `${proximo.titulo} · hasta ${fmtHora(end)}`,
      };
    }
    if (m > 0 && m <= 60) {
      return {
        variante: "pronto",
        etiqueta: `⏳ En ${m} min`,
        titulo: proximo.titulo,
      };
    }
    if (m > 60 && m <= 360) {
      return {
        variante: "hoy",
        etiqueta: `Hoy · ${fmtHora(start)}`,
        titulo: proximo.titulo,
      };
    }
    // mañana o después
    const dia = DIAS[start.getDay()];
    return {
      variante: "despues",
      etiqueta: `${m <= 1440 + 60 ? "Mañana" : dia} · ${fmtHora(start)}`,
      titulo: proximo.titulo,
    };
  }

  function BadgeProximo({ badge }) {
    if (badge.variante === "ninguno") {
      return (
        <p className="text-sm font-semibold text-[#9AA0A6] italic">
          Sin cultos programados esta semana
        </p>
      );
    }
    const styles = {
      live:    { wrap: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300", dot: "bg-red-500 animate-pulse" },
      pronto:  { wrap: "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300", dot: null },
      hoy:     { wrap: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300", dot: null },
      despues: { wrap: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200", dot: null },
    }[badge.variante];

    return (
      <div className="flex flex-col gap-1.5">
        <span className={"inline-flex items-center gap-1.5 self-start px-2.5 py-1 rounded-full text-[11px] font-black uppercase tracking-wide " + styles.wrap}>
          {styles.dot && <span className={"w-2 h-2 rounded-full " + styles.dot}></span>}
          {badge.etiqueta}
        </span>
        <p className="text-sm font-bold text-[#3C3C3C] dark:text-gray-100">{badge.titulo}</p>
      </div>
    );
  }

  function IglesiaCard({ iglesia, onTap, onShowMap, onShowHorario }) {
    const proximo = iglesia.proximo_culto || proximoDesdeHorario(iglesia.horario);
    const badge = computeBadge(proximo);

    const [lightboxOpen, setLightboxOpen] = useState(false);

    const handleTap = () => onTap && onTap(iglesia);
    const handleFoto = (e) => {
      e.stopPropagation();
      if (iglesia.imagen_url) setLightboxOpen(true);
    };

    // Tap en el bloque del próximo culto abre el sheet de horario
    // (no la ficha completa). Fallback: si el padre no pasó
    // onShowHorario, se comporta como antes y abre la ficha.
    const handleHorario = (e) => {
      if (e && typeof e.stopPropagation === "function") e.stopPropagation();
      if (typeof onShowHorario === "function") onShowHorario(iglesia);
      else if (typeof onTap === "function") onTap(iglesia);
    };

    const handleAction = (tipo, e) => {
      e.stopPropagation();
      if (tipo === "wa") {
        const num = (iglesia.whatsapp || "").replace(/\D/g, "");
        if (num) window.open(`https://wa.me/${num}`, "_blank", "noopener");
      } else if (tipo === "loc") {
        if (onShowMap) onShowMap(iglesia);
      } else if (tipo === "horario") {
        handleHorario(e);
      }
    };

    return (
      <div
        role="button"
        tabIndex={0}
        onClick={handleTap}
        onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && handleTap()}
        className="overflow-hidden cursor-pointer active:bg-[#F9FAFB] dark:active:bg-gray-700 transition bg-white dark:bg-gray-800 border-b border-[#E5E7EB] dark:border-gray-700"
      >
        {/* Header: avatar + nombre + distancia/dirección */}
        <div className="flex items-center gap-3 px-4 pt-4 pb-3">
          {iglesia.imagen_url ? (
            <img
              src={iglesia.imagen_url}
              alt=""
              className="w-12 h-12 rounded-full object-cover bg-[#E5E5E5] flex-shrink-0"
              referrerPolicy="no-referrer"
            />
          ) : (
            <div className="w-12 h-12 rounded-full bg-[#E0EAFF] dark:bg-gray-700 flex items-center justify-center flex-shrink-0 text-xl">
              🏠
            </div>
          )}
          <div className="flex-1 min-w-0">
            <h3 className="font-black text-[#3C3C3C] dark:text-gray-100 text-base leading-tight truncate">
              {iglesia.nombre}
            </h3>
            <p className="text-xs font-semibold text-[#777] dark:text-gray-400 mt-0.5 truncate">
              {iglesia.distancia_km != null
                ? "📍 " + fmtDistancia(iglesia.distancia_km)
                : iglesia.direccion_texto
                  ? "📍 " + iglesia.direccion_texto
                  : "📍 Ubicación disponible"}
            </p>
          </div>
        </div>

        {/* Imagen grande — tap abre Lightbox (NO DetalleIglesia). */}
        {iglesia.imagen_url && (
          <button
            type="button"
            onClick={handleFoto}
            aria-label="Ver foto"
            className="aspect-video bg-[#E5E5E5] overflow-hidden w-full block p-0 border-0"
            style={{ cursor: "zoom-in" }}
          >
            <img
              src={iglesia.imagen_url}
              alt={iglesia.nombre}
              className="w-full h-full object-cover"
              referrerPolicy="no-referrer"
              loading="lazy"
              style={{ pointerEvents: "none" }}
            />
          </button>
        )}

        {/* Bloque próximo culto → abre sheet con horario semanal */}
        <button
          type="button"
          onClick={handleHorario}
          aria-label="Ver horarios de esta iglesia"
          className="w-full text-left px-4 py-3 block border-0 bg-transparent active:bg-[#F0F0F0] dark:active:bg-gray-700 transition"
        >
          <BadgeProximo badge={badge} />
        </button>

        {/* Fila de acciones */}
        <div className="border-t border-[#EEE] dark:border-gray-700 grid grid-cols-3 divide-x divide-[#EEE] dark:divide-gray-700">
          <button
            aria-label="Ver ubicación"
            onClick={(e) => handleAction("loc", e)}
            className="py-3 text-sm font-bold text-[#2563EB] active:bg-[#F0F0F0] dark:active:bg-gray-700 transition flex items-center justify-center gap-1.5"
          >
            <span aria-hidden>📍</span>
            <span>Ubicación</span>
          </button>
          <button
            aria-label="Abrir WhatsApp"
            onClick={(e) => handleAction("wa", e)}
            className="py-3 text-sm font-bold text-[#25D366] active:bg-[#F0F0F0] dark:active:bg-gray-700 transition flex items-center justify-center gap-1.5"
          >
            <span aria-hidden>💬</span>
            <span>WhatsApp</span>
          </button>
          <button
            aria-label="Ver horario"
            onClick={(e) => handleAction("horario", e)}
            className="py-3 text-sm font-bold text-[#3C3C3C] dark:text-gray-200 active:bg-[#F0F0F0] dark:active:bg-gray-700 transition flex items-center justify-center gap-1.5"
          >
            <span aria-hidden>📅</span>
            <span>Horario</span>
          </button>
        </div>

        {lightboxOpen && iglesia.imagen_url && window.LightboxFoto && (
          React.createElement(window.LightboxFoto, {
            src: iglesia.imagen_url,
            alt: iglesia.nombre || "",
            onClose: function () { setLightboxOpen(false); },
          })
        )}
      </div>
    );
  }

  window.IglesiaCard = IglesiaCard;
})();