/* ============================================================
   form.jsx - replacement request form + PDF contract download
   ============================================================ */
const { useState: useStateForm, useEffect: useEffectForm } = React;

const ESTAB = ["Cabinet libéral", "Hôpital", "Clinique / SSR"];

function ReplacementForm({ content = {}, prefill }) {
  const [estab, setEstab] = useStateForm("Cabinet libéral");
  const [vals, setVals] = useStateForm({
    name: "", contact: "", email: "", phone: "",
    from: "", to: "", software: "", message: "",
  });
  const [errs, setErrs] = useStateForm({});
  const [done, setDone] = useStateForm(false);

  useEffectForm(() => {
    if (prefill && prefill.date) {
      const d = prefill.date;
      const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
      setVals((current) => ({
        ...current,
        from: iso,
        message: current.message || `Pré-réservation : ${prefill.dateLabel}, ${prefill.slotLabel} (${prefill.slotTime}).`,
      }));
    }
  }, [prefill]);

  const set = (key) => (event) => {
    setVals((current) => ({ ...current, [key]: event.target.value }));
    setErrs((current) => ({ ...current, [key]: null }));
  };

  const submit = (event) => {
    event.preventDefault();
    const nextErrs = {};
    if (!vals.name.trim()) nextErrs.name = "Champ requis";
    if (!vals.contact.trim()) nextErrs.contact = "Champ requis";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(vals.email)) nextErrs.email = "Email invalide";
    if (!vals.from) nextErrs.from = "Date requise";
    setErrs(nextErrs);
    if (Object.keys(nextErrs).length === 0) {
      setDone(true);
      window.requestAnimationFrame(() => {
        document.querySelectorAll(".reveal:not(.is-in)").forEach((el) => el.classList.add("is-in"));
      });
    }
  };

  if (done) {
    return (
      <div className="formdone reveal is-in">
        <div className="confirm__badge" style={{ fontSize: 14 }}>
          <span className="chk" style={{ width: 22, height: 22 }}>
            <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 7l2.8 2.8L11 3.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </span>
          {content.successTitle || "Demande envoyée"}
        </div>
        <h3 className="h3" style={{ marginTop: 20 }}>Merci, {vals.contact.split(" ")[0] || "votre demande est bien reçue"}.</h3>
        <p className="lead" style={{ marginTop: 12, fontSize: "1.05rem" }}>
          {content.successText || "Je reviens vers vous sous 24 h ouvrées pour confirmer les modalités du remplacement."}
        </p>
        <div className="hr" style={{ margin: "24px 0" }} />
        <p className="small">En attendant, vous pouvez télécharger le contrat type afin de préparer la convention.</p>
        <button
          className="btn btn--ghost"
          style={{ marginTop: 8 }}
          onClick={() => {
            setDone(false);
            setVals({ name: "", contact: "", email: "", phone: "", from: "", to: "", software: "", message: "" });
          }}
        >
          Nouvelle demande
        </button>
      </div>
    );
  }

  return (
    <form className="reveal" onSubmit={submit} noValidate>
      <div className="field">
        <label className="field__label">Type d'établissement</label>
        <div className="seg">
          {ESTAB.map((option) => (
            <button type="button" key={option} className={"seg__opt" + (estab === option ? " is-on" : "")} onClick={() => setEstab(option)}>
              {option}
            </button>
          ))}
        </div>
      </div>

      <div className={"field" + (errs.name ? " field--invalid" : "")}>
        <label className="field__label">Nom de l'établissement <span className="req">*</span></label>
        <input className="input" value={vals.name} onChange={set("name")} placeholder="Cabinet des Terreaux, CHU Lyon Sud..." />
        {errs.name && <div className="field__err">{errs.name}</div>}
      </div>

      <div className="field-row">
        <div className={"field" + (errs.contact ? " field--invalid" : "")}>
          <label className="field__label">Personne à contacter <span className="req">*</span></label>
          <input className="input" value={vals.contact} onChange={set("contact")} placeholder="Prénom Nom" />
          {errs.contact && <div className="field__err">{errs.contact}</div>}
        </div>
        <div className={"field" + (errs.email ? " field--invalid" : "")}>
          <label className="field__label">Email <span className="req">*</span></label>
          <input className="input" type="email" value={vals.email} onChange={set("email")} placeholder="contact@cabinet.fr" />
          {errs.email && <div className="field__err">{errs.email}</div>}
        </div>
      </div>

      <div className="field-row">
        <div className="field">
          <label className="field__label">Téléphone</label>
          <input className="input" value={vals.phone} onChange={set("phone")} placeholder="06 00 00 00 00" />
        </div>
        <div className="field">
          <label className="field__label">Logiciel utilisé</label>
          <input className="input" value={vals.software} onChange={set("software")} placeholder="Vega, Kinépratik..." />
        </div>
      </div>

      <div className="field-row">
        <div className={"field" + (errs.from ? " field--invalid" : "")}>
          <label className="field__label">Du <span className="req">*</span></label>
          <input className="input tnum" type="date" value={vals.from} onChange={set("from")} />
          {errs.from && <div className="field__err">{errs.from}</div>}
        </div>
        <div className="field">
          <label className="field__label">Au</label>
          <input className="input tnum" type="date" value={vals.to} onChange={set("to")} />
        </div>
      </div>

      <div className="field">
        <label className="field__label">Précisions sur le remplacement</label>
        <textarea
          className="textarea"
          value={vals.message}
          onChange={set("message")}
          placeholder="Patientèle, actes principaux, rétrocession envisagée, logement éventuel..."
        />
      </div>

      <button type="submit" className="btn btn--primary btn--lg btn--block">
        {content.submitCta || "Envoyer ma demande de remplacement"} <Arrow />
      </button>
      <p className="small" style={{ marginTop: 14 }}>{content.privacyNote}</p>
    </form>
  );
}

function ContractDownload({ content = {} }) {
  const pieces = Array.isArray(content.pieces) ? content.pieces : [];

  return (
    <div className="reveal reveal--right" style={{ transitionDelay: ".06s" }}>
      <div className="doc-card">
        <div className="doc-card__ext">PDF</div>
        <div className="doc-card__icon"><div className="lines"><i /><i /><i /></div></div>
        <div className="doc-card__title">{content.contractTitle || "Contrat type de remplacement"}</div>
        <div className="doc-card__meta">{content.contractMeta}</div>
        <div className="doc-card__foot">
          <span className="small">{content.contractNote}</span>
          <button className="btn btn--dark" onClick={downloadContractPDF}>
            {content.downloadCta || "Télécharger"}
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M7.5 2v8m0 0L4 6.5M7.5 10L11 6.5M2.5 13h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" /></svg>
          </button>
        </div>
      </div>

      <div className="doc-card">
        <div className="doc-card__title" style={{ fontSize: ".95rem" }}>{content.piecesTitle || "Pièces à prévoir"}</div>
        <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", display: "flex", flexDirection: "column", gap: 11 }}>
          {pieces.map((item) => (
            <li key={item} style={{ display: "flex", gap: 10, alignItems: "baseline", fontSize: 14, color: "var(--ink-2)" }}>
              <span style={{ width: 5, height: 5, background: "var(--accent)", flex: "none", transform: "translateY(-2px)" }} />
              {item}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

Object.assign(window, { ReplacementForm, ContractDownload });