/* ============================================================================
   KN CLEANING — Formulaire de réservation (WhatsApp + e-mail)
   ============================================================================ */

function Booking() {
  const F = window.KN.form;
  const C = window.KN.contact;
  const empty = {
    name: "", phone: "", email: "", city: "",
    vehicle: "", service: "", condition: "", date: "", time: "", message: "",
  };
  const [form, setForm] = useState(empty);
  const [extras, setExtras] = useState([]);
  const [errors, setErrors] = useState({});
  const [prefillMsg, setPrefillMsg] = useState("");

  // Pré-remplissage depuis les CTA (services, packs, options)
  useEffect(() => {
    const handler = (e) => {
      const d = e.detail || {};
      if (d.service) setForm((p) => ({ ...p, service: d.service }));
      if (d.extra) setExtras((p) => (p.includes(d.extra) ? p : [...p, d.extra]));
      if (d.note) setPrefillMsg(d.note);
    };
    window.KNbus.addEventListener("prefill", handler);
    return () => window.KNbus.removeEventListener("prefill", handler);
  }, []);

  const set = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.value }));
  const toggleExtra = (x) =>
    setExtras((p) => (p.includes(x) ? p.filter((y) => y !== x) : [...p, x]));

  // Supplément selon la catégorie du véhicule (modifiable dans data.js)
  const VEHICLE_SUPP = { "Berline": "+10 €", "SUV": "+15 €" };
  const vehicleSupp = VEHICLE_SUPP[form.vehicle] || "";

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = "Votre nom est requis";
    if (!form.phone.trim()) er.phone = "Un numéro de contact est requis";
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  const buildMessage = () => {
    const L = [];
    L.push("Nouvelle demande — KN Cleaning");
    L.push("");
    L.push("Nom : " + form.name);
    L.push("Téléphone : " + form.phone);
    if (form.email) L.push("E-mail : " + form.email);
    if (form.city) L.push("Ville / zone : " + form.city);
    if (form.vehicle) L.push("Type de véhicule : " + form.vehicle + (vehicleSupp ? " (" + vehicleSupp + ")" : ""));
    if (form.service) L.push("Service souhaité : " + form.service);
    if (form.condition) L.push("État du véhicule : " + form.condition);
    if (extras.length) L.push("Options : " + extras.join(", "));
    if (form.date) L.push("Date souhaitée : " + form.date);
    if (form.time) L.push("Heure souhaitée : " + form.time);
    if (prefillMsg) L.push("Note : " + prefillMsg);
    if (form.message) L.push("Message : " + form.message);
    return L.join("\n");
  };

  const submitWhatsApp = () => {
    if (!validate()) { window.scrollToId("reservation"); return; }
    window.open(window.waLink(buildMessage()), "_blank");
  };
  const submitEmail = () => {
    if (!validate()) { window.scrollToId("reservation"); return; }
    window.location.href = window.mailtoLink("Demande de nettoyage — " + form.name, buildMessage());
  };

  const points = [
    { ico: "message-circle", t: "Réponse rapide", s: "Nous revenons vers vous dans les meilleurs délais." },
    { ico: "file-text", t: "Devis clair", s: "Un tarif précis confirmé avant toute intervention." },
    { ico: "shield-check", t: "Sans engagement", s: "Demande gratuite et sans obligation." },
  ];

  return (
    <section className="section section--mist" id="reservation">
      <div className="container">
        <div className="book-grid">
          <div className="book-aside reveal">
            <span className="eyebrow"><Icon name="calendar-check" /> Réservation</span>
            <h2 className="section-title" style={{ marginTop: "var(--space-3)" }}>Réservez votre nettoyage</h2>
            <p className="lead">Remplissez le formulaire et envoyez votre demande directement via WhatsApp ou par e-mail. C'est rapide, sur rendez-vous et sans engagement.</p>
            <ul className="book-points">
              {points.map((p, i) => (
                <li key={i}>
                  <span className="bp-ico"><Icon name={p.ico} /></span>
                  <span>
                    <span className="bp-t" style={{ display: "block" }}>{p.t}</span>
                    <span className="bp-s">{p.s}</span>
                  </span>
                </li>
              ))}
            </ul>
            <a className="btn btn-wa" style={{ marginTop: "var(--space-8)" }}
               href={window.waLink("Bonjour KN Cleaning, je souhaite réserver un nettoyage.")} target="_blank" rel="noopener">
              <WhatsAppGlyph style={{ width: 18, height: 18 }} /> Réserver via WhatsApp
            </a>
          </div>

          <div className="book-card reveal">
            {prefillMsg ? (
              <div className="form-summary"><Icon name="check-circle" /> {prefillMsg}</div>
            ) : null}

            <div className="form-grid">
              <div className="field">
                <label>Nom complet <span className="req">*</span></label>
                <input className={errors.name ? "invalid" : ""} value={form.name} onChange={set("name")} placeholder="Votre nom" />
                {errors.name ? <span className="err">{errors.name}</span> : null}
              </div>
              <div className="field">
                <label>Numéro de téléphone <span className="req">*</span></label>
                <input className={errors.phone ? "invalid" : ""} value={form.phone} onChange={set("phone")} placeholder="+32 ..." inputMode="tel" />
                {errors.phone ? <span className="err">{errors.phone}</span> : null}
              </div>
              <div className="field">
                <label>Adresse e-mail</label>
                <input type="email" value={form.email} onChange={set("email")} placeholder="vous@email.com" />
              </div>
              <div className="field">
                <label>Ville / zone</label>
                <input value={form.city} onChange={set("city")} placeholder="Ex. Bruxelles" />
              </div>
              <div className="field">
                <label>Type de véhicule</label>
                <select value={form.vehicle} onChange={set("vehicle")}>
                  <option value="">Sélectionner…</option>
                  {F.vehicleTypes.map((v) => <option key={v} value={v}>{v}</option>)}
                </select>
                {vehicleSupp ? <span className="field-supp"><Icon name="info" /> Supplément catégorie : {vehicleSupp}</span> : null}
              </div>
              <div className="field">
                <label>Service souhaité</label>
                <select value={form.service} onChange={set("service")}>
                  <option value="">Sélectionner…</option>
                  {F.serviceTypes.map((v) => <option key={v} value={v}>{v}</option>)}
                </select>
              </div>
              <div className="field full">
                <label>État du véhicule</label>
                <select value={form.condition} onChange={set("condition")}>
                  <option value="">Sélectionner…</option>
                  {F.conditions.map((v) => <option key={v} value={v}>{v}</option>)}
                </select>
              </div>
              <div className="field full">
                <label>Options supplémentaires</label>
                <div className="chip-group">
                  {F.extras.map((x) => (
                    <span className="chip-check" key={x}>
                      <input type="checkbox" id={"ex-" + x} checked={extras.includes(x)} onChange={() => toggleExtra(x)} />
                      <label htmlFor={"ex-" + x}><Icon name="check" /> {x}</label>
                    </span>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Date souhaitée</label>
                <input type="date" value={form.date} onChange={set("date")} />
              </div>
              <div className="field">
                <label>Heure souhaitée</label>
                <input type="time" value={form.time} onChange={set("time")} />
              </div>
              <div className="field full">
                <label>Message supplémentaire</label>
                <textarea value={form.message} onChange={set("message")} placeholder="Précisez votre demande, le modèle du véhicule, l'adresse…"></textarea>
              </div>
            </div>

            <div className="form-actions">
              <button className="btn btn-primary" onClick={submitEmail}>
                <Icon name="send" /> Envoyer ma demande
              </button>
              <button className="btn btn-wa" onClick={submitWhatsApp}>
                <WhatsAppGlyph style={{ width: 18, height: 18 }} /> Réserver via WhatsApp
              </button>
            </div>
            <p className="form-hint">
              Votre demande est préparée dans votre messagerie ou dans WhatsApp — vous gardez la main avant l'envoi final. Réponse rapide et sans engagement.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Booking });