/* Good Time Coffee — Cart sidebar */

function CartSidebar({ open, onClose, items, setQty, removeItem }) {
  const FREE = 30;
  const subtotal = items.reduce((sum, i) => sum + i.p.price * i.qty, 0);
  const shipping = subtotal >= FREE ? 0 : 4.90;
  const total = subtotal + shipping;
  const progress = Math.min(100, (subtotal / FREE) * 100);

  return (
    <>
      {/* Scrim */}
      <div onClick={onClose} style={{
        position: "fixed", inset: 0, background: "rgba(5,5,6,0.6)",
        opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none",
        transition: "opacity 240ms ease", zIndex: 100,
      }}/>
      {/* Panel */}
      <aside style={{
        position: "fixed", top: 0, right: 0, height: "100%", width: 460,
        background: "var(--bg)", zIndex: 101,
        transform: open ? "translateX(0)" : "translateX(100%)",
        transition: "transform 320ms cubic-bezier(0.32, 0.72, 0, 1)",
        display: "flex", flexDirection: "column",
        borderLeft: "1px solid var(--line-strong)",
      }}>
        {/* Header */}
        <div className="row" style={{ padding: "24px 28px", justifyContent: "space-between", borderBottom: "1px solid var(--line)" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Votre sélection</div>
            <div className="display" style={{ fontSize: 26 }}>Panier <span className="mono" style={{ fontSize: 14, color: "var(--muted)", marginLeft: 4 }}>· {items.length}</span></div>
          </div>
          <button onClick={onClose} style={iconBtn}><Icon.Close/></button>
        </div>

        {/* Progress to free shipping */}
        <div style={{ padding: "16px 28px", background: "var(--paper)", borderBottom: "1px solid var(--line)" }}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
            <span style={{ fontSize: 12, color: "var(--text-dim)" }}>
              {subtotal >= FREE ? "Livraison offerte débloquée" : `Plus que ${fmt(FREE - subtotal)} pour la livraison offerte`}
            </span>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{Math.round(progress)}%</span>
          </div>
          <div style={{ height: 3, background: "var(--line)", borderRadius: 2, overflow: "hidden" }}>
            <div style={{ width: `${progress}%`, height: "100%", background: "var(--gold)", transition: "width 300ms ease" }}/>
          </div>
        </div>

        {/* Items */}
        <div style={{ flex: 1, overflowY: "auto", padding: "8px 28px" }}>
          {items.length === 0 && (
            <div className="col" style={{ alignItems: "center", justifyContent: "center", height: "100%", textAlign: "center", padding: 32 }}>
              <div style={{ width: 80, height: 80, borderRadius: 999, marginBottom: 24, border: "1px solid var(--gold)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold)" }}><Icon.Bag/></div>
              <div className="display" style={{ fontSize: 28, marginBottom: 8 }}>Votre panier est vide</div>
              <p style={{ fontSize: 13, color: "var(--muted)", margin: "0 0 24px" }}>Découvrez nos éditions du moment.</p>
              <button onClick={onClose} className="btn btn-primary">Voir la collection</button>
            </div>
          )}
          {items.map(it => (
            <div key={it.p.id} style={{ display: "grid", gridTemplateColumns: "84px 1fr auto", gap: 16, padding: "20px 0", borderBottom: "1px solid var(--line)" }}>
              <div className={`pack ${it.p.img}`} style={{ aspectRatio: "1/1", position: "relative" }}>
                <div style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: 3, background: it.p.accent, zIndex: 2 }}/>
              </div>
              <div>
                <div className="tracked" style={{ fontSize: 9, color: "var(--muted)", marginBottom: 6 }}>{it.p.family} · {it.p.weight}</div>
                <div className="display" style={{ fontSize: 18, lineHeight: 1.1, marginBottom: 8 }}>{it.p.name}</div>
                <div className="row gap-2">
                  <div className="row" style={{ border: "1px solid var(--line-strong)", height: 28 }}>
                    <button onClick={() => setQty(it.p.id, Math.max(1, it.qty - 1))} style={{ width: 26, height: "100%" }}><Icon.Minus/></button>
                    <div style={{ width: 24, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 12 }}>{it.qty}</div>
                    <button onClick={() => setQty(it.p.id, it.qty + 1)} style={{ width: 26, height: "100%" }}><Icon.Plus/></button>
                  </div>
                  <button onClick={() => removeItem(it.p.id)} style={{ fontSize: 12, color: "var(--muted)", textDecoration: "underline" }}>Retirer</button>
                </div>
              </div>
              <div className="mono" style={{ fontSize: 13, fontWeight: 500 }}>{fmt(it.p.price * it.qty)}</div>
            </div>
          ))}
        </div>

        {/* Totals */}
        {items.length > 0 && (
          <div style={{ padding: "20px 28px 28px", borderTop: "1px solid var(--line-strong)", background: "var(--paper)" }}>
            <div className="col gap-2" style={{ marginBottom: 16, fontSize: 13 }}>
              <div className="row" style={{ justifyContent: "space-between" }}>
                <span style={{ color: "var(--text-dim)" }}>Sous-total</span>
                <span className="mono">{fmt(subtotal)}</span>
              </div>
              <div className="row" style={{ justifyContent: "space-between" }}>
                <span style={{ color: "var(--text-dim)" }}>Livraison</span>
                <span className="mono">{shipping === 0 ? "Offerte" : fmt(shipping)}</span>
              </div>
            </div>
            <div className="row" style={{ justifyContent: "space-between", paddingTop: 16, borderTop: "1px solid var(--line)", marginBottom: 20 }}>
              <span className="display" style={{ fontSize: 22 }}>Total</span>
              <span className="display" style={{ fontSize: 28 }}>{fmt(total)}</span>
            </div>
            <button className="btn btn-primary" style={{ width: "100%", height: 52 }}>
              Passer au paiement <Icon.Arrow/>
            </button>
            <div className="row gap-2" style={{ justifyContent: "center", marginTop: 14, fontSize: 11, color: "var(--muted)" }}>
              <span>Paiement sécurisé</span>
              <span>·</span>
              <span>CB · Apple Pay · PayPal</span>
            </div>
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { CartSidebar });