/* Header + DetailHeader → window. */
(function () {
  const { useState, useEffect, useRef, useMemo } = React;
  const { useAuth, MotoLogo, BackIcon, AccionesMenu, Buscador } = window;

  const PlusIcon = () => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" />
    </svg>
  );

  const SearchIcon = ({ size = 22, stroke = 2.4 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth={stroke} />
      <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" />
    </svg>
  );

  function Header({ title = "CultoRD", onAvatar, onSelect, iglesias, iglesiasEnRango, onCrearEvento }) {
    const { user } = useAuth();
    const [accionesAbierto, setAccionesAbierto] = useState(false);
    const [buscarAbierto, setBuscarAbierto] = useState(false);
    const [query, setQuery] = useState("");
    const inputRef = useRef(null);

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

    // Iglesias donde el usuario puede crear actividades (evento).
    // - Pastor: las de /users/{uid}/perfil/iglesias_admin.
    // - Super: todas las iglesias activas.
    // Cuando resulte vacío, AccionesMenu muestra "Crear evento" como Pronto.
    const iglesiasCrearEvento = useMemo(function () {
      const base = Array.isArray(iglesias) ? iglesias : [];
      let esSuper = false;
      try {
        esSuper = typeof window.esSuperadmin === "function" && user
          ? window.esSuperadmin(user)
          : false;
      } catch (_) { esSuper = false; }
      if (esSuper) {
        return base.map(function (ig) {
          return { id: ig.id, nombre: ig.nombre || "", imagen_url: ig.imagen_url || "" };
        });
      }
      const perfil = typeof window.miPerfil === "function" ? window.miPerfil() : null;
      const adminMap = (perfil && perfil.iglesias_admin) || {};
      const adminSet = {};
      Object.keys(adminMap).forEach(function (k) {
        if (adminMap[k] === true) adminSet[k] = true;
      });
      return base
        .filter(function (ig) { return ig && adminSet[ig.id]; })
        .map(function (ig) {
          return { id: ig.id, nombre: ig.nombre || "", imagen_url: ig.imagen_url || "" };
        });
    }, [iglesias, user && user.uid]);

    const handleAccion = (id, iglesia) => {
      if (id === "evento" && iglesia && typeof onCrearEvento === "function") {
        onCrearEvento(iglesia);
      }
      // "anuncio" y otros IDs siguen como Pronto.
    };

    const openSearch = () => setBuscarAbierto(true);
    const closeSearch = () => {
      setBuscarAbierto(false);
      setQuery("");
    };

    useEffect(() => {
      if (buscarAbierto) {
        const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 40);
        return () => clearTimeout(t);
      }
    }, [buscarAbierto]);

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

    const handlePick = (ig) => {
      closeSearch();
      if (onSelect) onSelect(ig);
    };

    if (buscarAbierto) {
      return (
        <>
          <div className="flex items-center gap-2 px-3 py-3 bg-white dark:bg-gray-900 border-b border-[#EEE] dark:border-gray-800">
            <button
              onClick={closeSearch}
              aria-label="Cerrar búsqueda"
              className="w-10 h-10 rounded-full flex items-center justify-center active:bg-[#F0F0F0] dark:active:bg-gray-800 transition text-[#3C3C3C] dark:text-gray-100 shrink-0"
            >
              <BackIcon />
            </button>
            <div className="flex-1 flex items-center gap-2 px-3 h-10 rounded-full bg-[#F3F4F6] dark:bg-gray-800">
              <span className="text-[#9CA3AF] dark:text-gray-500 shrink-0">
                <SearchIcon size={18} stroke={2.2} />
              </span>
              <input
                ref={inputRef}
                type="search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={
                  Array.isArray(iglesias) && iglesias.length > 0
                    ? "Buscar · +" + iglesias.length + " iglesias registradas"
                    : "Buscar iglesia, dirección..."
                }
                className="flex-1 bg-transparent outline-none text-sm font-semibold text-[#3C3C3C] dark:text-gray-100 placeholder:text-[#9CA3AF] min-w-0"
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck={false}
              />
              {query && (
                <button
                  type="button"
                  onClick={() => { setQuery(""); inputRef.current && inputRef.current.focus(); }}
                  aria-label="Limpiar"
                  className="w-6 h-6 rounded-full bg-[#D1D5DB] dark:bg-gray-600 text-white flex items-center justify-center text-xs shrink-0"
                >
                  ✕
                </button>
              )}
            </div>
          </div>
          {Buscador && (
            <Buscador
              abierto={true}
              query={query}
              iglesias={iglesias}
              iglesiasEnRango={iglesiasEnRango}
              onSelect={handlePick}
              onClose={closeSearch}
              onSetQuery={(q) => { setQuery(q); if (inputRef.current) inputRef.current.focus(); }}
            />
          )}
        </>
      );
    }

    return (
      <>
        <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">
            <MotoLogo size={34} />
            <span className="font-black text-[#3C3C3C] dark:text-gray-100 text-lg truncate">{title}</span>
          </div>
          <div className="flex items-center gap-1">
            <button
              onClick={openSearch}
              aria-label="Buscar"
              className="w-10 h-10 flex items-center justify-center text-[#2563EB] active:opacity-60 transition"
            >
              <SearchIcon size={22} stroke={2.4} />
            </button>
            <button
              onClick={() => setAccionesAbierto(true)}
              aria-label="Crear"
              className="w-10 h-10 flex items-center justify-center text-[#2563EB] active:opacity-60 transition"
            >
              <PlusIcon />
            </button>
            <button
              onClick={onAvatar}
              aria-label="Perfil"
              className="w-10 h-10 rounded-full bg-[#E5E5E5] overflow-hidden flex items-center justify-center font-bold text-[#777] ml-1"
            >
              {photo
                ? <img src={photo} alt="" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
                : initial}
            </button>
          </div>
        </div>

        {AccionesMenu && (
          <AccionesMenu
            abierto={accionesAbierto}
            onClose={() => setAccionesAbierto(false)}
            onSeleccion={handleAccion}
            iglesiasCrearEvento={iglesiasCrearEvento}
          />
        )}
      </>
    );
  }

  function DetailHeader({ title, onBack }) {
    return (
      <div className="sticky top-0 z-30 flex items-center gap-2 px-3 py-3 bg-white dark:bg-gray-900 border-b border-[#EEE] dark:border-gray-800">
        <button
          onClick={onBack}
          aria-label="Volver"
          className="w-10 h-10 rounded-full flex items-center justify-center active:bg-[#F0F0F0] dark:active:bg-gray-800 transition"
        >
          <BackIcon />
        </button>
        <h2 className="flex-1 min-w-0 font-black text-[#3C3C3C] dark:text-gray-100 text-lg truncate">
          {title}
        </h2>
      </div>
    );
  }

  Object.assign(window, { Header, DetailHeader });
})();