// partner-reset.jsx — Partner "set a new password" page (target of the emailed
// reset link, /reset-password?token=<token>). Completes the flow started on the
// forgot-password page via POST /v1/partner/reset-password { token, newPassword }.

const PartnerResetPasswordPage = ({ onHome, token, onLogin, onResetSuccess }) => {
  const [password, setPassword]             = React.useState("");
  const [repeatPassword, setRepeatPassword] = React.useState("");
  const [showPass, setShowPass]             = React.useState(false);
  const [showRepeatPass, setShowRepeatPass] = React.useState(false);
  const [loading, setLoading]               = React.useState(false);
  const [error, setError]                   = React.useState(null);
  const [success, setSuccess]               = React.useState(false);

  useScrollTopOnMount();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!password || !repeatPassword) { setError(t("PartnerReset.errMissingFields")); return; }
    if (password !== repeatPassword) { setError(t("PartnerReset.errPasswordMismatch")); return; }
    setError(null);
    setLoading(true);
    try {
      await OK_API.partnerResetPassword(token, password);
      setLoading(false);
      setSuccess(true);
      setTimeout(() => onResetSuccess && onResetSuccess(), 1600);
    } catch (err) {
      setLoading(false);
      setError(err.message || t("PartnerReset.errFailed"));
    }
  };

  return (
    <PartnerPageShell>
      <div style={{ flex: "0 0 400px", display: "flex", flexDirection: "column", padding: "40px 48px", background: "#fff" }}>
        <PartnerLogoHome onHome={onHome} />

        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 48, paddingBottom: 48 }}>
          {!token ? (
            <>
              <div style={{ marginBottom: 20 }}>
                <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerReset.invalidTitle")}</div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
                  {t("PartnerReset.invalidSubtitle")}
                </p>
              </div>
            </>
          ) : success ? (
            <div style={{ marginBottom: 8 }}>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 16 }}>{t("PartnerReset.successTitle")}</div>
              <div data-testid="reset-success-badge" style={{
                display: "flex", alignItems: "center", gap: 10,
                background: "var(--accent-tint)", borderRadius: 10, padding: "14px 16px",
                fontSize: 14, fontWeight: 600, color: "var(--accent-ink)",
              }}>
                <Ic.check width="16" height="16" /> {t("PartnerReset.successBadge")}
              </div>
            </div>
          ) : (
            <>
              <div style={{ marginBottom: 32 }}>
                <div data-testid="reset-title" style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerReset.title")}</div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
                  {t("PartnerReset.subtitle")}
                </p>
              </div>

              <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                {error && (
                  <PartnerErrorBox>{error}</PartnerErrorBox>
                )}

                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                  <label style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-3)" }}>{t("PartnerReset.newPasswordLabel")}</label>
                  <PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} show={showPass} onToggle={() => setShowPass(s => !s)} />
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                  <label style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-3)" }}>{t("PartnerReset.repeatPasswordLabel")}</label>
                  <PasswordInput value={repeatPassword} onChange={(e) => setRepeatPassword(e.target.value)} show={showRepeatPass} onToggle={() => setShowRepeatPass(s => !s)} />
                </div>

                <PartnerSubmitBtn loading={loading} label={t("PartnerReset.submit")} loadingLabel={t("PartnerReset.submitLoading")} testId="partner-reset-submit" />
              </form>
            </>
          )}
        </div>

        <p style={{ margin: 0, fontSize: 12.5, color: "var(--mute)", textAlign: "center" }}>
          <HoverLink onClick={() => onLogin && onLogin()}>{t("PartnerReset.backToSignIn")}</HoverLink>
        </p>
      </div>
      <PartnerBrandPanel />
    </PartnerPageShell>
  );
};

Object.assign(window, { PartnerResetPasswordPage });