function CreateUserForm({ services, onCreated }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [role, setRole] = useState('user');
  const [enabled, setEnabled] = useState([]);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  const toggleSvc = (key) => {
    setEnabled(prev => prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]);
  };

  const submit = async (e) => {
    e.preventDefault();
    setSaving(true); setError('');
    try {
      await api('/api/admin/users', {
        method: 'POST',
        body: JSON.stringify({ username, password, name, email, role, enabledServices: enabled }),
      });
      onCreated();
    } catch (err) { setError(err.message); }
    finally { setSaving(false); }
  };

  return (
    <form className="wh-form" onSubmit={submit}>
      {error && <div className="error-banner">{error}</div>}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
        <div className="field">
          <label>Username</label>
          <input value={username} onChange={e => setUsername(e.target.value)} placeholder="johndoe" required />
        </div>
        <div className="field">
          <label>Password</label>
          <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••" required />
        </div>
        <div className="field">
          <label>Display Name</label>
          <input value={name} onChange={e => setName(e.target.value)} placeholder="John Doe" />
        </div>
        <div className="field">
          <label>Email</label>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="john@example.com" />
        </div>
      </div>
      <div className="field">
        <label>Role</label>
        <select value={role} onChange={e => setRole(e.target.value)}>
          <option value="user">User</option>
          <option value="admin">Admin</option>
        </select>
      </div>
      <div className="field">
        <label>Enabled Services</label>
        <div className="svc-toggles">
          {services.map(s => (
            <div className="svc-toggle-row" key={s.key}>
              <span className="svc-name">{s.name}</span>
              <label className="toggle">
                <input type="checkbox" checked={enabled.includes(s.key)} onChange={() => toggleSvc(s.key)} />
                <span className="slider"></span>
              </label>
            </div>
          ))}
        </div>
      </div>
      <button type="submit" disabled={saving}>{saving ? 'Creating...' : 'Create User'}</button>
    </form>
  );
}

function EditUserModal({ user, services, onSaved, onClose }) {
  const [username, setUsername] = useState(user.username);
  const [name, setName] = useState(user.name || '');
  const [email, setEmail] = useState(user.email || '');
  const [role, setRole] = useState(user.role || 'user');
  const [inviteAction, setInviteAction] = useState('keep');
  const [customCode, setCustomCode] = useState('');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [done, setDone] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setSaving(true); setError('');
    try {
      await api(`/api/admin/users/${user.id}`, {
        method: 'PUT',
        body: JSON.stringify({ username, name, email, role }),
      });

      if (inviteAction === 'regenerate') {
        await api(`/api/admin/users/${user.id}/invite-code`, {
          method: 'PUT', body: JSON.stringify({}),
        });
      } else if (inviteAction === 'custom' && customCode.trim()) {
        await api(`/api/admin/users/${user.id}/invite-code`, {
          method: 'PUT', body: JSON.stringify({ invite_code: customCode.trim() }),
        });
      }

      setDone(true);
      onSaved();
      setTimeout(onClose, 800);
    } catch (err) { setError(err.message); }
    finally { setSaving(false); }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <form className="modal" onClick={e => e.stopPropagation()} onSubmit={submit} style={{maxWidth:480}}>
        <h3>Edit User</h3>
        {error && <div className="error-banner">{error}</div>}
        {done && <div className="save-msg">User updated.</div>}
        {!done && (
          <>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              <div className="field">
                <label>Username</label>
                <input value={username} onChange={e => setUsername(e.target.value)} required />
              </div>
              <div className="field">
                <label>Display Name</label>
                <input value={name} onChange={e => setName(e.target.value)} placeholder="—" />
              </div>
              <div className="field">
                <label>Email</label>
                <input value={email} onChange={e => setEmail(e.target.value)} placeholder="—" />
              </div>
              <div className="field">
                <label>Role</label>
                <select value={role} onChange={e => setRole(e.target.value)}>
                  <option value="user">User</option>
                  <option value="admin">Admin</option>
                </select>
              </div>
            </div>
            <div className="field" style={{marginTop:8}}>
              <label>Invite Code</label>
              <div style={{fontSize:12,color:'var(--text-dim)',marginBottom:8,fontFamily:'monospace'}}>
                Current: {user.invite_code || '—'}
              </div>
              <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                {[['keep','Keep current'],['regenerate','Regenerate new'],['custom','Set custom']].map(([v,l]) => (
                  <label key={v} style={{display:'flex',alignItems:'center',gap:6,fontSize:13,cursor:'pointer',color: inviteAction===v ? 'var(--accent)' : 'var(--text-dim)'}}>
                    <input type="radio" name="inviteAction" value={v} checked={inviteAction===v} onChange={() => setInviteAction(v)}
                           style={{accentColor:'var(--accent)'}} />
                    {l}
                  </label>
                ))}
              </div>
              {inviteAction === 'custom' && (
                <input value={customCode} onChange={e => setCustomCode(e.target.value)}
                       placeholder="vb-..." style={{marginTop:8}}/>
              )}
            </div>
            <div className="modal-actions">
              <button type="button" className="btn-ghost" onClick={onClose}>Cancel</button>
              <button type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save Changes'}</button>
            </div>
          </>
        )}
      </form>
    </div>
  );
}

function ResetPasswordModal({ user, onClose }) {
  const [newPw, setNewPw] = useState('');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [done, setDone] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setSaving(true); setError('');
    try {
      await api(`/api/admin/users/${user.id}/password`, { method: 'PUT', body: JSON.stringify({ newPassword: newPw }) });
      setDone(true);
      setTimeout(onClose, 1500);
    } catch (err) { setError(err.message); }
    finally { setSaving(false); }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <form className="modal" onClick={e => e.stopPropagation()} onSubmit={submit}>
        <h3>Reset Password for {user.username}</h3>
        {error && <div className="error-banner">{error}</div>}
        {done && <div className="save-msg">Password reset successfully.</div>}
        {!done && (
          <>
            <div className="field">
              <label>New Password</label>
              <input type="password" value={newPw} onChange={e => setNewPw(e.target.value)}
                     placeholder="••••••••" required autoFocus />
            </div>
            <div className="modal-actions">
              <button type="button" className="btn-ghost" onClick={onClose}>Cancel</button>
              <button type="submit" disabled={saving}>{saving ? 'Resetting...' : 'Reset Password'}</button>
            </div>
          </>
        )}
      </form>
    </div>
  );
}