@php
    $hasOffer = $product->effective_price !== null && bccomp($product->effective_price, $product->price, 2) < 0;
    $hasPurchased = auth()->check() && \App\Models\Order::where('user_id', auth()->id())
        ->whereIn('status', ['paid', 'processing', 'shipped', 'delivered'])
        ->whereHas('items', fn ($q) => $q->where('product_id', $product->id))
        ->exists();

    // Solo se permite una reseña por cliente por producto (el backend hace
    // updateOrCreate, no duplica) — si ya dejó una, el formulario debe
    // mostrarla como "editar", no como si fuera una reseña nueva en blanco.
    $myReview = auth()->check() ? $product->reviews->firstWhere('user_id', auth()->id()) : null;

    $displayPrice = $hasOffer ? $product->effective_price : $product->price;
    $productImageUrl = $product->cover_image_path
        ? asset('storage/'.$product->cover_image_path)
        : 'https://placehold.co/600x600?text='.urlencode($product->title);

    // Antes, un producto sin NINGUNA fila de variante (dato incompleto: ni
    // siquiera la variante simple implícita) se marcaba "InStock" en el
    // JSON-LD sin más — quedaba publicado ante buscadores como disponible
    // aunque el propio widget de "Agregar al carrito" ya no deja comprarlo.
    $inStock = $product->variants->where('active', true)->sum(fn ($variant) => $variant->availableStock()) > 0;

    $jsonLd = [
        '@context' => 'https://schema.org',
        '@type' => 'Product',
        'name' => $product->title,
        'description' => $product->description ?? $product->subtitle,
        'image' => [$productImageUrl],
        'offers' => [
            '@type' => 'Offer',
            'url' => route('products.show', $product),
            'priceCurrency' => 'PEN',
            'price' => number_format((float) $displayPrice, 2, '.', ''),
            'availability' => $inStock ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
        ],
    ];

    if ($averageRating) {
        $jsonLd['aggregateRating'] = [
            '@type' => 'AggregateRating',
            'ratingValue' => round($averageRating, 1),
            'reviewCount' => $product->reviews->count(),
        ];
    }
@endphp

<x-storefront-layout
    :title="$product->title"
    :description="$product->subtitle ?? $product->description"
    :image="$productImageUrl"
