import { useState, useEffect, useCallback } from 'react';
import UserFooter from '../components/UserFooter.jsx';

// ── useKeyboardOpen — true when software keyboard is visible ─────────────────
function useKeyboardOpen() {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const vv = window.visualViewport;
    if (!vv) return;
    const handler = () => setOpen(vv.height < window.innerHeight * 0.75);
    vv.addEventListener('resize', handler);
    return () => vv.removeEventListener('resize', handler);
  }, []);
  return open;
}
import { api } from '../utils/api.js';
import { useToast } from '../contexts/ToastContext.jsx';
import Avatar from '../components/Avatar.jsx';

// ── Shared sub-components (identical logic to modal versions) ─────────────────

function UserCheckList({ allUsers, selectedIds, onChange }) {
  const [search, setSearch] = useState('');
  const filtered = allUsers.filter(u => (u.display_name||u.name).toLowerCase().includes(search.toLowerCase()));
  return (
    <div>
      <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
        style={{ marginBottom:8 }} autoComplete="new-password" />
      <div style={{ maxHeight:220, overflowY:'auto', border:'1px solid var(--border)', borderRadius:'var(--radius)' }}>
        {filtered.map(u => (
          <label key={u.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
            <input type="checkbox" checked={selectedIds.has(u.id)} onChange={() => { const n=new Set(selectedIds); n.has(u.id)?n.delete(u.id):n.add(u.id); onChange(n); }}
              style={{ accentColor:'var(--primary)', width:15, height:15 }} />
            <Avatar user={u} size="sm" />
            <span className="flex-1 text-sm">{u.display_name||u.name}</span>
            <span className="text-xs" style={{ color:'var(--text-tertiary)' }}>{u.role}</span>
          </label>
        ))}
        {filtered.length === 0 && <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>No users found</div>}
      </div>
    </div>
  );
}

function GroupCheckList({ allGroups, selectedIds, onChange }) {
  return (
    <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', maxHeight:220, overflowY:'auto' }}>
      {allGroups.map(g => (
        <label key={g.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
          <input type="checkbox" checked={selectedIds.has(g.id)} onChange={() => { const n=new Set(selectedIds); n.has(g.id)?n.delete(g.id):n.add(g.id); onChange(n); }}
            style={{ accentColor:'var(--primary)', width:15, height:15 }} />
          <span className="flex-1 text-sm">{g.name}</span>
          <span className="text-xs" style={{ color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</span>
        </label>
      ))}
      {allGroups.length === 0 && <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>No user groups yet</div>}
    </div>
  );
}

// ── All Groups tab ────────────────────────────────────────────────────────────
function AllGroupsTab({ allUsers, onRefresh, isMobile = false }) {
  const toast = useToast();
  const [groups, setGroups] = useState([]);
  const [selected, setSelected] = useState(null);
  const [savedMembers, setSavedMembers] = useState(new Set());
  const [members, setMembers] = useState(new Set());
  const [editName, setEditName] = useState('');
  const [saving, setSaving] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [showDelete, setShowDelete] = useState(false);

  const load = useCallback(() =>
    api.getUserGroups().then(({ groups }) => setGroups(groups)).catch(() => {}), []);
  useEffect(() => { load(); }, [load]);

  const selectGroup = async (g) => {
    setShowDelete(false);
    const { members: mems } = await api.getUserGroup(g.id);
    const ids = new Set(mems.map(m => m.id));
    setSelected(g); setEditName(g.name); setMembers(ids); setSavedMembers(ids);
  };
  const clearSelection = () => { setSelected(null); setEditName(''); setMembers(new Set()); setSavedMembers(new Set()); setShowDelete(false); };

  const handleSave = async () => {
    if (!editName.trim()) return toast('Name required', 'error');
    setSaving(true);
    try {
      if (selected) {
        await api.updateUserGroup(selected.id, { name: editName.trim(), memberIds: [...members] });
        toast('Group updated', 'success');
        const { members: fresh } = await api.getUserGroup(selected.id);
        const freshIds = new Set(fresh.map(m => m.id));
        setSavedMembers(freshIds); setMembers(freshIds);
        setSelected(prev => ({ ...prev, name: editName.trim() }));
      } else {
        await api.createUserGroup({ name: editName.trim(), memberIds: [...members] });
        toast(`Group "${editName.trim()}" created`, 'success');
        clearSelection();
      }
      load(); onRefresh();
    } catch(e) { toast(e.message, 'error'); }
    finally { setSaving(false); }
  };

  const handleDelete = async () => {
    setDeleting(true);
    try { await api.deleteUserGroup(selected.id); toast('Group deleted', 'success'); clearSelection(); load(); onRefresh(); }
    catch(e) { toast(e.message, 'error'); }
    finally { setDeleting(false); }
  };

  const canDelete = selected && savedMembers.size === 0;
  const isCreating = !selected;

  return (
    <div style={{ display:'flex', flexDirection: isMobile ? 'column' : 'row', gap:0, height:'100%', minHeight:0, overflow: isMobile ? 'auto' : 'hidden' }}>
      {/* Sidebar list */}
      <div style={{ width: isMobile ? '100%' : 220, flexShrink:0, borderRight: isMobile ? 'none' : '1px solid var(--border)', borderBottom: isMobile ? '1px solid var(--border)' : 'none', overflowY: isMobile ? 'visible' : 'auto', padding:'12px 8px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>User Groups</div>
        <button onClick={clearSelection} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
          background:isCreating?'var(--primary-light)':'transparent', color:isCreating?'var(--primary)':'var(--text-secondary)',
          cursor:'pointer', fontWeight:isCreating?600:400, fontSize:13, marginBottom:4 }}>+ New Group</button>
        {groups.map(g => (
          <button key={g.id} onClick={() => selectGroup(g)} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
            background:selected?.id===g.id?'var(--primary-light)':'transparent', color:selected?.id===g.id?'var(--primary)':'var(--text-primary)',
            cursor:'pointer', fontWeight:selected?.id===g.id?600:400, fontSize:13, marginBottom:2 }}>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>UG</div>
              <div><div style={{ fontSize:13 }}>{g.name}</div><div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div></div>
            </div>
          </button>
        ))}
        {groups.length===0 && <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No groups yet</div>}
      </div>

      {/* Form */}
      <div style={{ flex:1, overflowY: isMobile ? 'visible' : 'auto', padding: isMobile ? '16px 12px' : '16px 24px' }}>
        <div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth: isMobile ? '100%' : 520 }}>
          <div>
            <label className="settings-section-label">Group Name</label>
            <input className="input" value={editName} onChange={e => setEditName(e.target.value)}
              placeholder="e.g. Coaches" style={{ marginTop:6 }} autoComplete="new-password" />
            {isCreating && <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>A matching Direct Message group will be created automatically.</p>}
          </div>
          <div>
            <label className="settings-section-label">Members</label>
            <div style={{ marginTop:6 }}><UserCheckList allUsers={allUsers} selectedIds={members} onChange={setMembers} /></div>
            <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>{members.size} selected</p>
          </div>
          <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
            <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving?'Saving…':isCreating?'Create Group':'Save Changes'}</button>
            {!isCreating && <button className="btn btn-secondary btn-sm" onClick={clearSelection}>Cancel</button>}
            {!isCreating && (
              <button className="btn btn-sm" style={{ marginLeft:'auto', background:canDelete?'var(--error)':'var(--surface-variant)', color:canDelete?'white':'var(--text-tertiary)', cursor:canDelete?'pointer':'not-allowed' }}
                onClick={canDelete ? () => setShowDelete(true) : undefined} disabled={!canDelete}
                title={canDelete?'Delete group':'Remove all members before deleting'}>Delete Group</button>
            )}
          </div>
          {showDelete && (
            <div style={{ background:'#fce8e6', border:'1px solid #f5c6c2', borderRadius:'var(--radius)', padding:'14px 16px' }}>
              <p style={{ fontSize:13, color:'var(--error)', marginBottom:12 }}>Delete <strong>{selected?.name}</strong>? This also deletes the associated direct message group.</p>
              <div style={{ display:'flex', gap:8 }}>
                <button className="btn btn-sm" style={{ background:'var(--error)', color:'white' }} onClick={handleDelete} disabled={deleting}>{deleting?'Deleting…':'Yes, Delete'}</button>
                <button className="btn btn-secondary btn-sm" onClick={() => setShowDelete(false)}>Cancel</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Direct Messages tab ───────────────────────────────────────────────────────
function DirectMessagesTab({ allUserGroups, onRefresh, refreshKey, isMobile = false }) {
  const toast = useToast();
  const [dms, setDms] = useState([]);
  const [selected, setSelected] = useState(null);
  const [savedGroupIds, setSavedGroupIds] = useState(new Set());
  const [groupIds, setGroupIds] = useState(new Set());
  const [dmName, setDmName] = useState('');
  const [saving, setSaving] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [showDelete, setShowDelete] = useState(false);

  const load = useCallback(() =>
    api.getMultiGroupDms().then(({ dms }) => setDms(dms||[])).catch(() => {}), []);
  useEffect(() => { load(); }, [load, refreshKey]);

  const clearSelection = () => { setSelected(null); setDmName(''); setGroupIds(new Set()); setSavedGroupIds(new Set()); setShowDelete(false); };
  const selectDm = (dm) => {
    setShowDelete(false); setSelected(dm); setDmName(dm.name);
    const ids = new Set(dm.memberGroupIds||[]); setGroupIds(ids); setSavedGroupIds(ids);
  };

  const handleSave = async () => {
    if (!dmName.trim()) return toast('Name required', 'error');
    if (!selected && groupIds.size < 2) return toast('Select at least two user groups', 'error');
    setSaving(true);
    try {
      if (selected) {
        await api.updateMultiGroupDm(selected.id, { name:dmName.trim(), userGroupIds:[...groupIds] });
        toast('Multi-group DM updated', 'success');
        const freshDms = await api.getMultiGroupDms();
        const fresh = freshDms.dms.find(d => d.id===selected.id);
        if (fresh) { const ids=new Set(fresh.memberGroupIds||[]); setSavedGroupIds(ids); setGroupIds(ids); setSelected(fresh); }
      } else {
        await api.createMultiGroupDm({ name:dmName.trim(), userGroupIds:[...groupIds] });
        toast(`"${dmName.trim()}" created`, 'success');
        clearSelection();
      }
      load(); onRefresh();
    } catch(e) { toast(e.message, 'error'); }
    finally { setSaving(false); }
  };

  const handleDelete = async () => {
    setDeleting(true);
    try { await api.deleteMultiGroupDm(selected.id); toast('Deleted', 'success'); clearSelection(); load(); onRefresh(); }
    catch(e) { toast(e.message, 'error'); }
    finally { setDeleting(false); }
  };

  const canDelete = selected && savedGroupIds.size === 0;
  const isCreating = !selected;

  return (
    <div style={{ display:'flex', flexDirection: isMobile ? 'column' : 'row', gap:0, height:'100%', minHeight:0, overflow: isMobile ? 'auto' : 'hidden' }}>
      <div style={{ width: isMobile ? '100%' : 220, flexShrink:0, borderRight: isMobile ? 'none' : '1px solid var(--border)', borderBottom: isMobile ? '1px solid var(--border)' : 'none', overflowY: isMobile ? 'visible' : 'auto', padding:'12px 8px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>Multi-Group DMs</div>
        <button onClick={clearSelection} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
          background:isCreating?'var(--primary-light)':'transparent', color:isCreating?'var(--primary)':'var(--text-secondary)',
          cursor:'pointer', fontWeight:isCreating?600:400, fontSize:13, marginBottom:4 }}>+ New Multi-Group DM</button>
        {dms.map(dm => (
          <button key={dm.id} onClick={() => selectDm(dm)} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
            background:selected?.id===dm.id?'var(--primary-light)':'transparent', color:selected?.id===dm.id?'var(--primary)':'var(--text-primary)',
            cursor:'pointer', fontWeight:selected?.id===dm.id?600:400, fontSize:13, marginBottom:2 }}>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>MG</div>
              <div><div style={{ fontSize:13 }}>{dm.name}</div><div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{dm.group_count} group{dm.group_count!==1?'s':''}</div></div>
            </div>
          </button>
        ))}
        {dms.length===0 && <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No multi-group DMs yet</div>}
      </div>
      <div style={{ flex:1, overflowY: isMobile ? 'visible' : 'auto', padding: isMobile ? '16px 12px' : '16px 24px' }}>
        <div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth: isMobile ? '100%' : 520 }}>
          <div>
            <label className="settings-section-label">DM Name</label>
            <input className="input" value={dmName} onChange={e => setDmName(e.target.value)} placeholder="e.g. Coaches + Players" style={{ marginTop:6 }} autoComplete="new-password" />
          </div>
          <div>
            <label className="settings-section-label">Member Groups</label>
            <p style={{ fontSize:12, color:'var(--text-tertiary)', margin:'4px 0 8px' }}>Select two or more user groups. All their members get access to this conversation.</p>
            <GroupCheckList allGroups={allUserGroups} selectedIds={groupIds} onChange={setGroupIds} />
            <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>{groupIds.size} group{groupIds.size!==1?'s':''} selected</p>
          </div>
          <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
            <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving?'Saving…':isCreating?'Create Multi-Group DM':'Save Changes'}</button>
            {!isCreating && <button className="btn btn-secondary btn-sm" onClick={clearSelection}>Cancel</button>}
            {!isCreating && (
              <button className="btn btn-sm" style={{ marginLeft:'auto', background:canDelete?'var(--error)':'var(--surface-variant)', color:canDelete?'white':'var(--text-tertiary)', cursor:canDelete?'pointer':'not-allowed' }}
                onClick={canDelete ? () => setShowDelete(true) : undefined} disabled={!canDelete}
                title={canDelete?'Delete':'Remove all member groups first'}>Delete</button>
            )}
          </div>
          {showDelete && (
            <div style={{ background:'#fce8e6', border:'1px solid #f5c6c2', borderRadius:'var(--radius)', padding:'14px 16px' }}>
              <p style={{ fontSize:13, color:'var(--error)', marginBottom:12 }}>Delete <strong>{selected?.name}</strong>? Also deletes the associated DM group.</p>
              <div style={{ display:'flex', gap:8 }}>
                <button className="btn btn-sm" style={{ background:'var(--error)', color:'white' }} onClick={handleDelete} disabled={deleting}>{deleting?'Deleting…':'Yes, Delete'}</button>
                <button className="btn btn-secondary btn-sm" onClick={() => setShowDelete(false)}>Cancel</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}


// ── U2U Restrictions tab ──────────────────────────────────────────────────────
function U2URestrictionsTab({ allUserGroups, isMobile = false }) {
  const toast = useToast();
  const [selectedGroup, setSelectedGroup] = useState(null);
  const [blockedIds, setBlockedIds] = useState(new Set());
  const [savedBlockedIds, setSavedBlockedIds] = useState(new Set());
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [search, setSearch] = useState('');
  // Map of groupId → number of restrictions (for showing dots in sidebar)
  const [restrictionCounts, setRestrictionCounts] = useState({});

  // Load restriction counts for all groups on mount and after saves
  const loadAllCounts = useCallback(async () => {
    const counts = {};
    for (const g of allUserGroups) {
      try {
        const { blockedGroupIds } = await api.getGroupRestrictions(g.id);
        counts[g.id] = blockedGroupIds.length;
      } catch { counts[g.id] = 0; }
    }
    setRestrictionCounts(counts);
  }, [allUserGroups]);

  useEffect(() => { if (allUserGroups.length > 0) loadAllCounts(); }, [allUserGroups]);

  const loadRestrictions = async (group) => {
    setLoading(true);
    try {
      const { blockedGroupIds } = await api.getGroupRestrictions(group.id);
      const blocked = new Set(blockedGroupIds.map(Number));
      setBlockedIds(blocked);
      setSavedBlockedIds(blocked);
    } catch (e) { toast(e.message, 'error'); }
    finally { setLoading(false); }
  };

  const selectGroup = (g) => {
    setSelectedGroup(g);
    setSearch('');
    loadRestrictions(g);
  };

  const clearSelection = () => {
    setSelectedGroup(null);
    setBlockedIds(new Set());
    setSavedBlockedIds(new Set());
  };

  const toggleGroup = (id) => {
    setBlockedIds(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await api.setGroupRestrictions(selectedGroup.id, [...blockedIds]);
      setSavedBlockedIds(new Set(blockedIds));
      toast('Restrictions saved', 'success');
      loadAllCounts();
    } catch (e) { toast(e.message, 'error'); }
    finally { setSaving(false); }
  };

  const isDirty = [...blockedIds].some(id => !savedBlockedIds.has(id)) ||
                  [...savedBlockedIds].some(id => !blockedIds.has(id));

  // Other groups (excluding the selected group itself)
  const otherGroups = allUserGroups.filter(g => g.id !== selectedGroup?.id);
  const filteredGroups = search.trim()
    ? otherGroups.filter(g => g.name.toLowerCase().includes(search.toLowerCase()))
    : otherGroups;

  return (
    <div style={{ display:'flex', flexDirection: isMobile ? 'column' : 'row', gap:0, height:'100%', minHeight:0, overflow: isMobile ? 'auto' : 'hidden' }}>
      {/* Group selector sidebar */}
      <div style={{ width: isMobile ? '100%' : 220, flexShrink:0, borderRight: isMobile ? 'none' : '1px solid var(--border)', borderBottom: isMobile ? '1px solid var(--border)' : 'none', overflowY: isMobile ? 'visible' : 'auto', padding:'12px 8px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>
          Select Group
        </div>
        {allUserGroups.map(g => {
          const hasRestrictions = g.id === selectedGroup?.id ? blockedIds.size > 0 : (restrictionCounts[g.id] || 0) > 0;
          return (
            <button key={g.id} onClick={() => selectGroup(g)} style={{
              display:'block', width:'100%', textAlign:'left', padding:'8px 10px',
              borderRadius:'var(--radius)', border:'none',
              background: selectedGroup?.id===g.id ? 'var(--primary-light)' : 'transparent',
              color: selectedGroup?.id===g.id ? 'var(--primary)' : 'var(--text-primary)',
              cursor:'pointer', fontWeight: selectedGroup?.id===g.id ? 600 : 400, fontSize:13, marginBottom:2,
            }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>UG</div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{g.name}</div>
                  <div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div>
                </div>
                {hasRestrictions && (
                  <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--error)', flexShrink:0 }} title="Has U2U restrictions" />
                )}
              </div>
            </button>
          );
        })}
        {allUserGroups.length === 0 && (
          <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No user groups yet</div>
        )}
      </div>

      {/* Restriction editor */}
      <div style={{ flex:1, overflowY: isMobile ? 'visible' : 'auto', padding: isMobile ? '16px 12px' : '16px 24px' }}>
        {!selectedGroup ? (
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
            height:'100%', color:'var(--text-tertiary)', gap:12, textAlign:'center' }}>
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.4">
              <circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
            </svg>
            <div>
              <div style={{ fontSize:15, fontWeight:600, marginBottom:4 }}>Select a group</div>
              <div style={{ fontSize:13 }}>Choose a user group from the left to configure its DM restrictions.</div>
            </div>
          </div>
        ) : (
          <div style={{ maxWidth: isMobile ? '100%' : 540 }}>
            {/* Header */}
            <div style={{ marginBottom:20 }}>
              <h3 style={{ fontSize:16, fontWeight:700, margin:'0 0 6px' }}>{selectedGroup.name}</h3>
              <p style={{ fontSize:13, color:'var(--text-secondary)', margin:0, lineHeight:1.5 }}>
                Members of <strong>{selectedGroup.name}</strong> can initiate 1-to-1 direct messages with members of all <strong>checked</strong> groups.
                Unchecking a group blocks initiation — existing conversations are preserved.
                Admins are always exempt. If a user is in multiple groups, the least restrictive rule applies.
              </p>
            </div>

            {/* Info banner if restrictions exist */}
            {blockedIds.size > 0 && (
              <div style={{ padding:'10px 14px', background:'#fef3c7', border:'1px solid #fbbf24',
                borderRadius:'var(--radius)', fontSize:13, color:'#92400e', marginBottom:16,
                display:'flex', alignItems:'center', gap:8 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                <span><strong>{blockedIds.size}</strong> group{blockedIds.size!==1?'s are':' is'} currently blocked from receiving DMs initiated by <strong>{selectedGroup.name}</strong> members.</span>
              </div>
            )}

            {/* Search + group list */}
            <div style={{ marginBottom:12 }}>
              <label className="settings-section-label" style={{ marginBottom:6, display:'block' }}>
                Allowed Groups <span style={{ fontWeight:400, color:'var(--text-tertiary)' }}>({otherGroups.length - blockedIds.size} of {otherGroups.length} allowed)</span>
              </label>
              <input className="input" placeholder="Search groups…" value={search}
                onChange={e => setSearch(e.target.value)} style={{ marginBottom:8 }}
                autoComplete="new-password" />
            </div>

            {loading ? (
              <div style={{ padding:32, textAlign:'center' }}><div className="spinner" /></div>
            ) : (
              <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', overflow:'hidden', marginBottom:16 }}>
                {filteredGroups.length === 0 ? (
                  <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>
                    {search ? 'No groups match your search.' : 'No other groups exist.'}
                  </div>
                ) : (
                  filteredGroups.map((g, i) => {
                    const isBlocked = blockedIds.has(g.id);
                    return (
                      <label key={g.id} style={{
                        display:'flex', alignItems:'center', gap:12, padding:'10px 14px',
                        borderBottom: i < filteredGroups.length-1 ? '1px solid var(--border)' : 'none',
                        cursor:'pointer', background: isBlocked ? '#fef9f0' : 'transparent',
                        transition:'background 0.1s',
                      }}>
                        <input type="checkbox" checked={!isBlocked}
                          onChange={() => toggleGroup(g.id)}
                          style={{ accentColor:'var(--primary)', width:16, height:16, flexShrink:0 }} />
                        <div style={{ flex:1, minWidth:0 }}>
                          <div style={{ fontSize:14, fontWeight:500, color: isBlocked ? 'var(--text-tertiary)' : 'var(--text-primary)' }}>
                            {g.name}
                            {isBlocked && <span style={{ marginLeft:8, fontSize:11, color:'var(--warning)', fontWeight:600 }}>BLOCKED</span>}
                          </div>
                          <div style={{ fontSize:12, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div>
                        </div>
                      </label>
                    );
                  })
                )}
              </div>
            )}

            {/* Quick actions */}
            <div style={{ display:'flex', gap:8, marginBottom:16, flexWrap:'wrap' }}>
              <button className="btn btn-secondary btn-sm"
                onClick={() => setBlockedIds(new Set())}>
                Allow All
              </button>
              <button className="btn btn-secondary btn-sm"
                onClick={() => setBlockedIds(new Set(otherGroups.map(g => g.id)))}>
                Block All
              </button>
            </div>

            {/* Save */}
            <div style={{ display:'flex', gap:8, alignItems:'center' }}>
              <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving || !isDirty}>
                {saving ? 'Saving…' : 'Save Restrictions'}
              </button>
              {isDirty && (
                <button className="btn btn-secondary btn-sm"
                  onClick={() => setBlockedIds(new Set(savedBlockedIds))}>
                  Discard Changes
                </button>
              )}
              {!isDirty && !saving && (
                <span style={{ fontSize:12, color:'var(--text-tertiary)' }}>No unsaved changes</span>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────
const SIDEBAR_W = 260;

export default function GroupManagerPage({ isMobile = false, onProfile, onHelp, onAbout }) {
  const [tab, setTab] = useState('all');
  const [allUsers, setAllUsers] = useState([]);
  const [allUserGroups, setAllUserGroups] = useState([]);
  const [refreshKey, setRefreshKey] = useState(0);
  const keyboardOpen = useKeyboardOpen();
  const onRefresh = () => setRefreshKey(k => k+1);

  useEffect(() => {
    api.searchUsers('').then(({ users }) => setAllUsers(users.filter(u => u.status==='active'))).catch(() => {});
    api.getUserGroups().then(({ groups }) => setAllUserGroups(groups)).catch(() => {});
  }, [refreshKey]);

  // Nav item helper — matches Schedule page style
  const navItem = (label, key) => (
    <button key={key} onClick={() => setTab(key)}
      style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px',
        borderRadius:'var(--radius)', border:'none',
        background: tab===key ? 'var(--primary-light)' : 'transparent',
        color: tab===key ? 'var(--primary)' : 'var(--text-primary)',
        cursor:'pointer', fontWeight: tab===key ? 600 : 400, fontSize:14, marginBottom:2 }}>
      {label}
    </button>
  );

  return (
    <div style={{ display:'flex', flex:1, overflow:'hidden', minHeight:0 }}>

      {/* ── Left panel (desktop only) ── */}
      {!isMobile && (
        <div style={{ width:SIDEBAR_W, flexShrink:0, borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', background:'var(--surface)', overflow:'hidden' }}>
          <div style={{ padding:'16px 16px 0' }}>
            {/* Title — matches Schedule page */}
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
              <span style={{ fontSize:16, fontWeight:700, color:'var(--text-primary)' }}>Group Manager</span>
            </div>
            {/* Tab navigation */}
            <div className="section-label" style={{ marginBottom:6 }}>View</div>
            {navItem('User Groups', 'all')}
            {navItem('Multi-Group DMs', 'dm')}
            {navItem('U2U Restrictions', 'u2u')}
          </div>
          <div style={{ flex:1 }} />
          <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
        </div>
      )}

      {/* ── Right panel ── */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', minWidth:0, background:'var(--background)' }}>

        {/* Mobile tab bar — only shown on mobile */}
        {isMobile && (
          <div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 12px', display:'flex', gap:6, height:48, alignItems:'center', flexShrink:0 }}>
            <span style={{ fontWeight:700, fontSize:14, marginRight:4, color:'var(--text-primary)' }}>Groups</span>
            <button className={`btn btn-sm ${tab==='all'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('all')}>Groups</button>
            <button className={`btn btn-sm ${tab==='dm'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('dm')}>Multi-DMs</button>
            <button className={`btn btn-sm ${tab==='u2u'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('u2u')}>U2U</button>
          </div>
        )}

        {/* Content */}
        <div style={{ flex:1, display:'flex', overflow: isMobile ? 'auto' : 'hidden', paddingBottom: isMobile ? 70 : 0 }}>
          {tab==='all' && <AllGroupsTab allUsers={allUsers} onRefresh={onRefresh} isMobile={isMobile} />}
          {tab==='dm'  && <DirectMessagesTab allUserGroups={allUserGroups} onRefresh={onRefresh} refreshKey={refreshKey} isMobile={isMobile} />}
          {tab==='u2u' && <U2URestrictionsTab allUserGroups={allUserGroups} isMobile={isMobile} />}
        </div>

        {/* Mobile footer — hidden when keyboard is open */}
        {isMobile && !keyboardOpen && (
          <div style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:20, background:'var(--surface)', borderTop:'1px solid var(--border)' }}>
            <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
          </div>
        )}
      </div>
    </div>
  );
}