function Login({ onLogin }) {
  const [mode,     setMode]     = React.useState('login');
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error,    setError]    = React.useState('');
  const [loading,  setLoading]  = React.useState(false);

  async function submit(e) {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const res = await fetch(`/api/${mode}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: username.trim(), password }),
      });
      const data = await res.json();
      if (!res.ok) { setError(data.error || 'Something went wrong'); return; }
      onLogin(data.token, data.username, data.balance, data.is_admin);
    } catch {
      setError('Could not connect to server');
    } finally {
      setLoading(false);
    }
  }

  function switchMode(m) { setMode(m); setError(''); }

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-brand">
          <div className="login-brand-name">ArcheBet</div>
          <div className="login-brand-tag">The House Always Remembers</div>
        </div>

        <h2 className="login-mode-title">
          {mode === 'login' ? 'Sign In' : 'Create Account'}
        </h2>

        <form onSubmit={submit}>
          <div className="form-field">
            <label className="form-label">Username</label>
            <input
              className="form-input"
              type="text"
              value={username}
              onChange={e => setUsername(e.target.value)}
              autoComplete="username"
              autoFocus
            />
          </div>
          <div className="form-field">
            <label className="form-label">Password</label>
            <input
              className="form-input"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
            />
          </div>
          {mode === 'register' && (
            <p style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 16, lineHeight: 1.6 }}>
              After registering, contact the admin to add gold to your balance.
            </p>
          )}
          <button className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={loading}>
            {loading ? '…' : mode === 'login' ? 'Enter the House' : 'Create Account'}
          </button>
          {error && <div className="form-error">{error}</div>}
        </form>

        <div className="login-switch">
          {mode === 'login' ? (
            <>
              <span>New to ArcheBet?</span>
              <button className="btn btn-primary login-switch-btn" onClick={() => switchMode('register')}>
                Register
              </button>
            </>
          ) : (
            <>
              <span>Already have an account?</span>
              <button className="btn login-switch-btn" onClick={() => switchMode('login')}>
                Sign In
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}