// Cart pill + slide-out drawer — paper / catalog ticket aesthetic.

function CartPill({ count, bumping, onClick }) {
  return (
    <button
      className={`cart-pill swarm ${bumping ? "bump" : ""}`}
      onClick={onClick}
      aria-label="Open cart"
    >
      <span>Cart</span>
      <span className="count">{count}</span>
    </button>
  );
}

function CartDrawer({ open, items, onClose, onRemove, onCheckout }) {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal > 0 && subtotal < 80 ? 8 : 0;
  const total = subtotal + shipping;

  return (
    <React.Fragment>
      <div className={`drawer-backdrop ${open ? "open" : ""}`} onClick={onClose} />
      <aside className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <header style={{ padding: "22px 26px 16px", borderBottom: "1.5px solid var(--rule)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div>
              <div className="mono uppercase tracked" style={{ fontSize: 11, color: "var(--red)", fontWeight: 700 }}>FORM 04 · LOAD MANIFEST</div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 32, fontWeight: 600, lineHeight: 1, marginTop: 6 }}>Your haul.</div>
            </div>
            <button onClick={onClose} className="mono uppercase tracked swarm" style={{ fontSize: 11, background: "none", border: "1.5px solid var(--rule)", padding: "6px 10px" }}>Close ✕</button>
          </div>
          <div className="mono" style={{ fontSize: 10, marginTop: 14, display: "flex", justifyContent: "space-between", textTransform: "uppercase", letterSpacing: "0.16em", color: "var(--gray-1)" }}>
            <span>Ticket #{Math.floor(40000 + Math.random() * 9999)}</span>
            <span>Driver · M.G.</span>
          </div>
        </header>

        <div style={{ flex: 1, overflowY: "auto", padding: "0 26px" }}>
          {items.length === 0 && (
            <div style={{ padding: "60px 0", textAlign: "center" }}>
              <div className="mono uppercase tracked" style={{ fontSize: 11, color: "var(--gray-1)" }}>— EMPTY CONTAINER —</div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 24, marginTop: 12, color: "var(--ink-soft)" }}>Nothing inside yet.</div>
            </div>
          )}
          {items.map((it, idx) => (
            <div key={idx} style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 14, alignItems: "center", padding: "18px 0", borderBottom: "1px dashed var(--rule)" }}>
              <div style={{
                width: 60, height: 60,
                background: "var(--paper-warm)",
                border: "1px solid var(--rule)",
                position: "relative",
                backgroundImage: "repeating-linear-gradient(45deg, rgba(26,26,26,0.07) 0 2px, transparent 2px 6px)"
              }}>
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 9, fontWeight: 700, letterSpacing: "0.16em" }}>{it.cat}</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 20, fontWeight: 600, lineHeight: 1.05 }}>{it.name}</div>
                <div className="mono" style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", color: "var(--ink-soft)", marginTop: 4 }}>QTY {it.qty}</div>
                <button onClick={() => onRemove(idx)} className="mono swarm" style={{ marginTop: 6, fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", background: "none", border: 0, padding: 0, textDecoration: "underline", color: "var(--ink-soft)" }}>Discard</button>
              </div>
              <div className="mono" style={{ fontSize: 13, fontWeight: 700 }}>${(it.price * it.qty).toFixed(2)}</div>
            </div>
          ))}
        </div>

        <footer style={{ padding: "20px 26px 26px", borderTop: "1.5px solid var(--rule)", background: "var(--bone)" }}>
          <div className="mono" style={{ display: "flex", justifyContent: "space-between", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em" }}>
            <span>Net</span><span>${subtotal.toFixed(2)}</span>
          </div>
          <div className="mono" style={{ display: "flex", justifyContent: "space-between", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em", marginTop: 4 }}>
            <span>Hauling</span><span>{shipping === 0 ? "WAIVED" : `$${shipping.toFixed(2)}`}</span>
          </div>
          <hr className="rule" style={{ margin: "14px 0" }} />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div className="mono uppercase tracked" style={{ fontSize: 12, fontWeight: 700 }}>GROSS TOTAL</div>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 32, fontWeight: 600 }}>${total.toFixed(2)}</div>
          </div>
          <button
            disabled={items.length === 0}
            onClick={onCheckout}
            aria-label="Proceed to secure checkout"
            className="mono uppercase tracked swarm"
            style={{
              marginTop: 16, width: "100%",
              padding: "16px",
              background: items.length === 0 ? "#bdb9ac" : "var(--ink)",
              color: "var(--paper)",
              border: "1.5px solid var(--ink)",
              fontSize: 12, fontWeight: 700, letterSpacing: "0.22em",
              cursor: items.length === 0 ? "not-allowed" : "pointer",
            }}
          >
            Sign manifest → Checkout
          </button>

          {/* Trust signals */}
          <div className="mono" style={{
            marginTop: 14, padding: "10px 12px",
            border: "1px dashed var(--rule)",
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 6,
            fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--ink-soft)", lineHeight: 1.5
          }}>
            <span>🔒</span>
            <span><strong style={{ color: "var(--ink)" }}>Secure checkout</strong> · 256-bit SSL encryption</span>
            <span>↺</span>
            <span><a href="#" className="swarm" style={{ textDecoration: "underline" }}>30-day return policy</a></span>
            <span>✉</span>
            <span>Questions? <a href="mailto:hello@mrgarbage.usa" className="swarm" style={{ textDecoration: "underline" }}>hello@mrgarbage.usa</a></span>
          </div>

          <div className="mono" style={{ fontSize: 9, marginTop: 10, color: "var(--gray-1)", textAlign: "center", letterSpacing: "0.18em", textTransform: "uppercase" }}>
            Free hauling on loads above $80
          </div>
        </footer>
      </aside>
    </React.Fragment>
  );
}

window.CartPill = CartPill;
window.CartDrawer = CartDrawer;