@extends('layouts.app')

@section('title', 'Jogadores - GIGAX ARENA')
@section('page_title', 'Jogadores')

@section('content')
@php
    $playersCollection = collect($players ?? []);
    $currentSearch = trim((string) ($search ?? request('search', '')));
    $currentSort = (string) ($sort ?? request('sort', 'latest'));
    $currentPage = max(1, (int) ($page ?? request('page', 1)));
    $pages = max(1, (int) ($totalPages ?? 1));
    $listed = (int) ($total ?? $playersCollection->count());

    $getId = fn($p) => $p->user_id ?? $p->id ?? null;
    $getName = fn($p) => $p->nickname ?? $p->name ?? 'Jogador';
    $getAvatar = fn($p) => $p->avatar_url ?? $p->avatar ?? $p->photo ?? null;

    $initial = function ($name) {
        $name = trim((string)$name);
        if ($name === '') return 'G';
        return function_exists('mb_substr')
            ? mb_strtoupper(mb_substr($name, 0, 1))
            : strtoupper(substr($name, 0, 1));
    };

    $hasRealAvatar = function ($avatar) {
        $avatar = trim((string)$avatar);
        return $avatar !== '' && stripos($avatar, 'default-avatar') === false;
    };

    $onlineCount = $playersCollection->filter(function ($p) {
        return (bool)($p->is_online ?? $p->online ?? false);
    })->count();

    $playedCount = $playersCollection->filter(function ($p) {
        return (int)($p->matches_played ?? 0) > 0;
    })->count();
@endphp

