import { useState, type FormEvent } from 'react';
import { NotAdminError, useAuth } from '../auth/AuthContext';

export default function Login() {
  const { signIn } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setBusy(true);
    try {
      await signIn(email, password);
    } catch (err) {
      setError(
        err instanceof NotAdminError ? 'Geen toegang — alleen beheerders.' : 'Inloggen mislukt'
      );
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="login">
      <h1 className="login-title">SoleLog Admin</h1>
      <form className="login-form" onSubmit={handleSubmit}>
        <label className="field">
          <span className="field-label">E-mailadres</span>
          <input
            className="field-input"
            type="email"
            autoComplete="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </label>
        <label className="field">
          <span className="field-label">Wachtwoord</span>
          <input
            className="field-input"
            type="password"
            autoComplete="current-password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </label>
        {error && <p className="login-error">{error}</p>}
        <button className="btn-primary" type="submit" disabled={busy}>
          Inloggen
        </button>
      </form>
    </div>
  );
}