/* MANAGER LOGIN — async API auth */
function LoginModal({ onClose, onLogin }) {
  const [pw,      setPw]      = React.useState('');
  const [err,     setErr]     = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [shake,   setShake]   = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 60);
    return () => clearTimeout(t);
  }, []);

  async function submit(e) {
    e.preventDefault();
    if (loading) return;
    setLoading(true);
    const ok = await onLogin(pw);
    setLoading(false);
    if (!ok) {
      setErr(true);
      setShake(true);
      setTimeout(() => setShake(false), 420);
    }
  }

  return (
    <div className="login-wrap" onClick={onClose}>
      <form
        className={'login-card ' + (shake ? 'shake' : '')}
        onClick={(e) => e.stopPropagation()}
        onSubmit={submit}
      >
        <button type="button" className="sheet-x" onClick={onClose} aria-label="بستن">×</button>

        <div className="login-lock" aria-hidden="true">▦</div>
        <div className="kicker en">ADMIN ACCESS · ورود مدیر</div>
        <h2 className="login-title">ورود مدیر سامانه</h2>
        <p className="login-note">
          برای ویرایش و ذخیرهٔ اطلاعات سرمایه‌گذاران، گذرواژهٔ مدیریت را وارد کنید.
        </p>

        <label className="login-field">
          <span className="kicker">گذرواژه</span>
          <input
            ref={inputRef}
            type="password"
            inputMode="numeric"
            className={'login-input mono en ' + (err ? 'err' : '')}
            value={pw}
            onChange={(e) => { setPw(e.target.value); setErr(false); }}
            placeholder="••••"
            autoComplete="off"
            disabled={loading}
          />
        </label>

        {err && <div className="login-err">گذرواژه نادرست است. دوباره تلاش کنید.</div>}

        <button type="submit" className="op-cta login-cta" disabled={loading}>
          {loading ? 'در حال بررسی…' : 'ورود به پنل مدیریت'}
          {!loading && <span className="arrow">←</span>}
        </button>
      </form>
    </div>
  );
}

window.LoginModal = LoginModal;