function UsersPage() {
  const [users, setUsers] = useState([]);
  const [services, setServices] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [editUser, setEditUser] = useState(null);
  const [resetUser, setResetUser] = useState(null);
  const [expandedCreds, setExpandedCreds] = useState(null);
  const [error, setError] = useState('');

  const load = useCallback(() => {
    setLoading(true);
    Promise.all([api('/api/admin/users'), api('/api/services')])
      .then(([u, s]) => { setUsers(u); setServices(s); setError(''); })
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => { load(); }, [load]);

  const handleDelete = async (id, username) => {
    if (!confirm(`Delete user "${username}"? This cannot be undone.`)) return;
    try {
      await api(`/api/admin/users/${id}`, { method: 'DELETE' });
      load();
    } catch (err) { setError(err.message); }
  };

  const handleRegenInvite = async (userId) => {
    try {
      await api(`/api/admin/users/${userId}/invite-code`, {
        method: 'PUT', body: JSON.stringify({}),
      });
      load();
    } catch (err) { setError(err.message); }
  };

  const handleToggleService = async (userId, serviceKey, currentlyEnabled) => {
    const u = users.find(x => x.id === userId);
    if (!u) return;
    const newEnabled = currentlyEnabled
      ? u.enabledServices.filter(k => k !== serviceKey)
      : [...u.enabledServices, serviceKey];
    try {
      await api(`/api/admin/users/${userId}/services`, {
        method: 'PUT', body: JSON.stringify({ enabledServices: newEnabled }),
      });
      load();
    } catch (err) { setError(err.message); }
  };

  const activeServices = services.filter(s => s.status === 'active');

  return (
    <>
      <h2>Users</h2>
      <div className="page-sub">Manage user accounts and service access</div>

      <div className="wh-toolbar">
        <h3>{users.length} user{users.length !== 1 ? 's' : ''}</h3>
        <button className="btn-sm" onClick={() => setShowCreate(!showCreate)}>
          {showCreate ? 'Cancel' : '+ Create User'}
        </button>
      </div>

      {error && <div className="error-banner">{error}</div>}

      {showCreate && <CreateUserForm services={activeServices} onCreated={() => { setShowCreate(false); load(); }} />}
      {editUser && <EditUserModal user={editUser} services={activeServices} onSaved={load} onClose={() => setEditUser(null)} />}
      {resetUser && <ResetPasswordModal user={resetUser} onClose={() => setResetUser(null)} />}

      {loading ? (
        <div className="wh-empty"><p>Loading users...</p></div>
      ) : (
        <table className="wh-table">
          <thead>
            <tr>
              <th>Username</th>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
              <th>Invite Code</th>
              <th>Services</th>
              <th>Created</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {users.map(u => (
              <React.Fragment key={u.id}>
                <tr>
                  <td style={{fontWeight:600}}>{u.username}</td>
                  <td style={{color:'var(--text-dim)'}}>{u.name || '—'}</td>
                  <td style={{color:'var(--text-dim)',fontSize:12}}>{u.email || '—'}</td>
                  <td><span className={`badge badge-${u.role}`}>{u.role}</span></td>
                  <td>
                    <div style={{display:'flex',alignItems:'center',gap:6}}>
                      <code style={{fontSize:11,color:'var(--text-dim)',fontFamily:'SF Mono,Menlo,Consolas,monospace'}}>{u.invite_code || '—'}</code>
                      <button className="btn-sm btn-ghost" onClick={() => handleRegenInvite(u.id)}
                              style={{padding:'2px 6px',fontSize:10}} title="Regenerate invite code">↻</button>
                    </div>
                  </td>
                  <td>
                    <div className="svc-grid">
                      {activeServices.map(s => {
                        const on = u.enabledServices?.includes(s.key);
                        return (
                          <label key={s.key} className={`svc-chip ${on ? 'svc-chip-on' : ''}`}
                                 title={`${s.name}: ${on ? 'Enabled' : 'Disabled'}`}>
                            <input type="checkbox" checked={on}
                                   onChange={() => handleToggleService(u.id, s.key, on)}
                                   style={{position:'absolute',opacity:0,width:0,height:0}} />
                            <span className="svc-chip-dot"></span>
                            <span className="svc-chip-label">{s.key}</span>
                          </label>
                        );
                      })}
                    </div>
                  </td>
                  <td style={{color:'var(--text-dim)',fontSize:12}}>{u.created_at ? new Date(u.created_at).toLocaleDateString() : '—'}</td>
                  <td>
                    <div style={{display:'flex',gap:6}}>
                      <button className="btn-sm btn-ghost" onClick={() => setEditUser(u)} style={{color:'var(--accent)'}}>Edit</button>
                      <button className="btn-sm btn-ghost" onClick={() => setExpandedCreds(expandedCreds === u.id ? null : u.id)}
                        style={{color: u.webhook_creds?.provisioned ? 'var(--accent)' : undefined}}>
                        {expandedCreds === u.id ? 'Hide' : 'API'}
                      </button>
                      <button className="btn-sm btn-ghost" onClick={() => setResetUser(u)}>Reset PW</button>
                      <button className="btn-sm btn-danger" onClick={() => handleDelete(u.id, u.username)}>Delete</button>
                    </div>
                  </td>
                </tr>
                {expandedCreds === u.id && (
                  <tr><UserWebhookCreds user={u} onUpdate={load} /></tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
}