/* MAKE MEDIA — page location de matériel */

// Les demandes arrivent dans l'espace interne (Location → Demandes), où Make Media confirme et répond par mail.
const RENTAL_API = window.MM_RENTAL_API || "https://espace.makemediafrance.com/api/public";
const priceOf = (it) => parseFloat(String(it.price).replace(",", ".")) || 0;
const todayISO = () => new Date().toLocaleDateString("sv-SE");
const daysBetween = (a, b) => Math.round((Date.parse(b) - Date.parse(a)) / 86400000) + 1;
const ERRORS = {
  invalid_email: "L'adresse e-mail ne semble pas valide.",
  invalid_dates: "Vérifiez les dates : la fin doit être après le début, et pas dans le passé.",
  no_items: "Choisissez au moins un article.",
  missing_name: "Indiquez votre nom.",
  too_many_requests: "Trop de demandes envoyées. Réessayez plus tard ou écrivez-nous.",
};

function RentalRequest({ cart, setCart, all }) {
  const { RENTAL_INFO } = window.MM_DATA;
  const [f, setF] = React.useState({ start: "", end: "", name: "", email: "", phone: "", message: "", website: "" });
  const [state, setState] = React.useState("idle"); // idle | sending | sent | error
  const [err, setErr] = React.useState("");
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const chosen = all.filter((it) => cart[it.name]);
  const days = f.start && f.end && f.end >= f.start ? daysBetween(f.start, f.end) : 0;
  const total = chosen.reduce((t, it) => t + priceOf(it) * cart[it.name], 0) * (days || 1);
  const qty = (name, d) => setCart((c) => { const n = { ...c, [name]: (c[name] || 0) + d }; if (n[name] <= 0) delete n[name]; return n; });

  const submit = async (e) => {
    e.preventDefault();
    if (!chosen.length) { setErr(ERRORS.no_items); setState("error"); return; }
    setState("sending"); setErr("");
    try {
      const r = await fetch(RENTAL_API, {
        method: "POST", headers: { "content-type": "application/json" },
        body: JSON.stringify({ action: "location-request", ...f, items: chosen.map((it) => ({ name: it.name, qty: cart[it.name] })) }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || "server");
      setState("sent"); setCart({});
    } catch (e2) {
      setErr(ERRORS[e2.message] || "La demande n'est pas partie. Réessayez ou écrivez-nous par e-mail.");
      setState("error");
    }
  };

  if (state === "sent") {
    return (
      <div className="rental-book" id="reserver">
        <div className="eyebrow" style={{ marginBottom: 16 }}>Demande envoyée</div>
        <h2 className="rental-book__title">Merci {f.name.split(" ")[0]}, on a bien reçu votre demande.</h2>
        <p className="body" style={{ maxWidth: "58ch" }}>
          On vérifie la disponibilité du matériel et on vous confirme la réservation par e-mail à <b style={{ color: "#fff" }}>{f.email}</b>, en général dans la journée.
        </p>
      </div>
    );
  }

  return (
    <form className="rental-book" id="reserver" onSubmit={submit} noValidate={false}>
      <div className="eyebrow" style={{ marginBottom: 16 }}>Réserver en ligne</div>
      <h2 className="rental-book__title">Votre demande de location</h2>

      <div className="rental-book__cart">
        {chosen.length ? chosen.map((it) => (
          <div className="rental-book__line" key={it.name}>
            <span className="rental-book__name">{it.name}</span>
            <span className="rental-book__qty">
              <button type="button" onClick={() => qty(it.name, -1)} aria-label="Retirer un">−</button>
              <b>{cart[it.name]}</b>
              <button type="button" onClick={() => qty(it.name, 1)} aria-label="Ajouter un">+</button>
            </span>
            <span className="rental-book__price">{it.price}</span>
          </div>
        )) : <p className="body" style={{ margin: 0 }}>Ajoutez du matériel depuis la liste ci-dessus avec le bouton « Ajouter ».</p>}
      </div>

      <div className="form-row">
        <div className="field"><label htmlFor="rb-start">Du</label><input id="rb-start" type="date" min={todayISO()} value={f.start} onChange={(e) => setF({ ...f, start: e.target.value, end: f.end && f.end >= e.target.value ? f.end : e.target.value })} required /></div>
        <div className="field"><label htmlFor="rb-end">Au (inclus)</label><input id="rb-end" type="date" min={f.start || todayISO()} value={f.end} onChange={set("end")} required /></div>
      </div>
      <div className="form-row">
        <div className="field"><label htmlFor="rb-name">Nom ou structure</label><input id="rb-name" value={f.name} onChange={set("name")} autoComplete="name" required /></div>
        <div className="field"><label htmlFor="rb-email">E-mail</label><input id="rb-email" type="email" value={f.email} onChange={set("email")} autoComplete="email" required /></div>
      </div>
      <div className="form-row">
        <div className="field"><label htmlFor="rb-phone">Téléphone</label><input id="rb-phone" type="tel" value={f.phone} onChange={set("phone")} autoComplete="tel" /></div>
        <div className="field"><label htmlFor="rb-msg">Message (facultatif)</label><input id="rb-msg" value={f.message} onChange={set("message")} placeholder="Projet, heure de retrait…" /></div>
      </div>
      {/* Champ piège pour les robots, invisible pour les visiteurs. */}
      <input className="rental-book__trap" tabIndex={-1} autoComplete="off" value={f.website} onChange={set("website")} aria-hidden="true" name="website" />

      <div className="rental-book__foot">
        <div>
          {chosen.length > 0 && <div className="rental-book__total">{days ? `${days} jour${days > 1 ? "s" : ""} · ` : ""}<b>{total} € HT</b> <span>estimation</span></div>}
          {state === "error" && <p className="rental-book__err">{err}</p>}
          <p className="rental-book__note">Sans engagement : la réservation est confirmée par e-mail après vérification des disponibilités. Une caution et une pièce d'identité sont demandées au retrait.</p>
        </div>
        <button className="btn" type="submit" disabled={state === "sending"} style={{ "--bg": "#fff", "--fg": "#0b0b0b", "--bd": "#fff" }}>
          {state === "sending" ? "Envoi…" : <React.Fragment>Envoyer ma demande <span className="arr">→</span></React.Fragment>}
        </button>
      </div>
    </form>
  );
}

function LocationPage() {
  const { RENTAL, RENTAL_INFO } = window.MM_DATA;
  const [cart, setCart] = React.useState({});
  const all = RENTAL.flatMap((g) => g.items);
  const count = Object.values(cart).reduce((a, b) => a + b, 0);
  // La barre « Faire ma demande » disparaît quand le formulaire est à l'écran.
  const [formSeen, setFormSeen] = React.useState(false);
  React.useEffect(() => {
    const el = document.getElementById("reserver");
    if (!el || !window.IntersectionObserver) return;
    const io = new IntersectionObserver(([e]) => setFormSeen(e.isIntersecting), { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const toggle = (name) => setCart((c) => { const n = { ...c }; if (n[name]) delete n[name]; else n[name] = 1; return n; });
  const mapsHref = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(RENTAL_INFO.addressLines.join(", "))}`;

  return (
    <React.Fragment>
      <Header />

      <main className="pp section--ink" data-screen-label="Location de matériel">
        <div className="wrap">
          <a href="index.html" className="pp-back">Retour à l'accueil</a>

          <div className="section__head">
            <div>
              <div className="eyebrow">Location de matériel</div>
              <h1 className="h-section"><DecryptedText text="Louez notre matériel" animateOn="view" sequential speed={22} className="dtxt__revealed" encryptedClassName="dtxt__encrypted" /></h1>
            </div>
            <p className="section__intro" style={{ color: "rgba(255,255,255,.7)" }}>
              Appareils photo, optiques, éclairage et son — révisés et prêts à tourner.
              Réservation en ligne, retrait et retour directement dans nos locaux.
            </p>
          </div>

          <div className="rental">
            {RENTAL.map((group) => (
              <div className="rental__group" key={group.cat}>
                <div className="rental__cat">
                  <h3>{group.cat}</h3>
                </div>
                <ul className="rental__list">
                  {group.items.map((it) => (
                    <li className="rental__item" key={it.name}>
                      <div className="rental__info">
                        <span className="rental__name">{it.name}</span>
                        <span className="rental__spec">{it.spec}</span>
                      </div>
                      <div className="rental__prices">
                        <span className="rental__day">{it.price}</span>
                      </div>
                      <button type="button" className={"rental__add" + (cart[it.name] ? " is-on" : "")} aria-pressed={!!cart[it.name]} onClick={() => toggle(it.name)}>
                        {cart[it.name] ? "✓ Ajouté" : "+ Ajouter"}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <RentalRequest cart={cart} setCart={setCart} all={all} />

          {count > 0 && !formSeen && (
            <a href="#reserver" className="rental-bar">
              <span>{count} article{count > 1 ? "s" : ""} sélectionné{count > 1 ? "s" : ""}</span>
              <b>Faire ma demande ↓</b>
            </a>
          )}

          <div className="rental__cta">
            <p style={{ color: "rgba(255,255,255,.6)", margin: 0 }}>
              Besoin d'un pack sur mesure ou d'un opérateur ? On monte le kit avec vous.
            </p>
            <a href={`mailto:${RENTAL_INFO.email}`} className="btn" style={{ "--bg": "#fff", "--fg": "#0b0b0b", "--bd": "#fff" }}>
              Nous écrire <span className="arr">→</span>
            </a>
          </div>

          <div className="rental__info-block" style={{ marginTop: "clamp(48px,7vh,90px)", borderTop: "1px solid rgba(255,255,255,.14)", paddingTop: "clamp(32px,5vh,56px)" }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Réservation, retrait & retour</div>
            <p className="body" style={{ color: "rgba(255,255,255,.7)", maxWidth: "62ch", marginBottom: "1.2em" }}>
              Les réservations de matériel s'effectuent à l'avance, avec le formulaire ci-dessus ou par e-mail à{" "}
              <a href={`mailto:${RENTAL_INFO.email}`} className="ulink" style={{ color: "#fff" }}>{RENTAL_INFO.email}</a>.
              Le matériel est à récupérer et à retourner directement dans nos locaux Make Media :
            </p>
            <p style={{ color: "#fff", fontWeight: 600, marginBottom: "1.2em" }}>
              {RENTAL_INFO.addressLines.map((l) => <React.Fragment key={l}>{l}<br /></React.Fragment>)}
              <a href={mapsHref} target="_blank" rel="noopener noreferrer" className="ulink" style={{ color: "rgba(255,255,255,.7)", fontWeight: 400 }}>Voir l'adresse sur Google Maps</a>
            </p>
            <p className="body" style={{ color: "rgba(255,255,255,.5)", maxWidth: "62ch" }}>
              {RENTAL_INFO.note}
            </p>
          </div>
        </div>
      </main>

      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LocationPage />);