/* Wa by Elivate — Groups + group actions */

function GroupsScreen({ go }) {
  const [groups, setGroups] = React.useState([]);
  const [q, setQ] = React.useState("");
  const [sel, setSel] = React.useState(null);
  const [error, setError] = React.useState("");
  const [loading, setLoading] = React.useState(true);

  const loadGroups = async () => {
    setLoading(true);
    setError("");
    try {
      const liveGroups = await window.WaApi.groups();
      setGroups(liveGroups.map((group) => ({ ...group, color: colorFor(group.id) })));
    } catch (err) {
      setGroups([]);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => { loadGroups(); }, []);

  const toggleLock = async (id) => {
    const group = groups.find((item) => item.id === id);
    if (!group) return;
    await window.WaApi.groupAction?.(id, { action: group.locked ? "unlock" : "lock" });
    await loadGroups();
  };
  const shown = groups.filter((g) => g.name.toLowerCase().includes(q.toLowerCase()));
  const detail = groups.find((g) => g.id === sel);

  const initials = (n) => n.split(" ").slice(0, 2).map((w) => w[0]).join("");

  return (
    <div className="page wide route-anim">
      <div className="list-toolbar">
        <div className="muted" style={{ fontSize: 13 }}>{groups.length} groups · {groups.filter(g => g.isAdmin).length} you administer</div>
        <div className="topbar-spacer"></div>
        <div className="search"><Icons.search /><input placeholder="Search groups…" value={q} onChange={(e) => setQ(e.target.value)} /></div>
        <button className="btn ghost" onClick={loadGroups}><Icons.refresh size={16} /> Sync</button>
      </div>

      <div className="group-grid">
        {shown.map((g) => (
          <div className="card group-card" key={g.id}>
            <div className="gc-top">
              <div className="gc-av" style={{ background: g.color + "22", color: g.color }}>{initials(g.name)}</div>
              <div className="gc-meta">
                <div className="gc-name">{g.name}</div>
                <div className="gc-sub mono">{g.id}</div>
              </div>
            </div>
            <div className="gc-stats">
              <span className="gc-stat"><Icons.users size={14} /> {g.memberCount}</span>
              {g.isAdmin ? <span className="tag brand" style={{ height: 22 }}><Icons.shield size={12} /> Admin</span> : <span className="tag" style={{ height: 22 }}>Member</span>}
              {g.locked && <span className="tag amber" style={{ height: 22 }}><Icons.lock size={12} /> Locked</span>}
            </div>
            <div className="gc-actions">
              <button className="btn sm" onClick={() => go("send")}><Icons.send size={14} /> Send</button>
              {g.isAdmin && <button className={"btn sm" + (g.locked ? " " : "")} onClick={() => toggleLock(g.id)}>{g.locked ? <><Icons.unlock size={14} /> Unlock</> : <><Icons.lock size={14} /> Lock</>}</button>}
              <button className="btn sm ghost" style={{ marginLeft: "auto" }} onClick={() => setSel(g.id)}>Manage</button>
            </div>
          </div>
        ))}
      </div>

      {!loading && error && <div className="empty-state"><Icons.link size={26} /><p>{error}</p><p className="muted" style={{ marginTop: 6 }}>Scan the QR on Connection, then sync again to show live groups.</p></div>}
      {!loading && !error && shown.length === 0 && <div className="empty-state"><Icons.users size={26} /><p>No live groups found.</p></div>}

      {detail && <GroupDrawer group={detail} onClose={() => setSel(null)} toggleLock={toggleLock} initials={initials} go={go} />}
    </div>
  );
}

function GroupDrawer({ group, onClose, toggleLock, initials, go }) {
  const [members, setMembers] = React.useState([]);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    window.WaApi.group(group.id)
      .then((detail) => setMembers(detail.participants || []))
      .catch((err) => setError(err.message));
  }, [group.id]);

  return (
    <div className="drawer-scrim" onClick={onClose}>
      <aside className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head">
          <div className="gc-av lg" style={{ background: group.color + "22", color: group.color }}>{initials(group.name)}</div>
          <div style={{ flex: 1 }}>
            <div className="gc-name" style={{ fontSize: 16 }}>{group.name}</div>
            <div className="gc-sub mono">{group.id}</div>
          </div>
          <button className="btn icon ghost" onClick={onClose}><Icons.x size={16} /></button>
        </div>

        <div className="drawer-stats">
          <div><b>{group.memberCount}</b><span>members</span></div>
          <div><b>{group.isAdmin ? "Yes" : "No"}</b><span>you're admin</span></div>
          <div><b>{group.locked ? "Locked" : "Open"}</b><span>posting</span></div>
        </div>

        <div className="drawer-section">
          <div className="ds-label">Admin actions</div>
          <div className="action-grid">
            <button className="action-tile" onClick={() => go("send")}><Icons.send size={16} /> Send message</button>
            <button className="action-tile" onClick={() => toggleLock(group.id)}>{group.locked ? <><Icons.unlock size={16} /> Unlock group</> : <><Icons.lock size={16} /> Lock group</>}</button>
            <button className="action-tile"><Icons.edit size={16} /> Rename</button>
            <button className="action-tile danger"><Icons.userMinus size={16} /> Remove member</button>
          </div>
        </div>

        <div className="drawer-section">
          <div className="ds-label">Members <span className="muted">· live metadata</span></div>
          <div className="member-list">
            {members.map((m, i) => (
              <div className="member-row" key={i}>
                <div className="m-av">{String(m.id).slice(0, 2).toUpperCase()}</div>
                <div className="m-meta"><div className="m-name mono">{m.id}</div><div className="m-phone">{m.isAdmin ? "Admin" : "Member"}</div></div>
                {m.isAdmin ? <span className="tag brand" style={{ height: 22 }}>Admin</span> : <button className="btn icon sm ghost"><Icons.userMinus size={14} /></button>}
              </div>
            ))}
            {error && <p className="muted">{error}</p>}
            {!error && members.length === 0 && <p className="muted">No member metadata loaded yet.</p>}
          </div>
        </div>
      </aside>
    </div>
  );
}

function colorFor(value) {
  const colors = ["#FF7F50", "#5B9DFF", "#A98BFF", "#34D27B", "#F5B544", "#FF5C5C"];
  let hash = 0;
  for (const char of String(value)) hash = (hash + char.charCodeAt(0)) % colors.length;
  return colors[hash];
}

window.GroupsScreen = GroupsScreen;