// partner-forgot.jsx — Partner "forgot password" request (emails a reset link)

const PartnerForgotPasswordPage = ({ onHome, onLogin }) => {
  const [email, setEmail]     = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError]     = React.useState(null);
  const [sent, setSent]       = React.useState(false);

  useScrollTopOnMount();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email) { setError(t("PartnerForgot.errNoEmail")); return; }
    setError(null);
    setLoading(true);
    try {
      await OK_API.partnerForgotPassword(email);
      setLoading(false);
      setSent(true);
    } catch (err) {
      setLoading(false);
      setError(err.message || t("PartnerForgot.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 }}>
          {sent ? (
            <>
              <div style={{ marginBottom: 28 }}>
                <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerForgot.sentTitle")}</div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
                  {t("PartnerForgot.sentSubtitleBefore")}{" "}
                  <strong style={{ color: "var(--ink)" }}>{email}</strong>. {t("PartnerForgot.sentSubtitleAfter")}
                </p>
              </div>

              <div data-testid="forgot-sent-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("PartnerForgot.sentBadge")}
              </div>

              <p style={{ margin: "20px 0 0", fontSize: 12.5, color: "var(--mute)", textAlign: "center", lineHeight: 1.6 }}>
                {t("PartnerForgot.didntGetIt")}{" "}
                <HoverLink onClick={() => { setSent(false); setError(null); }}>{t("PartnerForgot.tryDifferentEmail")}</HoverLink>.
              </p>
            </>
          ) : (
            <>
              <div style={{ marginBottom: 32 }}>
                <div data-testid="forgot-title" style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerForgot.title")}</div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
                  {t("PartnerForgot.subtitle")}
                </p>
              </div>

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

                <PartnerField label={t("PartnerForgot.emailLabel")}>
                  <input type="email" placeholder={t("PartnerForgot.emailPlaceholder")} value={email}
                    onChange={(e) => setEmail(e.target.value)} autoComplete="email" style={loginInputStyle} />
                </PartnerField>

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

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

Object.assign(window, { PartnerForgotPasswordPage });