@extends('layouts.app')
@php use Illuminate\Support\Str; @endphp

@section('title', $game->title . ' — LoreKeepers')
@section('description', $game->summary ? Str::limit($game->summary, 155) : 'Track ' . $game->title . ' on LoreKeepers.')
@section('og_title', $game->title . ' — LoreKeepers')
@section('og_description', $game->summary ? Str::limit($game->summary, 155) : 'Track ' . $game->title . ' on LoreKeepers.')
@section('og_image', $game->cover_url ?? asset('images/og-default.jpg'))
@section('og_type', 'game')

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

    {{-- Main Info --}}
    <div class="flex flex-col md:flex-row gap-8">

        {{-- Cover --}}
        <div class="flex-shrink-0">
            <div class="w-48 md:w-56 rounded-xl overflow-hidden bg-[#16161d] shadow-2xl shadow-black/50 mx-auto md:mx-0">
                @if($game->cover_url)
                    <img src="{{ $game->cover_url }}" alt="{{ $game->title }}" class="w-full">
                @else
                    <div class="aspect-[3/4] flex items-center justify-center">
                        <svg class="w-16 h-16 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                  d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
                        </svg>
                    </div>
                @endif
            </div>
        </div>

        {{-- Details --}}
        <div class="flex-1 min-w-0">

            {{-- Title & Year --}}
            <div class="mb-2">
                @if($game->release_year)
                    <span class="text-sm text-slate-500 font-medium">{{ $game->release_year }}</span>
                @endif
                <h1 class="text-3xl sm:text-4xl font-bold text-white leading-tight mt-1">{{ $game->title }}</h1>
            </div>

            {{-- Rating --}}
            <div class="flex items-center gap-4 mb-6">
                @if($game->rating_avg)
                    <div class="flex items-center gap-1.5 bg-[#16161d] px-3 py-1.5 rounded-lg border border-white/10">
                        <svg class="w-4 h-4 text-yellow-400" 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>
                        <span class="text-white font-bold">{{ number_format($game->rating_avg, 1) }}</span>
                        <span class="text-slate-500 text-sm">/ 10</span>
                    </div>
                    <span class="text-sm text-slate-500">{{ number_format($game->rating_count) }} {{ Str::plural('rating', $game->rating_count) }}</span>
                @else
                    <span class="text-sm text-slate-500">No ratings yet</span>
                @endif
            </div>

            {{-- Genres & Platforms --}}
            @if($game->genres->isNotEmpty())
            <div class="flex flex-wrap gap-2 mb-3">
                @foreach($game->genres as $genre)
                    <a href="{{ route('games.index', ['genre' => $genre->id]) }}"
                       class="px-2.5 py-1 text-xs bg-purple-900/30 text-purple-300 border border-purple-700/30 rounded-full hover:bg-purple-900/50 transition-colors">
                        {{ $genre->name }}
                    </a>
                @endforeach
            </div>
            @endif

            @if($game->platforms->isNotEmpty())
            <div class="flex flex-wrap gap-2 mb-5">
                @foreach($game->platforms as $platform)
                    <a href="{{ route('games.index', ['platform' => $platform->id]) }}"
                       class="px-2.5 py-1 text-xs bg-[#16161d] text-slate-400 border border-white/10 rounded-full hover:text-slate-200 transition-colors">
                        {{ $platform->name }}
                    </a>
                @endforeach
            </div>
            @endif

            {{-- Add to Library --}}
            <div class="mb-3" x-data="libraryWidget({{ $game->id }}, '{{ $userGame?->status }}', {{ $userGame?->rating ?? 'null' }})">

                @if($userGame)
                    {{-- Already in library --}}
                    <div class="flex flex-wrap items-center gap-3">
                        <div class="relative" x-data="{ open: false }">
                            <button @click="open = !open"
                                    class="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
                                <span x-text="statusLabel(status)"></span>
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>
                            <div x-show="open" @click.outside="open = false" x-transition
                                 class="absolute left-0 mt-2 w-44 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
                                @foreach(['playing' => 'Playing', 'played' => 'Played', 'want_to_play' => 'Want to Play', 'on_hold' => 'On Hold', 'dropped' => 'Dropped'] as $s => $label)
                                <button @click="updateStatus('{{ $s }}', {{ $userGame->id }}); open = false"
                                        class="w-full text-left px-4 py-2.5 text-sm hover:bg-white/5 transition-colors"
                                        :class="status === '{{ $s }}' ? 'text-purple-400' : 'text-slate-300'">
                                    {{ $label }}
                                </button>
                                @endforeach
                                <div class="border-t border-white/5"></div>
                                <button @click="removeFromLibrary({{ $userGame->id }})"
                                        class="w-full text-left px-4 py-2.5 text-sm text-red-400 hover:bg-white/5 transition-colors">
                                    Remove
                                </button>
                            </div>
                        </div>

                        {{-- Rating --}}
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-slate-400">Your rating:</span>
                            <input type="number" min="1" max="10" x-model="rating"
                                   @change="updateRating({{ $userGame->id }})"
                                   class="w-16 bg-[#16161d] border border-white/10 rounded-lg px-2 py-1.5 text-sm text-center text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
                                   placeholder="—">
                            <span class="text-slate-500 text-sm">/ 10</span>
                        </div>
                    </div>
                @else
                    @auth
                    <div class="space-y-3">
                        {{-- Step 1: pick a status --}}
                        <div x-show="!pendingStatus">
                            <div class="relative" x-data="{ open: false }">
                                <button @click="open = !open"
                                        class="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
                                    + Add to Library
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.outside="open = false" x-transition
                                     class="absolute left-0 mt-2 w-44 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
                                    @foreach(['playing' => 'Playing', 'played' => 'Played', 'want_to_play' => 'Want to Play', 'on_hold' => 'On Hold', 'dropped' => 'Dropped'] as $s => $label)
                                    <button @click="pendingStatus = '{{ $s }}'; open = false"
                                            class="w-full text-left px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                                        {{ $label }}
                                    </button>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        {{-- Step 2: optional rating + save --}}
                        <div x-show="pendingStatus" x-transition
                             class="flex flex-wrap items-center gap-3 bg-[#16161d] border border-white/10 rounded-lg px-4 py-3">
                            <span class="text-sm text-slate-300">Adding as <strong x-text="statusLabel(pendingStatus)" class="text-purple-400 font-semibold"></strong></span>
                            <div class="flex items-center gap-2">
                                <label class="text-sm text-slate-400">Rate it (optional):</label>
                                <input type="number" min="1" max="10" x-model="pendingRating"
                                       class="w-16 bg-[#0f0f13] border border-white/10 rounded px-2 py-1 text-sm text-center text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
                                       placeholder="—">
                                <span class="text-slate-500 text-sm">/10</span>
                            </div>
                            <button @click="addToLibraryWithRating()"
                                    class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold rounded-lg transition-colors">
                                Save
                            </button>
                            <button @click="pendingStatus = null; pendingRating = null"
                                    class="px-3 py-1.5 text-slate-400 hover:text-slate-200 text-sm transition-colors">
                                Cancel
                            </button>
                        </div>
                    </div>
                    @else
                    <a href="{{ route('login') }}"
                       class="inline-flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
                        Log in to Add to Library
                    </a>
                    @endauth
                @endif

                {{-- Toast notification --}}
                <div x-show="toast" x-transition
                     class="fixed bottom-4 right-4 z-50 bg-purple-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm font-medium"
                     style="display:none;">
                    <span x-text="toast"></span>
                </div>
            </div>

            {{-- Add to List --}}
            @auth
            <div class="mb-6" x-data="addToListWidget({{ $game->id }}, {{ $userLists->toJson() }})">
                <button @click="open = !open"
                        class="flex items-center gap-2 px-4 py-2 bg-[#16161d] border border-white/10 hover:border-purple-500/50 text-slate-300 hover:text-white text-sm rounded-lg transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Add to List
                </button>
                <div x-show="open" @click.outside="open = false" x-transition
                     class="mt-1 w-56 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10"
                     style="display:none;">
                    <template x-if="lists.length === 0">
                        <div class="px-4 py-3 text-sm text-slate-500">
                            No lists yet.
                            <a href="{{ route('lists.index') }}" class="text-purple-400 hover:text-purple-300">Create one</a>
                        </div>
                    </template>
                    <template x-for="list in lists" :key="list.slug">
                        <button type="button" @click="toggleList(list.slug)"
                                class="w-full flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-white/5 transition-colors"
                                :class="added[list.slug] ? 'text-purple-400' : 'text-slate-300'">
                            <svg x-show="added[list.slug]" class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span x-show="!added[list.slug]" class="w-4 h-4 flex-shrink-0"></span>
                            <span x-text="list.title" class="truncate"></span>
                        </button>
                    </template>
                    <template x-if="lists.length > 0">
                        <div class="border-t border-white/5 px-4 py-2">
                            <a href="{{ route('lists.index') }}" class="text-xs text-slate-500 hover:text-slate-300 transition-colors">Manage lists →</a>
                        </div>
                    </template>
                </div>
            </div>
            @else
            <div class="mb-6"></div>
            @endauth

            {{-- Companies --}}
            @if($game->companies->isNotEmpty())
            <div class="text-sm text-slate-500 space-y-1">
                @php
                    $developers = $game->companies->where('pivot.role', 'developer');
                    $publishers = $game->companies->where('pivot.role', 'publisher');
                @endphp
                @if($developers->isNotEmpty())
                <div><span class="text-slate-400">Developer:</span> {{ $developers->pluck('name')->join(', ') }}</div>
                @endif
                @if($publishers->isNotEmpty())
                <div><span class="text-slate-400">Publisher:</span> {{ $publishers->pluck('name')->join(', ') }}</div>
                @endif
            </div>
            @endif

        </div>
    </div>

    {{-- Summary --}}
    @if($game->summary)
    <div class="mt-10 pt-8 border-t border-white/5">
        <h2 class="text-lg font-semibold text-white mb-3">Summary</h2>
        <p class="text-slate-400 leading-relaxed max-w-3xl">{{ $game->summary }}</p>
    </div>
    @endif

    {{-- Screenshots --}}
    @if($game->screenshots->isNotEmpty())
    <div class="mt-10 pt-8 border-t border-white/5"
         x-data="{
             open: false,
             current: 0,
             screenshots: {{ $game->screenshots->map(fn($s) => ['url' => $s->url, 'thumb' => $s->thumb_url ?? $s->url])->toJson() }},
             openAt(i) { this.current = i; this.open = true; },
             prev() { this.current = (this.current - 1 + this.screenshots.length) % this.screenshots.length; },
             next() { this.current = (this.current + 1) % this.screenshots.length; },
         }"
         @keydown.escape.window="open = false"
         @keydown.arrow-left.window="if (open) prev()"
         @keydown.arrow-right.window="if (open) next()">
        <h2 class="text-lg font-semibold text-white mb-4">Screenshots</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            @foreach($game->screenshots as $i => $shot)
                <button @click="openAt({{ $i }})" class="block w-full rounded-lg overflow-hidden bg-[#16161d] hover:ring-1 hover:ring-purple-500 transition-all">
                    <img src="{{ $shot->thumb_url ?? $shot->url }}" alt="Screenshot" class="w-full aspect-video object-cover">
                </button>
            @endforeach
        </div>

        {{-- Lightbox overlay --}}
        <div x-show="open"
             x-transition:enter="transition ease-out duration-150"
             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
             @click.self="open = false"
             style="display:none;">

            {{-- Close --}}
            <button @click="open = false" class="absolute top-4 right-4 text-white/70 hover:text-white transition-colors">
                <svg class="w-8 h-8" 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>

            {{-- Counter --}}
            <div class="absolute top-4 left-1/2 -translate-x-1/2 text-sm text-white/60">
                <span x-text="current + 1"></span> / <span x-text="screenshots.length"></span>
            </div>

            {{-- Prev --}}
            <button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition-colors p-2">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>

            {{-- Full-size image --}}
            <img :src="screenshots[current]?.url" alt="Screenshot" class="max-h-[85vh] max-w-[90vw] rounded-lg shadow-2xl object-contain">

            {{-- Next --}}
            <button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition-colors p-2">
                <svg class="w-8 h-8" 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>
            </button>
        </div>
    </div>
    @endif

    {{-- Comments --}}
    @php
        $commentsData = $comments->map(fn($c) => [
            'id'         => $c->id,
            'body'       => $c->body,
            'user'       => ['name' => $c->user->name, 'slug' => $c->user->slug],
            'user_id'    => $c->user_id,
            'created_at' => $c->created_at->diffForHumans(),
            'replies'    => $c->replies->map(fn($r) => [
                'id'         => $r->id,
                'body'       => $r->body,
                'user'       => ['name' => $r->user->name, 'slug' => $r->user->slug],
                'user_id'    => $r->user_id,
                'created_at' => $r->created_at->diffForHumans(),
            ])->values()->all(),
        ])->values()->all();
    @endphp
    <div class="mt-10 pt-8 border-t border-white/5" id="comments"
         x-data="commentsWidget({{ Js::from($commentsData) }}, '{{ route('games.comments.store', $game) }}', {{ auth()->id() ?? 'null' }})">

        <h2 class="text-lg font-semibold text-white mb-4">Discussion</h2>
        <div class="max-w-3xl">

            {{-- New comment form (auth only) --}}
            @auth
            <div class="mb-6 bg-[#16161d] border border-white/10 rounded-lg p-4">
                <textarea x-model="body" rows="3"
                          placeholder="Share your thoughts…"
                          class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-3 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 resize-none transition mb-3"></textarea>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-slate-600" x-text="body.length + ' / 1000'"></span>
                    <button @click="submitComment()"
                            :disabled="!body.trim() || submitting"
                            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-lg transition-colors">
                        Post Comment
                    </button>
                </div>
            </div>
            @else
            <div class="mb-6 bg-[#16161d] border border-white/10 rounded-lg p-4 text-center">
                <p class="text-slate-400 text-sm">
                    <a href="{{ route('login') }}" class="text-purple-400 hover:text-purple-300 transition-colors">Log in</a>
                    to join the discussion.
                </p>
            </div>
            @endauth

            {{-- Comment list --}}
            <div class="space-y-4">
                <template x-if="comments.length === 0">
                    <p class="text-slate-500 text-sm">No comments yet. Be the first!</p>
                </template>
                <template x-for="comment in comments" :key="comment.id">
                    <div class="bg-[#16161d] rounded-lg p-4 border border-white/5">
                        {{-- Comment header --}}
                        <div class="flex items-start justify-between gap-2 mb-2">
                            <div class="flex items-center gap-2">
                                <div class="w-7 h-7 rounded-full bg-purple-700 flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
                                     x-text="comment.user.name.charAt(0).toUpperCase()"></div>
                                <span class="text-sm font-medium text-slate-300" x-text="comment.user.slug || comment.user.name"></span>
                                <span class="text-xs text-slate-600" x-text="comment.created_at"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                @auth
                                <button x-show="comment.user_id === authUserId"
                                        @click="deleteComment(comment)"
                                        class="text-xs text-red-500 hover:text-red-400 transition-colors">Delete</button>
                                @endauth
                            </div>
                        </div>
                        {{-- Body --}}
                        <p class="text-slate-400 text-sm leading-relaxed mb-3" x-text="comment.body"></p>

                        {{-- Replies --}}
                        <div class="ml-6 space-y-3 mb-3">
                            <template x-for="reply in comment.replies" :key="reply.id">
                                <div class="bg-[#0f0f13] rounded-lg p-3 border border-white/5">
                                    <div class="flex items-start justify-between gap-2 mb-1">
                                        <div class="flex items-center gap-2">
                                            <div class="w-5 h-5 rounded-full bg-purple-800 flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
                                                 x-text="reply.user.name.charAt(0).toUpperCase()"></div>
                                            <span class="text-xs font-medium text-slate-300" x-text="reply.user.slug || reply.user.name"></span>
                                            <span class="text-xs text-slate-600" x-text="reply.created_at"></span>
                                        </div>
                                        @auth
                                        <button x-show="reply.user_id === authUserId"
                                                @click="deleteReply(reply, comment)"
                                                class="text-xs text-red-500 hover:text-red-400 transition-colors">Delete</button>
                                        @endauth
                                    </div>
                                    <p class="text-slate-400 text-xs leading-relaxed" x-text="reply.body"></p>
                                </div>
                            </template>
                        </div>

                        {{-- Reply toggle --}}
                        @auth
                        <div>
                            <button @click="comment.showReply = !comment.showReply"
                                    class="text-xs text-slate-500 hover:text-purple-400 transition-colors">
                                <span x-text="comment.showReply ? 'Cancel' : 'Reply'"></span>
                            </button>
                            <div x-show="comment.showReply" x-transition class="mt-2">
                                <textarea x-model="comment.replyBody" rows="2"
                                          placeholder="Write a reply…"
                                          class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 resize-none transition mb-2"></textarea>
                                <button @click="submitReply(comment)"
                                        :disabled="!comment.replyBody?.trim()"
                                        class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs font-semibold rounded-lg transition-colors">
                                    Post Reply
                                </button>
                            </div>
                        </div>
                        @endauth
                    </div>
                </template>
            </div>

        </div>
    </div>

    {{-- Reviews --}}
    <div class="mt-10 pt-8 border-t border-white/5" id="reviews">
        <h2 class="text-lg font-semibold text-white mb-4">Reviews</h2>
        <div class="max-w-3xl">

            {{-- Review List --}}
            <div id="review-list" class="space-y-4 mb-8">
                @forelse($game->reviews->take(10) as $review)
                <div class="bg-[#16161d] rounded-lg p-5 border border-white/5" id="review-{{ $review->id }}">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <div class="w-7 h-7 rounded-full bg-purple-700 flex items-center justify-center text-xs font-bold text-white">
                                {{ strtoupper(substr($review->user->name, 0, 1)) }}
                            </div>
                            <span class="text-sm font-medium text-slate-300">{{ $review->user->slug ?? $review->user->name }}</span>
                            @if($review->has_spoilers)
                            <span class="px-1.5 py-0.5 text-xs bg-yellow-900/40 text-yellow-400 border border-yellow-700/30 rounded">Spoilers</span>
                            @endif
                        </div>
                        <div class="flex items-center gap-3">
                            @if($review->rating)
                            <div class="flex items-center gap-1">
                                <svg class="w-3.5 h-3.5 text-yellow-400" 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>
                                <span class="text-sm font-bold text-white">{{ $review->rating }}</span>
                                <span class="text-slate-500 text-xs">/10</span>
                            </div>
                            @endif
                            @auth
                            @if(auth()->id() === $review->user_id)
                            <button onclick="deleteReview({{ $review->id }})"
                                    class="text-xs text-red-500 hover:text-red-400 transition-colors">Delete</button>
                            @endif
                            @endauth
                        </div>
                    </div>
                    <p class="text-slate-400 text-sm leading-relaxed">{{ $review->body }}</p>
                </div>
                @empty
                    <p class="text-slate-500" id="no-reviews-msg">No reviews yet. Be the first!</p>
                @endforelse
            </div>

            {{-- Write / Edit Review Form --}}
            @auth
            <div x-data="reviewForm(
                    '{{ route('reviews.store', ['game' => $game->slug]) }}',
                    {{ $userReview ? $userReview->id : 'null' }},
                    {{ $userReview ? json_encode($userReview->body) : 'null' }},
                    {{ $userReview ? ($userReview->rating ?? 'null') : 'null' }},
                    {{ $userReview ? ($userReview->has_spoilers ? 'true' : 'false') : 'false' }}
                )"
                 class="bg-[#16161d] border border-white/10 rounded-lg p-5">

                <h3 class="text-sm font-semibold text-white mb-4" x-text="reviewId ? 'Your Review' : 'Write a Review'"></h3>

                <div x-show="!reviewId || editing">
                    <textarea x-model="body" rows="5" placeholder="Share your thoughts (minimum 50 characters)…"
                              class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-3 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 resize-none transition"></textarea>
                    <p class="text-xs text-slate-500 mt-1 mb-3" x-text="body.length + ' | minimum 50 characters'"></p>

                    <div class="flex flex-wrap items-center gap-4 mb-4">
                        <div class="flex items-center gap-2">
                            <label class="text-sm text-slate-400">Rating (optional):</label>
                            <input type="number" min="1" max="10" x-model="rating"
                                   class="w-16 bg-[#0f0f13] border border-white/10 rounded-lg px-2 py-1.5 text-sm text-center text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
                                   placeholder="—">
                            <span class="text-slate-500 text-sm">/10</span>
                        </div>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" x-model="hasSpoilers" class="w-4 h-4 accent-purple-600">
                            <span class="text-sm text-slate-400">Contains spoilers</span>
                        </label>
                    </div>

                    <div class="flex items-center gap-3">
                        <button @click="submitReview()"
                                :disabled="body.length < 50"
                                class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-lg transition-colors"
                                x-text="reviewId ? 'Update Review' : 'Submit Review'"></button>
                        <button x-show="reviewId" @click="editing = false"
                                class="px-4 py-2 text-slate-400 hover:text-slate-200 text-sm transition-colors">Cancel</button>
                        <span x-show="error" class="text-sm text-red-400" x-text="error"></span>
                    </div>
                </div>

                <div x-show="reviewId && !editing" class="flex items-center gap-3">
                    <p class="text-sm text-slate-400">You've already reviewed this game.</p>
                    <button @click="editing = true" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">Edit</button>
                    <button @click="deleteMyReview()" class="text-sm text-red-400 hover:text-red-300 transition-colors">Delete</button>
                </div>
            </div>
            @else
            <div class="bg-[#16161d] border border-white/10 rounded-lg p-5 text-center">
                <p class="text-slate-400 text-sm">
                    <a href="{{ route('login') }}" class="text-purple-400 hover:text-purple-300 transition-colors">Log in</a>
                    to write a review.
                </p>
            </div>
            @endauth

        </div>
    </div>