>
    <script type="application/ld+json">{!! json_encode($jsonLd, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_HEX_APOS) !!}</script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            window.trackEcommerceEvent(
                'view_item',
                { currency: 'PEN', value: {{ (float) $displayPrice }}, items: [{ item_id: {{ $product->id }}, item_name: @js($product->title), item_category: @js($product->category->name), price: {{ (float) $displayPrice }} }] },
                'ViewContent',
                { content_ids: [{{ $product->id }}], content_name: @js($product->title), content_category: @js($product->category->name), value: {{ (float) $displayPrice }}, currency: 'PEN' }
            );
        });
    </script>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <nav class="text-sm text-gray-500 dark:text-gray-400 mb-4">
            <a href="{{ route('categories.show', $product->category) }}" wire:navigate class="hover:underline">{{ $product->category->name }}</a>
            @if ($product->subcategory)
                <span class="mx-1">/</span>
                <a href="{{ route('subcategories.show', [$product->category, $product->subcategory]) }}" wire:navigate class="hover:underline">{{ $product->subcategory->name }}</a>
            @endif
        </nav>

        <div class="grid md:grid-cols-2 gap-10">
            <div>
                <div class="relative aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
                    <x-product-image :path="$product->cover_image_path" :alt="$product->title" />
                </div>

                @if ($product->images->isNotEmpty())
                    <div class="mt-3 grid grid-cols-5 gap-2">
                        @foreach ($product->images as $image)
                            <div class="relative aspect-square rounded-md overflow-hidden">
                                <x-product-image :path="$image->path" class="rounded-md" />
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ $product->title }}</h1>

                @if ($product->subtitle)
                    <p class="mt-1 text-gray-500 dark:text-gray-400">{{ $product->subtitle }}</p>
                @endif

                @if ($averageRating)
                    <p class="mt-2 text-sm text-yellow-600">{{ str_repeat('★', round($averageRating)) }}{{ str_repeat('☆', 5 - round($averageRating)) }}
                        <span class="text-gray-500 dark:text-gray-400">({{ $product->reviews->count() }} reseñas)</span>
                    </p>
                @endif

                <div class="mt-4 flex items-center gap-3">
                    @if ($hasOffer)
                        <span class="text-2xl font-bold text-red-600">S/ {{ number_format($product->effective_price, 2) }}</span>
                        <span class="text-lg text-gray-400 line-through">S/ {{ number_format($product->price, 2) }}</span>
                    @else
                        <span class="text-2xl font-bold text-gray-900 dark:text-gray-100">S/ {{ number_format($product->price, 2) }}</span>
                    @endif
                </div>

                <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-6">
                    @livewire('storefront.add-to-cart', ['product' => $product])
                </div>

                <div class="mt-4">
                    @livewire('storefront.wishlist-button', ['product' => $product])
                </div>

                @php
                    $productWhatsappLink = \App\Models\StoreSetting::first()
                        ?->whatsappLink('Hola, tengo una consulta sobre '.$product->title.' ('.route('products.show', $product).')');
                @endphp
                @if ($productWhatsappLink)
                    <a href="{{ $productWhatsappLink }}" target="_blank" rel="noopener"
                       class="mt-3 inline-flex items-center gap-1.5 text-sm text-green-600 hover:underline">
                        ¿Dudas sobre este producto? Escríbenos por WhatsApp
                    </a>
                @endif

                @if ($product->description)
                    <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-6 text-sm text-gray-600 dark:text-gray-400">
                        {{ $product->description }}
                    </div>
                @endif
            </div>
        </div>

        <section class="mt-16">
            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Reseñas</h2>

            @if ($product->reviews->isEmpty())
                <p class="text-gray-500 dark:text-gray-400 mb-6">Este producto todavía no tiene reseñas.</p>
            @else
                <div class="space-y-4 mb-8">
                    @foreach ($product->reviews as $review)
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
                            <div class="flex items-center justify-between">
                                <span class="font-medium text-gray-900 dark:text-gray-100">{{ $review->user->name }}</span>
                                <span class="text-yellow-600 text-sm">{{ str_repeat('★', $review->rating) }}{{ str_repeat('☆', 5 - $review->rating) }}</span>
                            </div>
                            @if ($review->comment)
                                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ $review->comment }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif

            @auth
                @if ($hasPurchased)
                    <form method="POST" action="{{ route('products.reviews.store', $product->slug) }}" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 max-w-md">
                        @csrf
                        <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ $myReview ? 'Edita tu reseña' : 'Escribe tu reseña' }}</h3>
                        @if ($myReview)
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Ya habías dejado una reseña de este producto — al publicar, se actualiza en vez de crear una nueva.</p>
                        @endif

                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Calificación</label>
                        <select name="rating" class="w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm mb-3">
                            @for ($i = 5; $i >= 1; $i--)
                                <option value="{{ $i }}" @selected(old('rating', $myReview?->rating ?? 5) == $i)>{{ $i }} estrella{{ $i > 1 ? 's' : '' }}</option>
                            @endfor
                        </select>

                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Comentario</label>
                        <textarea name="comment" rows="3" class="w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm mb-3">{{ old('comment', $myReview?->comment) }}</textarea>

                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-semibold rounded-md hover:bg-indigo-700">
                            {{ $myReview ? 'Actualizar reseña' : 'Publicar reseña' }}
                        </button>
                    </form>
                @else
                    <p class="text-sm text-gray-500 dark:text-gray-400">Solo los clientes que compraron este producto pueden dejar una reseña.</p>
                @endif
            @else
                <a href="{{ route('login') }}" wire:navigate class="text-indigo-600 hover:underline text-sm">Inicia sesión para dejar una reseña</a>
            @endauth
        </section>

        @if ($relatedProducts->isNotEmpty())
            <section class="mt-16">
                <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Productos relacionados</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
                    @foreach ($relatedProducts as $related)
                        @include('catalog.partials.product-card', ['product' => $related])
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</x-storefront-layout>