{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    CART DRAWER — slide in from right on desktop, sheet from bottom on mobile
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div x-data="cartManager()"
     x-init="init()"
     x-show="$store.app.cartDrawerOpen"
     x-cloak
     class="fixed inset-0 z-[100]">

    {{-- Backdrop --}}
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
         @click="$store.app.cartDrawerOpen = false"></div>

    {{-- Drawer panel --}}
    <div class="absolute bottom-0 left-0 right-0 md:bottom-auto md:top-0 md:left-auto md:right-0
                md:w-[420px] md:h-full bg-white flex flex-col
                rounded-t-2xl md:rounded-none shadow-2xl
                max-h-[90vh] md:max-h-full
                animate-slide-in-right"
         @click.stop>

        {{-- Header --}}
        <div class="flex items-center justify-between px-4 py-4 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                <h2 class="text-base font-bold text-gray-900">My Cart</h2>
                <span x-show="summary?.item_count" x-text="`(${summary.item_count} items)`"
                      class="text-sm text-gray-500"></span>
            </div>
            <button @click="$store.app.cartDrawerOpen = false"
                    class="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
                <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Loading state --}}
        <div x-show="loading" class="flex-1 flex items-center justify-center py-12">
            <div class="w-8 h-8 border-3 border-orange-500 border-t-transparent rounded-full animate-spin"></div>
        </div>

        {{-- Not logged in --}}
        <div x-show="!loading && !$store.app.isLoggedIn" class="flex-1 flex flex-col items-center justify-center gap-4 p-6 text-center">
            <div class="w-20 h-20 bg-orange-50 rounded-full flex items-center justify-center text-4xl">🛒</div>
            <p class="text-gray-600 text-sm">Sign in to view your cart</p>
            <a href="/login" class="btn-primary w-full max-w-xs">Sign In</a>
            <a href="/register" class="btn-secondary w-full max-w-xs">Create Account</a>
        </div>

        {{-- Empty cart --}}
        <div x-show="!loading && $store.app.isLoggedIn && (!cart?.items || cart.items.length === 0)"
             class="flex-1 flex flex-col items-center justify-center gap-4 p-6 text-center">
            <div class="w-24 h-24 bg-orange-50 rounded-full flex items-center justify-center text-5xl">🛍️</div>
            <h3 class="font-semibold text-gray-900">Your cart is empty</h3>
            <p class="text-sm text-gray-500">Add items to start shopping</p>
            <button @click="$store.app.cartDrawerOpen = false; window.location.href='/products'"
                    class="btn-primary">Continue Shopping</button>
        </div>

        {{-- Cart items --}}
        <div x-show="!loading && $store.app.isLoggedIn && cart?.items?.length > 0"
             class="flex-1 overflow-y-auto">

            {{-- Items list --}}
            <div class="divide-y divide-gray-100">
                <template x-for="item in cart.items" :key="item.id">
                    <div class="flex gap-3 p-4">
                        {{-- Product image --}}
                        <a :href="`/products/${item.product?.uuid}`" class="flex-shrink-0">
                            <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                                <img :src="item.product?.primary_image || '/images/placeholder.png'"
                                     :alt="item.product_name"
                                     class="w-full h-full object-cover">
                            </div>
                        </a>

                        {{-- Details --}}
                        <div class="flex-1 min-w-0">
                            <a :href="`/products/${item.product?.uuid}`">
                                <p class="text-sm text-gray-900 line-clamp-2 font-medium leading-tight hover:text-orange-500"
                                   x-text="item.product_name"></p>
                            </a>
                            <p x-show="item.variant_name" x-text="item.variant_name"
                               class="text-xs text-gray-500 mt-0.5"></p>

                            <div class="flex items-center justify-between mt-2">
                                {{-- Price --}}
                                <p class="text-sm font-bold text-orange-500"
                                   x-text="formatPrice(item.subtotal)"></p>

                                {{-- Qty controls --}}
                                <div class="flex items-center gap-1">
                                    <button @click="updateQty(item.id, item.quantity - 1)"
                                            class="qty-btn text-xs">−</button>
                                    <span class="w-6 text-center text-sm font-medium" x-text="item.quantity"></span>
                                    <button @click="updateQty(item.id, item.quantity + 1)"
                                            class="qty-btn text-xs">+</button>
                                </div>
                            </div>
                        </div>

                        {{-- Remove --}}
                        <button @click="removeItem(item.id)"
                                class="flex-shrink-0 p-1 text-gray-400 hover:text-red-500 transition-colors self-start">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </template>
            </div>

            {{-- Coupon --}}
            <div class="px-4 py-3 border-t border-gray-100">
                <div x-show="!summary?.coupon">
                    <div class="flex gap-2">
                        <input type="text" x-model="couponCode" placeholder="Enter coupon code"
                               @keydown.enter="applyCoupon()"
                               class="input flex-1 text-xs py-2">
                        <button @click="applyCoupon()" :disabled="couponLoading"
                                class="btn-secondary text-xs px-3 py-2 whitespace-nowrap">
                            <span x-show="!couponLoading">Apply</span>
                            <span x-show="couponLoading">...</span>
                        </button>
                    </div>
                </div>
                <div x-show="summary?.coupon" class="flex items-center justify-between">
                    <div class="flex items-center gap-1.5 text-green-600">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span class="text-xs font-medium" x-text="`Coupon: ${summary?.coupon?.code}`"></span>
                    </div>
                    <button @click="removeCoupon()" class="text-xs text-red-500 hover:underline">Remove</button>
                </div>
            </div>
        </div>

        {{-- Order Summary + CTA --}}
        <div x-show="!loading && cart?.items?.length > 0"
             class="flex-shrink-0 border-t border-gray-200 bg-gray-50 p-4 space-y-2">

            <div class="flex justify-between text-sm text-gray-600">
                <span>Subtotal</span>
                <span x-text="formatPrice(summary?.subtotal || 0)"></span>
            </div>
            <div x-show="summary?.coupon_discount > 0" class="flex justify-between text-sm text-green-600">
                <span>Discount</span>
                <span x-text="'- ' + formatPrice(summary?.coupon_discount || 0)"></span>
            </div>
            <div class="flex justify-between text-sm text-gray-500">
                <span>Shipping</span>
                <span class="text-green-600 font-medium">Calculated at checkout</span>
            </div>
            <div class="flex justify-between font-bold text-gray-900 text-base pt-2 border-t border-gray-200">
                <span>Total</span>
                <span x-text="formatPrice(summary?.total_before_shipping || 0)"></span>
            </div>

            <a href="/checkout"
               @click="$store.app.cartDrawerOpen = false"
               class="btn-primary w-full mt-3 py-3.5 text-base">
                Checkout →
            </a>
            <button @click="$store.app.cartDrawerOpen = false"
                    class="btn-ghost w-full text-gray-500 text-sm">
                Continue Shopping
            </button>
        </div>
    </div>
</div>