@extends('layouts.app')

@section('title', 'Products — Jumia Clone')

@section('content')
<div class="max-w-7xl mx-auto px-3 md:px-6 py-4"
     x-data="productList({ q: '{{ request('q') }}', filters: { category: '{{ request('category') }}', sort: '{{ request('sort', 'created_at') }}', flash_sale: '{{ request('flash_sale') }}', featured: '{{ request('featured') }}' } })"
     x-init="init()">

    {{-- ── Breadcrumb ── --}}
    <nav class="flex items-center gap-1.5 text-xs text-gray-500 mb-3 overflow-x-auto whitespace-nowrap scrollbar-hide">
        <a href="/" class="hover:text-orange-500">Home</a>
        <svg class="w-3 h-3 flex-shrink-0" 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">
            <span x-show="filters.q" x-text="`Search: "${filters.q}"`"></span>
            <span x-show="!filters.q">Products</span>
        </span>
        <span x-show="total > 0" class="text-gray-400" x-text="`(${total.toLocaleString()} results)`"></span>
    </nav>

    {{-- ── Mobile Filter Bar ── --}}
    <div class="flex items-center gap-2 mb-3 md:hidden overflow-x-auto scrollbar-hide pb-1">
        <button @click="filterOpen = !filterOpen"
                class="flex-shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-gray-300 text-xs font-medium bg-white">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/>
            </svg>
            Filters
        </button>

        {{-- Sort chips --}}
        @foreach(['created_at' => 'Latest', 'popular' => 'Popular', 'price_asc' => 'Price ↑', 'price_desc' => 'Price ↓', 'rating' => 'Rating'] as $val => $label)
        <button @click="filters.sort = '{{ $val }}'; applyFilter()"
                class="flex-shrink-0 px-3 py-1.5 rounded-full border text-xs font-medium transition-colors"
                :class="filters.sort === '{{ $val }}' ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300'">
            {{ $label }}
        </button>
        @endforeach
    </div>

    <div class="flex gap-5">

        {{-- ── Sidebar Filters (desktop) ── --}}
        <aside class="hidden md:block w-56 flex-shrink-0 space-y-4">

            {{-- Sort --}}
            <div class="card-padded">
                <h3 class="text-sm font-bold text-gray-900 mb-3">Sort By</h3>
                <div class="space-y-1.5">
                    @foreach(['created_at' => 'Latest First', 'popular' => 'Most Popular', 'price_asc' => 'Price: Low to High', 'price_desc' => 'Price: High to Low', 'rating' => 'Highest Rated'] as $val => $label)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" :value="'{{ $val }}'" x-model="filters.sort"
                               @change="applyFilter()"
                               class="text-orange-500 focus:ring-orange-400">
                        <span class="text-sm text-gray-700">{{ $label }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            {{-- Categories --}}
            <div class="card-padded">
                <h3 class="text-sm font-bold text-gray-900 mb-3">Categories</h3>
                <div class="space-y-1">
                    @php
                        $sidebarCats = [
                            'phones-tablets' => 'Phones & Tablets',
                            'electronics' => 'Electronics',
                            'computing' => 'Computing',
                            'fashion' => 'Fashion',
                            'home-living' => 'Home & Living',
                            'home-appliances' => 'Home Appliances',
                            'health-beauty' => 'Health & Beauty',
                            'groceries' => 'Groceries',
                            'baby-products' => 'Baby Products',
                            'sports' => 'Sports & Outdoors',
                            'automotive' => 'Automotive',
                            'books' => 'Books & Media',
                        ];
                    @endphp
                    @foreach($sidebarCats as $slug => $name)
                    <button @click="filters.category = filters.category === '{{ $slug }}' ? '' : '{{ $slug }}'; applyFilter()"
                            class="w-full text-left px-2 py-1.5 rounded text-sm transition-colors"
                            :class="filters.category === '{{ $slug }}' ? 'bg-orange-50 text-orange-600 font-medium' : 'text-gray-700 hover:bg-gray-50'">
                        {{ $name }}
                    </button>
                    @endforeach
                </div>
            </div>

            {{-- Price Range --}}
            <div class="card-padded">
                <h3 class="text-sm font-bold text-gray-900 mb-3">Price Range</h3>
                <div class="space-y-2">
                    <div>
                        <label class="label text-xs">Min (₦)</label>
                        <input type="number" x-model="filters.min_price" placeholder="0"
                               @change="applyFilter()" class="input text-xs py-2">
                    </div>
                    <div>
                        <label class="label text-xs">Max (₦)</label>
                        <input type="number" x-model="filters.max_price" placeholder="Any"
                               @change="applyFilter()" class="input text-xs py-2">
                    </div>
                </div>
                {{-- Quick price buttons --}}
                <div class="grid grid-cols-2 gap-1.5 mt-2">
                    @foreach([
                        ['Under ₦5k', '', '5000'],
                        ['₦5k–₦15k', '5000', '15000'],
                        ['₦15k–₦50k', '15000', '50000'],
                        ['Above ₦50k', '50000', ''],
                    ] as $range)
                    <button @click="filters.min_price = '{{ $range[1] }}'; filters.max_price = '{{ $range[2] }}'; applyFilter()"
                            class="text-xs px-2 py-1.5 rounded border border-gray-200 hover:border-orange-400 hover:text-orange-500 transition-colors text-gray-600">
                        {{ $range[0] }}
                    </button>
                    @endforeach
                </div>
            </div>

            {{-- Clear filters --}}
            <button @click="filters = { category: '', sort: 'created_at', min_price: '', max_price: '' }; applyFilter()"
                    class="w-full btn-ghost border border-gray-300 text-sm py-2">
                Clear All Filters
            </button>
        </aside>

        {{-- ── Main Content ── --}}
        <div class="flex-1 min-w-0">

            {{-- Results count (desktop) --}}
            <div class="hidden md:flex items-center justify-between mb-4">
                <p class="text-sm text-gray-600">
                    Showing <strong x-text="products.length"></strong> of <strong x-text="total.toLocaleString()"></strong> products
                </p>
                <div class="flex items-center gap-2">
                    <label class="text-sm text-gray-600">Sort:</label>
                    <select x-model="filters.sort" @change="applyFilter()"
                            class="input py-1.5 text-sm w-auto pr-8">
                        <option value="created_at">Latest</option>
                        <option value="popular">Popular</option>
                        <option value="price_asc">Price ↑</option>
                        <option value="price_desc">Price ↓</option>
                        <option value="rating">Rating</option>
                    </select>
                </div>
            </div>

            {{-- Loading skeletons --}}
            <div x-show="loading && products.length === 0"
                 class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                @for($i = 0; $i < 12; $i++)
                <div class="bg-white rounded-lg p-3 animate-pulse">
                    <div class="skeleton aspect-square rounded mb-2"></div>
                    <div class="skeleton h-3 w-4/5 mb-1"></div>
                    <div class="skeleton h-3 w-3/5 mb-2"></div>
                    <div class="skeleton h-4 w-2/5"></div>
                </div>
                @endfor
            </div>

            {{-- Empty state --}}
            <div x-show="!loading && products.length === 0"
                 class="flex flex-col items-center justify-center py-20 text-center">
                <div class="text-6xl mb-4">🔍</div>
                <h3 class="text-lg font-bold text-gray-900 mb-2">No products found</h3>
                <p class="text-gray-500 text-sm mb-4">Try adjusting your search or filters</p>
                <button @click="filters = {}; applyFilter()" class="btn-primary">Clear Filters</button>
            </div>

            {{-- Product grid --}}
            <div x-show="products.length > 0"
                 class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                <template x-for="product in products" :key="product.uuid">
                    @include('components.product-card-grid')
                </template>
            </div>

            {{-- Load more --}}
            <div x-show="!loading && page < lastPage" class="mt-6 text-center">
                <button @click="loadMore()" :disabled="loading"
                        class="btn-secondary px-8 py-3">
                    <span x-show="!loading">Load More Products</span>
                    <span x-show="loading">Loading...</span>
                </button>
            </div>

            {{-- Loading more indicator --}}
            <div x-show="loading && products.length > 0" class="mt-4 flex justify-center">
                <div class="w-6 h-6 border-2 border-orange-500 border-t-transparent rounded-full animate-spin"></div>
            </div>
        </div>
    </div>

    {{-- ── Mobile Filter Drawer ── --}}
    <div x-show="filterOpen" x-cloak class="fixed inset-0 z-[100] md:hidden">
        <div class="drawer-overlay" @click="filterOpen = false"></div>
        <div class="drawer">
            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
                <h3 class="font-bold text-gray-900">Filters</h3>
                <button @click="filterOpen = false">
                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="p-4 space-y-5 overflow-y-auto">
                {{-- Categories --}}
                <div>
                    <h4 class="text-sm font-bold text-gray-900 mb-2">Category</h4>
                    <div class="grid grid-cols-2 gap-1.5">
                        @foreach($sidebarCats as $slug => $name)
                        <button @click="filters.category = filters.category === '{{ $slug }}' ? '' : '{{ $slug }}'"
                                class="text-left px-3 py-2 rounded-lg border text-xs transition-colors"
                                :class="filters.category === '{{ $slug }}' ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-700 border-gray-200'">
                            {{ $name }}
                        </button>
                        @endforeach
                    </div>
                </div>

                {{-- Price --}}
                <div>
                    <h4 class="text-sm font-bold text-gray-900 mb-2">Price Range</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="label text-xs">Min (₦)</label>
                            <input type="number" x-model="filters.min_price" class="input text-xs py-2">
                        </div>
                        <div>
                            <label class="label text-xs">Max (₦)</label>
                            <input type="number" x-model="filters.max_price" class="input text-xs py-2">
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4 border-t border-gray-100 flex gap-3">
                <button @click="filters.category = ''; filters.min_price = ''; filters.max_price = ''; filterOpen = false"
                        class="flex-1 btn-ghost border border-gray-300">Reset</button>
                <button @click="applyFilter(); filterOpen = false"
                        class="flex-1 btn-primary">Apply Filters</button>
            </div>
        </div>
    </div>

</div>
@endsection

@section('head')
<script>
    // Initialise filterOpen for the mobile drawer
    document.addEventListener('alpine:init', () => {
        Alpine.data('productList', (opts = {}) => ({
            ...Alpine.data('productList')?.(opts),
            filterOpen: false,
        }))
    })
</script>
@endsection