<x-app-layout>
    @php
        $categoryLabels = [
            'new_hardware' => 'New Hardware',
            'software' => 'Software',
            'reverb' => 'Reverb',
            'used' => 'Used Deals',
            'other' => 'Other',
        ];
        $placeholderGradients = [
            'new_hardware' => 'from-blue-500 to-indigo-600',
            'software' => 'from-violet-500 to-purple-600',
            'reverb' => 'from-orange-400 to-red-500',
            'used' => 'from-emerald-500 to-teal-600',
            'other' => 'from-slate-500 to-gray-600',
        ];
    @endphp

    <div class="min-h-screen bg-gray-50">
        <!-- Hero -->
        <div class="bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-14 pt-24 md:pt-28">
                <div class="md:flex md:items-end md:justify-between gap-8">
                    <div>
                        <h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
                            🔥 Gear Deals
                        </h1>
                        <p class="text-lg text-orange-50 max-w-2xl">
                            The best music gear deals from around the web — spotted, shared, and vetted by the community.
                        </p>

                        <!-- Live stats -->
                        <div class="flex flex-wrap gap-3 mt-5">
                            <div class="bg-white/15 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm text-white">
                                <span class="font-bold">{{ $stats['deals_this_week'] }}</span> new {{ Str::plural('deal', $stats['deals_this_week']) }} this week
                            </div>
                            <div class="bg-white/15 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm text-white">
                                <span class="font-bold">{{ $stats['comments_this_week'] }}</span> {{ Str::plural('comment', $stats['comments_this_week']) }} this week
                            </div>
                            @if($stats['store_count'] > 1)
                                <div class="bg-white/15 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm text-white">
                                    from <span class="font-bold">{{ $stats['store_count'] }}</span> stores across the web
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="mt-6 md:mt-0 flex-shrink-0">
                        @auth
                            <a href="{{ route('deals.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-orange-600 font-bold rounded-lg shadow hover:bg-orange-50 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
                                </svg>
                                Post a Deal
                            </a>
                            <p class="text-xs text-orange-100 mt-2 text-center">Found a bargain anywhere online? Share it!</p>
                        @else
                            <a href="{{ route('login') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-orange-600 font-bold rounded-lg shadow hover:bg-orange-50 transition-colors">
                                Login to Post a Deal
                            </a>
                        @endauth
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- Featured Deals -->
            @if($featured->count() > 0)
                <div class="mb-10">
                    <div class="flex items-center gap-2 mb-4">
                        <svg class="w-5 h-5 text-yellow-500" 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"></path>
                        </svg>
                        <h2 class="text-2xl font-bold text-gray-900">Featured Deals</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                        @foreach($featured as $deal)
                            @include('deals.partials.deal-card', ['deal' => $deal, 'featured' => true, 'categoryLabels' => $categoryLabels, 'placeholderGradients' => $placeholderGradients])
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Filters + Sort -->
            <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                <div class="flex gap-2 overflow-x-auto pb-1">
                    <a href="{{ route('deals.index', array_filter(['sort' => $sort !== 'hot' ? $sort : null])) }}"
                       class="whitespace-nowrap px-4 py-1.5 rounded-full text-sm font-medium transition-colors {{ $activeCategory === 'all' ? 'bg-gray-900 text-white' : 'bg-white text-gray-600 border border-gray-200 hover:border-gray-400' }}">
                        All
                    </a>
                    @foreach($categoryLabels as $key => $label)
                        <a href="{{ route('deals.index', array_filter(['category' => $key, 'sort' => $sort !== 'hot' ? $sort : null])) }}"
                           class="whitespace-nowrap px-4 py-1.5 rounded-full text-sm font-medium transition-colors {{ $activeCategory === $key ? 'bg-gray-900 text-white' : 'bg-white text-gray-600 border border-gray-200 hover:border-gray-400' }}">
                            {{ $label }}@if(($categoryCounts[$key] ?? 0) > 0)<span class="ml-1.5 {{ $activeCategory === $key ? 'text-gray-300' : 'text-gray-400' }}">{{ $categoryCounts[$key] }}</span>@endif
                        </a>
                    @endforeach
                </div>

                <div class="flex rounded-lg border border-gray-200 bg-white p-0.5 text-sm font-medium">
                    <a href="{{ route('deals.index', array_filter(['category' => $activeCategory !== 'all' ? $activeCategory : null])) }}"
                       class="px-4 py-1.5 rounded-md transition-colors {{ $sort === 'hot' ? 'bg-orange-500 text-white' : 'text-gray-600 hover:text-gray-900' }}">
                        🔥 Hot
                    </a>
                    <a href="{{ route('deals.index', array_filter(['category' => $activeCategory !== 'all' ? $activeCategory : null, 'sort' => 'new'])) }}"
                       class="px-4 py-1.5 rounded-md transition-colors {{ $sort === 'new' ? 'bg-orange-500 text-white' : 'text-gray-600 hover:text-gray-900' }}">
                        ✨ Newest
                    </a>
                </div>
            </div>

            <!-- Deals Grid -->
            @if($deals->count() > 0)
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                    @foreach($deals as $deal)
                        @include('deals.partials.deal-card', ['deal' => $deal, 'featured' => false, 'categoryLabels' => $categoryLabels, 'placeholderGradients' => $placeholderGradients])
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-8">
                    {{ $deals->links() }}
                </div>
            @else
                <div class="bg-white rounded-xl border-2 border-dashed border-gray-200 py-16 text-center">
                    <div class="text-5xl mb-4">🎸</div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">
                        @if($activeCategory !== 'all')
                            No {{ $categoryLabels[$activeCategory] ?? '' }} deals right now
                        @else
                            No deals yet
                        @endif
                    </h3>
                    <p class="text-gray-600 mb-6 max-w-md mx-auto">
                        Spotted a great price on gear anywhere online? Drop the link and share it with the community.
                    </p>
                    @auth
                        <a href="{{ route('deals.create') }}" class="inline-flex items-center px-6 py-3 bg-orange-500 text-white font-bold rounded-lg hover:bg-orange-600 transition-colors">
                            Post the First Deal
                        </a>
                    @else
                        <a href="{{ route('login') }}" class="inline-flex items-center px-6 py-3 bg-orange-500 text-white font-bold rounded-lg hover:bg-orange-600 transition-colors">
                            Login to Post a Deal
                        </a>
                    @endauth
                </div>
            @endif
        </div>
    </div>

    <script>
        async function vote(dealId, type) {
            if (!@json(auth()->check())) {
                window.location.href = '{{ route('login') }}';
                return;
            }

            try {
                const response = await fetch(`/deals/${dealId}/vote`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({ type: type })
                });

                const result = await response.json();

                if (result.success) {
                    const score = result.upvotes - result.downvotes;
                    document.querySelectorAll(`[data-score="${dealId}"]`).forEach(el => el.textContent = score);
                }
            } catch (error) {
                console.error('Error voting:', error);
            }
        }
    </script>
</x-app-layout>
