@props(['product'])

@php
// Fetch the combined (real + fake) reviews from our accessor
// display_reviews returns a Collection
$reviews = $product->display_reviews ?? collect([]);

// We should compute the average rating taking fake reviews into account
// if the toggle is enabled, or fallback to real rating.
$totalReviews = $reviews->count();
$averageRating = $totalReviews > 0 ? round($reviews->avg('rating'), 1) : 0;
@endphp

<div x-data="productReviewsComponent(@js($reviews))" class="w-full max-w-5xl mx-auto py-12 px-4 sm:px-6 lg:px-8">

    <!-- Header & Summary -->
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between border-b border-border-subtle pb-8 mb-8">
        <div>
            <h2 class="text-3xl font-bricolage font-bold text-text-base dark:text-white tracking-tight">Customer Reviews</h2>
            <div class="flex items-center gap-4 mt-3">
                <div class="flex items-center text-yellow-400 text-xl">
                    <template x-for="i in 5">
                        <svg class="w-6 h-6" :class="i <= Math.round('{{ $averageRating }}') ? 'text-yellow-400' : 'text-gray-700'" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                    </template>
                </div>
                <div class="text-lg text-text-dim font-medium pb-0.5">
                    {{ $averageRating }} out of 5
                </div>
                <div class="text-sm text-text-dim/60 pb-0.5">
                    Based on {{ $totalReviews }} {{ Str::plural('review', $totalReviews) }}
                </div>
            </div>
        </div>

        <!-- Sorting -->
        <div class="mt-6 md:mt-0 flex items-center gap-3">
            <label class="text-sm font-medium text-text-dim">Sort by:</label>
            <select x-model="sortBy" class="bg-surface-secondary border border-border-subtle text-text-base text-sm rounded-lg focus:ring-emerald-500 focus:border-emerald-500 block px-4 py-2 outline-none transition duration-200">
                <option value="latest">Latest</option>
                <option value="highest">Highest Rating</option>
                <option value="verified">Verified Purchases</option>
            </select>
        </div>
    </div>

    <!-- Empty State -->
    <template x-if="sortedReviews.length === 0">
        <div class="text-center py-16 bg-surface-primary/40 rounded-2xl border border-border-subtle transition-all">
            <svg class="mx-auto h-12 w-12 text-gray-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
            <h3 class="text-lg font-medium text-text-base dark:text-white">No reviews yet</h3>
            <p class="mt-1 text-sm text-text-dim">Be the first to review this product.</p>
        </div>
    </template>

    <!-- Reviews Grid Layout -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6" x-ref="reviewsGrid">
        <template x-for="r in sortedReviews" :key="r.id">
            <div
                class="bg-surface-primary border border-border-subtle rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:border-emerald-500/30 hover:shadow-lg flex flex-col"
                x-show="true"
                x-transition:enter="transition ease-out duration-300 transform"
                x-transition:enter-start="opacity-0 translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-4">
                        <!-- Avatar Circle -->
                        <div class="w-12 h-12 rounded-full overflow-hidden bg-surface-secondary border-2 border-border-subtle flex-shrink-0 flex items-center justify-center shadow-inner">
                            <template x-if="r.customer_avatar">
                                <img :src="r.customer_avatar.startsWith('http') ? r.customer_avatar : '/storage/' + r.customer_avatar" class="w-full h-full object-cover" alt="Avatar">
                            </template>
                            <template x-if="!r.customer_avatar">
                                <div class="w-full h-full text-sm font-bold bg-gradient-to-br from-indigo-500 to-emerald-400 text-white flex items-center justify-center uppercase tracking-wider shadow-inner" x-text="r.customer_name ? r.customer_name.substring(0, 2) : 'A'"></div>
                            </template>
                        </div>

                        <div>
                            <div class="flex items-center gap-2">
                                <span class="text-base font-semibold text-text-base dark:text-white" x-text="r.customer_name"></span>
                                <!-- Verified Badge -->
                                <template x-if="r.is_verified_purchase">
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20" title="Verified Purchase">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                        </svg>
                                        Verified
                                    </span>
                                </template>
                            </div>
                            <div class="text-xs text-text-dim mt-0.5" x-text="formatDate(r.created_at)"></div>
                        </div>
                    </div>

                    <!-- Stars rating UI -->
                    <div class="flex text-yellow-400 items-center">
                        <template x-for="i in 5">
                            <svg class="w-4 h-4" :class="i <= (r.rating || 5) ? 'text-yellow-400 drop-shadow-sm' : 'text-text-dim/60'" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                            </svg>
                        </template>
                    </div>
                </div>

                <div class="mt-2 text-text-dim text-sm leading-relaxed whitespace-pre-line flex-1" x-text="r.comment"></div>
            </div>
        </template>
    </div>

</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('productReviewsComponent', (initialReviews) => ({
            reviews: initialReviews || [],
            sortBy: 'latest', // latest, highest, verified

            get sortedReviews() {
                let sorted = [...this.reviews];

                if (this.sortBy === 'highest') {
                    sorted.sort((a, b) => b.rating - a.rating);
                } else if (this.sortBy === 'verified') {
                    // First filter out unverified, then sort by latest
                    sorted = sorted.filter(r => r.is_verified_purchase);
                    sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
                } else {
                    // default: latest
                    sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
                }

                return sorted;
            },

            formatDate(dateString) {
                if (!dateString) return '';
                const options = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                };
                return new Date(dateString).toLocaleDateString(undefined, options);
            }
        }))
    });
</script>