// partner-activate.jsx — Partner email activation (6-digit code)

const PartnerActivatePage = ({ onHome, email: initialEmail, onActivated, onLogin }) => {
  const [email, setEmail]     = React.useState(initialEmail || "");
  const [digits, setDigits]   = React.useState(["", "", "", "", "", ""]);
  const [loading, setLoading] = React.useState(false);
  const [error, setError]     = React.useState(null);
  const [success, setSuccess] = React.useState(false);
  const [resent, setResent]   = React.useState(false);
  const [resending, setResending] = React.useState(false);
  const [cooldown, setCooldown] = React.useState(0);
  const inputsRef = React.useRef([]);

  useScrollTopOnMount();

  React.useEffect(() => {
    if (cooldown <= 0) return;
    const id = setTimeout(() => setCooldown(c => c - 1), 1000);
    return () => clearTimeout(id);
  }, [cooldown]);

  const code = digits.join("");

  const setDigit = (i, val) => {
    const v = val.replace(/\D/g, "");
    setDigits(prev => {
      const next = [...prev];
      if (v.length <= 1) {
        next[i] = v;
      } else {
        // Paste of several digits — distribute across the boxes
        v.split("").slice(0, 6 - i).forEach((d, k) => { next[i + k] = d; });
      }
      return next;
    });
    if (v && i < 5) {
      const target = Math.min(i + v.length, 5);
      inputsRef.current[target] && inputsRef.current[target].focus();
    }
  };

  const onKeyDown = (i, e) => {
    if (e.key === "Backspace" && !digits[i] && i > 0) {
      inputsRef.current[i - 1] && inputsRef.current[i - 1].focus();
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email) { setError(t("PartnerActivate.errNoEmail")); return; }
    if (code.length !== 6) { setError(t("PartnerActivate.errNoCode")); return; }
    setError(null);
    setLoading(true);
    try {
      await OK_API.partnerActivate(email, code);
      setLoading(false);
      setSuccess(true);
      setTimeout(() => onActivated && onActivated(), 1600);
    } catch (err) {
      setLoading(false);
      setError(err.message || t("PartnerActivate.errFailed"));
    }
  };

  const handleResend = async () => {
    if (!email) { setError(t("PartnerActivate.errNoEmailResend")); return; }
    if (resending) return;
    setError(null);
    setResending(true);
    const minVisible = new Promise((r) => setTimeout(r, 600));
    try {
      await OK_API.partnerResendActivation(email);
    } catch { /* endpoint always reports success; ignore network hiccups */ }
    await minVisible; // keep "Sending…" on screen long enough to be seen
    setResending(false);
    setResent(true);
    setCooldown(30);
    setTimeout(() => setResent(false), 4000);
  };

  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: 28 }}>
            <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerActivate.title")}</div>
            <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
              {t("PartnerActivate.subtitleWithEmail")}{" "}
              {initialEmail ? <strong style={{ color: "var(--ink)" }}>{initialEmail}</strong> : t("PartnerActivate.subtitleNoEmail")}.
              {" "}{t("PartnerActivate.subtitleSuffix")}
            </p>
          </div>

          {success ? (
            <div 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("PartnerActivate.activated")}
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              {error && (
                <PartnerErrorBox>{error}</PartnerErrorBox>
              )}

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

              <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                <label style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-3)" }}>{t("PartnerActivate.codeLabel")}</label>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
                  {digits.map((d, i) => (
                    <input
                      key={i}
                      ref={(el) => { inputsRef.current[i] = el; }}
                      type="text" inputMode="numeric" maxLength={6}
                      value={d}
                      onChange={(e) => setDigit(i, e.target.value)}
                      onKeyDown={(e) => onKeyDown(i, e)}
                      style={{
                        ...loginInputStyle,
                        textAlign: "center", padding: "11px 0",
                        fontSize: 18, fontWeight: 600, fontFamily: "var(--mono)",
                      }}
                    />
                  ))}
                </div>
              </div>

              <PartnerSubmitBtn loading={loading} label={t("PartnerActivate.submit")} loadingLabel={t("PartnerActivate.submitLoading")} testId="partner-activate-submit" />

              <p style={{ margin: 0, fontSize: 12.5, color: "var(--mute)", textAlign: "center", lineHeight: 1.6 }}>
                {resent
                  ? <span style={{ color: "var(--accent-ink)", fontWeight: 600 }}>{t("PartnerActivate.resentConfirm")}</span>
                  : <>{t("PartnerActivate.didntGetCode")}{" "}
                      {cooldown > 0
                        ? <span>{t("PartnerActivate.resendIn", { cooldown })}</span>
                        : <HoverLink onClick={handleResend} disabled={resending}>
                            {resending ? t("PartnerActivate.resending") : t("PartnerActivate.resend")}
                          </HoverLink>}
                    </>}
              </p>
            </form>
          )}
        </div>

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