/**
 * Register Page – New user registration
 */
import { useState, type FormEvent } from 'react';
import { useAuth } from '../contexts/AuthContext';

interface RegisterProps {
  onSwitchToLogin: () => void;
}

export function Register({ onSwitchToLogin }: RegisterProps) {
  const { register, loading, error, clearError } = useAuth();
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [localError, setLocalError] = useState<string | null>(null);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setLocalError(null);

    if (password !== confirmPassword) {
      setLocalError('Passwörter stimmen nicht überein');
      return;
    }
    if (password.length < 6) {
      setLocalError('Passwort muss mindestens 6 Zeichen lang sein');
      return;
    }

    try {
      await register(email, password, name);
    } catch {
      // error is set in context
    }
  };

  const displayError = localError || error;

  return (
    <div className="auth-page">
      <div className="auth-card">
        <h1 className="auth-title">Web CAD</h1>
        <p className="auth-subtitle">Registrieren</p>

        {displayError && (
          <div className="auth-error" onClick={() => { clearError(); setLocalError(null); }}>
            {displayError}
          </div>
        )}

        <form onSubmit={handleSubmit} className="auth-form">
          <div className="auth-field">
            <label htmlFor="reg-name">Name</label>
            <input
              id="reg-name"
              type="text"
              value={name}
              onChange={e => setName(e.target.value)}
              required
              autoFocus
              placeholder="Ihr Name"
            />
          </div>

          <div className="auth-field">
            <label htmlFor="reg-email">E-Mail</label>
            <input
              id="reg-email"
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              required
              placeholder="name@example.com"
            />
          </div>

          <div className="auth-field">
            <label htmlFor="reg-password">Passwort</label>
            <input
              id="reg-password"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
              placeholder="min. 6 Zeichen"
            />
          </div>

          <div className="auth-field">
            <label htmlFor="reg-confirm">Passwort bestätigen</label>
            <input
              id="reg-confirm"
              type="password"
              value={confirmPassword}
              onChange={e => setConfirmPassword(e.target.value)}
              required
              placeholder="••••••••"
            />
          </div>

          <button type="submit" className="auth-button" disabled={loading}>
            {loading ? 'Wird registriert…' : 'Registrieren'}
          </button>
        </form>

        <p className="auth-switch">
          Bereits ein Konto?{' '}
          <button type="button" className="auth-link" onClick={onSwitchToLogin}>
            Anmelden
          </button>
        </p>
      </div>
    </div>
  );
}