@extends('layouts.app')

@section('title', 'Browse Games — GameLog')
@section('description', 'Browse and discover video games. Filter by genre, platform, and year. Find your next favorite game on GameLog.')
@section('canonical', route('games.index'))
@if($shouldNoindex ?? false)
@section('robots', 'noindex,follow')
@endif

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <div class="flex flex-col lg:flex-row gap-8">

        {{-- Sidebar Filters --}}
        <aside class="lg:w-56 flex-shrink-0">
            <form method="GET" action="{{ route('games.index') }}" id="filter-form">

                <div class="bg-[#16161d] rounded-xl border border-white/5 p-5 space-y-6">

                    <div>
                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Sort By</h3>
                        <select name="sort" onchange="document.getElementById('filter-form').submit()"
                                class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-purple-500">
                            <option value="rating"   {{ request('sort', 'rating') === 'rating'   ? 'selected' : '' }}>Top Rated</option>
                            <option value="release"  {{ request('sort') === 'release'  ? 'selected' : '' }}>Newest</option>
                            <option value="popular"  {{ request('sort') === 'popular'  ? 'selected' : '' }}>Most Popular</option>
                            <option value="title"    {{ request('sort') === 'title'    ? 'selected' : '' }}>A–Z</option>
                        </select>
                    </div>

                    @if($genres->isNotEmpty())
                    <div>
                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Genre</h3>
                        <div class="space-y-1.5 max-h-52 overflow-y-auto pr-1">
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input type="radio" name="genre" value="" {{ !request('genre') ? 'checked' : '' }}
                                       onchange="this.form.submit()"
                                       class="accent-purple-500">
                                <span class="text-sm text-slate-400 group-hover:text-slate-200 transition-colors">All Genres</span>
                            </label>
                            @foreach($genres as $genre)
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input type="radio" name="genre" value="{{ $genre->id }}" {{ request('genre') == $genre->id ? 'checked' : '' }}
                                       onchange="this.form.submit()"
                                       class="accent-purple-500">
                                <span class="text-sm text-slate-400 group-hover:text-slate-200 transition-colors">{{ $genre->name }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    @if($platforms->isNotEmpty())
                    <div>
                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Platform</h3>
                        <div class="space-y-1.5 max-h-52 overflow-y-auto pr-1">
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input type="radio" name="platform" value="" {{ !request('platform') ? 'checked' : '' }}
                                       onchange="this.form.submit()"
                                       class="accent-purple-500">
                                <span class="text-sm text-slate-400 group-hover:text-slate-200 transition-colors">All Platforms</span>
                            </label>
                            @foreach($platforms as $platform)
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input type="radio" name="platform" value="{{ $platform->id }}" {{ request('platform') == $platform->id ? 'checked' : '' }}
                                       onchange="this.form.submit()"
                                       class="accent-purple-500">
                                <span class="text-sm text-slate-400 group-hover:text-slate-200 transition-colors">{{ $platform->name }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    @if(request()->anyFilled(['genre', 'platform', 'year']))
                    <a href="{{ route('games.index') }}"
                       class="block text-center text-xs text-purple-400 hover:text-purple-300 transition-colors pt-2 border-t border-white/5">
                        Clear Filters
                    </a>
                    @endif
                </div>

                {{-- Keep sort in URL when filtering --}}
                @if(request('sort'))
                <input type="hidden" name="sort" value="{{ request('sort') }}">
                @endif
            </form>
        </aside>

        {{-- Games Grid --}}
        <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-xl font-bold text-white">
                    Browse Games
                    <span class="text-slate-500 font-normal text-base ml-2">({{ number_format($games->total()) }})</span>
                </h1>
            </div>

            @if($games->isEmpty())
                <div class="text-center py-24 text-slate-500">
                    <p class="text-lg">No games found.</p>
                    <a href="{{ route('games.index') }}" class="mt-3 inline-block text-sm text-purple-400 hover:text-purple-300">Clear filters</a>
                </div>
            @else
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4">
                    @foreach($games as $game)
                        <x-game-card :game="$game" />
                    @endforeach
                </div>

                <div class="mt-8">
                    {{ $games->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection