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

const RegisterPage = () => {
  const t = useT();
  const lang = useLang();
  const a = t.auth.register;
  const errs = t.auth.errors;
  const { register, user } = useAuth();

  React.useEffect(() => {
    if (user) navigateTo(getNextPath() || '/dashboard');
  }, [user]);

  const [form, setForm] = React.useState({
    email: '', name: '', phone: '', password: '', confirm: '',
    studentType: 'gaokao', gradeYear: '', agreeTerms: false,
  });
  const [errors, setErrors] = React.useState({});
  const [banner, setBanner] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);

  const setField = (k) => (e) => {
    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
    setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const validate = () => {
    const e = {};
    if (!form.email) { e.email = errs.required; }
    else if (!/^[\w.+-]+@[\w-]+\.[\w.-]+$/.test(form.email)) { e.email = errs.email_invalid; }
    if (!form.name) { e.name = errs.required; }
    if (form.phone && !/^[\d\s+\-()]{6,20}$/.test(form.phone)) { e.phone = errs.phone_invalid; }
    if (!form.password) { e.password = errs.required; }
    else if (form.password.length < 8) { e.password = errs.password_short; }
    else if (!/[a-zA-Z]/.test(form.password) || !/\d/.test(form.password)) { e.password = errs.password_weak; }
    if (!form.confirm) { e.confirm = errs.required; }
    else if (form.confirm !== form.password) { e.confirm = errs.password_mismatch; }
    if (!form.studentType) { e.studentType = errs.required; }
    if (!form.gradeYear) { e.gradeYear = errs.required; }
    if (!form.agreeTerms) { e.agreeTerms = errs.not_agreed; }
    return e;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setBanner(null);
    const fieldErrors = validate();
    if (Object.keys(fieldErrors).length > 0) { setErrors(fieldErrors); return; }
    setSubmitting(true);
    try {
      await register({
        email: form.email,
        password: form.password,
        name: form.name,
        phone: form.phone || undefined,
        studentType: form.studentType,
        gradeYear: form.gradeYear,
        agreeTerms: form.agreeTerms,
      });
      navigateTo(getNextPath() || '/dashboard');
    } catch (err) {
      if (err && err.status === 409) {
        setErrors({ email: errs.email_taken });
      } else if (err && err.status === 400 && err.fields) {
        const mapped = {};
        Object.entries(err.fields).forEach(([k, code]) => { mapped[k] = errs[code] || errs.unknown; });
        setErrors(mapped);
      } else if (err && err.status === 429) {
        setBanner(errs.rate_limited);
      } else {
        setBanner(errs.network || errs.unknown);
      }
    } finally {
      setSubmitting(false);
    }
  };

  const gradeKeys = ['senior1', 'senior2', 'senior3', 'college', 'graduated'];

  return (
    <div className="pb-scroll">
      <PBNav />
      <div className="pb-auth-shell">
        <div className="pb-auth-card wide" data-testid="register-card">
          <div style={{ marginBottom: 12 }}><PBLogo size={36} /></div>
          <h1 className="pb-auth-title">{a.title}</h1>
          <p className="pb-auth-sub">{a.sub}</p>

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

          <form className="pb-auth-form" onSubmit={onSubmit} noValidate>

            {/* Email — full width */}
            <div>
              <label className="pb-label" htmlFor="register-email">{a.email}</label>
              <input
                id="register-email"
                className="pb-input"
                type="email"
                autoComplete="email"
                value={form.email}
                onChange={setField('email')}
                data-testid="register-email"
                required
              />
              {errors.email && <div className="pb-auth-error">{errors.email}</div>}
            </div>

            {/* Name + Phone — two columns */}
            <div className="pb-auth-row">
              <div>
                <label className="pb-label" htmlFor="register-name">{a.name}</label>
                <input
                  id="register-name"
                  className="pb-input"
                  type="text"
                  autoComplete="name"
                  placeholder={a.name_placeholder}
                  value={form.name}
                  onChange={setField('name')}
                  data-testid="register-name"
                  required
                />
                {errors.name && <div className="pb-auth-error">{errors.name}</div>}
              </div>
              <div>
                <label className="pb-label" htmlFor="register-phone">
                  {a.phone}{' '}
                  <span style={{ fontWeight: 400, color: 'var(--pb-fg-muted)' }}>{a.phone_optional}</span>
                </label>
                <input
                  id="register-phone"
                  className="pb-input"
                  type="tel"
                  autoComplete="tel"
                  placeholder={a.phone_placeholder}
                  value={form.phone}
                  onChange={setField('phone')}
                  data-testid="register-phone"
                />
                {errors.phone && <div className="pb-auth-error">{errors.phone}</div>}
              </div>
            </div>

            {/* Password + Confirm — two columns */}
            <div className="pb-auth-row">
              <div>
                <label className="pb-label" htmlFor="register-password">{a.password}</label>
                <input
                  id="register-password"
                  className="pb-input"
                  type="password"
                  autoComplete="new-password"
                  value={form.password}
                  onChange={setField('password')}
                  aria-describedby="register-password-hint"
                  data-testid="register-password"
                  required
                />
                <small
                  id="register-password-hint"
                  style={{ fontSize: 11, color: 'var(--pb-fg-muted)', display: 'block', marginTop: 4 }}
                >
                  {a.password_hint}
                </small>
                {errors.password && <div className="pb-auth-error">{errors.password}</div>}
              </div>
              <div>
                <label className="pb-label" htmlFor="register-confirm">{a.confirm}</label>
                <input
                  id="register-confirm"
                  className="pb-input"
                  type="password"
                  autoComplete="new-password"
                  value={form.confirm}
                  onChange={setField('confirm')}
                  data-testid="register-confirm"
                  required
                />
                {errors.confirm && <div className="pb-auth-error">{errors.confirm}</div>}
              </div>
            </div>

            {/* Student type radios */}
            <div>
              <div className="pb-label" style={{ marginBottom: 8 }}>{a.student_type}</div>
              <div className="pb-auth-radios">
                {['gaokao', 'abroad'].map((type) => (
                  <div
                    key={type}
                    className={'pb-auth-radio' + (form.studentType === type ? ' active' : '')}
                    onClick={() => { setForm((f) => ({ ...f, studentType: type })); setErrors((er) => ({ ...er, studentType: undefined })); }}
                    data-testid={'register-type-' + type}
                    role="radio"
                    aria-checked={form.studentType === type}
                    tabIndex={0}
                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setForm((f) => ({ ...f, studentType: type })); } }}
                  >
                    {a[type]}
                  </div>
                ))}
              </div>
              {errors.studentType && <div className="pb-auth-error">{errors.studentType}</div>}
            </div>

            {/* Grade select */}
            <div>
              <label className="pb-label" htmlFor="register-grade">{a.grade}</label>
              <select
                id="register-grade"
                className="pb-select"
                value={form.gradeYear}
                onChange={setField('gradeYear')}
                data-testid="register-grade"
                required
              >
                <option value="" disabled>{a.grade_select}</option>
                {gradeKeys.map((k) => (
                  <option key={k} value={k}>{a.grade_options[k]}</option>
                ))}
              </select>
              {errors.gradeYear && <div className="pb-auth-error">{errors.gradeYear}</div>}
            </div>

            {/* Agree terms */}
            <div>
              <label className="pb-auth-checkbox">
                <input
                  type="checkbox"
                  checked={form.agreeTerms}
                  onChange={setField('agreeTerms')}
                  data-testid="register-agree"
                />
                <span>
                  {a.agree_terms}{' '}
                  <span className="pb-link" onClick={(e) => e.stopPropagation()}>{a.agree_link}</span>
                </span>
              </label>
              {errors.agreeTerms && <div className="pb-auth-error">{errors.agreeTerms}</div>}
            </div>

            <button
              type="submit"
              className="pb-btn pb-btn-primary"
              style={{ marginTop: 8, width: '100%' }}
              disabled={submitting}
              data-testid="register-submit"
            >
              {submitting ? a.submitting : a.submit}
            </button>
          </form>

          <div className="pb-auth-meta" style={{ marginTop: 24 }}>
            {a.has_account_q}{' '}
            <span
              className="pb-link"
              onClick={() => navigateTo('/login' + currentNextSuffix())}
              data-testid="register-to-login"
            >
              {a.sign_in_link}
            </span>
          </div>
        </div>
      </div>
      <PBFooter />
    </div>
  );
};

function getNextPath() {
  const h = window.location.hash || '';
  const qi = h.indexOf('?');
  if (qi < 0) return null;
  const params = new URLSearchParams(h.slice(qi + 1));
  const next = params.get('next');
  if (!next) return null;
  const decoded = decodeURIComponent(next);
  return decoded.startsWith('#') ? decoded.slice(1) : decoded;
}

function currentNextSuffix() {
  const next = getNextPath();
  return next ? '?next=' + encodeURIComponent('#' + next) : '';
}

window.RegisterPage = RegisterPage;