@extends('layouts.app')
@section('title','Rankings - GIGAX ARENA')
@section('page_title','Rankings')

@section('content')
@php
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Support\Facades\DB;
    use Illuminate\Support\Facades\Route;
    use Illuminate\Support\Facades\Schema;

    $user = Auth::user();
    $go = static fn(string $route, string $fallback) => Route::has($route) ? route($route) : url($fallback);

    $name = $user->nickname ?? $user->name ?? 'Jogador';
    $myId = (int)($user->id ?? 0);
    $myLevel = (int)($user->skill_level ?? $user->level ?? 1);
    $myMatches = (int)($user->total_matches ?? $user->matches ?? 0);
    $myWins = (int)($user->wins ?? 0);
    $myLosses = (int)($user->losses ?? max(0,$myMatches-$myWins));
    $myKills = (int)($user->kills ?? 0);
    $myDeaths = (int)($user->deaths ?? 0);
    $myHeadshots = (int)($user->headshots ?? 0);
    $myKD = $myDeaths > 0 ? number_format($myKills/$myDeaths,2,'.','') : number_format($myKills,2,'.','');
    $myWinRate = $myMatches > 0 ? number_format(($myWins/$myMatches)*100,1,',','.') : '0,0';
    $myHsRate = $myKills > 0 ? number_format(($myHeadshots/$myKills)*100,1,',','.') : '0,0';

    $scoreColumn = null;
    $players = collect();

    try {
        if (Schema::hasTable('users')) {
            foreach (['rank_points','ranking_points','mix_points','points','xp'] as $candidate) {
                if (Schema::hasColumn('users',$candidate)) { $scoreColumn=$candidate; break; }
            }

            $select = ['id'];
            foreach (['nickname','name','avatar_url','skill_level','level','total_matches','matches','wins','losses','kills','deaths','headshots'] as $c) {
                if (Schema::hasColumn('users',$c)) $select[]=$c;
            }
            if ($scoreColumn) $select[]=$scoreColumn;

            $q=DB::table('users')->select(array_unique($select));
            $players = $scoreColumn ? $q->orderByDesc($scoreColumn)->limit(100)->get() : $q->orderByDesc('id')->limit(100)->get();
        }
    } catch (\Throwable $e) {}

    $normalize = function($p,$position) use ($scoreColumn) {
        $matches=(int)(data_get($p,'total_matches',data_get($p,'matches',0)));
        $wins=(int)data_get($p,'wins',0);
        $kills=(int)data_get($p,'kills',0);
        $deaths=(int)data_get($p,'deaths',0);
        return (object)[
            'id'=>(int)data_get($p,'id',0),
            'name'=>data_get($p,'nickname',data_get($p,'name','Jogador')),
            'avatar'=>data_get($p,'avatar_url'),
            'level'=>(int)data_get($p,'skill_level',data_get($p,'level',1)),
            'matches'=>$matches,
            'wins'=>$wins,
            'winrate'=>$matches>0 ? ($wins/$matches)*100 : 0,
            'kd'=>$deaths>0 ? $kills/$deaths : $kills,
            'score'=>$scoreColumn ? (int)data_get($p,$scoreColumn,0) : 0,
            'position'=>$position,
        ];
    };

    $ranking = $players->values()->map(fn($p,$i)=>$normalize($p,$i+1));
    $myRank = optional($ranking->firstWhere('id',$myId))->position ?? null;
    $myScore = optional($ranking->firstWhere('id',$myId))->score ?? (int)($scoreColumn ? ($user->{$scoreColumn} ?? 0) : 0);
    $top10Target = max(3000,(int)(optional($ranking->get(9))->score ?? 3000));
    $progress = min(100,max(0,$top10Target > 0 ? ($myScore/$top10Target)*100 : 0));
    $onlineCount = 0;
    try {
        if (Schema::hasTable('sessions') && Schema::hasColumn('sessions','user_id'))
            $onlineCount=(int)DB::table('sessions')->whereNotNull('user_id')->distinct()->count('user_id');
    } catch (\Throwable $e) {}
@endphp

