@extends('layouts.app')
@section('title', 'Ranking de XP - GIGAX ARENA')
@section('page_title', 'Ranking de XP')

@section('content')
<div class="gx-xp-page">
    <section class="gx-xp-head">
        <div>
            <span>PROGRESSÃO GIGAX</span>
            <h2>{{ $isHistory ? 'Temporada '.$season : 'Ranking mensal atual' }}</h2>
            <p>XP vitalício define o nível. XP mensal define o pódio do MIX x5.</p>
        </div>
        <a href="{{ route('gigax.medals') }}">🏅 Minhas medalhas</a>
    </section>

    <div class="gx-season-tabs">
        <a class="{{ !$isHistory ? 'active' : '' }}" href="{{ route('gigax.xp-ranking') }}">Atual</a>
        @foreach($seasons as $closedSeason)
            <a class="{{ $season === $closedSeason ? 'active' : '' }}" href="{{ route('gigax.xp-ranking', ['season'=>$closedSeason]) }}">{{ $closedSeason }}</a>
        @endforeach
    </div>

    <section class="gx-ranking-table">
        <div class="gx-rank-row gx-rank-head">
            <span>#</span><span>Jogador</span><span>Nível</span><span>XP mensal</span><span>XP total</span>
        </div>
        @forelse($ranking as $index => $player)
            @php
                $position = $isHistory ? $player->position : (($ranking->currentPage()-1)*$ranking->perPage()+$index+1);
                $nickname = $player->nickname ?? ('Jogador #'.$player->user_id);
                $monthly = $isHistory ? $player->xp : $player->monthly_xp;
                $lifetime = $isHistory ? null : $player->lifetime_xp;
                $level = $isHistory ? '—' : $player->level;
            @endphp
            <a class="gx-rank-row" href="{{ route('gigax.medals', ['userId'=>$player->user_id]) }}">
                <strong class="gx-pos gx-pos-{{ min(3,$position) }}">{{ $position }}</strong>
                <span class="gx-player">{{ $nickname }}</span>
                <span>{{ $level }}</span>
                <b>{{ number_format((int)$monthly,0,',','.') }} XP</b>
                <span>{{ $lifetime === null ? 'Histórico' : number_format((int)$lifetime,0,',','.').' XP' }}</span>
            </a>
        @empty
            <div class="gx-empty">Ainda não existem jogadores pontuados.</div>
        @endforelse
    </section>
    <div class="gx-pagination">{{ $ranking->links() }}</div>
</div>
@endsection

@push('styles')
<style>
.gx-xp-page{display:grid;gap:18px}.gx-xp-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#102234,#07111b)}.gx-xp-head span{font-size:11px;letter-spacing:.16em;color:var(--green);font-weight:900}.gx-xp-head h2{margin:5px 0;font-size:28px}.gx-xp-head p{margin:0;color:var(--mut)}.gx-xp-head a,.gx-season-tabs a{border:1px solid rgba(36,245,111,.28);padding:11px 14px;border-radius:9px;font-weight:900}.gx-season-tabs{display:flex;gap:8px;flex-wrap:wrap}.gx-season-tabs a.active{background:rgba(36,245,111,.12);color:var(--green)}.gx-ranking-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}.gx-rank-row{display:grid;grid-template-columns:60px minmax(180px,1fr) 100px 150px 150px;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(12,25,38,.82)}.gx-rank-row:hover:not(.gx-rank-head){background:rgba(36,245,111,.055)}.gx-rank-head{font-size:11px;text-transform:uppercase;color:var(--mut);font-weight:900}.gx-pos{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#17283a}.gx-pos-1{color:#ffd45a}.gx-pos-2{color:#d7e3ef}.gx-pos-3{color:#d88a55}.gx-player{font-weight:900}.gx-empty{padding:35px;text-align:center;color:var(--mut)}@media(max-width:760px){.gx-xp-head{align-items:flex-start;flex-direction:column}.gx-rank-row{grid-template-columns:45px 1fr 80px}.gx-rank-row>*:nth-child(4),.gx-rank-row>*:nth-child(5){display:none}}
</style>
@endpush