@extends('layouts.app')
@section('title', 'My Wishlist — Jumia Clone')

@section('content')
<div class="max-w-5xl mx-auto px-3 md:px-6 py-4"
     x-data="{
         items: [],
         loading: true,
         async init() {
             if (!$store.app.isLoggedIn) { window.location.href = '/login'; return }
             try {
                 const data = await api.get('/wishlist')
                 this.items = data.data || []
             } catch {}
             this.loading = false
         },
         async remove(productId) {
             await api.delete('/wishlist/' + productId)
             this.items = this.items.filter(i => i.product.id !== productId)
             Alpine.store('app').toast('Removed from wishlist')
         },
         price: n => '₦' + Number(n).toLocaleString('en-NG', {minimumFractionDigits:2}),
     }"
     x-init="init()">

    <h1 class="text-lg font-bold text-gray-900 mb-4">My Wishlist
        <span x-show="items.length" x-text="`(${items.length})`" class="text-gray-400 font-normal text-sm"></span>
    </h1>

    <div x-show="loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 animate-pulse">
        @for($i=0;$i<8;$i++)
        <div class="bg-white rounded-xl p-3">
            <div class="skeleton aspect-square rounded-lg mb-2"></div>
            <div class="skeleton h-3 w-4/5 mb-1"></div>
            <div class="skeleton h-4 w-1/2"></div>
        </div>
        @endfor
    </div>

    <div x-show="!loading && items.length === 0" class="flex flex-col items-center py-20 text-center">
        <div class="text-6xl mb-4">❤️</div>
        <h3 class="font-bold text-gray-900 mb-2">Your wishlist is empty</h3>
        <p class="text-gray-500 text-sm mb-4">Save items you love for later</p>
        <a href="/products" class="btn-primary">Browse Products</a>
    </div>

    <div x-show="!loading && items.length > 0"
         class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
        <template x-for="item in items" :key="item.id">
            <div class="product-card relative" x-data="addToCart(item.product.id)">
                <button @click="remove(item.product.id)"
                        class="absolute top-2 right-2 z-10 w-7 h-7 bg-white rounded-full shadow flex items-center justify-center text-red-500 hover:bg-red-50">
                    <svg class="w-3.5 h-3.5 fill-red-500" viewBox="0 0 24 24">
                        <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                    </svg>
                </button>
                <a :href="`/products/${item.product.uuid}`" class="block overflow-hidden bg-gray-50 rounded-t-lg aspect-square">
                    <img :src="item.product.primary_image || '/images/placeholder.svg'"
                         :alt="item.product.name" class="product-img w-full h-full object-cover">
                </a>
                <div class="p-2.5">
                    <p class="text-xs text-gray-800 line-clamp-2" x-text="item.product.name"></p>
                    <p class="text-sm font-bold text-orange-500 mt-1"
                       x-text="price(item.product.base_price)"></p>
                    <button @click="add()" :disabled="loading"
                            class="mt-2 w-full text-xs py-1.5 rounded bg-orange-500 text-white hover:bg-orange-600 transition-colors disabled:opacity-50">
                        <span x-show="!loading">Add to Cart</span>
                        <span x-show="loading">...</span>
                    </button>
                </div>
            </div>
        </template>
    </div>
</div>
@endsection