/* global React */
const { useState: useStateLogin, useEffect: useEffectLogin } = React;

const ADMIN_PASSWORD_FRONT = '!posten2024!';

function LoginModal({ open, onClose }) {
  const [password, setPassword] = useStateLogin('');
  const [loading, setLoading] = useStateLogin(false);
  const [error, setError] = useStateLogin('');
  const [success, setSuccess] = useStateLogin(false);

  useEffectLogin(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose?.(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    if (!password) {
      setError('Bitte Passwort eingeben.');
      return;
    }
    setLoading(true);
    let ok = (password === ADMIN_PASSWORD_FRONT);
    if (!ok) {
      try {
        const r = await fetch('api.php', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ action: 'login', password }),
        });
        const d = await r.json().catch(() => null);
        ok = !!(d && d.success);
      } catch (_) { /* offline */ }
    }
    if (ok) {
      sessionStorage.setItem('dp_admin', '1');
      sessionStorage.setItem('dp_admin_pw', password);
      try { localStorage.setItem('dp_admin_pw', password); } catch (_) {}
      setSuccess(true);
      setTimeout(() => { window.location.href = 'admin/?auth=1&t=' + Date.now(); }, 500);
    } else {
      setError('Falsches Passwort.');
      setLoading(false);
      setPassword('');
    }
  };

  return (
    <div className="dp-modal" onClick={onClose}>
      <div className="dp-modal__card" onClick={(e) => e.stopPropagation()}>
        <button className="dp-modal__close" onClick={onClose} aria-label="Schließen">×</button>

        <div className="dp-modal__head">
          <span className="dp-eyebrow">Admin · Intern</span>
          <h3 className="dp-h3">Backend-Zugang</h3>
          <p className="dp-small" style={{ marginTop: 6 }}>
            Geschützter Bereich. Bitte Passwort eingeben.
          </p>
        </div>

        {success ? (
          <div className="dp-modal__ok">
            <div className="dp-modal__ok-ico">✓</div>
            <strong>Erfolgreich angemeldet</strong>
            <span>Weiterleitung zum Backend…</span>
          </div>
        ) : (
          <form className="dp-form dp-modal__form" onSubmit={handleSubmit}>
            <div className="fg">
              <label htmlFor="dp-login-pass">Passwort</label>
              <input
                id="dp-login-pass"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••••"
                autoFocus
                required
              />
            </div>

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

            <button type="submit" className="dp-btn dp-btn--primary dp-btn--full" disabled={loading}>
              {loading ? 'Wird geprüft…' : 'Einloggen'}
              {!loading && (
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              )}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}
window.LoginModal = LoginModal;