// Cart drawer — slide-in from the right.
// Improvements over v1:
//   - Visual progress bar to the free-shipping threshold
//   - Slightly larger item media + tighter typography
//   - "Vielleicht auch" cross-sell with two products not yet in cart
function CartDrawer({ open, onClose, cart, onQty, onRemove, onCheckout, onAdd, checkoutLoading }) {
  const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const freeThreshold = 60;
  const toFree = Math.max(0, freeThreshold - subtotal);
  const progress = Math.min(100, Math.round((subtotal / freeThreshold) * 100));

  // Cross-sell: 2 products not in cart. PRODUCTS comes from data.jsx (window).
  const cartIds = new Set(cart.map((c) => c.id));
  const crossSell = PRODUCTS.filter((p) => !cartIds.has(p.id)).slice(0, 2);

  return (
    <React.Fragment>
      <div className={`scrim${open ? " open" : ""}`} onClick={onClose}></div>
      <aside className={`drawer${open ? " open" : ""}`} aria-hidden={!open}>
        <div className="drawer__head">
          <h3>Dein Warenkorb</h3>
          <button className="iconbtn" onClick={onClose} aria-label="Schliessen"><Icon name="x" size={20} /></button>
        </div>

        {cart.length === 0 ? (
          <div className="drawer__empty">
            <p>Dein Garten ist noch etwas leer.<br />Sollen wir das ändern?</p>
            <Button variant="solid" size="md" onClick={onClose}>Garten entdecken</Button>
          </div>
        ) : (
          <React.Fragment>
            <div className="drawer__body">
              <div className={`cart-progress${toFree === 0 ? " is-free" : ""}`}>
                <div className="cart-progress__top">
                  {toFree > 0 ? (
                    <React.Fragment>
                      <Icon name="truck" size={15} />
                      <span>Noch <b>{money(toFree)}</b> bis zum Gratisversand</span>
                    </React.Fragment>
                  ) : (
                    <React.Fragment>
                      <Icon name="check" size={15} />
                      <span>Gratisversand freigeschaltet. Schön.</span>
                    </React.Fragment>
                  )}
                </div>
                <div className="cart-progress__bar">
                  <div className="cart-progress__fill" style={{ width: `${progress}%` }}></div>
                </div>
              </div>

              {cart.map((i) => (
                <div className="citem" key={i.id}>
                  <div className="citem__media" style={!i.image ? { background: i.media } : undefined}>
                    {i.image ? <img className="product-photo" src={i.image} alt={i.name} loading="lazy" /> : <div className="b" style={{ background: i.bottle }}></div>}
                  </div>
                  <div className="citem__info">
                    <h4>{i.name}</h4>
                    <div className="meta">{i.category} · {i.character}</div>
                    <div className="citem__bottom">
                      <div className="stepper">
                        <button onClick={() => onQty(i.id, i.qty - 1)} aria-label="Weniger"><Icon name="minus" size={14} /></button>
                        <span>{i.qty}</span>
                        <button onClick={() => onQty(i.id, i.qty + 1)} aria-label="Mehr"><Icon name="plus" size={14} /></button>
                      </div>
                      <span className="price">{money(i.price * i.qty)}</span>
                    </div>
                  </div>
                  <button className="iconbtn" style={{ width: 32, height: 32 }} onClick={() => onRemove(i.id)} aria-label="Entfernen">
                    <Icon name="trash-2" size={16} color="var(--fg-3)" />
                  </button>
                </div>
              ))}

              {crossSell.length > 0 && (
                <div className="cart-cross">
                  <div className="cart-cross__head">Vielleicht auch</div>
                  <div className="cart-cross__list">
                    {crossSell.map((p) => (
                      <div className="cart-cross__item" key={p.id}>
                        <div className="cart-cross__media" style={!p.image ? { background: p.media } : undefined}>
                          {p.image ? <img className="product-photo" src={p.image} alt={p.name} loading="lazy" /> : <div className="b" style={{ background: p.bottle }}></div>}
                        </div>
                        <div className="cart-cross__info">
                          <h5>{p.name}</h5>
                          <div className="meta">{money(p.price)} · {p.character}</div>
                        </div>
                        <button className="cart-cross__add" onClick={() => onAdd && onAdd(p)} aria-label={`${p.name} hinzufügen`}>
                          <Icon name="plus" size={16} />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="drawer__foot">
              <div className="drawer__row"><span>Zwischensumme</span><span className="price">{money(subtotal)}</span></div>
              <div className="drawer__row"><span>Versand</span><span>{toFree > 0 ? "Wird an der Kasse berechnet" : "Gratis"}</span></div>
              <div className="drawer__row total"><span>Total</span><span className="price">{money(subtotal)}</span></div>
              <Button variant="primary" size="lg" block onClick={onCheckout} disabled={checkoutLoading}>
                {checkoutLoading ? "Kasse wird geöffnet …" : `Zur Kasse · ${money(subtotal)}`}
              </Button>
              <p style={{ textAlign: "center", fontSize: 12, color: "var(--fg-3)", margin: "12px 0 0" }}>Inkl. MwSt. Gekühlte Lieferung in 1–2 Tagen.</p>
            </div>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}
Object.assign(window, { CartDrawer });