</div>

@push('scripts')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@@type": "VideoGame",
    "name": {{ json_encode($game->title) }},
    "description": {{ json_encode($game->summary ?? '') }},
    "url": {{ json_encode(route('games.show', $game)) }}
    @if($game->genres->isNotEmpty())
    ,"genre": {{ json_encode($game->genres->pluck('name')->values()) }}
    @endif
    @if($game->platforms->isNotEmpty())
    ,"gamePlatform": {{ json_encode($game->platforms->pluck('name')->values()) }}
    @endif
    @if($game->rating_count > 0)
    ,"aggregateRating": {
        "@@type": "AggregateRating",
        "ratingValue": {{ $game->rating_avg }},
        "ratingCount": {{ $game->rating_count }},
        "bestRating": 10,
        "worstRating": 1
    }
    @endif
}
</script>
<script>
function libraryWidget(gameId, initialStatus, initialRating) {
    return {
        gameId,
        status: initialStatus,
        rating: initialRating,
        toast: null,
        pendingStatus: null,
        pendingRating: null,

        statusLabel(s) {
            const labels = {
                playing: 'Playing',
                played: 'Played',
                want_to_play: 'Want to Play',
                on_hold: 'On Hold',
                dropped: 'Dropped',
            };
            return labels[s] || 'In Library';
        },

        showToast(message) {
            this.toast = message;
            setTimeout(() => { this.toast = null; }, 2500);
        },

        async addToLibraryWithRating() {
            const res = await fetch('/library', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ game_id: this.gameId, status: this.pendingStatus, rating: this.pendingRating || null }),
            });
            if (res.ok) {
                this.showToast('Added to library!');
                setTimeout(() => window.location.reload(), 1000);
            }
        },

        async updateStatus(status, userGameId) {
            const res = await fetch(`/library/${userGameId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ status }),
            });
            if (res.ok) this.status = status;
        },

        async updateRating(userGameId) {
            await fetch(`/library/${userGameId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ rating: this.rating }),
            });
        },

        async removeFromLibrary(userGameId) {
            const res = await fetch(`/library/${userGameId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            });
            if (res.ok) window.location.reload();
        },
    };
}

function reviewForm(storeUrl, initialReviewId, initialBody, initialRating, initialSpoilers) {
    return {
        storeUrl,
        reviewId: initialReviewId,
        body: initialBody || '',
        rating: initialRating,
        hasSpoilers: initialSpoilers || false,
        editing: false,
        error: null,

        async submitReview() {
            this.error = null;
            const isEdit = !!this.reviewId;
            const url    = isEdit ? `/reviews/${this.reviewId}` : this.storeUrl;
            const method = isEdit ? 'PUT' : 'POST';

            const res = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    body: this.body,
                    rating: this.rating || null,
                    has_spoilers: this.hasSpoilers,
                }),
            });

            if (res.status === 409) {
                this.error = 'You already have a review for this game.';
                return;
            }
            if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                this.error = data.message || 'Something went wrong.';
                return;
            }

            window.location.reload();
        },

        async deleteMyReview() {
            if (!confirm('Delete your review?')) return;
            const res = await fetch(`/reviews/${this.reviewId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            });
            if (res.ok) window.location.reload();
        },
    };
}

