registerPage('users', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Users';
  let userTypes = [], clients = [];

  async function preload() {
    const [tr, cr] = await Promise.all([
      api('users.php',   { action: 'user_types' }),
      api('clients.php', { action: 'list' }),
    ]);
    userTypes = tr.user_types || [];
    clients   = cr.clients    || [];
  }

  async function render(search = '') {
    const r = await api('users.php', { action: 'list', search });
    if (!r.success) { document.getElementById('users-table').innerHTML = emptyHTML(); return; }
    const rows = r.users;
    document.getElementById('users-table').innerHTML = rows.length === 0 ? emptyHTML('No users found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>Username</th><th>Full Name</th><th>Email</th><th>Type</th><th>Assessor #</th><th>Clients</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(u => `<tr>
          <td class="mono fw-500">${u.safesure_users_name}</td>
          <td>${u.name || '—'}</td>
          <td>${u.email || '—'}</td>
          <td>${typeBadge(u.user_type_name)}</td>
          <td class="mono">${u.assessor_number || '—'}</td>
          <td class="text-muted text-sm">${u.clients_multi || '—'}</td>
          <td class="actions-td">
            <button class="btn btn-sm btn-secondary" onclick="userEdit(${u.record_id})">Edit</button>
            <button class="btn btn-sm btn-danger" onclick="userDelete(${u.record_id})">Delete</button>
          </td></tr>`).join('')}
        </tbody>
      </table></div>`;
  }

  content.innerHTML = `
    <div class="search-wrap">
      <div class="search-input-wrap">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35" stroke-linecap="round"/></svg>
        <input type="text" id="user-search" placeholder="Search users…">
      </div>
      <button class="btn btn-primary" onclick="userAdd()">+ New User</button>
    </div>
    <div class="card"><div id="users-table">${loadingHTML()}</div></div>

    <div class="modal-bg" id="user-modal">
      <div class="modal modal-lg">
        <div class="modal-header">
          <h3 id="user-modal-title">New User</h3>
          <button class="modal-close" onclick="closeModal('user-modal')">×</button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="uf-id">
          <div class="form-grid">
            <div class="form-group"><label>Username *</label><input type="text" id="uf-username" autocomplete="off"></div>
            <div class="form-group"><label>Full Name</label><input type="text" id="uf-name"></div>
            <div class="form-group"><label>Email</label><input type="email" id="uf-email"></div>
            <div class="form-group"><label>Password <span id="pw-hint" class="text-muted">(required)</span></label><input type="password" id="uf-password" autocomplete="new-password"></div>
            <div class="form-group"><label>User Type</label><select id="uf-type"></select></div>
            <div class="form-group"><label>Assessor Number</label><input type="text" id="uf-assessor"></div>
            <div class="form-group"><label>Moderator Number</label><input type="text" id="uf-moderator"></div>
          </div>
          <div class="divider"></div>
          <label style="display:block;margin-bottom:10px">Client Access</label>
          <div id="uf-clients" style="display:flex;flex-wrap:wrap;gap:8px"></div>
          <input type="hidden" id="uf-clients-hidden">
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeModal('user-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="userSave()">Save User</button>
        </div>
      </div>
    </div>`;

  await preload();

  const typeSel = document.getElementById('uf-type');
  userTypes.forEach(t => typeSel.innerHTML += `<option value="${t.record_id}">${t.user_type_name}</option>`);

  function renderClientCheckboxes(selectedIds = []) {
    const selected = typeof selectedIds === 'string' ? selectedIds.split(',').map(s => s.trim()) : selectedIds;
    document.getElementById('uf-clients').innerHTML = clients.map(c => `
      <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;background:var(--bg);padding:5px 10px;border-radius:6px;border:1px solid var(--border)">
        <input type="checkbox" value="${c.record_id}" ${selected.includes(String(c.record_id)) ? 'checked' : ''} onchange="syncClientHidden()">
        ${c.clients_name}
      </label>`).join('');
  }

  window.syncClientHidden = () => {
    const checked = [...document.querySelectorAll('#uf-clients input:checked')].map(c => c.value);
    document.getElementById('uf-clients-hidden').value = checked.join(',');
  };

  document.getElementById('user-search').addEventListener('input', e => render(e.target.value));
  render();

  window.userAdd = () => {
    document.getElementById('user-modal-title').textContent = 'New User';
    document.getElementById('uf-id').value        = '';
    document.getElementById('uf-username').value  = '';
    document.getElementById('uf-name').value      = '';
    document.getElementById('uf-email').value     = '';
    document.getElementById('uf-password').value  = '';
    document.getElementById('uf-assessor').value  = '';
    document.getElementById('uf-moderator').value = '';
    document.getElementById('uf-type').value      = '2';
    document.getElementById('pw-hint').textContent = '(required)';
    renderClientCheckboxes([]);
    openModal('user-modal');
  };

  window.userEdit = async (id) => {
    const r = await api('users.php', { action: 'get', id });
    if (!r.success) { toast('Failed', 'error'); return; }
    const u = r.user;
    document.getElementById('user-modal-title').textContent = 'Edit User';
    document.getElementById('uf-id').value        = u.record_id;
    document.getElementById('uf-username').value  = u.safesure_users_name;
    document.getElementById('uf-name').value      = u.name || '';
    document.getElementById('uf-email').value     = u.email || '';
    document.getElementById('uf-password').value  = '';
    document.getElementById('uf-assessor').value  = u.assessor_number || '';
    document.getElementById('uf-moderator').value = u.moderator_number || '';
    document.getElementById('uf-type').value      = u.user_type_id;
    document.getElementById('pw-hint').textContent = '(leave blank to keep)';
    renderClientCheckboxes(u.clients_multi || '');
    syncClientHidden();
    openModal('user-modal');
  };

  window.userSave = async () => {
    const id = document.getElementById('uf-id').value;
    syncClientHidden();
    const params = {
      action:                id ? 'update' : 'create', id,
      safesure_users_name:   document.getElementById('uf-username').value,
      name:                  document.getElementById('uf-name').value,
      email:                 document.getElementById('uf-email').value,
      password:              document.getElementById('uf-password').value,
      user_type_id:          document.getElementById('uf-type').value,
      assessor_number:       document.getElementById('uf-assessor').value,
      moderator_number:      document.getElementById('uf-moderator').value,
      clients_multi:         document.getElementById('uf-clients-hidden').value,
    };
    const r = await api('users.php', params, 'POST');
    if (r.success) { toast(r.message, 'success'); closeModal('user-modal'); render(); }
    else toast(r.error, 'error');
  };

  window.userDelete = async (id) => {
    if (!confirm('Delete this user? Their active session token will also be revoked.')) return;
    const r = await api('users.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('User deleted', 'success'); render(); }
    else toast(r.error, 'error');
  };
});