@php
$seo = (object) [
    "meta_title" => "Your Cart | " . config("app.name"),
    "meta_description" => "Review your selected digital assets and proceed to secure checkout.",
];
@endphp

<x-layouts.storefront :seo="$seo">
    <div class="pt-24 pb-12 bg-bg-main min-h-screen relative overflow-hidden">



        {{-- Subtle background effects --}}
        <div class="absolute inset-0 z-0 pointer-events-none">
            <div class="absolute -top-48 -left-48 w-[400px] h-[400px] bg-brand-500/5 blur-[120px] rounded-full opacity-40"></div>
            <div class="absolute -bottom-48 -right-48 w-[350px] h-[350px] bg-indigo-500/5 blur-[100px] rounded-full opacity-40"></div>
        </div>

        <div class="max-w-7xl mx-auto px-6 relative z-10"
         x-data="{
            isLoading: false,
            itemCount: {{ $cart ? (int)$cart->items->count() : 0 }},
            subtotal: {{ (float)($totals['subtotal'] ?? 0) }},
            tax: {{ (float)($totals['tax'] ?? 0) }},
            total: {{ (float)($totals['total'] ?? 0) }},
            formatMoney(amount) {
                if (amount === null || amount === undefined || isNaN(amount)) return '0.00';
                return parseFloat(amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            },
            refreshIcons() {
                if (typeof lucide !== 'undefined') lucide.createIcons();
            },
            async removeItem(productId) {
                if (this.isLoading) return;
                this.isLoading = true;
                try {
                    const response = await fetch(`/cart/items/${productId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    });
                    const data = await response.json();
                    
                    if (response.ok) {
                        const el = document.getElementById(`cart-item-${productId}`);
                        if (el) {
                            el.style.opacity = '0';
                            el.style.transform = 'translateX(12px)';
                            setTimeout(() => el.remove(), 400);
                        }
                        if (data.data.item_count === 0) {
                            setTimeout(() => window.location.reload(), 500);
                            return;
                        }
                        this.itemCount = data.data.item_count;
                        this.subtotal  = data.data.subtotal || 0;
                        this.tax       = data.data.tax || 0;
                        this.total     = data.data.total || 0;
                        this.$nextTick(() => this.refreshIcons());

                        // Update global header count and notify
                        this.$dispatch('cart-updated', { 
                            count: this.itemCount, 
                            message: 'Item removed from cart.',
                            type: 'success'
                        });
                    } else {
                        console.error('Remove failed:', data);
                    }
                } catch (e) {
                    console.error('Remove item error:', e);
                } finally {
                    this.isLoading = false;
                }
            },
            async clearCart() {
                if (this.isLoading) return;
                this.isLoading = true;
                try {
                    const response = await fetch('/cart', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    });
                    if (response.ok) {
                        window.location.reload();
                    }
                } catch (e) {
                    console.error('Clear failed:', e);
                    this.isLoading = false;
                }
            }
         }"
         x-init="refreshIcons()">

            {{-- ── Page Header ── --}}
            <div class="pt-4 mb-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div class="flex items-center gap-5">
                    <a href="{{ route('storefront.products') }}"
                       class="w-10 h-10 rounded-xl bg-surface-secondary/50 border border-border-subtle text-text-dim/40 hover:text-brand-500 hover:border-brand-500/20 transition-all flex items-center justify-center shrink-0 group shadow-inner">
                        <i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform stroke-[3]"></i>
                    </a>
                    <div>
                        <h1 class="text-2xl font-display font-900 tracking-tight text-text-base leading-none uppercase">
                            Your <span class="text-brand-500">Cart</span>
                        </h1>
                        <p class="text-[11px] text-text-dim/40 font-900 mt-1.5 uppercase tracking-[0.2em]">
                            Review Your Items
                        </p>
                    </div>
                </div>

                <button @click="clearCart"
                        x-show="itemCount > 0"
                        x-cloak
                        class="self-start sm:self-auto h-10 px-5 rounded-xl text-rose-500 bg-rose-500/5 border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all flex items-center gap-2.5 font-900 text-xs uppercase tracking-widest shadow-inner group"
                        :disabled="isLoading">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="group-hover:rotate-12 transition-transform"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                    Empty Shopping Cart
                </button>
            </div>

            {{-- ── Main Cart Activity ── --}}
            @if($cart && !$cart->isEmpty())
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                
                {{-- Item List --}}
                <div class="lg:col-span-8 space-y-3">
                    @foreach($cart->items as $item)
                    <div id="cart-item-{{ $item->product_id }}" 
                         class="bg-surface-secondary/40 backdrop-blur-xl border border-border-subtle rounded-2xl p-4 flex flex-col sm:flex-row items-center gap-5 transition-all duration-500 shadow-lg hover:bg-surface-secondary group">

                        @php $prod = $item->product; @endphp

                        {{-- Product media / thumbnail (if product exists) --}}
                        @if($prod)
                            <a href="{{ route('storefront.product', $prod->slug) }}" class="w-20 h-20 rounded-xl overflow-hidden border border-border-subtle shrink-0 bg-bg-main shadow-inner">
                                @if($prod->thumbnail)
                                    <img src="{{ asset('storage/' . $prod->thumbnail) }}" 
                                         class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-text-dim/10">
                                        <i data-lucide="image" class="w-8 h-8"></i>
                                    </div>
                                @endif
                            </a>
                        @else
                            <div class="w-20 h-20 rounded-xl overflow-hidden border border-border-subtle shrink-0 bg-bg-main shadow-inner flex items-center justify-center text-xs text-text-dim/60 px-2 text-center">
                                This product is no longer available
                            </div>
                        @endif

                        <div class="flex-1 min-w-0">
                            @if($prod)
                                <p class="text-base font-900 text-text-base uppercase tracking-tight group-hover/item:text-brand-500 transition-colors">{{ $prod->title }}</p>
                                <p class="text-xs font-900 text-text-dim/40 uppercase tracking-widest mt-1.5">v.{{ $prod->version ?? 'Final' }}</p>
                            @else
                                <p class="text-base font-900 text-text-dim uppercase tracking-tight">This product is no longer available</p>
                                <p class="text-xs font-900 text-text-dim/40 uppercase tracking-widest mt-1.5">Removed from catalog</p>
                            @endif
                        </div>

                        <div class="flex items-center gap-4">
                            <span class="bg-surface-primary border border-border-subtle px-2 py-0.5 rounded text-xs font-900 text-text-dim/40 uppercase tracking-widest">
                                {{ optional($prod->category)->name ?? 'Product' }}
                            </span>
                            @if($prod && $prod->vendor)
                                <span class="text-xs font-900 text-text-dim/20 uppercase tracking-[0.2em]">BY {{ $prod->vendor->name }}</span>
                            @endif
                        </div>

                        <div class="flex items-center gap-8 shrink-0">
                            <div class="text-right">
                                <div class="text-xl font-900 text-brand-500 uppercase tracking-tighter mb-0.5">
                                    ${{ number_format($item->price, 2) }}
                                </div>
                                <div class="text-[10px] text-text-dim/30 font-900 uppercase tracking-[0.2em]">Unit Price</div>
                            </div>
                            <button @click="removeItem({{ $item->product_id }})" 
                                    class="w-10 h-10 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-500 hover:bg-rose-500 hover:text-white transition-all flex items-center justify-center shadow-inner active:scale-95 group/btn"
                                    title="Remove Item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Summary Sidebar --}}
                <div class="lg:col-span-4 sticky top-20">
                    <div class="bg-surface-secondary/60 backdrop-blur-2xl border border-border-subtle rounded-2xl p-6 md:p-10 shadow-xl relative overflow-hidden group">
                        <div class="absolute -top-24 -right-24 w-48 h-48 bg-brand-500/5 blur-[80px] rounded-full pointer-events-none group-hover:bg-brand-500/10 transition-all duration-700"></div>

                        <h2 class="text-xs font-900 text-text-base uppercase tracking-[0.3em] mb-8 border-b border-border-subtle pb-4 flex items-center justify-between relative z-10">
                            Order Summary
                            <i data-lucide="shopping-bag" class="w-4 h-4 text-brand-500/40"></i>
                        </h2>

                        <div class="space-y-4 relative z-10">
                            {{-- Line items --}}
                            <div class="flex justify-between items-center text-xs font-bold uppercase tracking-wider">
                                <span class="text-text-dim/80">Total Items</span>
                                <span class="text-text-base" x-text="itemCount">{{ $cart ? (int)$cart->items->count() : 0 }}</span>
                            </div>
                            <div class="flex justify-between items-center text-xs font-bold uppercase tracking-wider">
                                <span class="text-text-dim/80">Cart Subtotal</span>
                                <span class="text-text-base" x-text="'$' + formatMoney(subtotal)">${{ number_format($totals['subtotal'] ?? 0, 2) }}</span>
                            </div>
                            <div class="flex justify-between items-center text-xs font-bold uppercase tracking-wider border-b border-white/5 pb-4">
                                <span class="text-text-dim/80">Estimated Tax</span>
                                <span class="text-text-base" x-text="'$' + formatMoney(tax)">${{ number_format($totals['tax'] ?? 0, 2) }}</span>
                            </div>
                            
                            {{-- Network Total --}}
                            <div class="pt-8 mt-8 border-t border-border-subtle">
                                <p class="text-[10px] font-black text-brand-500 uppercase tracking-[0.2em] mb-2">Grand Total</p>
                                <div class="flex justify-between items-baseline">
                                    <p class="text-4xl font-black text-text-base tracking-tighter uppercase tabular-nums">
                                        $<span x-text="formatMoney(total)">{{ number_format($totals['total'], 2) }}</span>
                                    </p>
                                    <div class="text-[10px] text-text-dim/40 font-bold uppercase tracking-widest px-2 py-0.5 rounded-md bg-white/5 border border-white/5">
                                        USD
                                    </div>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="pt-8">
                                <form action="{{ route('checkout.index') }}" method="GET">
                                    <button type="submit" class="btn-primary w-full shadow-brand-500/20 group/btn">
                                        Initiate Checkout
                                        <i data-lucide="zap" class="w-3.5 h-3.5 ml-2.5 group-hover/btn:translate-x-1.5 transition-transform duration-500"></i>
                                    </button>
                                </form>
                                <noscript>
                                    <div class="mt-2 text-center">
                                        <a href="{{ route('checkout.index') }}" class="text-xs text-text-dim underline">If nothing happens, click here to continue to checkout.</a>
                                    </div>
                                </noscript>
                            </div>

                            {{-- Disclaimer --}}
                            <div class="mt-8 pt-4 border-t border-white/5">
                                <p class="text-sm text-center text-text-dim/80 font-bold uppercase tracking-wide leading-relaxed">
                                    ALL TRANSACTIONS ARE SECURELY PROCESSED & VERIFIED.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            @endif

            {{-- ── Empty Cart State ── --}}
            @if(!$cart || $cart->isEmpty())
            <div class="bg-surface-secondary/20 backdrop-blur-xl border border-border-subtle border-dashed rounded-3xl p-16 text-center flex flex-col items-center justify-center">
                <div class="w-16 h-16 bg-surface-primary border border-border-subtle rounded-2xl flex items-center justify-center text-text-dim/10 mb-6 shadow-inner">
                    <i data-lucide="shopping-bag" class="w-8 h-8 stroke-[1.5]"></i>
                </div>
                <h2 class="text-xl font-900 text-text-base mb-3 uppercase tracking-tight">Your Cart Is Currently Empty</h2>
                <p class="text-[10px] text-text-dim/40 max-w-sm mx-auto font-900 uppercase tracking-widest leading-relaxed mb-10">Explore our professional marketplace to find the high-end digital assets and resources for your next project.</p>
                
                <a href="{{ route('storefront.products') }}" 
                   class="h-11 px-8 inline-flex items-center justify-center font-900 text-[10px] uppercase tracking-widest bg-brand-500 text-white rounded-xl shadow-lg active:scale-95 shadow-brand-500/20 transition-all">
                    Continue Shopping
                </a>
            </div>
            @endif

        </div>
    </div>
</x-layouts.storefront>