// Maison Dahab — cart drawer + order form + confirmation
const { useState: useCState, useMemo: useCMemo } = React;

// ---- cart drawer ----
function CartDrawer({ cart, setCart, onClose, nav }) {
  const lines = cart.map((l) => ({ ...l, product: DB.product(l.id) })).filter((l) => l.product);
  const total = lines.reduce((s, l) => s + l.product.price * l.qty, 0);

  const setQty = (id, qty) => {
    if (qty <= 0) setCart(cart.filter((l) => l.id !== id));
    else setCart(cart.map((l) => (l.id === id ? { ...l, qty } : l)));
  };

  return (
    <React.Fragment>
      <div className="scrim" onClick={onClose}></div>
      <aside className="drawer drawer--right" role="dialog" aria-label="Panier">
        <div className="drawer__head">
          <h3 className="serif">Votre panier</h3>
          <button className="iconbtn" aria-label="Fermer" onClick={onClose}>{Icon.close}</button>
        </div>
        <div className="drawer__body">
          {lines.length === 0 ? (
            <div className="cart__empty">
              <span className="serif">Votre panier est vide</span>
              Les belles pièces attendent.
              <div style={{ marginTop: "22px" }}>
                <button className="btn" onClick={() => { onClose(); nav("#/collection"); }}>Voir la collection</button>
              </div>
            </div>
          ) : (
            lines.map((l) => (
              <div className="cline" key={l.id}>
                <Slot slotId={l.product.images[0]} placeholder="photo" />
                <div>
                  <div className="cline__name">{l.product.name}</div>
                  <div className="cline__meta">{l.product.attributes.carat} · {l.product.attributes.weight}</div>
                  <div className="cline__qty">
                    <button onClick={() => setQty(l.id, l.qty - 1)} aria-label="Moins">−</button>
                    <span>{l.qty}</span>
                    <button onClick={() => setQty(l.id, Math.min(9, l.qty + 1))} aria-label="Plus">+</button>
                  </div>
                </div>
                <div className="cline__right">
                  <span className="price">{FMT_MAD(l.product.price * l.qty)}</span>
                  <button className="cline__rm" onClick={() => setQty(l.id, 0)}>Retirer</button>
                </div>
              </div>
            ))
          )}
        </div>
        {lines.length > 0 && (
          <div className="drawer__foot">
            <div className="cart__total">
              <span className="lbl">Total</span>
              <span className="price">{FMT_MAD(total)}</span>
            </div>
            <button className="btn btn--solid" style={{ width: "100%" }} onClick={() => { onClose(); nav("#/commande"); }}>
              Passer la commande
            </button>
            <p className="cart__note">Aucun paiement en ligne — nous vous appelons pour confirmer.</p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

// ---- order form ----
function OrderPage({ cart, setCart, nav }) {
  const lines = cart.map((l) => ({ ...l, product: DB.product(l.id) })).filter((l) => l.product);
  const total = lines.reduce((s, l) => s + l.product.price * l.qty, 0);

  const [form, setForm] = useCState({ name: "", phone: "", address: "", notes: "" });
  const [errors, setErrors] = useCState({});
  const [ref, setRef] = useCState(null);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const validate = () => {
    const errs = {};
    if (form.name.trim().length < 3) errs.name = "Votre nom complet, s'il vous plaît.";
    if (!/^(\+212|0)\s?[5-7](\s?\d{2}){4}$/.test(form.phone.replace(/[.-]/g, " ").trim()))
      errs.phone = "Numéro marocain attendu — ex. 06 12 34 56 78.";
    if (form.address.trim().length < 8) errs.address = "Adresse de livraison complète (ville incluse).";
    return errs;
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    const orderRef = "MD-" + new Date().getFullYear() + "-" + String(Math.floor(1000 + Math.random() * 9000));
    setRef(orderRef);
    setCart([]);
    window.scrollTo(0, 0);
  };

  // confirmation state
  if (ref) {
    return (
      <div className="page wrap">
        <div className="confirm">
          <span className="eyebrow">Commande reçue</span>
          <div className="confirm__ref">{ref}</div>
          <hr className="hairline hairline--glint" style={{ width: "120px", margin: "18px auto" }} />
          <h2>Merci, {""}{(form.name.split(" ")[0] || "").trim() || "chère cliente"}.</h2>
          <p>Votre commande est bien enregistrée. <strong style={{ color: "var(--gold-2)", fontWeight: 500 }}>Nous vous appelons sous 24 h</strong> pour confirmer les détails, le prix selon le cours du jour et la livraison.</p>
          <p style={{ fontSize: "12px", marginTop: "10px" }}>Aucun paiement en ligne — tout se règle à la remise, en boutique ou à la livraison.</p>
          <div style={{ marginTop: "30px", display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn" onClick={() => nav("#/collection")}>Continuer la visite</button>
            <a className="btn btn--ghost" href={BOUTIQUE_WHATSAPP} target="_blank" rel="noopener">Nous écrire sur WhatsApp</a>
          </div>
        </div>
      </div>
    );
  }

  if (lines.length === 0) {
    return (
      <div className="page wrap">
        <div className="cart__empty">
          <span className="serif">Votre panier est vide</span>
          Ajoutez une pièce avant de commander.
          <div style={{ marginTop: "22px" }}>
            <button className="btn" onClick={() => nav("#/collection")}>Voir la collection</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page wrap">
      <div className="order">
        <div className="page__head" style={{ textAlign: "center" }}>
          <span className="eyebrow">Dernière étape</span>
          <h1>Votre commande</h1>
          <p style={{ color: "var(--ink-soft)", marginTop: "14px", fontSize: "13.5px" }}>
            Pas de paiement en ligne. Nous vous appelons pour confirmer chaque commande, le prix exact selon le cours du jour, et organiser la remise.
          </p>
        </div>

        <div className="order__recap">
          {lines.map((l) => (
            <div className="order__recapline" key={l.id}>
              <span>{l.product.name} <span style={{ color: "var(--muted)" }}>× {l.qty}</span></span>
              <span className="price">{FMT_MAD(l.product.price * l.qty)}</span>
            </div>
          ))}
          <div className="order__recapline order__recapline--total">
            <span style={{ fontSize: "11px", letterSpacing: "0.26em", textTransform: "uppercase" }}>Total indicatif</span>
            <span className="price">{FMT_MAD(total)}</span>
          </div>
        </div>

        <form onSubmit={submit} noValidate>
          <div className="order__grid">
            <div className="field">
              <label htmlFor="o-name">Nom complet *</label>
              <input id="o-name" className={`input ${errors.name ? "is-invalid" : ""}`} value={form.name} onChange={set("name")} placeholder="Prénom et nom" />
              {errors.name && <span className="err">{errors.name}</span>}
            </div>
            <div className="field">
              <label htmlFor="o-phone">Téléphone *</label>
              <input id="o-phone" className={`input ${errors.phone ? "is-invalid" : ""}`} value={form.phone} onChange={set("phone")} placeholder="06 12 34 56 78" inputMode="tel" />
              {errors.phone && <span className="err">{errors.phone}</span>}
            </div>
            <div className="field field--full">
              <label htmlFor="o-address">Adresse de livraison *</label>
              <input id="o-address" className={`input ${errors.address ? "is-invalid" : ""}`} value={form.address} onChange={set("address")} placeholder="N°, rue, quartier, ville" />
              {errors.address && <span className="err">{errors.address}</span>}
            </div>
            <div className="field field--full">
              <label htmlFor="o-notes">Notes (facultatif)</label>
              <textarea id="o-notes" className="textarea" value={form.notes} onChange={set("notes")} placeholder="Taille souhaitée, gravure, occasion…"></textarea>
            </div>
          </div>
          <div style={{ marginTop: "22px" }}>
            <button type="submit" className="btn btn--solid" style={{ width: "100%" }}>Envoyer la commande — {FMT_MAD(total)}</button>
            <p className="cart__note">En envoyant, vous acceptez d'être rappelé·e au numéro indiqué.</p>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { CartDrawer, OrderPage });