import React, { useState } from 'react';
import { drohnenfuehrerLogin, setDrohnenfuehrerPassword } from '../../services/drohnenfuehrer';
import './DrohnenfuehrerLogin.css';

const DrohnenfuehrerLogin = ({ onLogin }) => {
  const [mode, setMode] = useState('login'); // 'login' | 'set-password'
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [newPassword2, setNewPassword2] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);

  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const result = await drohnenfuehrerLogin(email, password);
      if (result.success) {
        localStorage.setItem('drohnenfuehrerToken', result.token);
        onLogin(result.user);
      }
    } catch (err) {
      setError(err.response?.data?.message || 'Anmeldung fehlgeschlagen');
    } finally {
      setLoading(false);
    }
  };

  const handleSetPassword = async (e) => {
    e.preventDefault();
    setError('');
    if (newPassword !== newPassword2) {
      setError('Passwörter stimmen nicht überein');
      return;
    }
    if (newPassword.length < 6) {
      setError('Passwort muss mindestens 6 Zeichen haben');
      return;
    }
    setLoading(true);
    try {
      const result = await setDrohnenfuehrerPassword(email, newPassword);
      if (result.success) {
        setSuccess('Passwort erfolgreich gesetzt. Sie können sich nun anmelden.');
        setMode('login');
        setNewPassword('');
        setNewPassword2('');
      }
    } catch (err) {
      setError(err.response?.data?.message || 'Fehler beim Setzen des Passworts');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="drohnenfuehrer-login-container">
      <div className="drohnenfuehrer-login-card">
        <h2>Drohnenführer-Login</h2>
        <p className="drohnenfuehrer-login-subtitle">
          Melden Sie sich an, um Ihre Verfügbarkeit und Kontaktdaten zu verwalten.
        </p>

        <div className="drohnenfuehrer-mode-toggle">
          <button
            className={mode === 'login' ? 'active' : ''}
            onClick={() => { setMode('login'); setError(''); setSuccess(''); }}
          >
            Anmelden
          </button>
          <button
            className={mode === 'set-password' ? 'active' : ''}
            onClick={() => { setMode('set-password'); setError(''); setSuccess(''); }}
          >
            Passwort erstmalig setzen
          </button>
        </div>

        {error && <div className="drohnenfuehrer-error">{error}</div>}
        {success && <div className="drohnenfuehrer-success">{success}</div>}

        {mode === 'login' ? (
            <form onSubmit={handleLogin} className="drohnenfuehrer-form">
            <div className="form-group">
              <label>E-Mail</label>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} required autoFocus />
            </div>
            <div className="form-group">
              <label>Passwort</label>
              <input type="password" value={password} onChange={e => setPassword(e.target.value)} required />
            </div>
            <button type="submit" className="btn-drohnenfuehrer-primary" disabled={loading}>
              {loading ? 'Anmelden...' : 'Anmelden'}
            </button>
          </form>
        ) : (
          <form onSubmit={handleSetPassword} className="drohnenfuehrer-form">
            <p className="drohnenfuehrer-hint">
              Der Admin hat Ihre E-Mail-Adresse hinterlegt. Geben Sie hier Ihre E-Mail und ein neues Passwort ein.
            </p>
            <div className="form-group">
              <label>E-Mail</label>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} required autoFocus />
            </div>
            <div className="form-group">
              <label>Neues Passwort (min. 6 Zeichen)</label>
              <input type="password" value={newPassword} onChange={e => setNewPassword(e.target.value)} required minLength={6} />
            </div>
            <div className="form-group">
              <label>Passwort wiederholen</label>
              <input type="password" value={newPassword2} onChange={e => setNewPassword2(e.target.value)} required />
            </div>
            <button type="submit" className="btn-drohnenfuehrer-primary" disabled={loading}>
              {loading ? 'Wird gesetzt...' : 'Passwort setzen'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

export default DrohnenfuehrerLogin;
