/* ============================================================
   3DAX — Cart drawer + Checkout (Stripe / PayPal mockup)
   ============================================================ */

function lineImg(it){
  if(it.images && it.images.length) return it.images[0];
  return it.image || null;
}

/* ---------- Cart drawer ---------- */
function CartDrawer({ open, items, onClose, onQty, onRemove, onCheckout }){
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const shipping = subtotal > 60 || subtotal === 0 ? 0 : 4.95;
  useEffect(() => {
    if(open){ document.body.style.overflow = "hidden"; }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <div className={"cart" + (open ? " open" : "")} aria-hidden={!open}>
      <div className="cart__scrim" onClick={onClose} />
      <aside className="cart__panel" role="dialog" aria-label="Carrito">
        <div className="cart__head">
          <h3 className="display">Tu botín <span>({items.reduce((s,i)=>s+i.qty,0)})</span></h3>
          <button className="cart__close" onClick={onClose} aria-label="Cerrar">
            <svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>

        {items.length === 0 ? (
          <div className="cart__empty">
            <div className="cart__empty-glyph">⚓</div>
            <p>Tu cofre está vacío.</p>
            <button className="btn btn-ghost" onClick={onClose}>Explorar colección</button>
          </div>
        ) : (
          <>
            <div className="cart__items">
              {items.map((it) => (
                <div className="line" key={it.key}>
                  <div className="line__media">
                    {lineImg(it) ? <img src={lineImg(it)} alt="" />
                      : <div className="line__ph" style={{ background:`linear-gradient(135deg, ${it.way.from}, ${it.way.to})` }} />}
                  </div>
                  <div className="line__info">
                    <div className="line__name">{it.name}</div>
                    <div className="line__way">{it.way.name}</div>
                    <div className="line__bottom">
                      <div className="qty qty--sm">
                        <button onClick={() => onQty(it.key, it.qty-1)} aria-label="Menos">−</button>
                        <span>{it.qty}</span>
                        <button onClick={() => onQty(it.key, it.qty+1)} aria-label="Más">+</button>
                      </div>
                      <div className="line__price">{eur(it.price * it.qty)}</div>
                    </div>
                  </div>
                  <button className="line__rm" onClick={() => onRemove(it.key)} aria-label="Quitar">×</button>
                </div>
              ))}
            </div>

            <div className="cart__foot">
              {shipping === 0 && subtotal > 0 &&
                <div className="cart__freeship">✦ Envío gratis conseguido</div>}
              <div className="cart__rowline"><span>Subtotal</span><span>{eur(subtotal)}</span></div>
              <div className="cart__rowline"><span>Envío</span><span>{shipping === 0 ? "Gratis" : eur(shipping)}</span></div>
              <div className="cart__total"><span>Total</span><span>{eur(subtotal + shipping)}</span></div>
              <button className="btn btn-primary btn-block btn-lg" onClick={onCheckout}>
                Tramitar pedido <span className="arr">→</span>
              </button>
              <div className="cart__safe">🔒 Pago seguro · Stripe & PayPal</div>
            </div>
          </>
        )}
      </aside>
    </div>
  );
}

/* ---------- helpers for card formatting ---------- */
function fmtCard(v){ return v.replace(/\D/g,"").slice(0,16).replace(/(.{4})/g,"$1 ").trim(); }
function fmtExp(v){ const d = v.replace(/\D/g,"").slice(0,4); return d.length>2 ? d.slice(0,2)+"/"+d.slice(2) : d; }
function cardBrand(v){
  const n = v.replace(/\D/g,"");
  if(/^4/.test(n)) return "VISA";
  if(/^(5[1-5]|2[2-7])/.test(n)) return "Mastercard";
  if(/^3[47]/.test(n)) return "Amex";
  return "";
}

/* ---------- Checkout overlay ---------- */
function Checkout({ items, user, onClose, onComplete }){
  const [step, setStep] = useState(0);           // 0 info, 1 pago, 2 ok
  const [method, setMethod] = useState("card");  // card | paypal
  const [paying, setPaying] = useState(false);
  const [order] = useState(() => "3DAX-" + Math.floor(100000 + Math.random()*899999));
  const [form, setForm] = useState({ email:"", name:"", addr:"", city:"", zip:"", country:"España" });
  const [card, setCard] = useState({ num:"", exp:"", cvc:"", holder:"" });
  const [err, setErr] = useState({});

  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const shipping = subtotal > 60 || subtotal === 0 ? 0 : 4.95;
  const total = subtotal + shipping;

  useEffect(() => {
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if(e.key === "Escape" && step < 2) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [step]);

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

  const validInfo = () => {
    const e = {};
    if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = "Email no válido";
    if(form.name.trim().length < 2) e.name = "Indica tu nombre";
    if(form.addr.trim().length < 4) e.addr = "Dirección incompleta";
    if(form.city.trim().length < 2) e.city = "Ciudad requerida";
    if(!/^\d{4,6}$/.test(form.zip)) e.zip = "C.P. no válido";
    setErr(e);
    return Object.keys(e).length === 0;
  };
  const validCard = () => {
    const e = {};
    if(card.num.replace(/\s/g,"").length < 15) e.num = "Número incompleto";
    if(!/^\d{2}\/\d{2}$/.test(card.exp)) e.exp = "MM/AA";
    if(card.cvc.length < 3) e.cvc = "CVC";
    if(card.holder.trim().length < 2) e.holder = "Titular";
    setErr(e);
    return Object.keys(e).length === 0;
  };

  const pay = () => {
    if(method === "card" && !validCard()) return;
    setPaying(true);
    setTimeout(async () => {
      // create the real order, tied to the logged-in user if any
      try {
        await Store.createOrder({
          code: order, userId: user ? user.id : null,
          email: form.email, name: form.name, address: form.addr, city: form.city, zip: form.zip, country: form.country,
          items: items.map((it) => ({ id: it.id, name: it.name, price: it.price, qty: it.qty, way: it.way })),
          subtotal, shipping, total,
        });
      } catch(e) {}
      setPaying(false); setStep(2);
    }, method === "paypal" ? 1700 : 1500);
  };

  const brand = cardBrand(card.num);

  return (
    <div className="co" role="dialog" aria-modal="true">
      <div className="co__scrim" onClick={() => step < 2 && onClose()} />
      <div className="co__panel">
        {/* header */}
        <div className="co__bar">
          <div className="brand"><span className="brand__mark">3<span>D</span>AX</span></div>
          {step < 2 ? (
            <div className="co__steps">
              <span className={"co__step" + (step>=0?" on":"")}>1 · Datos</span>
              <span className="co__sep" />
              <span className={"co__step" + (step>=1?" on":"")}>2 · Pago</span>
            </div>
          ) : <div className="co__steps"><span className="co__step on">Pedido confirmado</span></div>}
          <button className="co__close" onClick={() => step<2 ? onClose() : onComplete()} aria-label="Cerrar">
            <svg width="22" height="22" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>

        {step === 2 ? (
          <div className="co__done">
            <div className="co__check">✓</div>
            <h2 className="display">¡A toda vela!</h2>
            <p className="lead">Tu pedido <strong>{order}</strong> está confirmado. Te hemos enviado la
              confirmación a <strong>{form.email || "tu correo"}</strong>. Lo preparamos a mano y sale en 48–72h.</p>
            <div className="co__doneitems">
              {items.map(it => (
                <div className="co__doneitem" key={it.key}>
                  <span>{it.qty}× {it.name} · {it.way.name}</span>
                  <span>{eur(it.price*it.qty)}</span>
                </div>
              ))}
              <div className="co__doneitem co__doneitem--tot"><span>Total</span><span>{eur(total)}</span></div>
            </div>
            <button className="btn btn-gold btn-lg" onClick={onComplete}>Seguir explorando</button>
          </div>
        ) : (
          <div className="co__grid">
            {/* form column */}
            <div className="co__form">
              {step === 0 && (
                <div className="co__sect">
                  <h3 className="co__h">Datos de envío</h3>
                  <Field label="Email" err={err.email}>
                    <input value={form.email} onChange={set("email")} placeholder="tu@email.com" type="email" />
                  </Field>
                  <Field label="Nombre y apellidos" err={err.name}>
                    <input value={form.name} onChange={set("name")} placeholder="Monkey D. Luffy" />
                  </Field>
                  <Field label="Dirección" err={err.addr}>
                    <input value={form.addr} onChange={set("addr")} placeholder="Calle, número, piso" />
                  </Field>
                  <div className="co__row3">
                    <Field label="Ciudad" err={err.city}>
                      <input value={form.city} onChange={set("city")} placeholder="Valencia" />
                    </Field>
                    <Field label="C.P." err={err.zip}>
                      <input value={form.zip} onChange={set("zip")} placeholder="46001" />
                    </Field>
                    <Field label="País">
                      <select value={form.country} onChange={set("country")}>
                        <option>España</option><option>Francia</option><option>Italia</option>
                        <option>Portugal</option><option>Alemania</option>
                      </select>
                    </Field>
                  </div>
                  <button className="btn btn-primary btn-lg btn-block" onClick={() => validInfo() && setStep(1)}>
                    Continuar al pago <span className="arr">→</span>
                  </button>
                </div>
              )}

              {step === 1 && (
                <div className="co__sect">
                  <button className="co__back" onClick={() => setStep(0)}>← Volver a datos</button>
                  <h3 className="co__h">Método de pago</h3>
                  <div className="co__methods">
                    <button className={"co__method"+(method==="card"?" on":"")} onClick={() => setMethod("card")}>
                      <span className="co__method-ic">💳</span> Tarjeta
                      <span className="co__cards"><b>VISA</b><b>MC</b><b>AMEX</b></span>
                    </button>
                    <button className={"co__method"+(method==="paypal"?" on":"")} onClick={() => setMethod("paypal")}>
                      <span className="co__pp"><i>Pay</i><i>Pal</i></span>
                    </button>
                  </div>

                  {method === "card" ? (
                    <div className="co__card">
                      <Field label="Número de tarjeta" err={err.num}>
                        <div className="co__cardnum">
                          <input value={card.num} onChange={e => setCard(c => ({...c, num: fmtCard(e.target.value)}))}
                                 placeholder="4242 4242 4242 4242" inputMode="numeric" />
                          <span className="co__brand">{brand}</span>
                        </div>
                      </Field>
                      <div className="co__row2">
                        <Field label="Caducidad" err={err.exp}>
                          <input value={card.exp} onChange={e => setCard(c => ({...c, exp: fmtExp(e.target.value)}))} placeholder="MM/AA" inputMode="numeric" />
                        </Field>
                        <Field label="CVC" err={err.cvc}>
                          <input value={card.cvc} onChange={e => setCard(c => ({...c, cvc: e.target.value.replace(/\D/g,'').slice(0,4)}))} placeholder="123" inputMode="numeric" />
                        </Field>
                      </div>
                      <Field label="Titular de la tarjeta" err={err.holder}>
                        <input value={card.holder} onChange={e => setCard(c => ({...c, holder: e.target.value}))} placeholder="Como aparece en la tarjeta" />
                      </Field>
                      <button className={"btn btn-primary btn-lg btn-block co__pay"+(paying?" is-loading":"")} onClick={pay} disabled={paying}>
                        {paying ? <span className="spin" /> : <>Pagar {eur(total)} <span className="arr">→</span></>}
                      </button>
                      <div className="co__powered">Pagos procesados de forma segura · <b>stripe</b></div>
                    </div>
                  ) : (
                    <div className="co__paypal">
                      <p className="co__pphint">Serás redirigido a PayPal para completar el pago de forma segura.</p>
                      <button className={"co__ppbtn"+(paying?" is-loading":"")} onClick={pay} disabled={paying}>
                        {paying ? <span className="spin spin--dark" /> : <><i>Pay</i><i>Pal</i></>}
                      </button>
                      <div className="co__powered">Estás protegido por la Protección al comprador de PayPal</div>
                    </div>
                  )}
                  <div className="co__safe">🔒 Conexión cifrada SSL · No guardamos los datos de tu tarjeta</div>
                </div>
              )}
            </div>

            {/* summary column */}
            <aside className="co__summary">
              <div className="co__sumhead">Resumen del pedido</div>
              <div className="co__sumitems">
                {items.map(it => (
                  <div className="co__sumline" key={it.key}>
                    <div className="co__sumthumb">
                      {lineImg(it) ? <img src={lineImg(it)} alt="" />
                        : <div style={{ width:"100%", height:"100%", background:`linear-gradient(135deg,${it.way.from},${it.way.to})` }} />}
                      <span className="co__sumqty">{it.qty}</span>
                    </div>
                    <div className="co__suminfo">
                      <div>{it.name}</div><small>{it.way.name}</small>
                    </div>
                    <div className="co__sumprice">{eur(it.price*it.qty)}</div>
                  </div>
                ))}
              </div>
              <div className="co__sumtot">
                <div><span>Subtotal</span><span>{eur(subtotal)}</span></div>
                <div><span>Envío</span><span>{shipping===0?"Gratis":eur(shipping)}</span></div>
                <div className="co__grand"><span>Total</span><span>{eur(total)}</span></div>
              </div>
              <div className="co__perks">
                <span>✦ Hecho a mano en 3D</span>
                <span>✦ Envío 48–72h</span>
                <span>✦ Devolución 14 días</span>
              </div>
            </aside>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, err, children }){
  return (
    <label className={"field" + (err ? " field--err" : "")}>
      <span className="field__label">{label}{err && <span className="field__msg">{err}</span>}</span>
      {children}
    </label>
  );
}

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