<div class="gx-directory" id="gxDirectory">

    {{-- HERO / RESUMO --}}
    <section class="gx-directory-hero">
        <div class="gx-hero-copy">
            <span class="gx-eyebrow">GIGAX ARENA</span>
            <h1>Comunidade de Jogadores</h1>
            <p>Encontre jogadores, consulte perfis e conecte-se com a comunidade sem poluição visual.</p>
        </div>

        <div class="gx-hero-metrics">
            <div>
                <small>Jogadores</small>
                <strong>{{ number_format($listed,0,',','.') }}</strong>
            </div>
            <div>
                <small>Online nesta página</small>
                <strong>{{ $onlineCount }}</strong>
            </div>
            <div>
                <small>Com partidas</small>
                <strong>{{ $playedCount }}</strong>
            </div>
        </div>
    </section>

    {{-- BUSCA --}}
    <section class="gx-toolbar-card">
        <form method="GET" action="{{ route('players.index') }}" class="gx-directory-search">
            <label class="gx-search-box">
                <span>⌕</span>
                <input
                    type="search"
                    name="search"
                    value="{{ $currentSearch }}"
                    placeholder="Buscar por nickname..."
                    autocomplete="off"
                >
            </label>

            <select name="sort" class="gx-select" onchange="this.form.submit()">
                <option value="latest" @selected($currentSort === 'latest')>Mais recentes</option>
                <option value="points" @selected($currentSort === 'points')>Maior pontuação</option>
                <option value="kd" @selected($currentSort === 'kd')>Melhor K/D</option>
                <option value="matches" @selected($currentSort === 'matches')>Mais partidas</option>
            </select>

            <button class="gx-primary" type="submit">Buscar</button>

            @if($currentSearch !== '')
                <a class="gx-secondary" href="{{ route('players.index') }}">Limpar</a>
            @endif
        </form>

        <div class="gx-view-tools">
            <button type="button" class="gx-icon-btn active" data-view="list" title="Visualização em lista">☷</button>
            <button type="button" class="gx-icon-btn" data-view="grid" title="Visualização compacta">▦</button>
        </div>
    </section>

    {{-- CONTEÚDO --}}
    <section class="gx-directory-panel">
        <div class="gx-panel-head">
            <div>
                <h2>Jogadores encontrados</h2>
                <span>{{ number_format($listed,0,',','.') }} registros</span>
            </div>
            <span>Página {{ $currentPage }} de {{ $pages }}</span>
        </div>

        <div class="gx-player-list" id="gxPlayerList">
            @forelse($playersCollection as $player)
                @php
                    $playerId = $getId($player);
                    $nickname = $getName($player);
                    $avatar = $getAvatar($player);
                    $level = max(1, (int)($player->skill_level ?? $player->level ?? 1));
                    $matches = max(0, (int)($player->matches_played ?? 0));
                    $hasPlayed = $matches > 0;

                    $points = $hasPlayed ? max(0, (int)($player->total_points ?? 0)) : 0;
                    $kd = $hasPlayed ? max(0, (float)($player->kd_ratio ?? 0)) : 0;
                    $wins = $hasPlayed ? max(0, (int)($player->wins ?? 0)) : 0;
                    $losses = $hasPlayed ? max(0, (int)($player->losses ?? 0)) : 0;

                    $isOnline = (bool)($player->is_online ?? $player->online ?? false);
                    $statusText = $isOnline ? 'Online' : 'Offline';
                @endphp

                <article class="gx-player-row" data-player-row>
                    <a class="gx-player-core" href="{{ $playerId ? route('players.show', $playerId) : '#' }}">
                        <div class="gx-avatar-wrap">
                            <div class="gx-avatar">
                                @if($hasRealAvatar($avatar))
                                    <img
                                        src="{{ $avatar }}"
                                        alt="{{ $nickname }}"
                                        loading="lazy"
                                        onerror="this.style.display='none';this.nextElementSibling.style.display='grid';"
                                    >
                                    <span style="display:none">{{ $initial($nickname) }}</span>
                                @else
                                    <span>{{ $initial($nickname) }}</span>
                                @endif
                            </div>
                            <i class="{{ $isOnline ? 'online' : '' }}"></i>
                        </div>

                        <div class="gx-player-name">
                            <div class="gx-name-line">
                                <strong>{{ $nickname }}</strong>
                                @php
                                    $gigaxListId = $playerId
                                        ? (\Illuminate\Support\Facades\DB::table('users')->where('id', (int) $playerId)->value('gigax_id') ?? $playerId)
                                        : null;
                                @endphp
                                @if($gigaxListId)
                                    <span style="display:inline-flex;width:max-content;margin-top:3px;padding:2px 6px;border:1px solid rgba(31,244,125,.25);border-radius:5px;background:rgba(31,244,125,.06);color:#7dffaf;font-size:9px;font-weight:800;letter-spacing:.04em">
                                        GIGAX ID #{{ $gigaxListId }}
                                    </span>
                                @endif
                                @if(!$hasPlayed)
                                    <span class="gx-rookie">NOVO</span>
                                @endif
                            </div>
                            <small>Nível {{ $level }} · {{ $statusText }}</small>
                        </div>
                    </a>

                    <div class="gx-stat-cell">
                        <small>PONTOS</small>
                        <strong>{{ number_format($points,0,',','.') }}</strong>
                    </div>

                    <div class="gx-stat-cell">
                        <small>K/D</small>
                        <strong>{{ number_format($kd,2,',','.') }}</strong>
                    </div>

                    <div class="gx-stat-cell">
                        <small>V / D</small>
                        <strong>{{ $wins }} / {{ $losses }}</strong>
                    </div>

                    <div class="gx-stat-cell">
                        <small>PARTIDAS</small>
                        <strong>{{ $matches }}</strong>
                    </div>

                    <div class="gx-player-actions">
                        @if($playerId)
                            <a class="gx-action primary" href="{{ route('players.show', $playerId) }}">Ver perfil</a>
                            <a class="gx-action gx-action-chat" href="{{ url('/amigos/chat/'.$playerId) }}">💬 Conversar</a>
                            <button class="gx-action gx-action-invite" type="button" data-gx-invite-player="{{ $playerId }}">🎮 Convidar</button>
                        @endif

                        <a class="gx-action" href="{{ url('/amigos/buscar') }}?q={{ urlencode($nickname) }}">Adicionar</a>
                    </div>
                </article>
            @empty
                <div class="gx-empty-state">
                    <div class="gx-empty-icon">⌕</div>
                    <strong>Nenhum jogador encontrado</strong>
                    <span>Tente outro nickname ou limpe os filtros.</span>
                </div>
            @endforelse
        </div>

        @if($pages > 1)
            <nav class="gx-pagination">
                @if($currentPage > 1)
                    <a href="{{ request()->fullUrlWithQuery(['page' => $currentPage - 1]) }}">← Anterior</a>
                @else
                    <span class="disabled">← Anterior</span>
                @endif

                <div class="gx-page-indicator">
                    <b>{{ $currentPage }}</b>
                    <span>de {{ $pages }}</span>
                </div>

                @if($currentPage < $pages)
                    <a href="{{ request()->fullUrlWithQuery(['page' => $currentPage + 1]) }}">Próxima →</a>
                @else
                    <span class="disabled">Próxima →</span>
                @endif
            </nav>
        @endif
    </section>
