function Login({ navigate }) {
  const { login } = window.AuthContext.useAuth();
  const toast = window.Toast.useToast();
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  async function onSubmit(e) {
    e.preventDefault();
    setLoading(true); setError('');
    try {
      await login(email, password);
      toast.success('Connexion réussie');
      navigate('home');
    } catch (err) {
      const msg = err?.error?.message || 'Erreur de connexion';
      setError(msg);
      toast.error(msg);
    } finally { setLoading(false); }
  }

  return (
    <div className="container">
      <h1>Se connecter</h1>
      <form onSubmit={onSubmit} style={{ maxWidth: 360 }}>
        <label>Email<br/>
          <input value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="Votre email" autoComplete="username" />
        </label><br/>
        <label>Mot de passe<br/>
          <input type="password" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Votre mot de passe" autoComplete="current-password" />
        </label><br/>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit" disabled={loading}>{loading ? 'Connexion...' : 'Se connecter'}</button>
        <div style={{ marginTop: 8 }}>
          <a href="#/forgot">Mot de passe oublié ?</a>
        </div>
      </form>
      <p style={{ marginTop: 12 }}>Pas encore de compte ? <a href="#" onClick={(e)=>{e.preventDefault(); navigate('/register');}}>Créer un compte</a></p>
    </div>
  );
}

window.Pages = window.Pages || {};
window.Pages.Login = Login;