@php
    $gxAcSummary = app(\App\Services\GigaxAcPresenceService::class)->summary();
@endphp

<section class="gx-ac-card" id="gxAcOnlineCard">
    <div class="gx-ac-card-head">
        <div>
            <span class="gx-ac-kicker">MONITORAMENTO EM TEMPO REAL</span>
            <h3>Anti-Cheat Online</h3>
        </div>
        <div class="gx-ac-total">
            <i></i>
            <strong data-gx-ac-count>{{ $gxAcSummary['online_count'] }}</strong>
            <span>online</span>
        </div>
    </div>

    @if(!$gxAcSummary['available'])
        <div class="gx-ac-empty">
            <strong>Fonte do Anti-Cheat indisponível</strong>
            <p>{{ $gxAcSummary['message'] }}</p>
        </div>
    @elseif($gxAcSummary['players']->isEmpty())
        <div class="gx-ac-empty">
            <strong>Nenhum jogador com AC online</strong>
            <p>Online somente com heartbeat recebido nos últimos 90 segundos.</p>
        </div>
    @else
        <div class="gx-ac-list" data-gx-ac-list>
            @foreach($gxAcSummary['players']->take(8) as $player)
                <article class="gx-ac-player">
                    <div class="gx-ac-avatar">
                        @if($player->avatar)
                            <img src="{{ $player->avatar }}" alt="{{ $player->nickname }}">
                        @else
                            <span>{{ mb_strtoupper(mb_substr($player->nickname,0,1)) }}</span>
                        @endif
                    </div>

                    <div class="gx-ac-player-info">
                        <strong>{{ $player->nickname }}</strong>
                        <small>
                            {{ $player->process_name ?: 'AC ativo' }}
                            @if($player->machine) • {{ \Illuminate\Support\Str::limit($player->machine, 12) }} @endif
                        </small>
                    </div>

                    <div class="gx-ac-player-state">
                        <span class="{{ $player->risk_score >= 70 ? 'risk' : 'ok' }}">
                            {{ $player->risk_score >= 70 ? 'RISCO '.$player->risk_score : 'PROTEGIDO' }}
                        </span>
                        <small>
                            {{ $player->heartbeat_at ? \Illuminate\Support\Carbon::parse($player->heartbeat_at)->diffForHumans() : 'agora' }}
                        </small>
                    </div>
                </article>
            @endforeach
        </div>
    @endif

    <div class="gx-ac-card-foot">
        <span>Fonte: gx_anticheat_status</span>
        <button type="button" data-gx-ac-refresh>Atualizar</button>
    </div>
</section>

@once
@push('styles')
<style>
.gx-ac-card{padding:17px;border:1px solid rgba(36,245,111,.22);border-radius:12px;background:radial-gradient(circle at 92% 0,rgba(36,245,111,.11),transparent 30%),linear-gradient(180deg,#0e1d2b,#07111b);box-shadow:0 20px 50px rgba(0,0,0,.26)}
.gx-ac-card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}.gx-ac-kicker{font-size:9px;color:var(--green,#24f56f);font-weight:1000;letter-spacing:.14em}.gx-ac-card h3{margin:4px 0 0;font-size:16px;text-transform:uppercase}.gx-ac-total{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(36,245,111,.22);border-radius:10px;background:rgba(36,245,111,.055)}.gx-ac-total i{width:8px;height:8px;border-radius:50%;background:#24f56f;box-shadow:0 0 14px #24f56f}.gx-ac-total strong{font-size:20px}.gx-ac-total span{font-size:10px;color:#9fb2c7}.gx-ac-list{display:grid;gap:7px}.gx-ac-player{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:rgba(255,255,255,.022)}.gx-ac-avatar,.gx-ac-avatar img{width:36px;height:36px;border-radius:50%}.gx-ac-avatar{display:grid;place-items:center;background:#17283a;color:#fff;font-weight:900}.gx-ac-avatar img{object-fit:cover}.gx-ac-player-info strong,.gx-ac-player-info small,.gx-ac-player-state span,.gx-ac-player-state small{display:block}.gx-ac-player-info strong{font-size:12px}.gx-ac-player-info small{margin-top:3px;color:#9fb2c7;font-size:9px}.gx-ac-player-state{text-align:right}.gx-ac-player-state span{font-size:8px;font-weight:1000}.gx-ac-player-state span.ok{color:#24f56f}.gx-ac-player-state span.risk{color:#ff4054}.gx-ac-player-state small{margin-top:3px;color:#8295aa;font-size:8px}.gx-ac-empty{padding:24px 15px;text-align:center;border:1px dashed rgba(255,255,255,.1);border-radius:9px;color:#9fb2c7}.gx-ac-empty strong{display:block;color:#fff;margin-bottom:5px}.gx-ac-empty p{margin:0;font-size:11px}.gx-ac-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055)}.gx-ac-card-foot span{font-size:9px;color:#8193a7}.gx-ac-card-foot button{padding:7px 10px;border:1px solid rgba(36,245,111,.25);border-radius:7px;background:rgba(36,245,111,.07);color:#24f56f;font-size:9px;font-weight:1000;cursor:pointer}
</style>
@endpush

@push('scripts')
<script>
(function(){
    const root=document.getElementById('gxAcOnlineCard');
    if(!root)return;
    const button=root.querySelector('[data-gx-ac-refresh]');
    const count=root.querySelector('[data-gx-ac-count]');
    const list=root.querySelector('[data-gx-ac-list]');

    function esc(value){
        return String(value??'').replace(/[&<>"']/g,function(c){
            return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[c];
        });
    }

    async function refresh(){
        if(!button)return;
        button.disabled=true;
        button.textContent='Atualizando...';

        try{
            const response=await fetch('{{ route('admin.ac-online.data') }}',{
                headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},
                credentials:'same-origin'
            });
            if(!response.ok)throw new Error('Falha ao atualizar.');
            const data=await response.json();
            if(count)count.textContent=Number(data.online_count||0);

            if(list){
                list.innerHTML=(data.players||[]).slice(0,8).map(function(p){
                    const letter=esc((p.nickname||'?').charAt(0).toUpperCase());
                    const avatar=p.avatar?'<img src="'+esc(p.avatar)+'" alt="">':'<span>'+letter+'</span>';
                    const risk=Number(p.risk_score||0);
                    return '<article class="gx-ac-player">'+
                        '<div class="gx-ac-avatar">'+avatar+'</div>'+
                        '<div class="gx-ac-player-info"><strong>'+esc(p.nickname)+'</strong><small>'+esc(p.process_name||'AC ativo')+'</small></div>'+
                        '<div class="gx-ac-player-state"><span class="'+(risk>=70?'risk':'ok')+'">'+(risk>=70?'RISCO '+risk:'PROTEGIDO')+'</span><small>heartbeat recente</small></div>'+
                    '</article>';
                }).join('');
            }
        }catch(error){
            alert(error.message);
        }finally{
            button.disabled=false;
            button.textContent='Atualizar';
        }
    }

    button?.addEventListener('click',refresh);
    window.setInterval(refresh,30000);
})();
</script>
@endpush
@endonce