// Castelverdi — Cart drawer

const CartDrawer = ({ open, onClose, cart, setCart, go }) => {
  const items = Object.entries(cart).map(([id, qty]) => ({ p: PRODUCTS.find(p => p.id === id), qty })).filter(x => x.p);
  const subtotal = items.reduce((s, i) => s + i.p.price * i.qty, 0);
  const shipping = subtotal > 2000 ? 0 : 150;
  const total = subtotal + shipping;

  const updateQty = (id, delta) => {
    setCart(prev => {
      const next = { ...prev };
      const q = (next[id] || 0) + delta;
      if (q <= 0) delete next[id]; else next[id] = q;
      return next;
    });
  };
  const remove = (id) => setCart(prev => { const n = {...prev}; delete n[id]; return n; });

  return (
    <>
      <div className={`drawer-backdrop ${open ? 'open' : ''}`} onClick={onClose}></div>
      <aside className={`drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div style={{ padding: '24px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>La Borsa · Cart</div>
            <div className="h3 italic serif">{items.length} {items.length === 1 ? 'piece' : 'pieces'}</div>
          </div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 24, cursor: 'pointer', color: 'var(--ink-2)', lineHeight: 1 }}>×</button>
        </div>

        {items.length === 0 ? (
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: 40, textAlign: 'center' }}>
            <div className="serif italic" style={{ fontSize: 32, marginBottom: 12, color: 'var(--ink-2)' }}>Ancora vuoto.</div>
            <p className="muted" style={{ marginBottom: 24 }}>Your collection is empty.</p>
            <button className="btn" onClick={() => { onClose(); go('shop'); }}>Browse the collection</button>
          </div>
        ) : (
          <>
            <div style={{ flex: 1, overflow: 'auto', padding: '8px 32px' }}>
              {items.map(({ p, qty }) => (
                <div key={p.id} style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 16, padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
                  <div style={{ aspectRatio: '4/5' }}><Placeholder icon={PRODUCT_ICONS[p.id]} variant={`c${p.id}`} /></div>
                  <div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                      <div style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 18 }}>{p.name}</div>
                      <button onClick={() => remove(p.id)} style={{ background: 'none', border: 'none', color: 'var(--ink-3)', cursor: 'pointer', fontSize: 16 }}>×</button>
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>{p.cat} · {p.year}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--line)' }}>
                        <button onClick={() => updateQty(p.id, -1)} style={{ background: 'none', border: 'none', padding: '6px 10px', cursor: 'pointer', color: 'var(--ink-2)' }}>−</button>
                        <span style={{ padding: '0 10px', fontSize: 13 }}>{qty}</span>
                        <button onClick={() => updateQty(p.id, 1)} style={{ background: 'none', border: 'none', padding: '6px 10px', cursor: 'pointer', color: 'var(--ink-2)' }}>+</button>
                      </div>
                      <div style={{ fontSize: 14 }}>{formatMAD(p.price * qty)}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ padding: '24px 32px', borderTop: '1px solid var(--line)', background: 'var(--bg-2)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 8, color: 'var(--ink-2)' }}>
                <span>Subtotal</span><span>{formatMAD(subtotal)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 16, color: 'var(--ink-2)' }}>
                <span>Shipping</span><span>{shipping === 0 ? 'Included' : formatMAD(shipping)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 18, marginBottom: 20, paddingTop: 16, borderTop: '1px solid var(--line)', fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic' }}>
                <span>Total</span><span>{formatMAD(total)}</span>
              </div>
              <button className="btn filled" style={{ width: '100%', justifyContent: 'center', marginBottom: 10 }}>Proceed to checkout</button>
              <button className="btn-ghost" style={{ width: '100%', textAlign: 'center', display: 'block' }} onClick={onClose}>Continue browsing</button>
            </div>
          </>
        )}
      </aside>
    </>
  );
};

Object.assign(window, { CartDrawer });