<div class="gx-ranking">
    <div class="gx-rank-toolbar">
        <div class="gx-tabs">
            <button class="active" type="button">GERAL</button>
            <a href="{{ url('/ranking?view=history') }}">HISTÓRICO</a>
            <a href="{{ url('/ranking?view=details') }}">DETALHES</a>
        </div>
        <div class="gx-filters">
            <select aria-label="Temporada"><option>Temporada Atual</option></select>
            <select aria-label="Modo"><option>Modo: 5v5 Competitivo</option></select>
            <label><input id="gxRankSearch" type="search" placeholder="Buscar jogador..."><span>⌕</span></label>
        </div>
    </div>

    <section class="gx-rank-layout">
        <main>
            <div class="gx-rank-stats">
                <div class="gx-stat"><i class="green">●</i><span><small>STATUS</small><b class="green-text">Online</b><em>{{ $onlineCount }} jogadores ativos</em></span></div>
                <div class="gx-stat"><i class="gold">⚔</i><span><small>PARTIDAS</small><b>{{ $myMatches }}</b><em>Jogadas</em></span></div>
                <div class="gx-stat"><i class="blue">🏆</i><span><small>VITÓRIAS</small><b>{{ $myWins }}</b><em>Vitórias</em></span></div>
                <div class="gx-stat"><i class="purple">✣</i><span><small>TAXA DE VITÓRIAS</small><b>{{ $myWinRate }}%</b><em>Aproveitamento</em></span></div>
                <div class="gx-stat"><i class="red">◈</i><span><small>POSIÇÃO</small><b>{{ $myRank ? '#'.$myRank : '—' }}</b><em>Sua posição</em></span></div>
            </div>

            <section class="gx-rank-table-card">
                <div class="gx-rank-table-head">
                    <span>POSIÇÃO</span><span>JOGADOR</span><span>NÍVEL</span><span>PARTIDAS</span><span>VITÓRIAS</span><span>TAXA WIN</span><span>K/D</span><span>PONTOS</span><span>AÇÃO</span>
                </div>
                <div id="gxRankingRows">
                @forelse($ranking as $p)
                    <div class="gx-rank-row {{ $p->id===$myId ? 'me':'' }}" data-player="{{ mb_strtolower($p->name) }}">
                        <span class="gx-position">
                            @if($p->position===1)<i class="medal gold-medal">♛</i>@elseif($p->position===2)<i class="medal silver-medal">♛</i>@elseif($p->position===3)<i class="medal bronze-medal">♛</i>@endif
                            <b>{{ $p->position }}</b>
                        </span>
                        <span class="gx-player">
                            <i class="gx-avatar">@if($p->avatar)<img src="{{ $p->avatar }}" alt="">@else{{ mb_strtoupper(mb_substr($p->name,0,1)) }}@endif</i>
                            <span><b>{{ $p->name }}</b><small>GIGAX Anti-Cheat</small></span>
                        </span>
                        <span><i class="gx-level-pill">{{ $p->level }}</i></span>
                        <strong>{{ $p->matches }}</strong>
                        <strong>{{ $p->wins }}</strong>
                        <strong class="green-text">{{ number_format($p->winrate,1,',','.') }}%</strong>
                        <strong>{{ number_format($p->kd,2,'.','') }}</strong>
                        <strong class="green-text">{{ number_format($p->score,0,',','.') }}</strong>
                        <span><a class="gx-profile-btn" href="{{ url('/players/'.$p->id) }}">Ver perfil</a></span>
                    </div>
                @empty
                    <div class="gx-empty">O ranking ainda não possui jogadores para exibir.</div>
                @endforelse
                </div>
                <div class="gx-pagination">
                    <button type="button">‹ Anterior</button><button class="active" type="button">1</button><button type="button">2</button><button type="button">3</button><span>…</span><button type="button">10</button><button type="button">Próxima ›</button>
                </div>
            </section>
        </main>

        <aside class="gx-rank-side">
            <section class="gx-side-card gx-personal">
                <span class="gx-side-title">RESUMO PESSOAL</span>
                <div class="gx-personal-main"><div><b>{{ $myRank ? $myRank.'º' : '—' }}</b><small>Sua posição geral</small></div><i>◆</i></div>
                <div class="gx-progress-label"><b>{{ number_format($myScore,0,',','.') }}</b><span>/ {{ number_format($top10Target,0,',','.') }} pontos para o top 10</span></div>
                <div class="gx-progress"><span style="width:{{ $progress }}%"></span></div>
                <em>{{ number_format($progress,0) }}%</em>
            </section>

            <section class="gx-side-card">
                <span class="gx-side-title">ESTATÍSTICAS PESSOAIS</span>
                <div class="gx-personal-stats">
                    <span><small>Partidas</small><b>{{ $myMatches }}</b></span><span><small>Vitórias</small><b>{{ $myWins }}</b></span><span><small>Derrotas</small><b>{{ $myLosses }}</b></span>
                    <span><small>Taxa de Vitória</small><b>{{ $myWinRate }}%</b></span><span><small>K/D</small><b>{{ $myKD }}</b></span><span><small>Headshots</small><b>{{ $myHsRate }}%</b></span>
                </div>
                <a class="gx-side-button" href="{{ $go('profile','/profile') }}">Ver perfil completo →</a>
            </section>

            <section class="gx-side-card">
                <span class="gx-side-title">RANKINGS RÁPIDOS</span>
                <div class="gx-quick-ranks">
                    <a href="#ranking"><i>🏆</i><span>Top Vitórias</span><b>Ver ranking</b></a>
                    <a href="#ranking"><i>◎</i><span>Melhor K/D</span><b>Ver ranking</b></a>
                    <a href="#ranking"><i>⊕</i><span>Headshots</span><b>Ver ranking</b></a>
                    <a href="#ranking"><i>★</i><span>Top Nível</span><b>Ver ranking</b></a>
                </div>
            </section>
            <div class="gx-updated">◌ Atualizado há poucos segundos</div>
        </aside>
    </section>
