// RegistrationForm.jsx — Bour Capitève (France, +33)

/* ── Registration form ── */
function RegistrationForm() {
  const FORM_ID = "reg_form_bourcapiteve";

  const [form, setForm]       = React.useState({ prenom: "", nom: "", email: "", phone: "" });
  const [touched, setTouched] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [apiError, setApiError] = React.useState("");

  /* ── Validation ── */
  const validators = {
    prenom: v => v.trim().length >= 2 && !/\d/.test(v.trim()),
    nom:    v => v.trim().length >= 2 && !/\d/.test(v.trim()),
    email:  v => /^\S+@\S+\.[A-Za-z]{2,}$/.test(v.trim()),
    phone:  v => {
      const d = v.replace(/\D/g, "");
      // Accept 9 digits (without leading 0) or 10 digits starting with 0
      return d.length === 9 || (d.length === 10 && d[0] === "0");
    },
  };

  const errMsgs = {
    prenom: "Votre prénom est trop court (minimum 2 lettres, sans chiffres)",
    nom:    "Votre nom est trop court (minimum 2 lettres, sans chiffres)",
    email:  "Veuillez saisir une adresse e-mail valide",
    phone:  "Numéro invalide — 9 chiffres sans le 0 (ex : 612345678)",
  };

  const isValid  = k => validators[k](form[k]);
  const allValid = Object.keys(validators).every(isValid);
  const showErr  = k => touched[k] && !isValid(k);

  /* ── Handlers ── */
  const onChange = (k, filter) => e => {
    let v = e.target.value;
    if (filter) v = v.replace(filter, "");
    setForm(f => ({ ...f, [k]: v }));
    setApiError("");
  };

  const onBlur = k => () => setTouched(t => ({ ...t, [k]: true }));

  /* ── Cookie helpers (duplicate-email guard) ── */
  const getCookie = name => {
    const m = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
    return m ? decodeURIComponent(m[2]) : null;
  };
  const setCookie = (name, value, sec) => {
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${new Date(Date.now() + sec * 1000).toUTCString()}; path=/`;
  };

  /* ── Submit ── */
  const handleSubmit = async () => {
    setTouched({ prenom: true, nom: true, email: true, phone: true });
    if (!allValid) return;

    const emailTrimmed = form.email.trim();
    if (getCookie("bc_email_recent") === emailTrimmed) {
      setApiError("Vous avez déjà soumis une demande. Veuillez attendre l'appel d'un conseiller.");
      return;
    }

    setLoading(true);
    setApiError("");

    if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
      window.location.href = "thank-you.html";
      return;
    }

    try {
      const tracking = {};
      ["subid", "campaign_name", "adset_name", "ad_name"].forEach(k => {
        const v = localStorage.getItem("bc_" + k);
        if (v) tracking[k] = v;
      });

      const phoneDigits = form.phone.replace(/\D/g, "");

      const res = await fetch("api/send.php", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          prenom:   form.prenom.trim(),
          nom:      form.nom.trim(),
          email:    emailTrimmed,
          phone:    phoneDigits,
          website:  "",
          form_id:  FORM_ID,
          ...tracking,
        }),
      });

      const json = await res.json();
      if (json.ok) {
        setCookie("bc_email_recent", emailTrimmed, 3600);
        window.location.href = json.url || "thank-you.html";
      } else if (json.errors) {
        const t = {};
        Object.keys(json.errors).forEach(k => { t[k] = true; });
        setTouched(t);
        setApiError(Object.values(json.errors)[0] || "");
      } else {
        setApiError(json.error || "Une erreur est survenue. Veuillez réessayer.");
      }
    } catch {
      setApiError("Erreur de connexion. Vérifiez votre internet et réessayez.");
    } finally {
      setLoading(false);
    }
  };

  /* ── Styles ── */
  const borderStyle = k => {
    if (!touched[k]) return "1.5px solid #ccc";
    return isValid(k) ? "2px solid #28a745" : "2px solid #e53935";
  };

  const baseInp = (k, extra = {}) => ({
    width: "100%", height: 52, background: "#fff", borderRadius: 4,
    border: borderStyle(k), padding: "0 16px",
    fontFamily: "source-sans-pro, Arial, sans-serif", fontSize: 15, color: "#202020",
    outline: "none", boxSizing: "border-box", opacity: loading ? 0.7 : 1,
    ...extra,
  });

  const ErrorMsg = ({ k }) => showErr(k) ? (
    React.createElement("div", {
      style: {
        fontFamily: "Arial, sans-serif", fontSize: 11, color: "#fff",
        background: "#eb162b", padding: "4px 10px", borderRadius: 3, marginTop: 4,
      }
    }, errMsgs[k])
  ) : null;

  const FrFlag = () => React.createElement("svg", {
    width: 22, height: 15, viewBox: "0 0 22 15", style: { display: "block", borderRadius: 2, flexShrink: 0 }
  },
    React.createElement("rect", { width: 7, height: 15, fill: "#002395" }),
    React.createElement("rect", { x: 7, width: 8, height: 15, fill: "#fff" }),
    React.createElement("rect", { x: 15, width: 7, height: 15, fill: "#ED2939" })
  );

  return React.createElement("div", null,

    /* Honeypot */
    React.createElement("input", { type: "text", name: "website", style: { display: "none" }, tabIndex: -1, autoComplete: "off", readOnly: true }),

    /* Prénom */
    React.createElement("div", { style: { marginBottom: 10 } },
      React.createElement("input", {
        value: form.prenom, onChange: onChange("prenom", /[^a-zA-ZÀ-žА-яЁё\s'-]/g),
        onBlur: onBlur("prenom"), placeholder: "Prénom",
        disabled: loading, style: baseInp("prenom"),
      }),
      React.createElement(ErrorMsg, { k: "prenom" })
    ),

    /* Nom */
    React.createElement("div", { style: { marginBottom: 10 } },
      React.createElement("input", {
        value: form.nom, onChange: onChange("nom", /[^a-zA-ZÀ-žА-яЁё\s'-]/g),
        onBlur: onBlur("nom"), placeholder: "Nom",
        disabled: loading, style: baseInp("nom"),
      }),
      React.createElement(ErrorMsg, { k: "nom" })
    ),

    /* Email */
    React.createElement("div", { style: { marginBottom: 10 } },
      React.createElement("input", {
        value: form.email, onChange: onChange("email"),
        onBlur: onBlur("email"), placeholder: "Adresse e-mail",
        type: "email", disabled: loading, style: baseInp("email"),
      }),
      React.createElement(ErrorMsg, { k: "email" })
    ),

    /* Téléphone +33 */
    React.createElement("div", { style: { marginBottom: 16 } },
      React.createElement("div", {
        style: {
          width: "100%", height: 52, background: "#fff", borderRadius: 4,
          border: borderStyle("phone"), display: "flex", alignItems: "center",
          overflow: "hidden", opacity: loading ? 0.7 : 1,
        }
      },
        React.createElement("div", {
          style: { height: 52, padding: "0 12px", borderRight: "1px solid #e0e0e0", display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }
        },
          React.createElement(FrFlag),
          React.createElement("span", { style: { fontFamily: "Arial, sans-serif", fontSize: 14, color: "#111", fontWeight: 600 } }, "+33")
        ),
        React.createElement("input", {
          value: form.phone, onChange: onChange("phone", /[^\d]/g),
          onBlur: onBlur("phone"), placeholder: "6 12 34 56 78",
          type: "tel", disabled: loading,
          style: { flex: 1, background: "transparent", border: "none", padding: "0 12px", fontFamily: "source-sans-pro, Arial, sans-serif", fontSize: 15, color: "#202020", outline: "none" }
        })
      ),
      React.createElement("div", { style: { fontSize: 11, color: "#888", marginTop: 4, fontFamily: "Arial, sans-serif" } }, "9 chiffres sans le 0 initial (ex : 612345678)"),
      React.createElement(ErrorMsg, { k: "phone" })
    ),

    /* API error */
    apiError && React.createElement("div", {
      style: { fontFamily: "Arial, sans-serif", fontSize: 13, color: "#c62828", background: "#ffebee", border: "1px solid #ef9a9a", borderRadius: 4, padding: "8px 12px", marginBottom: 10, lineHeight: 1.4 }
    }, apiError),

    /* Submit */
    React.createElement("button", {
      onClick: handleSubmit, disabled: loading,
      style: {
        width: "100%", height: 52,
        background: loading ? "#888" : "#d93025",
        border: "none", borderRadius: 4, color: "#fff",
        fontFamily: "source-sans-pro, Arial, sans-serif", fontWeight: 700, fontSize: 16,
        cursor: loading ? "not-allowed" : "pointer",
        opacity: (!allValid && !loading) ? 0.7 : 1,
        transition: "background 0.15s, opacity 0.15s",
        letterSpacing: "0.3px",
      }
    }, loading ? "Traitement en cours…" : "S'INSCRIRE GRATUITEMENT →"),

    React.createElement("p", {
      style: { fontSize: 11, color: "#999", textAlign: "center", marginTop: 8, fontFamily: "Arial, sans-serif" }
    }, "En vous inscrivant, vous acceptez d'être contacté par un conseiller Bour Capitève")
  );
}

Object.assign(window, { RegistrationForm });

(function mount() {
  const el = document.getElementById('bc-form-root');
  if (!el) return;
  if (typeof ReactDOM.createRoot === 'function') {
    ReactDOM.createRoot(el).render(React.createElement(RegistrationForm));
  } else {
    ReactDOM.render(React.createElement(RegistrationForm), el);
  }
})();