// partner-login.jsx — Partner sign-in page

const PartnerLoginPage = ({ onHome, onLoginSuccess, onSignUp, onNeedsActivation, onForgot }) => {
  const [email, setEmail]       = React.useState("");
  const [password, setPassword] = React.useState("");
  const [showPass, setShowPass] = React.useState(false);
  const [loading, setLoading]   = React.useState(false);
  const [error, setError]       = React.useState(null);
  const [needsActivation, setNeedsActivation] = React.useState(false);

  useScrollTopOnMount();
  React.useEffect(() => {
    const prev = document.title;
    document.title = (getLang() === "de" ? "Anmelden" : "Partner Login") + " | OttoKlar";
    return () => { document.title = prev; };
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || !password) { setError(t("PartnerLogin.errEmptyCreds")); return; }
    setError(null);
    setNeedsActivation(false);
    setLoading(true);
    try {
      await OK_API.partnerLogin(email, password);
      setLoading(false);
      onLoginSuccess && onLoginSuccess();
    } catch (err) {
      setLoading(false);
      const msg = err.message || t("PartnerLogin.errFailed");
      setError(msg);
      // Unverified accounts need the emailed activation code first.
      if (/verif|activat/i.test(msg)) setNeedsActivation(true);
    }
  };

  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 }}>
          <div style={{ marginBottom: 32 }}>
            <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerLogin.title")}</div>
            <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
              {t("PartnerLogin.subtitle")}
            </p>
          </div>

          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {error && (
              <PartnerErrorBox>
                {error}
                {needsActivation && (
                  <div style={{ marginTop: 6 }}>
                    <HoverLink onClick={() => onNeedsActivation && onNeedsActivation(email)}>
                      {t("PartnerLogin.enterCode")}
                    </HoverLink>
                  </div>
                )}
              </PartnerErrorBox>
            )}

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

            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <label style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-3)" }}>{t("PartnerLogin.passwordLabel")}</label>
                <button type="button" data-testid="login-forgot" style={forgotStyle} onClick={() => onForgot && onForgot()}>{t("PartnerLogin.forgot")}</button>
              </div>
              <PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} show={showPass} onToggle={() => setShowPass(s => !s)} />
            </div>

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

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