</div>

@endsection

@push('styles')
<style>
.gx-ranking,.gx-ranking *{box-sizing:border-box}.gx-ranking{width:100%;color:#edf5fb;font-size:13px}.gx-ranking a{text-decoration:none;color:inherit}
.gx-rank-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:12px;min-height:40px}.gx-tabs{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:40px;margin:0;padding:0}.gx-tabs a,.gx-tabs button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:88px;width:auto;height:40px;min-height:40px;max-height:40px;margin:0;padding:0 20px;border:1px solid #173248;border-radius:8px;background:#071522;color:#a9bfd0;font-size:10px;font-weight:900;line-height:1;box-sizing:border-box;vertical-align:middle;position:static;transform:none;cursor:pointer}.gx-tabs .active{height:40px;min-height:40px;max-height:40px;margin:0;border-color:#1be96a;color:#27ef75;box-shadow:inset 0 -2px #1be96a;transform:none}
.gx-filters{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:0;height:40px}.gx-filters select,.gx-filters label{height:36px;border:1px solid #173248;border-radius:7px;background:#071522;color:#dce8ef;font-size:9px}.gx-filters select{padding:0 35px 0 12px;min-width:175px}.gx-filters label{display:flex;align-items:center;min-width:260px;padding:0 10px}.gx-filters input{width:100%;border:0;outline:0;background:transparent;color:white;font-size:9px}.gx-filters label span{font-size:18px}
.gx-rank-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:14px}.gx-rank-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}.gx-stat,.gx-rank-table-card,.gx-side-card{border:1px solid rgba(105,157,194,.17);background:linear-gradient(180deg,#0b1b29,#07141f);border-radius:9px}
.gx-stat{min-height:84px;padding:14px;display:flex;gap:12px;align-items:center}.gx-stat>i{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:18px}.gx-stat>span{display:grid;gap:2px}.gx-stat small,.gx-side-title{font-size:8px;color:#7897ad;font-weight:900}.gx-stat b{font-size:18px}.gx-stat em{font-size:8px;color:#7890a3;font-style:normal}.gx-stat i.green{background:#073923;color:#27ef75}.gx-stat i.gold{background:#382f0b;color:#ffbf2f}.gx-stat i.blue{background:#092e4b;color:#2ca5ff}.gx-stat i.purple{background:#2b164a;color:#a35eff}.gx-stat i.red{background:#43192a;color:#ff4769}.green-text{color:#27ef75!important}
.gx-rank-table-card{overflow:hidden}.gx-rank-table-head,.gx-rank-row{display:grid;grid-template-columns:.72fr 2.05fr .72fr .8fr .8fr .9fr .65fr .9fr .9fr;align-items:center;gap:8px}.gx-rank-table-head{height:39px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.055);color:#83a3ba;font-size:8px;font-weight:900}.gx-rank-row{min-height:48px;padding:5px 16px;border-bottom:1px solid rgba(255,255,255,.04);font-size:10px;transition:.15s}.gx-rank-row:hover{background:rgba(36,245,111,.025)}.gx-rank-row.me{background:linear-gradient(90deg,rgba(26,218,101,.12),rgba(26,218,101,.04));box-shadow:inset 0 0 0 1px rgba(36,245,111,.28);border-radius:6px}.gx-position{display:flex;align-items:center;gap:8px}.medal{font-size:17px;font-style:normal}.gold-medal{color:#ffc62e}.silver-medal{color:#d5e1e9}.bronze-medal{color:#e98652}
.gx-player{display:flex;align-items:center;gap:9px}.gx-player>span{display:grid}.gx-player small{font-size:7px;color:#6688a0}.gx-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#203c50;color:#fff;font-style:normal}.gx-avatar img{width:100%;height:100%;object-fit:cover}.gx-level-pill{display:inline-grid;place-items:center;min-width:30px;height:25px;padding:0 7px;border-radius:999px;background:#102d32;border:1px solid rgba(36,245,111,.18);color:#3ee984;font-style:normal}.gx-profile-btn{display:inline-flex;padding:7px 12px;border:1px solid #29465b;border-radius:5px;font-size:8px;font-weight:800}.gx-profile-btn:hover{border-color:#24f56f;color:#24f56f}.gx-empty{padding:50px;text-align:center;color:#7891a4}
.gx-pagination{display:flex;justify-content:center;align-items:center;gap:6px;padding:13px}.gx-pagination button{height:29px;min-width:30px;border:1px solid #18364b;border-radius:5px;background:#071522;color:#8da6b8;font-size:8px}.gx-pagination button.active{border-color:#25ed73;color:#25ed73}
.gx-rank-side{display:grid;align-content:start;gap:10px}.gx-side-card{padding:16px;position:relative}.gx-side-title{display:block;margin-bottom:14px}.gx-personal{border-left:2px solid #24f56f}.gx-personal-main{display:flex;align-items:center;justify-content:space-between}.gx-personal-main>div{display:grid}.gx-personal-main>div>b{font-size:31px}.gx-personal-main small{font-size:9px;color:#839bad}.gx-personal-main>i{width:62px;height:62px;display:grid;place-items:center;color:#ffd65b;background:radial-gradient(circle,#356f42,#142923 62%,transparent 64%);font-size:34px;font-style:normal}.gx-progress-label{display:flex;align-items:baseline;margin-top:20px;font-size:8px}.gx-progress-label span{color:#8099aa;margin-left:4px}.gx-progress{height:7px;background:#061018;border:1px solid #193246;border-radius:99px;overflow:hidden;margin-top:7px}.gx-progress span{display:block;height:100%;background:#23e972}.gx-personal>em{position:absolute;right:15px;bottom:16px;color:#24ef74;font-size:8px;font-style:normal}
.gx-personal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gx-personal-stats span{padding:10px 5px;text-align:center;border:1px solid #173348;border-radius:6px;background:#091824}.gx-personal-stats small,.gx-personal-stats b{display:block}.gx-personal-stats small{font-size:7px;color:#7d98aa}.gx-personal-stats b{font-size:15px;margin-top:4px}.gx-side-button{display:flex;align-items:center;justify-content:center;height:34px;border:1px solid #1b384d;border-radius:5px;margin-top:10px;font-size:8px;font-weight:900}.gx-quick-ranks{display:grid}.gx-quick-ranks a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:6px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.05);font-size:8px}.gx-quick-ranks i{font-style:normal}.gx-quick-ranks b{font-size:7px;color:#26e974}.gx-updated{text-align:center;color:#728b9d;font-size:8px;padding:8px}
@media(max-width:1350px){.gx-rank-layout{grid-template-columns:1fr}.gx-rank-side{grid-template-columns:repeat(3,1fr)}.gx-updated{display:none}.gx-rank-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.gx-rank-toolbar{display:flex;align-items:stretch;flex-direction:column}.gx-filters{margin-left:0}.gx-rank-table-card{overflow-x:auto}.gx-rank-table-head,.gx-rank-row{min-width:920px}.gx-rank-side{grid-template-columns:1fr}.gx-rank-stats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.gx-filters{display:grid}.gx-filters select,.gx-filters label{width:100%;min-width:0}.gx-rank-stats{grid-template-columns:1fr}.gx-tabs{overflow:auto}}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded',function(){
    const input=document.getElementById('gxRankSearch');
    if(!input)return;
    input.addEventListener('input',function(){
        const q=this.value.trim().toLowerCase();
        document.querySelectorAll('#gxRankingRows .gx-rank-row').forEach(row=>{
            row.style.display=!q || (row.dataset.player||'').includes(q) ? 'grid':'none';
        });
    });
});
</script>
@endpush