@extends('layouts.app')
@section('title', 'Leaderboard')
@section('show-header', true)
@section('page-title', 'Leaderboard')

@section('content')
{{-- Period Tabs --}}
<div class="flex border-b border-white/10 px-4 sticky top-14 bg-[#0f0d2e] z-10">
    @foreach(['all' => 'All Time', 'monthly' => 'Monthly', 'weekly' => 'Weekly'] as $key => $label)
    <a href="{{ route('leaderboard.index', ['period' => $key, 'sort_by' => $sortBy]) }}"
       class="flex-1 text-center py-3 text-xs font-semibold border-b-2 transition {{ $period === $key ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-gray-400' }}">
        {{ $label }}
    </a>
    @endforeach
</div>

{{-- Sort by --}}
<div class="flex gap-2 px-4 pt-3 pb-2 overflow-x-auto scrollbar-hide">
    @foreach(['kills' => '⚔️ Top Kills', 'wins' => '🏆 Top Wins', 'earnings' => '💰 Top Earnings'] as $key => $label)
    <a href="{{ route('leaderboard.index', ['period' => $period, 'sort_by' => $key]) }}"
       class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold transition {{ $sortBy === $key ? 'bg-indigo-500 text-white' : 'bg-white/5 text-gray-400' }}">
        {{ $label }}
    </a>
    @endforeach
</div>

{{-- Top 3 podium --}}
@if($leaders->count() >= 3)
<div class="px-4 pt-2 pb-4">
    <div class="flex items-end justify-center gap-3">
        {{-- 2nd place --}}
        <div class="flex flex-col items-center">
            <img src="{{ $leaders[1]->avatar_url }}" class="w-14 h-14 rounded-full border-2 border-gray-400 mb-2" alt="">
            <div class="bg-gray-400/20 border border-gray-400/30 rounded-xl px-3 py-3 text-center w-24">
                <p class="text-2xl mb-1">🥈</p>
                <p class="text-white text-xs font-bold truncate">{{ $leaders[1]->name }}</p>
                <p class="text-gray-400 text-xs">
                    @if($sortBy === 'kills') {{ $leaders[1]->total_kills }} kills
                    @elseif($sortBy === 'wins') {{ $leaders[1]->total_wins }} wins
                    @else ৳{{ number_format($leaders[1]->winning) }}
                    @endif
                </p>
            </div>
        </div>
        {{-- 1st place --}}
        <div class="flex flex-col items-center -mt-4">
            <div class="relative mb-2">
                <img src="{{ $leaders[0]->avatar_url }}" class="w-18 h-18 w-[72px] h-[72px] rounded-full border-2 border-yellow-400" alt="">
                <div class="absolute -top-3 left-1/2 -translate-x-1/2 text-xl">👑</div>
            </div>
            <div class="bg-yellow-500/20 border border-yellow-500/30 rounded-xl px-3 py-3 text-center w-28">
                <p class="text-2xl mb-1">🥇</p>
                <p class="text-white text-xs font-bold truncate">{{ $leaders[0]->name }}</p>
                <p class="text-yellow-400 text-xs font-bold">
                    @if($sortBy === 'kills') {{ $leaders[0]->total_kills }} kills
                    @elseif($sortBy === 'wins') {{ $leaders[0]->total_wins }} wins
                    @else ৳{{ number_format($leaders[0]->winning) }}
                    @endif
                </p>
            </div>
        </div>
        {{-- 3rd place --}}
        <div class="flex flex-col items-center">
            <img src="{{ $leaders[2]->avatar_url }}" class="w-14 h-14 rounded-full border-2 border-orange-400 mb-2" alt="">
            <div class="bg-orange-500/20 border border-orange-500/30 rounded-xl px-3 py-3 text-center w-24">
                <p class="text-2xl mb-1">🥉</p>
                <p class="text-white text-xs font-bold truncate">{{ $leaders[2]->name }}</p>
                <p class="text-orange-400 text-xs">
                    @if($sortBy === 'kills') {{ $leaders[2]->total_kills }} kills
                    @elseif($sortBy === 'wins') {{ $leaders[2]->total_wins }} wins
                    @else ৳{{ number_format($leaders[2]->winning) }}
                    @endif
                </p>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Rest of the list --}}
<div class="px-4 space-y-2 pb-4">
    @foreach($leaders as $i => $player)
    @if($i < 3) @continue @endif
    <div class="flex items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-4 py-3 {{ $player->id === auth()->id() ? 'border-indigo-500/50 bg-indigo-500/10' : '' }}">
        <span class="text-gray-500 font-bold text-sm w-6 text-center">{{ $i+1 }}</span>
        <img src="{{ $player->avatar_url }}" class="w-10 h-10 rounded-full object-cover" alt="">
        <div class="flex-1 min-w-0">
            <p class="text-white text-sm font-semibold truncate">{{ $player->name }} @if($player->id === auth()->id())<span class="text-indigo-400 text-xs">(You)</span>@endif</p>
            <p class="text-gray-500 text-xs">{{ $player->total_matches }} matches</p>
        </div>
        <div class="text-right">
            @if($sortBy === 'kills')
            <p class="text-white font-bold text-sm">{{ $player->total_kills }}</p>
            <p class="text-gray-500 text-xs">kills</p>
            @elseif($sortBy === 'wins')
            <p class="text-white font-bold text-sm">{{ $player->total_wins }}</p>
            <p class="text-gray-500 text-xs">wins</p>
            @else
            <p class="text-yellow-400 font-bold text-sm">৳{{ number_format($player->winning) }}</p>
            <p class="text-gray-500 text-xs">earned</p>
            @endif
        </div>
    </div>
    @endforeach
    {{ $leaders->withQueryString()->links('user.components.pagination') }}
</div>
@endsection