/* hub-members.jsx — danh bạ thành viên (Hub) */
(function () {
  const ini = (s) => ((s || "").trim().split(/\s+/).slice(-1)[0][0] || "?").toUpperCase();

  function MemberDirectory({ members }) {
    const onlineIds = (typeof window.useOnlineIds === "function") ? window.useOnlineIds() : new Set();
    const list = (members || []).map(m => ({ ...m, online: onlineIds.has(m.id) }));
    return (
      <div className="mem-wrap">
        <div className="mem-head">Thành viên · {list.length}</div>
        <div className="mem-grid">
          {list.map((m) => (
            <div key={m.id} className="mem-card">
              <div className="mem-av" style={m.avatar_url ? { overflow: "hidden", background: "#fff" } : undefined}>{m.avatar_url ? <img src={m.avatar_url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> : ini(m.name)}<span className={"mem-dot " + (m.online ? "on" : "off")} /></div>
              <div className="mem-name">{m.name}</div>
              <div className="mem-sub">{m.role === "admin" ? "Quản trị viên" : "Người dùng"}</div>
              {/* nút "Nhắn" tạm gỡ — tính năng nhắn tin sẽ làm ở pha sau (F-messaging) */}
            </div>
          ))}
          {!list.length && <div className="mem-empty">Chưa có thành viên</div>}
        </div>
      </div>
    );
  }

  window.MemberDirectory = MemberDirectory;
})();