</div>



{{-- GIGAX_PLAYERS_ACTIONS_FIXED_V2 --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    document.querySelectorAll('[data-gx-invite-player]').forEach(function(button){
        button.addEventListener('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            const playerId = button.getAttribute('data-gx-invite-player');
            const eventName = window.prompt('Qual evento/partida deseja convidar este jogador?', 'Jogar agora');
            if (eventName === null || !eventName.trim()) return;
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/players/' + playerId + '/convidar-evento';
            form.style.display = 'none';
            const token = document.createElement('input');
            token.type='hidden'; token.name='_token'; token.value=csrf; form.appendChild(token);
            const event = document.createElement('input');
            event.type='hidden'; event.name='event_name'; event.value=eventName.trim(); form.appendChild(event);
            document.body.appendChild(form); form.submit();
        });
    });
});
</script>
{{-- /GIGAX_PLAYERS_ACTIONS_FIXED_V2 --}}

@endsection

@push('styles')
<style>
.gx-directory,.gx-directory *{box-sizing:border-box}
.gx-directory{display:grid;gap:12px;width:100%}

/* HERO */
.gx-directory-hero{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
    padding:20px 22px;border:1px solid #183149;border-radius:12px;
    background:
        radial-gradient(circle at 92% 15%,rgba(0,239,121,.10),transparent 28%),
        linear-gradient(115deg,#0b1d28,#0a1620 58%,#0a201c);
}
.gx-eyebrow{display:block;color:#00ef79;font-size:8px;font-weight:950;letter-spacing:.14em}
.gx-hero-copy h1{margin:5px 0 5px;font-size:23px;line-height:1.05}
.gx-hero-copy p{margin:0;color:#7e94a6;font-size:9px}
.gx-hero-metrics{display:grid;grid-template-columns:repeat(3,110px);gap:8px}
.gx-hero-metrics>div{
    padding:11px;border:1px solid #1a384a;border-radius:9px;
    background:rgba(8,21,30,.72)
}
.gx-hero-metrics small{display:block;color:#71899b;font-size:7px;text-transform:uppercase;font-weight:900}
.gx-hero-metrics strong{display:block;margin-top:4px;font-size:16px}

/* TOOLBAR */
.gx-toolbar-card{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px;border:1px solid #183149;border-radius:10px;background:#0b1823
}
.gx-directory-search{
    flex:1;display:grid;grid-template-columns:minmax(300px,1fr) 170px auto auto;gap:7px
}
.gx-search-box{
    height:36px;display:grid;grid-template-columns:35px 1fr;align-items:center;
    border:1px solid #1d3a4e;border-radius:8px;background:#07141d
}
.gx-search-box>span{display:grid;place-items:center;color:#00ef79;font-size:16px}
.gx-search-box input{
    height:34px;border:0;outline:0;background:transparent;color:#eaf3f8;
    padding:0 10px;font-size:9px
}
.gx-select,.gx-primary,.gx-secondary,.gx-icon-btn{
    height:36px;border-radius:8px;font-size:8px;font-weight:900
}
.gx-select{
    border:1px solid #1d3a4e;background:#07141d;color:#dce7ee;padding:0 9px
}
.gx-primary,.gx-secondary,.gx-icon-btn{
    border:1px solid #1d3a4e;cursor:pointer;text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;padding:0 12px
}
.gx-primary{background:#00df73;border-color:#00df73;color:#04150c}
.gx-secondary,.gx-icon-btn{background:#111f2c;color:#dce7ee}
.gx-icon-btn{width:36px;padding:0;font-size:13px}
.gx-icon-btn.active,.gx-icon-btn:hover,.gx-secondary:hover{border-color:#00ef79;color:#00ef79}
.gx-view-tools{display:flex;gap:6px}

/* PANEL */
.gx-directory-panel{
    border:1px solid #183149;border-radius:12px;background:#08151f;padding:12px
}
.gx-panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 10px
}
.gx-panel-head h2{margin:0;font-size:12px}
.gx-panel-head span{color:#748b9e;font-size:8px}

/* LIST */
.gx-player-list{display:grid;gap:6px}
.gx-player-row{
    min-height:68px;display:grid;
    grid-template-columns:minmax(220px,1.7fr) 100px 90px 100px 95px 180px;
    gap:8px;align-items:center;
    padding:9px 10px;border:1px solid #162d3e;border-radius:9px;
    background:linear-gradient(90deg,#0c1b27,#0a1721);
    transition:.15s ease
}
.gx-player-row:hover{
    border-color:#1e5a48;background:linear-gradient(90deg,#0d2028,#0b1c23);
    transform:translateY(-1px)
}
.gx-player-core{
    min-width:0;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none
}
.gx-avatar-wrap{position:relative;flex:0 0 44px}
.gx-avatar{
    width:44px;height:44px;border-radius:10px;overflow:hidden;border:1px solid #21445b;
    background:linear-gradient(135deg,#174f9e,#1d2e55)
}
.gx-avatar img,.gx-avatar span{width:100%;height:100%}
.gx-avatar img{display:block;object-fit:cover}
.gx-avatar span{display:grid;place-items:center;color:#fff;font-size:16px;font-weight:900}
.gx-avatar-wrap>i{
    position:absolute;right:-2px;bottom:1px;width:10px;height:10px;border-radius:50%;
    border:2px solid #0b1924;background:#617586
}
.gx-avatar-wrap>i.online{background:#00ef79}
.gx-player-name{min-width:0}
.gx-name-line{display:flex;align-items:center;gap:6px;min-width:0}
.gx-name-line strong{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px
}
.gx-player-name small{display:block;margin-top:4px;color:#71899b;font-size:7px}
.gx-rookie{
    flex:0 0 auto;padding:3px 5px;border-radius:4px;background:#173848;color:#7db3d1;
    font-size:6px;font-weight:900
}
.gx-stat-cell{
    padding:6px 8px;border-left:1px solid #142a39
}
.gx-stat-cell small{display:block;color:#698195;font-size:6px;font-weight:900}
.gx-stat-cell strong{display:block;margin-top:3px;font-size:10px}
.gx-player-actions{display:flex;justify-content:flex-end;gap:6px}
.gx-action{
    height:30px;padding:0 9px;border:1px solid #24445a;border-radius:7px;
    background:#101f2c;color:#d8e4ec;text-decoration:none;font-size:7px;font-weight:900;
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap
}
.gx-action:hover{border-color:#00ef79;color:#00ef79}
.gx-action.primary{background:#0d3a27;border-color:#176c47;color:#6df0a4}

/* GRID MODE */
.gx-player-list.is-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:8px
}
.gx-player-list.is-grid .gx-player-row{
    display:grid;grid-template-columns:1fr 1fr;min-height:160px;padding:12px
}
.gx-player-list.is-grid .gx-player-core{grid-column:1/-1}
.gx-player-list.is-grid .gx-stat-cell{border-left:0;border-top:1px solid #142a39;padding:8px 0}
.gx-player-list.is-grid .gx-player-actions{grid-column:1/-1;justify-content:stretch}
.gx-player-list.is-grid .gx-action{flex:1}

/* PAGINATION */
.gx-pagination{
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding-top:12px;margin-top:12px;border-top:1px solid #142a39
}
.gx-pagination>a,.gx-pagination>.disabled{
    min-width:82px;height:31px;padding:0 10px;border:1px solid #1b394d;border-radius:7px;
    background:#0d1b26;color:#dce7ee;text-decoration:none;font-size:8px;
    display:flex;align-items:center;justify-content:center
}
.gx-pagination>a:hover{border-color:#00ef79;color:#00ef79}
.gx-pagination>.disabled{opacity:.45}
.gx-page-indicator{display:flex;align-items:baseline;gap:4px}
.gx-page-indicator b{font-size:12px;color:#00ef79}
.gx-page-indicator span{font-size:7px;color:#71899b}
.gx-empty-state{
    min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:#72899b;text-align:center
}
.gx-empty-icon{width:42px;height:42px;border:1px solid #1d4158;border-radius:10px;display:grid;place-items:center;color:#00ef79;font-size:18px}
.gx-empty-state strong{margin-top:9px;color:#e1ebf1;font-size:11px}
.gx-empty-state span{margin-top:4px;font-size:8px}

@media(max-width:1350px){
    .gx-player-row{grid-template-columns:minmax(200px,1.5fr) 85px 80px 90px 85px 155px}
}
@media(max-width:1050px){
    .gx-directory-hero{grid-template-columns:1fr}
    .gx-hero-metrics{grid-template-columns:repeat(3,1fr)}
    .gx-player-row{grid-template-columns:minmax(190px,1fr) repeat(4,80px)}
    .gx-player-actions{grid-column:1/-1;justify-content:flex-end}
    .gx-player-list.is-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .gx-directory-search{grid-template-columns:1fr 1fr}
    .gx-search-box{grid-column:1/-1}
    .gx-toolbar-card{align-items:stretch;flex-direction:column}
    .gx-view-tools{justify-content:flex-end}
    .gx-player-row{grid-template-columns:1fr 1fr}
    .gx-player-core{grid-column:1/-1}
    .gx-stat-cell{border-left:0;border-top:1px solid #142a39}
    .gx-player-actions{grid-column:1/-1}
    .gx-player-list.is-grid{grid-template-columns:1fr}
}

/* GIGAX — TIPOGRAFIA PADRÃO DASHBOARD */
.gx-directory{font-size:14px}
.gx-eyebrow{font-size:11px}
.gx-hero-copy h1{font-size:28px}
.gx-hero-copy p{font-size:13px}
.gx-hero-metrics small{font-size:10px}
.gx-hero-metrics strong{font-size:20px}
.gx-search-box input{font-size:13px}
.gx-select,.gx-primary,.gx-secondary{font-size:12px}
.gx-icon-btn{font-size:16px}
.gx-panel-head h2{font-size:16px}
.gx-panel-head span{font-size:11px}
.gx-name-line strong{font-size:14px}
.gx-player-name small{font-size:11px}
.gx-rookie{font-size:9px}
.gx-stat-cell small{font-size:9px}
.gx-stat-cell strong{font-size:14px}
.gx-action{font-size:11px}
.gx-pagination>a,.gx-pagination>.disabled{font-size:11px}
.gx-page-indicator b{font-size:15px}
.gx-page-indicator span{font-size:10px}
.gx-empty-state strong{font-size:15px}
.gx-empty-state span{font-size:11px}



/* GIGAX_PLAYERS_LAYOUT_FIXED_V2 */
.gx-player-row{
    grid-template-columns:minmax(300px,1fr) 88px 82px 88px 88px minmax(330px,auto)!important;
    gap:8px!important;
}
.gx-stat-cell{min-width:0!important;position:relative!important;z-index:1!important}
.gx-player-actions{
    min-width:330px!important;
    display:grid!important;
    grid-template-columns:repeat(4,max-content)!important;
    justify-content:end!important;
    align-items:center!important;
    gap:5px!important;
    position:relative!important;
    z-index:2!important;
}
.gx-action{
    height:30px!important;
    padding:0 8px!important;
    font-size:10px!important;
    line-height:1!important;
    border-radius:7px!important;
    box-sizing:border-box!important;
}
button.gx-action{font-family:inherit!important;cursor:pointer!important}
.gx-action-chat{background:#102943!important;border-color:#24527a!important;color:#cfe7ff!important}
.gx-action-invite{background:#0d3526!important;border-color:#176c47!important;color:#8af0b4!important}
@media(max-width:1450px){
    .gx-player-row{grid-template-columns:minmax(260px,1fr) 76px 72px 78px 76px minmax(300px,auto)!important}
    .gx-player-actions{min-width:300px!important}
    .gx-action{padding:0 6px!important;font-size:9px!important}
}
@media(max-width:1180px){
    .gx-player-row{grid-template-columns:minmax(230px,1fr) repeat(4,72px)!important}
    .gx-player-actions{grid-column:1/-1!important;min-width:0!important;grid-template-columns:repeat(4,max-content)!important;justify-content:end!important}
}
@media(max-width:760px){
    .gx-player-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
    .gx-action{width:100%!important}
}

</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const list = document.getElementById('gxPlayerList');
    const buttons = document.querySelectorAll('[data-view]');
    if (!list || !buttons.length) return;

    const stored = localStorage.getItem('gigax_players_directory_view') || 'list';

    function setView(view) {
        list.classList.toggle('is-grid', view === 'grid');
        buttons.forEach(btn => btn.classList.toggle('active', btn.dataset.view === view));
        localStorage.setItem('gigax_players_directory_view', view);
    }

    buttons.forEach(btn => {
        btn.addEventListener('click', () => setView(btn.dataset.view));
    });

    setView(stored);
});
</script>
@endpush