// partner-signup.jsx — Partner create account page

const PartnerSignUpPage = ({ onHome, onSignUpSuccess, onLogin }) => {
  const [partnerType, setPartnerType] = React.useState(null);
  const [name, setName]               = React.useState("");
  const [company, setCompany]         = React.useState("");
  const [email, setEmail]             = React.useState("");
  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);

  useScrollTopOnMount();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!partnerType) { setError(t("PartnerSignup.errNoType")); return; }
    if (!name || !company || !email || !password || !repeatPassword) { setError(t("PartnerSignup.errMissingFields")); return; }
    if (password !== repeatPassword) { setError(t("PartnerSignup.errPasswordMismatch")); return; }
    setError(null);
    setLoading(true);
    try {
      await OK_API.partnerRegister({
        partnerType: partnerType === "gutachter" ? "Appraiser" : "Workshop",
        fullName: name,
        businessName: company,
        email,
        password,
      });
      setLoading(false);
      onSignUpSuccess && onSignUpSuccess(email);
    } catch (err) {
      setLoading(false);
      setError(err.message || t("PartnerSignup.errFailed"));
    }
  };

  const companyPlaceholder = partnerType === "gutachter" ? t("PartnerSignup.companyPlaceholderGutachter") : t("PartnerSignup.companyPlaceholderWorkshop");

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

        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 36, paddingBottom: 12 }}>
          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>{t("PartnerSignup.title")}</div>
            <p style={{ margin: 0, fontSize: 14, color: "var(--mute)", lineHeight: 1.55 }}>
              {t("PartnerSignup.subtitle")}
            </p>
          </div>

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

            {/* Partner type selector */}
            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              <label style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-3)" }}>{t("PartnerSignup.iAmA")}</label>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <PartnerTypeCard value="gutachter" selected={partnerType === "gutachter"} onSelect={setPartnerType} title={t("PartnerSignup.typeGutachter")} />
                <PartnerTypeCard value="workshop" selected={partnerType === "workshop"} onSelect={setPartnerType} title={t("PartnerSignup.typeWorkshop")} />
              </div>
            </div>

            <PartnerField label={t("PartnerSignup.fullNameLabel")}>
              <input type="text" placeholder={t("PartnerSignup.fullNamePlaceholder")} value={name}
                onChange={(e) => setName(e.target.value)} autoComplete="name" style={loginInputStyle} />
            </PartnerField>

            <PartnerField label={t("PartnerSignup.companyLabel")}>
              <input type="text" placeholder={companyPlaceholder} value={company}
                onChange={(e) => setCompany(e.target.value)} autoComplete="organization" style={loginInputStyle} />
            </PartnerField>

            <PartnerField label={t("PartnerSignup.emailLabel")}>
              <input type="email" placeholder={t("PartnerSignup.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("PartnerSignup.passwordLabel")}</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("PartnerSignup.repeatPasswordLabel")}</label>
              <PasswordInput value={repeatPassword} onChange={(e) => setRepeatPassword(e.target.value)} show={showRepeatPass} onToggle={() => setShowRepeatPass(s => !s)} />
            </div>

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

            <p style={{ margin: 0, fontSize: 12, color: "var(--mute)", lineHeight: 1.55, textAlign: "center" }}>
              {t("PartnerSignup.verifyNotice")}
            </p>
          </form>
        </div>

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