// 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 [providers, setProviders] = React.useState({ github: { enabled: false, authUrl: null } });

  // Probe which OAuth providers are configured server-side; conditionally
  // render the GitHub button only when GITHUB_OAUTH_* env vars are set.
  React.useEffect(() => {
    let cancelled = false;
    fetch('/api/auth/providers', { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : { providers: {} }))
      .then((d) => { if (!cancelled && d && d.providers) setProviders(d.providers); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  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>

          {providers.github && providers.github.enabled && (
            <div data-testid="register-oauth" style={{ marginTop: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--pb-fg-muted)', fontSize: 12, margin: '12px 0' }}>
                <div style={{ flex: 1, height: 1, background: 'var(--pb-border)' }}/>
                <span>{t.auth.oauth.or}</span>
                <div style={{ flex: 1, height: 1, background: 'var(--pb-border)' }}/>
              </div>
              <a
                href={providers.github.authUrl + '?next=' + encodeURIComponent(getNextPath() || '/dashboard')}
                className="pb-btn pb-btn-ghost"
                data-testid="register-oauth-github"
                style={{ width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, textDecoration: 'none' }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.87-1.54-3.87-1.54-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.15 1.18a10.93 10.93 0 0 1 5.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.05.78 2.12 0 1.53-.01 2.76-.01 3.13 0 .31.21.67.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/>
                </svg>
                {t.auth.oauth.signupGithub}
              </a>
            </div>
          )}

          <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;