// cart.jsx — Cart drawer
const { useState: useStateCart } = React;

function CartLine({ item, onMinus, onPlus, onRemove }) {
  const total = (item.price * item.qty).toFixed(2).replace('.', ',');
  return (
    <div className="fp-cart__line">
      <div className="fp-cart__line-name">
        <b>{item.name}</b>
        {item.size && <span> · {item.size}</span>}
        <em>{item.price.toFixed(2).replace('.', ',')}€ / unité</em>
      </div>
      <div className="fp-cart__qty">
        <button onClick={onMinus} aria-label="moins">−</button>
        <span>{item.qty}</span>
        <button onClick={onPlus} aria-label="plus">+</button>
      </div>
      <div className="fp-cart__line-tot">
        {total}€
      </div>
      <button className="fp-cart__line-x" onClick={onRemove} aria-label="retirer">×</button>
    </div>
  );
}

function CartDrawer({ open, items, onClose, onMinus, onPlus, onRemove }) {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const delivery = subtotal >= 20 || subtotal === 0 ? 0 : 3;
  const total = subtotal + delivery;
  const toFree = Math.max(0, 20 - subtotal);
  const pct = subtotal === 0 ? 0 : Math.min(100, (subtotal / 20) * 100);

  return (
    <>
      <div className={`fp-cart__scrim ${open ? 'is-open' : ''}`} onClick={onClose} />
      <aside className={`fp-cart ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        <header className="fp-cart__hd">
          <span className="fp-eyebrow">Ta commande</span>
          <h2 className="fp-cart__title">
            {items.length === 0 ? <>Encore <em>vide.</em></> : <>{items.length} article{items.length > 1 ? 's' : ''}<em>, prêt·e ?</em></>}
          </h2>
          <button className="fp-cart__close" onClick={onClose} aria-label="fermer">×</button>
        </header>

        {items.length === 0 ? (
          <div className="fp-cart__empty">
            <p>Ton panier est encore tout chaud<br/>(parce qu'il est vide).</p>
            <button className="fp-btn fp-btn--dark" onClick={onClose}>Choisir une pizza →</button>
          </div>
        ) : (
          <>
            <div className="fp-cart__progress">
              <div className="fp-cart__progress-bar" style={{ width: `${pct}%` }} />
              <span className="fp-cart__progress-lbl">
                {toFree > 0
                  ? <>Plus que <b>{toFree.toFixed(2).replace('.', ',')}€</b> pour la livraison gratuite.</>
                  : <><b>Livraison gratuite</b> activée 🎉</>}
              </span>
            </div>

            <div className="fp-cart__lines">
              {items.map(item => (
                <CartLine
                  key={item.id}
                  item={item}
                  onMinus={() => onMinus(item.id)}
                  onPlus={() => onPlus(item.id)}
                  onRemove={() => onRemove(item.id)}
                />
              ))}
            </div>

            <footer className="fp-cart__foot">
              <div className="fp-cart__totals">
                <div><span>Sous-total</span><span>{subtotal.toFixed(2).replace('.', ',')}€</span></div>
                <div><span>Livraison</span><span>{delivery === 0 ? 'Gratuite' : `${delivery.toFixed(2).replace('.', ',')}€`}</span></div>
                <div className="fp-cart__totals-grand"><span>Total</span><span>{total.toFixed(2).replace('.', ',')}€</span></div>
              </div>
              <button className="fp-btn fp-btn--primary fp-btn--full fp-btn--lg">
                Commander · {total.toFixed(2).replace('.', ',')}€
              </button>
              <button className="fp-link fp-link--center" onClick={onClose}>Continuer mes achats</button>
            </footer>
          </>
        )}
      </aside>
    </>
  );
}

window.CartDrawer = CartDrawer;