@extends('layouts.app')

@section('title', 'Informações - GIGAX Arena')
@section('page_title', 'INFORMAÇÕES')

@section('content')
@php
    $playersUrl = Route::has('players.index') ? route('players.index') : url('/players');
    $matchesUrl = Route::has('partidas') ? route('partidas') : (Route::has('matches.index') ? route('matches.index') : url('/partidas'));
    $rankingUrl = Route::has('ranking') ? route('ranking') : url('/ranking');
    $dashboardUrl = Route::has('dashboard') ? route('dashboard') : url('/dashboard');
@endphp

<style>
.gxi{
    --bg:#06101a;
    --panel:#0b1a27;
    --panel2:#0e2130;
    --line:#17354a;
    --line2:#21455d;
    --text:#f4f8fb;
    --muted:#7f99ad;
    --green:#19ef77;
    --blue:#4d91ff;
    --red:#ff4b5e;
    --yellow:#ffcc4d;
    display:grid;
    gap:12px;
    padding-bottom:24px;
}
.gxi *{box-sizing:border-box}
.gxi a{text-decoration:none}
.gxi-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:12px;
    background:
        radial-gradient(circle at 85% 20%,rgba(25,239,119,.09),transparent 28%),
        linear-gradient(120deg,#0b1b29,#081722);
    padding:18px;
}
.gxi-kicker{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--green);text-transform:uppercase}
.gxi-hero h2{margin:4px 0 6px;font-size:24px;color:var(--text)}
.gxi-hero p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.gxi-actions{display:flex;gap:8px;flex-wrap:wrap}
.gxi-btn{
    min-height:36px;padding:0 13px;border-radius:8px;border:1px solid var(--line2);
    background:#102332;color:#eaf3f8;font-size:10px;font-weight:900;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer
}
.gxi-btn:hover{border-color:#2b617f;background:#133047}
.gxi-btn.primary{background:var(--green);border-color:var(--green);color:#03150b}
.gxi-btn.blue{background:#1d65d8;border-color:#2f7cff;color:white}

.gxi-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}
.gxi-stat{
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    padding:14px;
    color:inherit;
    transition:.15s ease;
}
.gxi-stat:hover{transform:translateY(-1px);border-color:#2d5f7e;background:#0d2030}
.gxi-stat-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gxi-stat-icon{
    width:34px;height:34px;border-radius:9px;background:#102a3b;
    display:grid;place-items:center;font-size:16px
}
.gxi-stat small{display:block;color:#6f8ba0;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.gxi-stat strong{display:block;color:var(--text);font-size:24px;margin-top:6px;line-height:1}
.gxi-stat span{display:block;color:#69869b;font-size:8px;margin-top:5px}

.gxi-grid{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(290px,.7fr);
    gap:12px;
}
.gxi-panel{
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    overflow:hidden;
}
.gxi-panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 14px;border-bottom:1px solid var(--line)
}
.gxi-panel-head h3{margin:0;color:var(--text);font-size:12px}
.gxi-panel-head p{margin:3px 0 0;color:#718ba0;font-size:8px}
.gxi-panel-body{padding:12px}

.gxi-top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gxi-player-card{
    display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:9px;align-items:center;
    padding:10px;border:1px solid var(--line);border-radius:9px;background:#091722;
    color:var(--text);cursor:pointer
}
.gxi-player-card:hover{border-color:#2b647f;background:#0d2130}
.gxi-rank{
    width:38px;height:38px;border-radius:10px;background:#102638;
    display:grid;place-items:center;font-weight:1000;color:var(--yellow)
}
.gxi-player-main{min-width:0}
.gxi-player-main strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gxi-player-main small{display:block;color:#7590a4;font-size:8px;margin-top:2px}
.gxi-points{font-size:10px;color:var(--green);font-weight:900}

.gxi-map-list{display:grid;gap:7px}
.gxi-map{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
    padding:10px;border:1px solid var(--line);border-radius:8px;background:#091722;
    cursor:pointer
}
.gxi-map:hover{border-color:#2b647f}
.gxi-map strong{font-size:10px;color:var(--text)}
.gxi-map small{display:block;color:#718da1;font-size:8px;margin-top:2px}
.gxi-map-count{font-size:10px;color:var(--green);font-weight:900}

.gxi-toolbar{
    display:grid;
    grid-template-columns:minmax(220px,1fr) auto auto;
    gap:7px;
    padding:12px;border-bottom:1px solid var(--line)
}
.gxi-input{
    min-height:36px;border:1px solid var(--line2);border-radius:8px;
    background:#071521;color:white;padding:0 11px;font-size:10px;outline:none
}
.gxi-input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(25,239,119,.08)}
.gxi-table-wrap{overflow:auto}
.gxi-table{width:100%;border-collapse:collapse;min-width:850px}
.gxi-table th{
    text-align:left;padding:10px 11px;border-bottom:1px solid var(--line);
    color:#6f93aa;font-size:8px;text-transform:uppercase;letter-spacing:.07em
}
.gxi-table td{
    padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.045);
    color:#eaf1f6;font-size:9px;vertical-align:middle
}
.gxi-table tbody tr:hover{background:#0c1f2e}
.gxi-name{font-weight:900;color:#fff}
.gxi-sub{display:block;color:#678398;font-size:7px;margin-top:2px}
.gxi-kd{color:#55b9ff;font-weight:900}
.gxi-vd{color:#e9f1f6;font-weight:900}
.gxi-points-cell{color:var(--green);font-weight:900}
.gxi-mini{
    min-height:28px;padding:0 9px;border:1px solid var(--line2);border-radius:7px;
    background:#102333;color:white;font-size:8px;font-weight:900;cursor:pointer
}
.gxi-mini:hover{border-color:var(--green);color:var(--green)}
.gxi-empty{text-align:center!important;padding:34px!important;color:#718da1!important}

.gxi-pagination{
    display:flex;align-items:center;justify-content:center;gap:8px;padding:11px
}
.gxi-pagination span{font-size:8px;color:#7d97aa}
.gxi-pagination button:disabled{opacity:.35;cursor:not-allowed}

.gxi-side-list{display:grid;gap:7px}
.gxi-side-link{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px;border:1px solid var(--line);border-radius:8px;
    background:#091722;color:#eaf2f6;font-size:9px;font-weight:800
}
.gxi-side-link:hover{border-color:#2b647f;background:#0c2130}
.gxi-side-link span:last-child{color:var(--green)}
.gxi-status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}

.gxi-loading{padding:28px;text-align:center;color:#718da1;font-size:9px}
.gxi-error{padding:18px;text-align:center;color:#ff7584;font-size:9px}

.gxi-modal{
    position:fixed;inset:0;z-index:10020;background:rgba(0,0,0,.72);
    display:none;align-items:center;justify-content:center;padding:20px
}
.gxi-modal.active{display:flex}
.gxi-modal-card{
    width:min(620px,96vw);max-height:82vh;overflow:auto;border:1px solid #234b64;
    border-radius:12px;background:#091722;box-shadow:0 25px 80px rgba(0,0,0,.55)
}
.gxi-modal-head{display:flex;align-items:center;justify-content:space-between;padding:13px;border-bottom:1px solid var(--line)}
.gxi-modal-head strong{font-size:12px}
.gxi-modal-close{width:30px;height:30px;border-radius:7px;border:1px solid var(--line2);background:#102332;color:white;cursor:pointer}
.gxi-modal-content{padding:14px}
.gxi-profile{
    display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center
}
.gxi-avatar{
    width:58px;height:58px;border-radius:50%;object-fit:cover;background:#12304a;
    display:grid;place-items:center;font-size:20px;font-weight:1000;color:white
}
.gxi-profile h4{margin:0;color:white;font-size:16px}
.gxi-profile p{margin:4px 0 0;color:#7e98aa;font-size:9px}
.gxi-profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px}
.gxi-profile-stat{padding:10px;border:1px solid var(--line);border-radius:8px;background:#071521}
.gxi-profile-stat small{display:block;color:#708da2;font-size:7px;text-transform:uppercase}
.gxi-profile-stat strong{display:block;color:white;font-size:13px;margin-top:4px}

@media(max-width:1200px){
    .gxi-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
    .gxi-stats{grid-template-columns:repeat(2,1fr)}
    .gxi-top3{grid-template-columns:1fr}
    .gxi-hero{grid-template-columns:1fr}
}
@media(max-width:620px){
    .gxi-stats{grid-template-columns:1fr}
    .gxi-toolbar{grid-template-columns:1fr}
    .gxi-profile-stats{grid-template-columns:repeat(2,1fr)}
}
</style>

<div class="gxi">
    <section class="gxi-hero">
        <div>
            <div class="gxi-kicker">Central da Arena</div>
            <h2>Dados e desempenho da GIGAX Arena</h2>
            <p>Acompanhe jogadores, partidas, ranking e os mapas mais utilizados em uma única central.</p>
        </div>

        <div class="gxi-actions">
            <a class="gxi-btn" href="{{ $dashboardUrl }}">⌂ Dashboard</a>
            <a class="gxi-btn" href="{{ $playersUrl }}">♟ Jogadores</a>
            <a class="gxi-btn primary" href="{{ $rankingUrl }}">🏆 Abrir ranking</a>
        </div>
    </section>

    <section class="gxi-stats">
        <a class="gxi-stat" href="{{ $playersUrl }}" title="Abrir jogadores">
            <div class="gxi-stat-top">
                <div>
                    <small>Jogadores registrados</small>
                    <strong id="total-players">0</strong>
                    <span>Ver todos os jogadores</span>
                </div>
                <div class="gxi-stat-icon">♟</div>
            </div>
        </a>

        <a class="gxi-stat" href="{{ $matchesUrl }}" title="Abrir partidas">
            <div class="gxi-stat-top">
                <div>
                    <small>Partidas realizadas</small>
                    <strong id="total-matches">0</strong>
                    <span>Abrir histórico de partidas</span>
                </div>
                <div class="gxi-stat-icon">⚔</div>
            </div>
        </a>

        <a class="gxi-stat" href="{{ $playersUrl }}?status=online" title="Ver jogadores online">
            <div class="gxi-stat-top">
                <div>
                    <small>Jogadores online</small>
                    <strong id="online-players">0</strong>
                    <span>Ver quem está online</span>
                </div>
                <div class="gxi-stat-icon">●</div>
            </div>
        </a>

        <a class="gxi-stat" href="{{ $matchesUrl }}?status=active" title="Ver partidas ativas">
            <div class="gxi-stat-top">
                <div>
                    <small>Partidas ativas</small>
                    <strong id="active-matches">0</strong>
                    <span>Acompanhar partidas em andamento</span>
                </div>
                <div class="gxi-stat-icon">▶</div>
            </div>
        </a>
    </section>

    <section class="gxi-grid">
        <div class="gxi-panel">
            <div class="gxi-panel-head">
                <div>
                    <h3>🏆 TOP 3 JOGADORES</h3>
                    <p>Melhores jogadores com base nos dados atuais do ranking.</p>
                </div>
                <a class="gxi-btn" href="{{ $rankingUrl }}">Ver ranking completo →</a>
            </div>
            <div class="gxi-panel-body">
                <div id="top-players" class="gxi-top3">
                    <div class="gxi-loading">Carregando jogadores...</div>
                </div>
            </div>
        </div>

        <aside class="gxi-panel">
            <div class="gxi-panel-head">
                <div>
                    <h3>ACESSO RÁPIDO</h3>
                    <p>Navegação direta pelas principais áreas.</p>
                </div>
            </div>
            <div class="gxi-panel-body">
                <div class="gxi-side-list">
                    <a class="gxi-side-link" href="{{ $playersUrl }}"><span>♟ Jogadores</span><span>→</span></a>
                    <a class="gxi-side-link" href="{{ $matchesUrl }}"><span>⚔ Partidas</span><span>→</span></a>
                    <a class="gxi-side-link" href="{{ $rankingUrl }}"><span>🏆 Rankings</span><span>→</span></a>
                    <a class="gxi-side-link" href="{{ Route::has('teams.index') ? route('teams.index') : url('/teams') }}"><span>♜ Times</span><span>→</span></a>
                    <a class="gxi-side-link" href="{{ Route::has('tournaments.index') ? route('tournaments.index') : url('/tournaments') }}"><span>🏅 Torneios</span><span>→</span></a>
                </div>
            </div>
        </aside>
    </section>

    <section class="gxi-grid">
        <div class="gxi-panel">
            <div class="gxi-panel-head">
                <div>
                    <h3>🗺 MAPAS MAIS JOGADOS</h3>
                    <p>Distribuição baseada nas partidas registradas pela plataforma.</p>
                </div>
                <a class="gxi-btn" href="{{ $matchesUrl }}">Abrir partidas →</a>
            </div>
            <div class="gxi-panel-body">
                <div id="top-maps" class="gxi-map-list">
                    <div class="gxi-loading">Carregando mapas...</div>
                </div>
            </div>
        </div>

        <aside class="gxi-panel">
            <div class="gxi-panel-head">
                <div>
                    <h3>STATUS DA CENTRAL</h3>
                    <p>Dados consultados diretamente dos endpoints atuais.</p>
                </div>
            </div>
            <div class="gxi-panel-body">
                <div class="gxi-side-list">
                    <div class="gxi-side-link"><span><span class="gxi-status-dot" style="display:inline-block;margin-right:7px"></span>API de estatísticas</span><span id="stats-status">Carregando</span></div>
                    <div class="gxi-side-link"><span><span class="gxi-status-dot" style="display:inline-block;margin-right:7px"></span>Ranking</span><span id="ranking-status">Carregando</span></div>
                    <button class="gxi-btn" id="refresh-info" type="button">↻ Atualizar dados agora</button>
                </div>
            </div>
        </aside>
    </section>

    <section class="gxi-panel">
        <div class="gxi-panel-head">
            <div>
                <h3>📋 RANKING COMPLETO</h3>
                <p>Pesquise, navegue entre páginas e abra o perfil detalhado do jogador.</p>
            </div>
            <a class="gxi-btn" href="{{ $rankingUrl }}">Página de ranking →</a>
        </div>

        <div class="gxi-toolbar">
            <input type="search" class="gxi-input" id="search-player" placeholder="Buscar jogador por nickname..." autocomplete="off">
            <button class="gxi-btn blue" id="search-button" type="button">⌕ Buscar</button>
            <button class="gxi-btn" id="clear-search" type="button">Limpar</button>
        </div>

        <div class="gxi-table-wrap">
            <table class="gxi-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Jogador</th>
                        <th>Pontos</th>
                        <th>Partidas</th>
                        <th>V/D</th>
                        <th>K/D</th>
                        <th>Rating</th>
                        <th>Detalhes</th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody id="ranking-body">
                    <tr><td colspan="9" class="gxi-empty">Carregando ranking...</td></tr>
                </tbody>
            </table>
        </div>

        <div class="gxi-pagination">
            <button class="gxi-mini" id="prev-page" type="button">← Anterior</button>
            <span id="page-info">Página 1 de 1</span>
            <button class="gxi-mini" id="next-page" type="button">Próxima →</button>
        </div>
    </section>
</div>

<div class="gxi-modal" id="playerModal" aria-hidden="true">
    <div class="gxi-modal-card" role="dialog" aria-modal="true" aria-labelledby="playerModalTitle">
        <div class="gxi-modal-head">
            <strong id="playerModalTitle">Detalhes do jogador</strong>
            <button class="gxi-modal-close" id="closePlayerModal" type="button">×</button>
        </div>
        <div class="gxi-modal-content" id="modal-content">
            <div class="gxi-loading">Carregando...</div>
        </div>
    </div>
</div>

<script>
(function(){
'use strict';

const URLS = {
    stats: @json(route('info.stats')),
    ranking: @json(route('info.ranking')),
    playerBase: @json(url('/info/player')),
    players: @json($playersUrl),
    matches: @json($matchesUrl)
};

let currentPage = 1;
let totalPages = 1;
let currentSearch = '';
let refreshTimer = null;

const $ = (id) => document.getElementById(id);

function esc(v){
    return String(v ?? '')
        .replaceAll('&','&amp;')
        .replaceAll('<','&lt;')
        .replaceAll('>','&gt;')
        .replaceAll('"','&quot;')
        .replaceAll("'","&#039;");
}

function num(v){
    const n = Number(v ?? 0);
    return Number.isFinite(n) ? n : 0;
}

function pick(obj, keys, fallback = null){
    for(const key of keys){
        if(obj && obj[key] !== undefined && obj[key] !== null) return obj[key];
    }
    return fallback;
}

function extractArray(data){
    if(Array.isArray(data)) return data;
    if(Array.isArray(data?.data)) return data.data;
    if(Array.isArray(data?.players)) return data.players;
    if(Array.isArray(data?.ranking)) return data.ranking;
    if(Array.isArray(data?.items)) return data.items;
    return [];
}

function profileUrl(id){
    return URLS.players.replace(/\/$/,'') + '/' + encodeURIComponent(id);
}

async function fetchJson(url){
    const r = await fetch(url,{
        credentials:'same-origin',
        headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},
        cache:'no-store'
    });
    let data = null;
    try{ data = await r.json(); }catch(e){}
    if(!r.ok) throw new Error(data?.message || ('HTTP '+r.status));
    return data ?? {};
}

async function loadStats(){
    try{
        const data = await fetchJson(URLS.stats);

        $('total-players').textContent = num(pick(data,['total_players','players','registered_players'],0)).toLocaleString('pt-BR');
        $('total-matches').textContent = num(pick(data,['total_matches','matches'],0)).toLocaleString('pt-BR');
        $('online-players').textContent = num(pick(data,['online_players','players_online','online'],0)).toLocaleString('pt-BR');
        $('active-matches').textContent = num(pick(data,['active_matches','matches_active'],0)).toLocaleString('pt-BR');

        renderTopPlayers(
            pick(data,['top_players','topPlayers','ranking_top'],[])
        );

        renderMaps(
            pick(data,['top_maps','topMaps','maps'],[])
        );

        $('stats-status').textContent = 'Online';
    }catch(e){
        $('stats-status').textContent = 'Erro';
        if(!$('top-players').querySelector('.gxi-player-card')){
            $('top-players').innerHTML = '<div class="gxi-error">Não foi possível carregar os jogadores.</div>';
        }
        if(!$('top-maps').querySelector('.gxi-map')){
            $('top-maps').innerHTML = '<div class="gxi-error">Não foi possível carregar os mapas.</div>';
        }
    }
}

function renderTopPlayers(items){
    items = extractArray(items).slice(0,3);

    if(!items.length){
        $('top-players').innerHTML = '<div class="gxi-loading">Ainda não existem dados de ranking disponíveis.</div>';
        return;
    }

    $('top-players').innerHTML = items.map((p,index)=>{
        const id = pick(p,['id','user_id','player_id'],0);
        const name = pick(p,['nickname','name','username','player_name'],'Jogador');
        const points = pick(p,['points','rank_points','score','elo'],0);
        const matches = pick(p,['matches','total_matches','partidas'],0);

        return `
        <a class="gxi-player-card" href="${id ? esc(profileUrl(id)) : '#'}" ${id ? '' : 'onclick="return false"'}>
            <span class="gxi-rank">#${index+1}</span>
            <span class="gxi-player-main">
                <strong>${esc(name)}</strong>
                <small>${num(matches)} partidas</small>
            </span>
            <span class="gxi-points">${num(points).toLocaleString('pt-BR')} pts</span>
        </a>`;
    }).join('');
}

function renderMaps(items){
    items = extractArray(items).slice(0,6);

    if(!items.length){
        $('top-maps').innerHTML = '<div class="gxi-loading">Nenhuma partida registrada. Os mapas aparecerão aqui quando houver partidas reais.</div>';
        return;
    }

    $('top-maps').innerHTML = items.map((m)=>{
        const name = pick(m,['map','map_name','name','nome'],'Mapa');
        const count = pick(m,['matches','count','total','partidas'],0);
        const url = URLS.matches + (URLS.matches.includes('?') ? '&' : '?') + 'map=' + encodeURIComponent(name);

        return `
        <a class="gxi-map" href="${esc(url)}">
            <span>
                <strong>${esc(name)}</strong>
                <small>Abrir partidas deste mapa</small>
            </span>
            <span class="gxi-map-count">${num(count).toLocaleString('pt-BR')} partidas</span>
        </a>`;
    }).join('');
}

async function loadRanking(page=1){
    currentPage = Math.max(1,page);

    const qs = new URLSearchParams();
    qs.set('page',String(currentPage));
    if(currentSearch) qs.set('search',currentSearch);

    $('ranking-body').innerHTML = '<tr><td colspan="9" class="gxi-empty">Carregando ranking...</td></tr>';

    try{
        const data = await fetchJson(URLS.ranking + '?' + qs.toString());
        const rows = extractArray(data);

        totalPages = Math.max(
            1,
            num(pick(data,['last_page','total_pages','pages'],pick(data?.meta,['last_page'],1))) || 1
        );

        currentPage = Math.max(
            1,
            num(pick(data,['current_page','page'],pick(data?.meta,['current_page'],currentPage))) || currentPage
        );

        renderRanking(rows);
        $('ranking-status').textContent = 'Online';
    }catch(e){
        $('ranking-status').textContent = 'Erro';
        $('ranking-body').innerHTML = '<tr><td colspan="9" class="gxi-empty">Não foi possível carregar o ranking.</td></tr>';
        totalPages = 1;
    }

    updatePagination();
}

function renderRanking(rows){
    if(!rows.length){
        $('ranking-body').innerHTML = '<tr><td colspan="9" class="gxi-empty">Nenhum jogador encontrado.</td></tr>';
        return;
    }

    $('ranking-body').innerHTML = rows.map((p,index)=>{
        const id = pick(p,['id','user_id','player_id'],0);
        const pos = pick(p,['position','rank','posicao'],((currentPage-1)*20)+index+1);
        const name = pick(p,['nickname','name','username','player_name'],'Jogador');
        const points = pick(p,['points','rank_points','score','elo'],0);
        const matches = pick(p,['matches','total_matches','partidas'],0);
        const wins = pick(p,['wins','vitorias'],0);
        const losses = pick(p,['losses','derrotas'],0);
        const kd = pick(p,['kd','k_d','kd_ratio'],0);
        const rating = pick(p,['rating','elo','skill_rating'],points);

        return `
        <tr>
            <td><strong>#${esc(pos)}</strong></td>
            <td>
                <span class="gxi-name">${esc(name)}</span>
                <span class="gxi-sub">${id ? 'ID '+esc(id) : 'Jogador GIGAX'}</span>
            </td>
            <td class="gxi-points-cell">${num(points).toLocaleString('pt-BR')}</td>
            <td>${num(matches).toLocaleString('pt-BR')}</td>
            <td class="gxi-vd">${num(wins)} / ${num(losses)}</td>
            <td class="gxi-kd">${Number(kd || 0).toFixed(2)}</td>
            <td>${num(rating).toLocaleString('pt-BR')}</td>
            <td><button class="gxi-mini" type="button" data-player-id="${esc(id)}" ${id ? '' : 'disabled'}>Detalhes</button></td>
            <td>${id ? `<a class="gxi-mini" style="display:inline-flex;align-items:center" href="${esc(profileUrl(id))}">Ver perfil →</a>` : '—'}</td>
        </tr>`;
    }).join('');
}

function updatePagination(){
    $('page-info').textContent = `Página ${currentPage} de ${totalPages}`;
    $('prev-page').disabled = currentPage <= 1;
    $('next-page').disabled = currentPage >= totalPages;
}

function doSearch(){
    currentSearch = $('search-player').value.trim();
    loadRanking(1);
}

async function openPlayer(id){
    if(!id) return;

    $('playerModal').classList.add('active');
    $('playerModal').setAttribute('aria-hidden','false');
    $('modal-content').innerHTML = '<div class="gxi-loading">Carregando jogador...</div>';

    try{
        const data = await fetchJson(URLS.playerBase + '/' + encodeURIComponent(id));
        const p = data.player || data.data || data;

        const name = pick(p,['nickname','name','username'],'Jogador');
        const avatar = pick(p,['avatar_url','avatar','photo','profile_photo_url'],null);
        const level = pick(p,['level','skill_level','nivel'],1);
        const points = pick(p,['points','rank_points','score','elo'],0);
        const matches = pick(p,['matches','total_matches','partidas'],0);
        const wins = pick(p,['wins','vitorias'],0);
        const losses = pick(p,['losses','derrotas'],0);
        const kd = pick(p,['kd','k_d','kd_ratio'],0);

        const avatarHtml = avatar
            ? `<img class="gxi-avatar" src="${esc(avatar)}" alt="${esc(name)}" onerror="this.outerHTML='<div class=&quot;gxi-avatar&quot;>${esc(String(name).charAt(0).toUpperCase())}</div>'">`
            : `<div class="gxi-avatar">${esc(String(name).charAt(0).toUpperCase())}</div>`;

        $('modal-content').innerHTML = `
            <div class="gxi-profile">
                ${avatarHtml}
                <div>
                    <h4>${esc(name)}</h4>
                    <p>Nível ${esc(level)} • ID ${esc(id)}</p>
                    <div style="margin-top:8px">
                        <a class="gxi-btn primary" href="${esc(profileUrl(id))}">Abrir perfil completo →</a>
                    </div>
                </div>
            </div>
            <div class="gxi-profile-stats">
                <div class="gxi-profile-stat"><small>Pontos</small><strong>${num(points).toLocaleString('pt-BR')}</strong></div>
                <div class="gxi-profile-stat"><small>Partidas</small><strong>${num(matches)}</strong></div>
                <div class="gxi-profile-stat"><small>V / D</small><strong>${num(wins)} / ${num(losses)}</strong></div>
                <div class="gxi-profile-stat"><small>K/D</small><strong>${Number(kd || 0).toFixed(2)}</strong></div>
            </div>`;
    }catch(e){
        $('modal-content').innerHTML = '<div class="gxi-error">Erro ao carregar informações do jogador.</div>';
    }
}

function closePlayer(){
    $('playerModal').classList.remove('active');
    $('playerModal').setAttribute('aria-hidden','true');
}

document.addEventListener('click',function(e){
    const detail = e.target.closest('[data-player-id]');
    if(detail){
        openPlayer(detail.dataset.playerId);
    }
});

$('search-button').addEventListener('click',doSearch);
$('search-player').addEventListener('keydown',e=>{if(e.key==='Enter')doSearch();});
$('clear-search').addEventListener('click',()=>{
    $('search-player').value='';
    currentSearch='';
    loadRanking(1);
});
$('prev-page').addEventListener('click',()=>{if(currentPage>1)loadRanking(currentPage-1);});
$('next-page').addEventListener('click',()=>{if(currentPage<totalPages)loadRanking(currentPage+1);});
$('refresh-info').addEventListener('click',()=>{loadStats();loadRanking(currentPage);});
$('closePlayerModal').addEventListener('click',closePlayer);
$('playerModal').addEventListener('click',e=>{if(e.target===$('playerModal'))closePlayer();});
document.addEventListener('keydown',e=>{if(e.key==='Escape')closePlayer();});

loadStats();
loadRanking(1);

refreshTimer = setInterval(loadStats,30000);
window.addEventListener('beforeunload',()=>{if(refreshTimer)clearInterval(refreshTimer);});
})();
</script>
@endsection