@extends('layouts.app')

@section('title', 'Product Detail — Jumia Clone')

@section('content')
<div class="max-w-7xl mx-auto px-3 md:px-6 py-4"
     x-data="productDetail('{{ $uuid }}')"
     x-init="init()">

    {{-- Loading skeleton --}}
    <div x-show="loading" class="md:flex md:gap-8 animate-pulse">
        <div class="md:w-2/5">
            <div class="skeleton aspect-square rounded-xl mb-2"></div>
            <div class="flex gap-2">
                @for($i=0;$i<4;$i++)<div class="skeleton w-16 h-16 rounded-lg"></div>@endfor
            </div>
        </div>
        <div class="flex-1 mt-4 md:mt-0 space-y-3">
            <div class="skeleton h-6 w-4/5"></div>
            <div class="skeleton h-4 w-2/5"></div>
            <div class="skeleton h-8 w-1/3"></div>
            <div class="skeleton h-24 w-full"></div>
            <div class="skeleton h-12 w-full"></div>
        </div>
    </div>

    {{-- Product content --}}
    <div x-show="!loading && product" class="animate-fade-in">

        {{-- Breadcrumb --}}
        <nav class="flex items-center gap-1.5 text-xs text-gray-500 mb-3 overflow-x-auto scrollbar-hide whitespace-nowrap">
            <a href="/" class="hover:text-orange-500">Home</a>
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <a :href="`/products?category=${product?.category?.slug}`"
               class="hover:text-orange-500" x-text="product?.category?.name"></a>
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <span class="text-gray-700 font-medium line-clamp-1" x-text="product?.name"></span>
        </nav>

        <div class="md:flex md:gap-8">

            {{-- ── Image Gallery ── --}}
            <div class="md:w-2/5 flex-shrink-0">

                {{-- Main image --}}
                <div class="relative bg-white rounded-xl overflow-hidden border border-gray-200 aspect-square mb-2">
                    {{-- Flash badge --}}
                    <div x-show="product?.is_flash_sale" class="flash-badge">⚡ FLASH SALE</div>

                    {{-- Discount badge --}}
                    <div x-show="product?.sale_price"
                         class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded z-10"
                         x-text="`-${discount(product?.base_price, product?.sale_price)}%`"></div>

                    {{-- Images --}}
                    <template x-if="product?.media?.length > 0">
                        <div class="relative h-full">
                            <template x-for="(img, idx) in product.media" :key="idx">
                                <img :src="img.original_url"
                                     :alt="product.name"
                                     class="absolute inset-0 w-full h-full object-contain transition-opacity duration-300"
                                     :class="selectedImage === idx ? 'opacity-100' : 'opacity-0'">
                            </template>
                        </div>
                    </template>
                    <template x-if="!product?.media?.length">
                        <img src="/images/placeholder.png" :alt="product?.name" class="w-full h-full object-contain p-4">
                    </template>

                    {{-- Navigation arrows --}}
                    <button x-show="product?.media?.length > 1" @click="prevImage()"
                            class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-white/80 rounded-full shadow flex items-center justify-center hover:bg-white transition-colors z-10">
                        <svg class="w-4 h-4 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                    <button x-show="product?.media?.length > 1" @click="nextImage()"
                            class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-white/80 rounded-full shadow flex items-center justify-center hover:bg-white transition-colors z-10">
                        <svg class="w-4 h-4 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>

                {{-- Thumbnails --}}
                <div class="flex gap-2 overflow-x-auto scrollbar-hide">
                    <template x-for="(img, idx) in product?.media || []" :key="idx">
                        <button @click="selectedImage = idx"
                                class="flex-shrink-0 w-14 h-14 rounded-lg border-2 overflow-hidden transition-colors"
                                :class="selectedImage === idx ? 'border-orange-500' : 'border-gray-200 hover:border-gray-400'">
                            <img :src="img.original_url" class="w-full h-full object-cover">
                        </button>
                    </template>
                </div>
            </div>

            {{-- ── Product Info ── --}}
            <div class="flex-1 mt-4 md:mt-0 space-y-4"
                 x-data="addToCart(product?.id)">

                {{-- Brand --}}
                <div x-show="product?.brand" class="inline-block badge-gray" x-text="product?.brand?.name"></div>

                {{-- Name --}}
                <h1 class="text-xl md:text-2xl font-bold text-gray-900 leading-tight" x-text="product?.name"></h1>

                {{-- Rating + Reviews --}}
                <div class="flex items-center gap-3">
                    <div class="flex items-center gap-1">
                        <div class="stars">
                            <template x-for="i in 5">
                                <span :class="i <= Math.round(product?.average_rating || 0) ? 'star-filled' : 'star-empty'">★</span>
                            </template>
                        </div>
                        <span class="text-sm font-medium text-gray-700" x-text="Number(product?.average_rating || 0).toFixed(1)"></span>
                    </div>
                    <span class="text-sm text-gray-500" x-text="`${product?.review_count || 0} reviews`"></span>
                    <span class="text-sm text-gray-400">|</span>
                    <span class="text-sm text-gray-500" x-text="`${product?.total_sales || 0} sold`"></span>
                </div>

                {{-- Price --}}
                <div class="bg-orange-50 rounded-xl p-4">
                    <div class="flex items-baseline gap-3">
                        <span class="text-3xl font-black text-orange-500" x-text="price(currentPrice)"></span>
                        <span x-show="originalPrice" class="price-strike text-base" x-text="price(originalPrice)"></span>
                        <span x-show="product?.sale_price"
                              class="badge-red"
                              x-text="`${discount(product?.base_price, product?.sale_price)}% off`"></span>
                    </div>
                    <p x-show="product?.is_flash_sale" class="text-xs text-red-600 font-medium mt-1">
                        ⚡ Flash Sale Price — Limited time offer!
                    </p>
                </div>

                {{-- Variants --}}
                <div x-show="product?.variants?.length > 0">
                    <h3 class="text-sm font-semibold text-gray-900 mb-2">Select Variant:</h3>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="variant in product?.variants || []" :key="variant.id">
                            <button @click="selectVariant(variant); variantId = variant.id"
                                    class="px-3 py-1.5 rounded-lg border text-sm transition-colors"
                                    :class="{
                                        'border-orange-500 bg-orange-50 text-orange-600 font-medium': selectedVariant?.id === variant.id,
                                        'border-gray-300 text-gray-700 hover:border-gray-400': selectedVariant?.id !== variant.id,
                                        'opacity-50 cursor-not-allowed': variant.stock_quantity === 0,
                                    }"
                                    :disabled="variant.stock_quantity === 0">
                                <span x-text="variant.name"></span>
                                <span x-show="variant.stock_quantity === 0" class="text-xs ml-1 opacity-70">(OOS)</span>
                            </button>
                        </template>
                    </div>
                </div>

                {{-- Quantity --}}
                <div class="flex items-center gap-4">
                    <span class="text-sm font-medium text-gray-700">Quantity:</span>
                    <div class="flex items-center gap-2">
                        <button @click="dec()" class="qty-btn">−</button>
                        <span class="w-10 text-center text-base font-bold" x-text="quantity"></span>
                        <button @click="inc()" class="qty-btn">+</button>
                    </div>
                    <span class="text-xs text-gray-500"
                          x-text="product?.stock_quantity > 0 ? `${product.stock_quantity} available` : 'Out of stock'"></span>
                </div>

                {{-- CTA Buttons --}}
                <div class="flex gap-3">
                    <button @click="add()" :disabled="loading || product?.stock_quantity === 0"
                            class="flex-1 btn-primary py-3.5 text-base">
                        <span x-show="!loading && product?.stock_quantity > 0">
                            <svg class="w-5 h-5" 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>
                            Add to Cart
                        </span>
                        <span x-show="loading" class="flex items-center gap-2">
                            <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                            Adding...
                        </span>
                        <span x-show="product?.stock_quantity === 0">Out of Stock</span>
                    </button>

                    <div x-data="wishlist(product?.id)">
                        <button @click="toggle()" :disabled="loading"
                                class="btn-secondary px-4 py-3.5"
                                :class="active ? 'border-red-500 text-red-500 bg-red-50' : ''">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 :class="active ? 'fill-red-500 stroke-red-500' : ''">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      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>
                    </div>
                </div>

                {{-- Delivery info --}}
                <div class="bg-gray-50 rounded-xl p-4 space-y-2.5">
                    <div class="flex items-start gap-2.5">
                        <span class="text-xl flex-shrink-0">🚚</span>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Delivery</p>
                            <p class="text-xs text-gray-500">Standard delivery in 2–5 business days | Express available</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-2.5">
                        <span class="text-xl flex-shrink-0">🔄</span>
                        <div>
                            <p class="text-sm font-medium text-gray-900">7-Day Returns</p>
                            <p class="text-xs text-gray-500">Hassle-free returns within 7 days of delivery</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-2.5">
                        <span class="text-xl flex-shrink-0">✅</span>
                        <div>
                            <p class="text-sm font-medium text-gray-900">100% Authentic</p>
                            <p class="text-xs text-gray-500">All sellers are verified by Jumia</p>
                        </div>
                    </div>
                </div>

                {{-- Seller info --}}
                <div class="border border-gray-200 rounded-xl p-3 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <div class="w-9 h-9 bg-orange-100 rounded-full flex items-center justify-center">
                            <span class="text-orange-500 font-bold text-sm" x-text="product?.seller?.store_name?.charAt(0)"></span>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900" x-text="product?.seller?.store_name"></p>
                            <div class="flex items-center gap-1">
                                <span class="text-yellow-400 text-xs">★</span>
                                <span class="text-xs text-gray-500" x-text="`${product?.seller?.rating || '4.5'} seller rating`"></span>
                            </div>
                        </div>
                    </div>
                    <a :href="`/products?seller=${product?.seller?.id}`"
                       class="text-xs text-orange-500 font-medium hover:underline">View Store</a>
                </div>
            </div>
        </div>

        {{-- ── Product Description ── --}}
        <div class="mt-8 bg-white rounded-xl p-4 md:p-6">
            <h2 class="section-title mb-4">Product Description</h2>
            <div class="text-sm text-gray-700 leading-relaxed prose max-w-none"
                 x-html="product?.description"></div>

            {{-- Attributes --}}
            <div x-show="product?.attributes && Object.keys(product.attributes || {}).length > 0" class="mt-4">
                <h3 class="text-sm font-bold text-gray-900 mb-3">Specifications</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-1">
                    <template x-for="[key, val] in Object.entries(product?.attributes || {})" :key="key">
                        <div class="flex gap-2 py-2 border-b border-gray-100">
                            <span class="text-xs text-gray-500 w-32 flex-shrink-0 capitalize" x-text="key.replace(/_/g, ' ')"></span>
                            <span class="text-xs text-gray-900 font-medium" x-text="val"></span>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        {{-- ── Reviews ── --}}
        <div class="mt-6 bg-white rounded-xl p-4 md:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="section-title">Customer Reviews</h2>
            </div>

            {{-- Rating summary --}}
            <div class="flex items-center gap-6 mb-6 pb-6 border-b border-gray-100">
                <div class="text-center">
                    <div class="text-5xl font-black text-gray-900" x-text="Number(product?.average_rating || 0).toFixed(1)"></div>
                    <div class="stars justify-center mt-1">
                        <template x-for="i in 5">
                            <span class="text-lg" :class="i <= Math.round(product?.average_rating || 0) ? 'star-filled' : 'star-empty'">★</span>
                        </template>
                    </div>
                    <div class="text-xs text-gray-500 mt-1" x-text="`${product?.review_count || 0} reviews`"></div>
                </div>
            </div>

            {{-- Review list --}}
            <div x-show="reviews.length === 0" class="text-center py-6 text-gray-500 text-sm">
                No reviews yet. Be the first to review this product!
            </div>

            <div class="space-y-4">
                <template x-for="review in reviews" :key="review.id">
                    <div class="pb-4 border-b border-gray-100 last:border-0">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
                                    <span class="text-orange-500 font-bold text-sm"
                                          x-text="review.user?.first_name?.charAt(0)"></span>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900"
                                       x-text="`${review.user?.first_name} ${review.user?.last_name?.charAt(0)}.`"></p>
                                    <div class="stars text-xs">
                                        <template x-for="i in 5">
                                            <span :class="i <= review.rating ? 'star-filled' : 'star-empty'">★</span>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <span class="text-xs text-gray-400"
                                  x-text="new Date(review.created_at).toLocaleDateString('en-NG', {year:'numeric',month:'short',day:'numeric'})"></span>
                        </div>
                        <p class="text-sm text-gray-700 mt-2 leading-relaxed" x-text="review.comment"></p>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
@endsection