@extends('frontend.layouts.app')

@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">
            <div class="row">

                {{-- Sidebar --}}
                <div class="col-lg-3 col-xl-2 mb-4">
                    <button class="dashboard-menu-btn d-lg-none btn btn-primary w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#dashboardSidebar">
                        <i class="fa-solid fa-bars me-2"></i>
                        <span>Menu</span>
                    </button>

                    <div class="d-none d-lg-block">
                        @include('frontend.dashboard.sidebar')
                    </div>
                </div>

                {{-- Content --}}
                <div class="col-lg-9 col-xl-10">
                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-body p-4">

                            {{-- Header --}}
                            <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
                                <div>
                                    <h3 class="fw-bold mb-2">Leaderboard</h3>
                                    <p class="text-muted mb-0">See where you stand among top players.</p>
                                </div>
                                <div class="mt-3 mt-sm-0">
                                    <span class="badge bg-primary px-3 py-2 fs-6 rounded-pill">
                                        Total Participants: {{ isset($leaderboard) && method_exists($leaderboard, 'total') ? $leaderboard->total() : (isset($leaderboard) ? count($leaderboard) : 5) }}
                                    </span>
                                </div>
                            </div>

                            <hr class="text-muted opacity-25 mb-4">

                            {{-- Leaderboard Table --}}
                            <div class="table-responsive">
                                <table class="table table-hover align-middle custom-table">
                                    <thead class="table-light">
                                        <tr>
                                            <th scope="col" class="py-3 px-4" style="width: 100px;">Rank</th>
                                            <th scope="col" class="py-3">Player</th>
                                            <th scope="col" class="py-3 text-center">Contests Played</th>
                                            <th scope="col" class="py-3 text-end px-4">Total Score</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($leaderboard ?? [] as $index => $row)
                                            @php
                                                $rank = (isset($leaderboard) && method_exists($leaderboard, 'firstItem')) ? ($leaderboard->firstItem() + $index) : ($index + 1);
                                            @endphp
                                            <tr class="{{ auth()->check() && auth()->id() == $row->user_id ? 'table-warning border-warning' : '' }}">
                                                <td class="px-4 fw-bold">
                                                    @if ($rank == 1)
                                                        <span class="badge bg-warning text-dark p-2 rounded-circle fs-6" style="width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center;">🏆</span>
                                                    @elseif($rank == 2)
                                                        <span class="badge bg-secondary p-2 rounded-circle fs-6" style="width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center;">🥈</span>
                                                    @elseif($rank == 3)
                                                        <span class="badge bg-danger p-2 rounded-circle fs-6" style="width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center;">🥉</span>
                                                    @else
                                                        <span class="text-muted ps-2">#{{ $rank }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ $row->user->avatar ? asset('storage/' . $row->user->avatar) : asset('public/frontend/assets/img/default-user.png') }}"
                                                                        class="rounded-circle me-3" width="40" height="40" alt="{{ $row->user->name ?? 'User' }}">
                                                        <div>
                                                            <h6 class="mb-0 fw-bold">
                                                                {{ $row->user->name ?? 'Unknown' }}
                                                                @if (auth()->check() && auth()->id() == $row->user_id)
                                                                    <span class="badge bg-dark ms-1">You</span>
                                                                @endif
                                                            </h6>
                                                            @if(isset($row->user->created_at))
                                                                <small class="text-muted">Joined {{ $row->user->created_at->format('M Y') }}</small>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-center fw-semibold">
                                                    {{ $row->contests_count ?? 0 }}
                                                </td>
                                                <td class="text-end px-4 fw-bold text-success fs-5">
                                                    {{ number_format($row->total_score ?? $row->score ?? 0) }}
                                                </td>
                                            </tr>
                                        @empty
                                            {{-- Fallback Demo Data --}}
                                            @php
                                                $demoData = [
                                                    ['name' => 'Aarav Sharma', 'contests' => 15, 'score' => '1,450', 'rank' => 1],
                                                    ['name' => 'Neha Patel', 'contests' => 12, 'score' => '1,320', 'rank' => 2],
                                                    ['name' => 'Amit Verma', 'contests' => 14, 'score' => '1,290', 'rank' => 3],
                                                    ['name' => 'Priya Das (You)', 'contests' => 10, 'score' => '1,100', 'rank' => 4, 'is_user' => true],
                                                    ['name' => 'Rohan Gupta', 'contests' => 9, 'score' => '950', 'rank' => 5]
                                                ];
                                            @endphp

                                            @foreach ($demoData as $demo)
                                                <tr class="{{ isset($demo['is_user']) ? 'table-warning' : '' }}">
                                                    <td class="px-4 fw-bold">
                                                        @if ($demo['rank'] == 1)
                                                            <span class="badge bg-warning text-dark p-2 rounded-circle" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;">🏆</span>
                                                        @elseif($demo['rank'] == 2)
                                                            <span class="badge bg-secondary p-2 rounded-circle" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;">🥈</span>
                                                        @elseif($demo['rank'] == 3)
                                                            <span class="badge bg-danger p-2 rounded-circle" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;">🥉</span>
                                                        @else
                                                            <span class="text-muted ps-2">#{{ $demo['rank'] }}</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img src="https://ui-avatars.com/api/?name={{ urlencode($demo['name']) }}&background=random&size=40" class="rounded-circle me-3" alt="{{ $demo['name'] }}">
                                                            <div>
                                                                <h6 class="mb-0 fw-bold">{{ $demo['name'] }}</h6>
                                                                <small class="text-muted">Active Player</small>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center fw-semibold">{{ $demo['contests'] }}</td>
                                                    <td class="text-end px-4 fw-bold text-success">{{ $demo['score'] }} pts</td>
                                                </tr>
                                            @endforeach
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            {{-- Pagination --}}
                            @if (isset($leaderboard) && method_exists($leaderboard, 'links') && count($leaderboard) > 0)
                                <div class="mt-4">
                                    {{ $leaderboard->links() }}
                                </div>
                            @endif

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Mobile Sidebar --}}
    <div class="offcanvas offcanvas-start" tabindex="-1" id="dashboardSidebar">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Dashboard Menu</h5>
            <button class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            @include('frontend.dashboard.sidebar')
        </div>
    </div>
@endsection