// Cart drawer
function CartDrawer() {
  const { drawer, setDrawer, cart, updateQty, removeLine, cartTotal, cartCount, navigate } = useStore();
  const open = drawer === 'cart';
  useScrollLock(open);
  useEscape(() => setDrawer(null), open);

  const lines = cart.map((line, i) => {
    const p = window.PRODUCTS.find(x => x.id === line.id);
    return { ...line, p, i };
  });

  return (
    <>
      <div className={'drawer-backdrop' + (open ? ' is-open' : '')} onClick={() => setDrawer(null)} />
      <aside className={'drawer' + (open ? ' is-open' : '')}>
        <div className="drawer-head">
          <h3>Your Bag <span style={{ fontSize: 14, color: 'var(--color-text-mute)', fontFamily: 'var(--font-mono)' }}>({cartCount})</span></h3>
          <button className="btn-icon" onClick={() => setDrawer(null)}><Ic.close /></button>
        </div>
        <div className="drawer-body">
          {lines.length === 0 ? (
            <Empty title="Your cart is empty" hint="Find your last." cta="Continue shopping" onCta={() => { setDrawer(null); navigate({ name: 'home' }); }} />
          ) : (
            lines.map(({ p, qty, size, color, i }) => p && (
              <div className="cart-line" key={`${p.id}-${size}-${color}-${i}`}>
                <div className="cart-thumb" onClick={() => { setDrawer(null); navigate({ name: 'product', id: p.id }); }} style={{ cursor: 'pointer' }}>
                  <img src={p.img} alt="" />
                </div>
                <div>
                  <div className="name" onClick={() => { setDrawer(null); navigate({ name: 'product', id: p.id }); }} style={{ cursor: 'pointer' }}>{p.name}</div>
                  <div className="meta">{[size, color].filter(Boolean).join(' · ') || p.catLabel}</div>
                  <div className="qty">
                    <button onClick={() => updateQty(i, qty - 1)}>−</button>
                    <span>{qty}</span>
                    <button onClick={() => updateQty(i, qty + 1)}>+</button>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="price">{fmt(p.price * qty)}</div>
                  <button className="remove" onClick={() => removeLine(i)}>Remove</button>
                </div>
              </div>
            ))
          )}
        </div>
        {lines.length > 0 && (
          <div className="drawer-foot">
            <div className="cart-totals">
              <div className="row"><span>Subtotal</span><span>{fmt(cartTotal)}</span></div>
              <div className="row"><span>Shipping</span><span>{cartTotal >= 5000 ? 'Free' : fmt(200)}</span></div>
              <div className="row total"><span>Total</span><span>{fmt(cartTotal + (cartTotal >= 5000 ? 0 : 99))}</span></div>
            </div>
            <button className="btn btn-primary btn-block btn-lg" onClick={() => navigate({ name: 'checkout' })}>Proceed to Checkout</button>
            <div style={{ textAlign: 'center', marginTop: 8 }}>
              <button className="btn btn-text" style={{ fontSize: 12 }} onClick={() => setDrawer(null)}>Continue shopping</button>
            </div>
          </div>
        )}
      </aside>
    </>
  );
}

window.CartDrawer = CartDrawer;