// Auth-Screen: Registrierung, Login, E-Mail-Verifizierung, Passwort-Reset

function AuthScreen({ onAuthenticated }) {
  // Modes: 'login' | 'register' | 'verify-pending' | 'verify' | 'forgot' | 'forgot-sent' | 'reset' | 'reset-done'
  const [mode, setMode] = React.useState('login');
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [password2, setPassword2] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [resetToken, setResetToken] = React.useState('');

  // Check URL for verify-email or reset-password tokens on mount
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const verifyToken = params.get('token');
    const path = window.location.pathname;

    if (path === '/verify-email' && verifyToken) {
      setMode('verify');
      setLoading(true);
      window.apiVerifyEmail(verifyToken).then(res => {
        setLoading(false);
        if (res.ok) {
          // Clean URL and auto-login
          window.history.replaceState({}, '', '/');
          onAuthenticated(res.user);
        } else {
          setError(res.error || 'Verifizierung fehlgeschlagen.');
        }
      }).catch(() => {
        setLoading(false);
        setError('Verbindung fehlgeschlagen.');
      });
    } else if (path === '/reset-password' && verifyToken) {
      setResetToken(verifyToken);
      setLoading(true);
      window.apiCheckResetToken(verifyToken).then(res => {
        setLoading(false);
        if (res.ok) {
          setMode('reset');
        } else {
          setMode('login');
          setError('Ungültiger oder abgelaufener Link. Bitte fordere einen neuen an.');
        }
        window.history.replaceState({}, '', '/');
      }).catch(() => {
        setLoading(false);
        setMode('login');
        setError('Verbindung fehlgeschlagen.');
      });
    }
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      if (mode === 'register') {
        if (!name.trim()) { setError('Bitte gib deinen Namen ein.'); setLoading(false); return; }
        const res = await window.apiRegister({ name: name.trim(), email: email.trim(), password });
        if (!res.ok) { setError(res.error); setLoading(false); return; }
        if (res.pending) {
          setMode('verify-pending');
          setLoading(false);
          return;
        }
        onAuthenticated(res.user);
      } else if (mode === 'login') {
        const res = await window.apiLogin({ email: email.trim(), password });
        if (!res.ok) {
          if (res.unverified) {
            setMode('verify-pending');
            setLoading(false);
            return;
          }
          setError(res.error); setLoading(false); return;
        }
        onAuthenticated(res.user);
      } else if (mode === 'forgot') {
        await window.apiForgotPassword(email.trim());
        setMode('forgot-sent');
        setLoading(false);
      } else if (mode === 'reset') {
        if (password !== password2) { setError('Passwörter stimmen nicht überein.'); setLoading(false); return; }
        if (password.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); setLoading(false); return; }
        const res = await window.apiResetPassword(resetToken, password);
        if (!res.ok) { setError(res.error); setLoading(false); return; }
        setMode('reset-done');
        setLoading(false);
      }
    } catch (err) {
      setError('Verbindung zum Server fehlgeschlagen.');
      setLoading(false);
    }
  };

  const resend = async () => {
    setLoading(true);
    await window.apiResendVerification(email.trim());
    setLoading(false);
    setError('');
    alert('Neue Bestätigungs-E-Mail wurde gesendet. Bitte prüfe dein Postfach.');
  };

  const renderForm = () => {
    // Verify-pending screen
    if (mode === 'verify-pending') {
      return (
        <div className="auth-form">
          <div className="auth-verify-icon">✉️</div>
          <h2>E-Mail bestätigen</h2>
          <p className="auth-form-sub">
            Wir haben dir eine Bestätigungs-E-Mail an <b>{email}</b> gesendet.
            Bitte klicke auf den Link in der E-Mail, um deinen Account zu aktivieren.
          </p>
          <p className="auth-form-sub" style={{ fontSize: 13, color: 'var(--text-soft)' }}>
            Prüfe ggf. auch deinen Spam-Ordner.
          </p>
          <button type="button" className="auth-submit" style={{ background: 'var(--bg-soft)', color: 'var(--text)' }} onClick={resend} disabled={loading}>
            {loading ? 'Wird gesendet…' : 'Erneut senden'}
          </button>
          <div className="auth-switch">
            <button type="button" onClick={() => { setMode('login'); setError(''); }}>Zurück zum Login</button>
          </div>
        </div>
      );
    }

    // Verifying token from URL
    if (mode === 'verify') {
      return (
        <div className="auth-form">
          {loading ? (
            <>
              <div className="spinner" style={{ margin: '20px auto' }}></div>
              <p className="auth-form-sub">E-Mail wird verifiziert…</p>
            </>
          ) : (
            <>
              <h2>Verifizierung fehlgeschlagen</h2>
              {error && <div className="auth-error">{error}</div>}
              <div className="auth-switch">
                <button type="button" onClick={() => { setMode('login'); setError(''); }}>Zum Login</button>
              </div>
            </>
          )}
        </div>
      );
    }

    // Forgot password sent confirmation
    if (mode === 'forgot-sent') {
      return (
        <div className="auth-form">
          <div className="auth-verify-icon">📧</div>
          <h2>E-Mail gesendet</h2>
          <p className="auth-form-sub">
            Falls ein Account mit <b>{email}</b> existiert, haben wir dir eine E-Mail mit einem Link zum Zurücksetzen deines Passworts gesendet.
          </p>
          <div className="auth-switch">
            <button type="button" onClick={() => { setMode('login'); setError(''); }}>Zurück zum Login</button>
          </div>
        </div>
      );
    }

    // Reset done confirmation
    if (mode === 'reset-done') {
      return (
        <div className="auth-form">
          <div className="auth-verify-icon">✅</div>
          <h2>Passwort geändert</h2>
          <p className="auth-form-sub">
            Dein Passwort wurde erfolgreich geändert. Du kannst dich jetzt anmelden.
          </p>
          <button type="button" className="auth-submit" onClick={() => { setMode('login'); setError(''); setPassword(''); }}>
            Zum Login
          </button>
        </div>
      );
    }

    // Reset password form
    if (mode === 'reset') {
      return (
        <form className="auth-form" onSubmit={submit}>
          <h2>Neues Passwort vergeben</h2>
          <p className="auth-form-sub">Wähle ein neues Passwort für deinen Account.</p>

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

          <div className="auth-field">
            <label>Neues Passwort</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Mindestens 8 Zeichen" required autoFocus />
          </div>
          <div className="auth-field">
            <label>Passwort wiederholen</label>
            <input type="password" value={password2} onChange={e => setPassword2(e.target.value)} placeholder="Passwort bestätigen" required />
          </div>

          <button type="submit" className="auth-submit" disabled={loading}>
            {loading ? 'Bitte warten…' : 'Passwort speichern'}
          </button>
        </form>
      );
    }

    // Forgot password form
    if (mode === 'forgot') {
      return (
        <form className="auth-form" onSubmit={submit}>
          <h2>Passwort vergessen</h2>
          <p className="auth-form-sub">
            Gib deine E-Mail-Adresse ein. Wir senden dir einen Link zum Zurücksetzen deines Passworts.
          </p>

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

          <div className="auth-field">
            <label>E-Mail</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="du@beispiel.de" required autoFocus />
          </div>

          <button type="submit" className="auth-submit" disabled={loading}>
            {loading ? 'Bitte warten…' : 'Link senden'}
          </button>

          <div className="auth-switch">
            <button type="button" onClick={() => { setMode('login'); setError(''); }}>Zurück zum Login</button>
          </div>
        </form>
      );
    }

    // Login / Register form
    return (
      <form className="auth-form" onSubmit={submit}>
        <h2>{mode === 'login' ? 'Willkommen zurück' : 'Account erstellen'}</h2>
        <p className="auth-form-sub">
          {mode === 'login' ? 'Melde dich an, um zu deinen Stücken zurückzukehren.' : 'Erstelle einen Account, um Stücke und Kommentare zu speichern.'}
        </p>

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

        {mode === 'register' && (
          <div className="auth-field">
            <label>Name</label>
            <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="z.B. Anna Müller" autoFocus />
          </div>
        )}
        <div className="auth-field">
          <label>E-Mail</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="du@beispiel.de" required autoFocus={mode === 'login'} />
        </div>
        <div className="auth-field">
          <label>Passwort</label>
          <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Mindestens 8 Zeichen" required />
        </div>

        {mode === 'login' && (
          <div style={{ textAlign: 'right', marginTop: -4, marginBottom: 8 }}>
            <button type="button" className="auth-link-btn" onClick={() => { setMode('forgot'); setError(''); }}>
              Passwort vergessen?
            </button>
          </div>
        )}

        <button type="submit" className="auth-submit" disabled={loading}>
          {loading ? 'Bitte warten…' : (mode === 'login' ? 'Anmelden' : 'Account erstellen')}
        </button>

        <div className="auth-switch">
          {mode === 'login' ? (
            <>Noch kein Account?<button type="button" onClick={() => { setMode('register'); setError(''); }}>Jetzt registrieren</button></>
          ) : (
            <>Schon registriert?<button type="button" onClick={() => { setMode('login'); setError(''); }}>Anmelden</button></>
          )}
        </div>

        <div style={{ marginTop: 24, padding: 12, background: 'var(--bg-soft)', borderRadius: 8, fontSize: 11, color: 'var(--text-soft)', lineHeight: 1.5 }}>
          <b>Hinweis:</b> Daten werden sicher auf dem Server gespeichert. Passwörter werden verschlüsselt (bcrypt).
        </div>
      </form>
    );
  };

  return (
    <div className="auth-screen">
      <div className="auth-side">
        <div className="auth-brand">
          <a href="https://kalikoer.com" target="_blank" rel="noopener noreferrer"><img src="kalikoer-logo.png" alt="Kalikoer" className="topbar-logo" /></a>
        </div>
        <div className="auth-hero">
          <h1>Probenarbeit nach<br/>der Vier-V Methode.</h1>
          <p>Lade Chornoten als PDF hoch, markiere Stellen und verknüpfe deine Kommentare mit den Phasen Vorüberlegung, Vorbereitung, Vermittlung und Vertiefung.</p>
          <div className="auth-phase-grid">
            {window.PHASE_ORDER.map(p => {
              const meta = window.PHASES[p];
              return (
                <div key={p} className="auth-phase-tile">
                  <div className="auth-phase-tile-head">
                    <div className="auth-phase-tile-dot" style={{ background: meta.color }}>{p}</div>
                    {meta.name}
                  </div>
                  <div className="auth-phase-tile-desc">{meta.description}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="auth-form-side">
        {renderForm()}
      </div>
    </div>
  );
}

window.AuthScreen = AuthScreen;