/* Skeletons → window.
   Cartas grises parpadeando estilo Instagram/Facebook que se muestran
   mientras los datos cargan desde RTDB. Se reemplazan por las cards
   reales en cuanto llegan. Usa la clase global `.skl` (shimmer) y
   `.skl-circle` definidas en index.html. */
(function () {
  // Skeleton de IglesiaCard: avatar + nombre + imagen + badge + 3 acciones.
  function SkeletonIglesiaCard() {
    return (
      <div className="bg-white dark:bg-gray-800 border-b border-[#E5E7EB] dark:border-gray-700">
        <div className="flex items-center gap-3 px-4 pt-4 pb-3">
          <div className="skl skl-circle" style={{ width: 48, height: 48, flexShrink: 0 }} />
          <div className="flex-1 min-w-0">
            <div className="skl" style={{ width: "60%", height: 14, marginBottom: 8 }} />
            <div className="skl" style={{ width: "40%", height: 10 }} />
          </div>
        </div>
        <div className="skl" style={{ width: "100%", aspectRatio: "16 / 9", borderRadius: 0 }} />
        <div className="px-4 py-3">
          <div className="skl" style={{ width: 80, height: 18, borderRadius: 999, marginBottom: 8 }} />
          <div className="skl" style={{ width: "55%", height: 12 }} />
        </div>
        <div className="border-t border-[#EEE] dark:border-gray-700 grid grid-cols-3 divide-x divide-[#EEE] dark:divide-gray-700">
          {[0, 1, 2].map(function (i) {
            return (
              <div key={i} className="py-3 flex items-center justify-center">
                <div className="skl" style={{ width: 70, height: 12 }} />
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  // Skeleton de ActividadCard: header + título + flyer alto + RSVP row.
  function SkeletonActividadCard() {
    return (
      <div className="bg-white dark:bg-gray-800 border-b border-[#E5E7EB] dark:border-gray-700">
        <div className="flex items-center gap-3 px-4 pt-4 pb-3">
          <div className="skl skl-circle" style={{ width: 40, height: 40, flexShrink: 0 }} />
          <div className="flex-1 min-w-0">
            <div className="skl" style={{ width: "55%", height: 12, marginBottom: 6 }} />
            <div className="skl" style={{ width: "30%", height: 10 }} />
          </div>
        </div>
        <div className="px-4 pb-3">
          <div className="skl" style={{ width: 70, height: 16, borderRadius: 999, marginBottom: 8 }} />
          <div className="skl" style={{ width: "85%", height: 16 }} />
        </div>
        <div className="skl" style={{ width: "100%", aspectRatio: "3 / 4", borderRadius: 0 }} />
        <div className="px-4 py-3 flex items-center gap-2">
          <div className="skl" style={{ width: 90, height: 30, borderRadius: 999 }} />
          <div className="skl" style={{ width: 90, height: 30, borderRadius: 999 }} />
          <div className="skl" style={{ width: 60, height: 30, borderRadius: 999 }} />
        </div>
      </div>
    );
  }

  // Skeleton de PublicacionRow (Mis publicaciones en Perfil).
  function SkeletonPublicacionRow() {
    return (
      <div className="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 border-b border-[#EEE] dark:border-gray-700">
        <div className="skl" style={{ width: 44, height: 58, borderRadius: 8, flexShrink: 0 }} />
        <div className="flex-1 min-w-0">
          <div className="skl" style={{ width: "70%", height: 12, marginBottom: 6 }} />
          <div className="skl" style={{ width: "50%", height: 10, marginBottom: 4 }} />
          <div className="skl" style={{ width: "35%", height: 10 }} />
        </div>
      </div>
    );
  }

  // Feed combinado para Home: 2 actividades + 2 iglesias intercaladas.
  function SkeletonHomeFeed() {
    return (
      <div aria-hidden="true">
        <SkeletonActividadCard />
        <SkeletonIglesiaCard />
        <SkeletonActividadCard />
        <SkeletonIglesiaCard />
      </div>
    );
  }

  // Pantalla completa de arranque: header simulado + feed skeleton.
  // Se usa mientras la app inicializa (auth/perfil resolviendo) en
  // lugar del spinner anterior.
  function SkeletonAppBoot() {
    return (
      <div className="fade-in" aria-busy="true" aria-label="Cargando">
        {/* Header simulado */}
        <div className="flex items-center justify-between px-5 py-4 bg-white dark:bg-gray-900 border-b border-[#EEE] dark:border-gray-800">
          <div className="flex items-center gap-2 min-w-0">
            <div className="skl skl-circle" style={{ width: 34, height: 34 }} />
            <div className="skl" style={{ width: 90, height: 16 }} />
          </div>
          <div className="flex items-center gap-2">
            <div className="skl skl-circle" style={{ width: 28, height: 28 }} />
            <div className="skl skl-circle" style={{ width: 28, height: 28 }} />
            <div className="skl skl-circle" style={{ width: 36, height: 36 }} />
          </div>
        </div>
        <SkeletonHomeFeed />
      </div>
    );
  }

  Object.assign(window, {
    SkeletonIglesiaCard,
    SkeletonActividadCard,
    SkeletonPublicacionRow,
    SkeletonHomeFeed,
    SkeletonAppBoot,
  });
})();