/* ============================================================
   HUB · MEMBERSHIPS — waitlist of people interested in joining.
   Captured from the public Membership page (PPDB.memberships).
   Filter, contact by WhatsApp/email, mark contacted/converted.
   ============================================================ */
function useMemberships() {
  const [list, setList] = useState(() => window.PPDB.memberships.all());
  useEffect(() => {
    const f = () => setList(window.PPDB.memberships.all());
    window.addEventListener("pp:memberships", f);
    return () => window.removeEventListener("pp:memberships", f);
  }, []);
  return list;
}

function MembershipsModule() {
  const t = useT(); const { lang } = useLang();
  const list = useMemberships();
  const [q, setQ] = useState("");
  const [filter, setFilter] = useState("all");

  const ST = {
    new: { l: t("New", "Nuevo"), c: "#FF6B5B" },
    contacted: { l: t("Contacted", "Contactado"), c: "#CBA35C" },
    joined: { l: t("Joined", "Inscrito"), c: "#5FBFA8" },
  };
  const TIER_C = { member: "#CBA35C", vip: "#FF6B5B", black: "#E9E4DA" };
  const counts = { all: list.length, new: list.filter((m) => (m.status || "new") === "new").length, contacted: list.filter((m) => m.status === "contacted").length, joined: list.filter((m) => m.status === "joined").length };
  const filtered = list.filter((m) =>
    (filter === "all" || (m.status || "new") === filter) &&
    (!q || JSON.stringify(m).toLowerCase().includes(q.toLowerCase()))
  );
  const fmt = (iso) => { try { return new Date(iso).toLocaleDateString(lang === "es" ? "es" : "en", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }); } catch (e) { return ""; } };

  return (
    <div>
      <div className="rounded-2xl border border-white/10 bg-card p-4 mb-5 flex items-center gap-3"><div className="serif text-3xl text-coral">{list.length}</div><div className="label text-white/45 text-[10px]">{t("On the waitlist", "En la lista de espera")}</div></div>

      <div className="flex flex-wrap items-center gap-2 mb-5">
        {[["all", t("All", "Todos")], ["new", ST.new.l], ["contacted", ST.contacted.l], ["joined", ST.joined.l]].map(([id, lbl]) => (
          <button key={id} onClick={() => setFilter(id)} className={"px-4 py-2 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all " + (filter === id ? "bg-coral text-white" : "bg-card border border-white/12 text-white/60 hover:text-white")}>{lbl} <span className="opacity-60">· {counts[id]}</span></button>
        ))}
        <div className="relative ml-auto">
          <Icon name="search" className="w-4 h-4 text-white/35 absolute left-3 top-1/2 -translate-y-1/2" />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t("Search…", "Buscar…")} className="bg-ink border border-white/12 rounded-full pl-9 pr-4 py-2 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35 w-40 sm:w-52" />
        </div>
      </div>

      {filtered.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-white/15 p-10 text-center text-white/45 text-sm">
          <Icon name="crown" className="w-8 h-8 mx-auto mb-3 text-white/25" />
          {list.length === 0
            ? t("No membership sign-ups yet. Waitlist requests from the website appear here automatically.", "Aún no hay registros de membresía. Las solicitudes de la lista de espera del sitio aparecen aquí automáticamente.")
            : t("No sign-ups match your filter.", "Ningún registro coincide con el filtro.")}
        </div>
      ) : (
        <div className="space-y-2">
          {filtered.map((m) => {
            const st = ST[m.status || "new"]; const phone = String(m.phone || "").replace(/[^\d]/g, "");
            return (
              <div key={m.id} className="rounded-xl border border-white/10 bg-card p-3.5">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 bg-coral/12 border border-coral/30 text-coral"><Icon name="crown" className="w-5 h-5" /></div>
                  <div className="flex-1 min-w-0">
                    <div className="font-bold text-sm truncate">{m.name}</div>
                    <div className="text-white/45 text-[11px] truncate">{fmt(m.at)} · {m.email}{m.note ? " · " + m.note : ""}</div>
                  </div>
                  <Chip color={st.c}>{st.l}</Chip>
                </div>
                <div className="flex flex-wrap gap-1.5 mt-2.5 pl-13" style={{ paddingLeft: 52 }}>
                  {phone && <a href={"https://wa.me/" + phone.replace(/^\+/, "")} target="_blank" rel="noopener" className="px-3 py-1.5 rounded-full bg-[#25D366] text-black text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5"><Icon name="message-circle" className="w-3 h-3" />WhatsApp</a>}
                  {phone && <a href={"tel:+" + phone} className="px-3 py-1.5 rounded-full border border-white/15 text-white/70 text-[10px] font-bold uppercase tracking-wider hover:bg-white/5 inline-flex items-center gap-1.5"><Icon name="phone" className="w-3 h-3" />{t("Call", "Llamar")}</a>}
                  {(m.status || "new") !== "contacted" && <button onClick={() => window.PPDB.memberships.update(m.id, { status: "contacted" })} className="px-3 py-1.5 rounded-full border border-white/15 text-white/70 text-[10px] font-bold uppercase tracking-wider hover:bg-white/5">{t("Mark contacted", "Marcar contactado")}</button>}
                  {(m.status || "new") !== "joined" && <button onClick={() => window.PPDB.memberships.update(m.id, { status: "joined" })} className="px-3 py-1.5 rounded-full border border-white/15 text-white/70 text-[10px] font-bold uppercase tracking-wider hover:bg-white/5">{t("Mark joined", "Marcar inscrito")}</button>}
                  <button onClick={() => { if (confirm(t("Delete this sign-up?", "¿Borrar este registro?"))) window.PPDB.memberships.remove(m.id); }} className="px-3 py-1.5 rounded-full border border-white/15 text-white/45 text-[10px] font-bold uppercase tracking-wider hover:text-coral hover:border-coral/40 ml-auto"><Icon name="trash-2" className="w-3 h-3" /></button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MembershipsModule, useMemberships });