// Forgot password page — static SPA, no import/export, globals: React, useT, useLang, navigateTo, PBNav, PBFooter, PBLogo

const ForgotPasswordPage = () => {
  const t = useT();
  const lang = useLang();
  const fp = (t.auth && t.auth.forgotPassword) || {};
  const errs = (t.auth && t.auth.errors) || {};

  const [email, setEmail] = React.useState('');
  const [emailError, setEmailError] = React.useState(null);
  const [banner, setBanner] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setBanner(null);
    setEmailError(null);

    if (!email.trim()) {
      setEmailError(errs.required || '请填写邮箱');
      return;
    }

    setSubmitting(true);
    try {
      const res = await fetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ email: email.trim(), lang }),
      });

      if (res.status === 429) {
        setBanner(errs.rate_limited || (lang === 'en' ? 'Too many requests — please wait and try again.' : '请求过于频繁，请稍后再试。'));
        return;
      }

      // Server always responds 200 on success (no user enumeration)
      setSent(true);
    } catch (_err) {
      setBanner(errs.network || (lang === 'en' ? 'Network error — please try again.' : '网络错误，请重试。'));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="pb-scroll">
      <PBNav />
      <div className="pb-auth-shell">
        <div className="pb-auth-card" data-testid="forgot-card">
          <div style={{ marginBottom: 12 }}><PBLogo size={36} /></div>
          <h1 className="pb-auth-title">{fp.title || (lang === 'en' ? 'Reset password' : '重置密码')}</h1>
          <p className="pb-auth-sub">{fp.sub || ''}</p>

          {banner && (
            <div className="pb-auth-banner error" data-testid="forgot-banner">{banner}</div>
          )}

          {sent ? (
            <div data-testid="forgot-sent" style={{ marginTop: 20, color: 'var(--pb-fg)', lineHeight: 1.6 }}>
              {fp.sent || (lang === 'en' ? 'Reset link sent — check your email. The link expires in 30 minutes.' : '重置链接已发送，请查收邮件。链接 30 分钟内有效。')}
            </div>
          ) : (
            <form className="pb-auth-form" onSubmit={onSubmit} noValidate>
              <div>
                <label className="pb-label" htmlFor="forgot-email">
                  {fp.emailLabel || (lang === 'en' ? 'Email' : '邮箱')}
                </label>
                <input
                  id="forgot-email"
                  className="pb-input"
                  type="email"
                  autoComplete="email"
                  value={email}
                  onChange={(e) => { setEmail(e.target.value); setEmailError(null); }}
                  data-testid="forgot-email"
                  required
                />
                {emailError && <div className="pb-auth-error">{emailError}</div>}
              </div>

              <button
                type="submit"
                className="pb-btn pb-btn-primary"
                style={{ marginTop: 8 }}
                disabled={submitting}
                data-testid="forgot-submit"
              >
                {submitting
                  ? (fp.submitting || (lang === 'en' ? 'Sending…' : '发送中…'))
                  : (fp.submit || (lang === 'en' ? 'Send reset link' : '发送重置链接'))}
              </button>
            </form>
          )}

          <div className="pb-auth-meta" style={{ marginTop: 24 }}>
            <span
              className="pb-link"
              onClick={() => navigateTo('/login')}
              style={{ cursor: 'pointer' }}
            >
              {fp.backToLogin || (lang === 'en' ? 'Back to sign in' : '返回登录')}
            </span>
          </div>
        </div>
      </div>
      <PBFooter />
    </div>
  );
};

window.ForgotPasswordPage = ForgotPasswordPage;