// Cart — полноценная страница (не drawer).

const CartLine = ({ item, product, onQty, onRemove }) => (
  <div className="flex gap-3 sm:gap-4 py-4 sm:py-5 border-b border-paper-100 last:border-b-0">
    <div className="w-16 h-16 sm:w-20 sm:h-20 shrink-0 rounded-xl overflow-hidden">
      <ProductVisual product={product} />
    </div>
    <div className="flex-1 min-w-0">
      <div className="flex items-start justify-between gap-2">
        <div className="font-semibold text-ink-900 text-[14px] sm:text-base leading-snug">{product.title}</div>
        <button
          onClick={onRemove}
          className="w-8 h-8 rounded-lg text-ink-400 hover:bg-paper-100 hover:text-brand-600 flex items-center justify-center transition shrink-0"
          aria-label="Удалить"
        >
          <Icon name="trash" size={15} />
        </button>
      </div>
      <div className="flex items-center justify-between mt-2.5 sm:mt-3 flex-wrap gap-2">
        <Stepper value={item.qty} onChange={onQty} />
        <div className="font-display font-bold text-lg sm:text-xl text-ink-900 tabular-nums">
          {fmtPrice(product.price * item.qty)}
        </div>
      </div>
    </div>
  </div>
);

const CartPage = ({ navigate, onCheckout }) => {
  const { cart, updateQty, removeFromCart, cartTotal, cartCount } = useStore();

  if (cart.length === 0) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-20">
        <EmptyState
          icon="bag"
          title="Корзина пуста"
          action={
            <button className="btn-primary" onClick={() => navigate({ name: 'catalog' })}>
              Перейти к товарам
            </button>
          }
        />
      </div>
    );
  }

  return (
    <>
      {/* Страница — нижний паддинг на мобиле для sticky-бара */}
      <div className="max-w-5xl mx-auto px-4 md:px-8 py-6 md:py-12 pb-36 lg:pb-12">
        <button
          onClick={() => navigate({ name: 'catalog' })}
          className="text-sm font-medium text-ink-500 hover:text-ink-900 inline-flex items-center gap-1.5 mb-5 sm:mb-6"
        >
          <Icon name="arrowLeft" size={14} /> Назад к товарам
        </button>

        <h1 className="font-display font-bold text-2xl sm:text-3xl md:text-4xl text-ink-900 tracking-tight mb-6 sm:mb-8">
          Корзина
        </h1>

        <div className="grid lg:grid-cols-[1fr_360px] gap-5 sm:gap-8 items-start">
          {/* Items */}
          <div className="bg-white rounded-2xl border border-paper-200 px-4 sm:px-5 md:px-6">
            {cart.map((item) => {
              const product = window.DATA.productById(item.productId);
              if (!product) return null;
              return (
                <CartLine
                  key={item.productId}
                  item={item}
                  product={product}
                  onQty={(q) => updateQty(item.productId, q)}
                  onRemove={() => removeFromCart(item.productId)}
                />
              );
            })}
          </div>

          {/* Desktop summary sidebar (скрыт на мобиле — там sticky bar) */}
          <div className="hidden lg:block bg-white rounded-2xl border border-paper-200 p-5 md:p-6 lg:sticky lg:top-24">
            <div className="space-y-3 mb-5">
              <div className="flex justify-between text-sm text-ink-500">
                <span>Товаров</span>
                <span className="font-medium text-ink-900">{cartCount}</span>
              </div>
              <div className="flex justify-between items-baseline pt-2 border-t border-paper-100">
                <span className="text-ink-700">Итого</span>
                <span className="font-display font-bold text-2xl text-ink-900 tabular-nums">
                  {fmtPrice(cartTotal)}
                </span>
              </div>
            </div>
            <div className="bg-brand-50 rounded-xl p-3.5 mb-5 text-xs text-brand-800 leading-snug flex items-start gap-2.5">
              <Icon name="handshake" size={14} className="shrink-0 mt-0.5 text-brand-600" />
              Оплата на сайте не проводится. После оформления с вами свяжется продавец.
            </div>
            <button
              onClick={onCheckout}
              className="btn-primary w-full inline-flex items-center justify-center gap-2 text-base"
            >
              Оформить заявку <Icon name="arrowRight" size={18} />
            </button>
          </div>
        </div>
      </div>

      {/* Mobile sticky bottom bar */}
      <div className="fixed bottom-0 left-0 right-0 lg:hidden bg-white border-t border-paper-200 z-30 safe-bottom">
        <div className="px-4 pt-3 pb-1">
          <div className="flex items-center justify-between mb-3">
            <div className="text-sm text-ink-500">
              {cartCount} {cartCount === 1 ? 'товар' : cartCount < 5 ? 'товара' : 'товаров'}
            </div>
            <div className="font-display font-bold text-xl text-ink-900 tabular-nums">
              {fmtPrice(cartTotal)}
            </div>
          </div>
          <button
            onClick={onCheckout}
            className="btn-primary w-full inline-flex items-center justify-center gap-2 text-base"
          >
            Оформить заявку <Icon name="arrowRight" size={18} />
          </button>
        </div>
      </div>
    </>
  );
};

window.CartPage = CartPage;