function deleteReview(id) {
    if (!confirm('Delete this review?')) return;
    fetch(`/reviews/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
    }).then(r => { if (r.ok) window.location.reload(); });
}

function commentsWidget(initialComments, storeUrl, authUserId) {
    return {
        comments: initialComments.map(c => ({ ...c, showReply: false, replyBody: '' })),
        body: '',
        submitting: false,
        authUserId,

        async submitComment() {
            if (!this.body.trim() || this.submitting) return;
            this.submitting = true;
            const res = await fetch(storeUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ body: this.body }),
            });
            if (res.ok) {
                const comment = await res.json();
                this.comments.unshift({ ...comment, replies: [], showReply: false, replyBody: '' });
                this.body = '';
            }
            this.submitting = false;
        },

        async submitReply(parentComment) {
            if (!parentComment.replyBody?.trim()) return;
            const res = await fetch(storeUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ body: parentComment.replyBody, parent_id: parentComment.id }),
            });
            if (res.ok) {
                const reply = await res.json();
                parentComment.replies.push(reply);
                parentComment.showReply = false;
                parentComment.replyBody = '';
            }
        },

        async deleteComment(comment) {
            if (!confirm('Delete this comment?')) return;
            const res = await fetch(`/comments/${comment.id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            });
            if (res.ok) {
                this.comments = this.comments.filter(c => c.id !== comment.id);
            }
        },

        async deleteReply(reply, parentComment) {
            if (!confirm('Delete this reply?')) return;
            const res = await fetch(`/comments/${reply.id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            });
            if (res.ok) {
                parentComment.replies = parentComment.replies.filter(r => r.id !== reply.id);
            }
        },
    };
}

function addToListWidget(gameId, lists) {
    return {
        gameId,
        lists,
        open: false,
        added: {},

        async toggleList(listSlug) {
            const isAdded = this.added[listSlug];
            const url     = isAdded
                ? `/lists/${listSlug}/games/${this.gameId}`
                : `/lists/${listSlug}/games`;
            const method  = isAdded ? 'DELETE' : 'POST';

            const res = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: method === 'POST' ? JSON.stringify({ game_id: this.gameId }) : null,
            });

            if (res.ok) {
                this.added[listSlug] = !isAdded;
            }
        },
    };
}
</script>
@endpush

@endsection