@extends('admin.layouts.app')

@section('title', 'Games')
@section('page-title', 'Game Management')

@section('content')
<!-- Stats Grid -->
<div class="stats-grid" style="margin-bottom: 1.5rem;">
    <div class="stat-card">
        <div class="value">{{ number_format($stats['total_plays']) }}</div>
        <div class="label">Total Plays</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($stats['total_score']) }}</div>
        <div class="label">Total Score</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($stats['unique_players']) }}</div>
        <div class="label">Unique Players</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($stats['today_plays']) }}</div>
        <div class="label">Plays Today</div>
    </div>
</div>

<!-- Search & Filter -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body" style="padding: 1rem 1.5rem;">
        <form action="{{ route('admin.games.index') }}" method="GET" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
            <input type="text" name="search" placeholder="Search by player name or email..." value="{{ request('search') }}" 
                style="flex: 1; min-width: 200px;">
            <select name="game" style="min-width: 150px;">
                <option value="">All Games</option>
                @foreach($gameTypes as $type)
                    <option value="{{ $type }}" {{ request('game') == $type ? 'selected' : '' }}>
                        {{ ucwords(str_replace('-', ' ', $type)) }}
                    </option>
                @endforeach
            </select>
            <select name="language" style="min-width: 120px;">
                <option value="">All Languages</option>
                @foreach($languages as $lang)
                    <option value="{{ $lang }}" {{ request('language') == $lang ? 'selected' : '' }}>
                        {{ ucfirst($lang) }}
                    </option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-primary">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                Filter
            </button>
            @if(request('search') || request('game') || request('language'))
                <a href="{{ route('admin.games.index') }}" class="btn" style="background: var(--border); color: var(--text);">Clear</a>
            @endif
        </form>
    </div>
</div>

<!-- Success/Error Messages -->
@if(session('success'))
    <div class="alert-auto-dismiss" style="background: rgba(0, 255, 65, 0.1); border: 1px solid var(--primary); border-radius: 4px; padding: 12px 16px; margin-bottom: 1.5rem; color: var(--primary);">
        {{ session('success') }}
    </div>
@endif

<!-- Scores Table -->
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h3>Game Scores ({{ $scores->total() }})</h3>
        <form action="{{ route('admin.games.reset-leaderboard') }}" method="POST" style="display: inline;">
            @csrf
            <button type="button" class="btn btn-danger" 
                data-delete="⚠️ Reset Entire Leaderboard?\n\nThis will DELETE ALL game scores and cannot be undone.\n\nAre you sure you want to continue?">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                    <path d="M3 3v5h5"></path>
                </svg>
                Reset Leaderboard
            </button>
        </form>
    </div>
    <div class="card-body" style="padding: 0;">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Player</th>
                    <th>Game</th>
                    <th>Score</th>
                    <th>Language</th>
                    <th>Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($scores as $score)
                <tr>
                    <td>#{{ $score->id }}</td>
                    <td style="display: flex; align-items: center; gap: 10px;">
                        @if($score->user && $score->user->profile_picture)
                            <img src="{{ asset('uploads/profiles/' . $score->user->profile_picture) }}" alt="" 
                                style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
                        @else
                            <div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); display: flex; align-items: center; justify-content: center; color: black; font-weight: 600; font-size: 0.8rem;">
                                {{ strtoupper(substr($score->user->name ?? 'U', 0, 1)) }}
                            </div>
                        @endif
                        {{ $score->user->name ?? 'Unknown' }}
                    </td>
                    <td><span style="color: var(--primary); font-weight: 600;">{{ ucwords(str_replace('-', ' ', $score->game_type)) }}</span></td>
                    <td><span style="color: var(--primary); font-weight: 600;">{{ $score->score }} pts</span></td>
                    <td>{{ ucfirst($score->language ?? '-') }}</td>
                    <td>{{ $score->created_at->format('d M Y H:i') }}</td>
                    <td>
                        <form action="{{ route('admin.games.destroy', $score) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="btn btn-sm btn-danger" 
                                data-delete="Delete this game score record? This action cannot be undone.">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="text-align: center; padding: 3rem; color: var(--text-muted);">
                        No game scores found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Pagination -->
@if($scores->hasPages())
<div style="margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 1rem;">
    @if($scores->onFirstPage())
        <span class="btn" style="background: var(--border); color: var(--text-muted); cursor: not-allowed;">Previous</span>
    @else
        <a href="{{ $scores->appends(request()->query())->previousPageUrl() }}" class="btn btn-primary">Previous</a>
    @endif
    
    <span style="color: var(--text-muted);">Page {{ $scores->currentPage() }} of {{ $scores->lastPage() }}</span>
    
    @if($scores->hasMorePages())
        <a href="{{ $scores->appends(request()->query())->nextPageUrl() }}" class="btn btn-primary">Next</a>
    @else
        <span class="btn" style="background: var(--border); color: var(--text-muted); cursor: not-allowed;">Next</span>
    @endif
</div>
@endif
@endsection