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

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

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

  const [form, setForm] = React.useState({ email: '', password: '', rememberMe: 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 onSubmit = async (e) => {
    e.preventDefault();
    setBanner(null);
    setErrors({});
    if (!form.email) { setErrors({ email: errs.required }); return; }
    if (!form.password) { setErrors({ password: errs.required }); return; }
    setSubmitting(true);
    try {
      await login(form);
      navigateTo(getNextPath() || '/dashboard');
    } catch (err) {
      if (err && err.status === 401) {
        setBanner(errs.wrong_credentials);
      } else if (err && err.status === 423) {
        const mins = Math.max(1, Math.ceil((err.retryAfter || 300) / 60));
        setBanner(typeof errs.locked_minutes === 'function' ? errs.locked_minutes(mins) : errs.account_locked);
      } else if (err && err.status === 429) {
        setBanner(errs.rate_limited);
      } 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 {
        setBanner(errs.network);
      }
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="pb-scroll">
      <PBNav />
      <div className="pb-auth-shell">
        <div className="pb-auth-card" data-testid="login-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="login-banner">{banner}</div>
          )}

          <form className="pb-auth-form" onSubmit={onSubmit} noValidate>
            <div>
              <label className="pb-label" htmlFor="login-email">{a.email}</label>
              <input
                id="login-email"
                className="pb-input"
                type="email"
                autoComplete="email"
                value={form.email}
                onChange={setField('email')}
                data-testid="login-email"
                required
              />
              {errors.email && <div className="pb-auth-error">{errors.email}</div>}
            </div>

            <div>
              <label className="pb-label" htmlFor="login-password">{a.password}</label>
              <input
                id="login-password"
                className="pb-input"
                type="password"
                autoComplete="current-password"
                value={form.password}
                onChange={setField('password')}
                data-testid="login-password"
                required
              />
              {errors.password && <div className="pb-auth-error">{errors.password}</div>}
            </div>

            <label className="pb-auth-checkbox">
              <input type="checkbox" checked={form.rememberMe} onChange={setField('rememberMe')} />
              <span>{a.remember}</span>
            </label>

            <button
              type="submit"
              className="pb-btn pb-btn-primary"
              style={{ marginTop: 8 }}
              disabled={submitting}
              data-testid="login-submit"
            >
              {submitting ? a.submitting : a.submit}
            </button>
          </form>

          <div className="pb-auth-meta" style={{ marginTop: 24 }}>
            {a.no_account_q}{' '}
            <span
              className="pb-link"
              onClick={() => navigateTo('/register' + currentNextSuffix())}
              data-testid="login-to-register"
            >
              {a.sign_up_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.LoginPage = LoginPage;