<x-layouts.frontend title="My Wishlist">
    <section class="mx-auto max-w-7xl px-6 py-14">
        <div class="mb-10 text-center" data-reveal-self>
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-champagne-light">Saved For Later</p>
            <h1 class="mt-2 font-display text-3xl text-ink sm:text-4xl">My Wishlist</h1>
        </div>

        @if ($products->isEmpty())
            <div class="flex flex-col items-center justify-center py-16 text-center">
                <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-cream text-ink/25">
                    <x-icon name="heart" class="h-7 w-7" />
                </div>
                <p class="text-sm text-ink/50">Nothing saved yet.</p>
                <x-frontend.button href="{{ route('shop.index') }}" class="mt-5">Start Shopping</x-frontend.button>
            </div>
        @else
            <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4" data-reveal>
                @foreach ($products as $wishlist)
                    @php
                        $quickVariant = $wishlist->product->variants
                            ->first(fn ($v) => ($v->inventory?->available_quantity ?? 0) > 0);
                    @endphp
                    <div data-wishlist-item>
                        <x-frontend.product-card :product="$wishlist->product" :wishlist-page="true" />

                        <div class="mt-3 flex gap-2">
                            @if ($quickVariant)
                                <form method="POST" action="{{ route('cart.add', $wishlist->product) }}" data-ajax="cart" class="flex-1">
                                    @csrf
                                    <input type="hidden" name="variant_id" value="{{ $quickVariant->id }}">
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="btn btn-outline btn-sm w-full">
                                        <x-icon name="shopping-bag" class="h-3.5 w-3.5" /> Add to Cart
                                    </button>
                                </form>
                            @endif
                            <form
                                method="POST" action="{{ route('wishlist.toggle', $wishlist->product) }}"
                                data-ajax="wishlist" data-remove-on-success
                                class="{{ $quickVariant ? '' : 'flex-1' }}"
                            >
                                @csrf
                                <button type="submit" class="btn btn-ghost btn-sm {{ $quickVariant ? '' : 'w-full' }} text-maroon" aria-label="Remove from wishlist">
                                    <x-icon name="trash-2" class="h-3.5 w-3.5" />
                                    <span class="{{ $quickVariant ? 'sr-only' : '' }}">Remove</span>
                                </button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-10">
                {{ $products->links() }}
            </div>
        @endif
    </section>
</x-layouts.frontend>
