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

// Read `token` from the hash query string (mirrors the getNextPath helper pattern in page-login.jsx)
function getTokenFromHash() {
  const h = window.location.hash || '';
  const qi = h.indexOf('?');
  if (qi < 0) return null;
  const params = new URLSearchParams(h.slice(qi + 1));
  return params.get('token') || null;
}

const ResetPasswordPage = () => {
  const t = useT();
  const lang = useLang();
  const rp = (t.auth && t.auth.resetPassword) || {};
  const errs = (t.auth && t.auth.errors) || {};

  const [form, setForm] = React.useState({ password: '', confirm: '' });
  const [fieldErrors, setFieldErrors] = React.useState({});
  const [banner, setBanner] = React.useState(null);
  const [bannerType, setBannerType] = React.useState('error'); // 'error' | 'success'
  const [submitting, setSubmitting] = React.useState(false);
  const [done, setDone] = React.useState(false);

  // Read token once on mount; show invalidToken banner immediately if missing
  const token = React.useMemo(() => getTokenFromHash(), []);

  React.useEffect(() => {
    if (!token) {
      setBannerType('error');
      setBanner(rp.invalidToken || (lang === 'en'
        ? 'This reset link has expired or already been used. Please request a new one.'
        : '重置链接已失效或已使用，请重新申请。'));
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const setField = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    setFieldErrors((fe) => ({ ...fe, [k]: undefined }));
  };

  // Client-side validation (mirrors register/change-password rules)
  function validateClient() {
    const errors = {};
    const { password, confirm } = form;
    if (!password) {
      errors.password = errs.required || '请填写新密码';
    } else if (password.length < 8) {
      errors.password = errs.password_short || (lang === 'en' ? 'Password must be at least 8 characters.' : '密码至少 8 位。');
    } else if (!/[a-zA-Z]/.test(password) || !/[0-9]/.test(password)) {
      errors.password = errs.password_weak || (lang === 'en' ? 'Password must contain letters and digits.' : '密码需包含字母和数字。');
    }
    if (!confirm) {
      errors.confirm = errs.required || '请确认新密码';
    } else if (confirm !== password && !errors.password) {
      errors.confirm = errs.password_mismatch || (lang === 'en' ? 'Passwords do not match.' : '两次密码不一致。');
    }
    return errors;
  }

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

    if (!token) return; // banner already shown

    const clientErrors = validateClient();
    if (Object.keys(clientErrors).length > 0) {
      setFieldErrors(clientErrors);
      return;
    }

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

      const data = await res.json().catch(() => ({}));

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

      if (res.status === 400 && data.error === 'INVALID_TOKEN') {
        setBannerType('error');
        setBanner(rp.invalidToken || (lang === 'en'
          ? 'This reset link has expired or already been used. Please request a new one.'
          : '重置链接已失效或已使用，请重新申请。'));
        return;
      }

      if (res.status === 400 && data.error === 'VALIDATION' && data.fields) {
        // Map server field codes to translated strings
        const mapped = {};
        Object.entries(data.fields).forEach(([k, code]) => {
          mapped[k] = errs[code] || code;
        });
        setFieldErrors(mapped);
        return;
      }

      if (!res.ok) {
        setBannerType('error');
        setBanner(errs.server || errs.network || (lang === 'en' ? 'Something went wrong.' : '出现错误，请重试。'));
        return;
      }

      // Success
      setBannerType('success');
      setBanner(rp.success || (lang === 'en' ? 'Password reset — redirecting to sign in…' : '密码已重置，正在跳转到登录页…'));
      setDone(true);
      setTimeout(() => navigateTo('/login'), 2000);
    } catch (_err) {
      setBannerType('error');
      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="reset-card">
          <div style={{ marginBottom: 12 }}><PBLogo size={36} /></div>
          <h1 className="pb-auth-title">{rp.title || (lang === 'en' ? 'Set new password' : '设置新密码')}</h1>
          <p className="pb-auth-sub">{rp.sub || ''}</p>

          {banner && (
            <div className={`pb-auth-banner ${bannerType}`} data-testid="reset-banner">{banner}</div>
          )}

          {!done && token && (
            <form className="pb-auth-form" onSubmit={onSubmit} noValidate>
              <div>
                <label className="pb-label" htmlFor="reset-password">
                  {rp.newPassword || (lang === 'en' ? 'New password' : '新密码')}
                </label>
                <input
                  id="reset-password"
                  className="pb-input"
                  type="password"
                  autoComplete="new-password"
                  value={form.password}
                  onChange={setField('password')}
                  data-testid="reset-password"
                  required
                />
                {fieldErrors.password && <div className="pb-auth-error">{fieldErrors.password}</div>}
              </div>

              <div>
                <label className="pb-label" htmlFor="reset-confirm">
                  {rp.confirmPassword || (lang === 'en' ? 'Confirm new password' : '确认新密码')}
                </label>
                <input
                  id="reset-confirm"
                  className="pb-input"
                  type="password"
                  autoComplete="new-password"
                  value={form.confirm}
                  onChange={setField('confirm')}
                  data-testid="reset-confirm"
                  required
                />
                {fieldErrors.confirm && <div className="pb-auth-error">{fieldErrors.confirm}</div>}
              </div>

              <button
                type="submit"
                className="pb-btn pb-btn-primary"
                style={{ marginTop: 8 }}
                disabled={submitting}
                data-testid="reset-submit"
              >
                {submitting
                  ? (rp.submitting || (lang === 'en' ? 'Submitting…' : '提交中…'))
                  : (rp.submit || (lang === 'en' ? 'Reset password' : '重置密码'))}
              </button>
            </form>
          )}

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

window.ResetPasswordPage = ResetPasswordPage;