@extends('layouts.app')
@section('title','QA Simulator - GIGAX ARENA')
@section('page_title','QA Simulator')
@section('content')
<div class="gigax-dashboard-page gxqa">
    <section class="gxqa-hero">
        <div>
            <span class="gxqa-kicker">GIGAX ARENA • CONTROLE OPERACIONAL</span>
            <h2>Simulador <span>QA</span></h2>
            <p>Teste o fluxo visível: cria partida QA no lobby, coloca sua conta como jogador e abre o modal real de confirmação.</p>
        </div>
        <div class="gxqa-live"><i></i> AMBIENTE DE TESTE</div>
    </section>

    @if(session('qa_ok'))<div class="gxqa-ok">✓ {{session('qa_ok')}}</div>@endif
    @if(session('qa_error'))<div class="gxqa-error">⚠ {{session('qa_error')}}</div>@endif

    <div class="gxqa-current-provider" style="margin:10px 0;padding:9px 11px;border:1px solid rgba(39,219,131,.28);border-radius:10px;background:rgba(39,219,131,.055)">
    <strong style="font-size:10px;color:#27db83">COMUNICAÇÃO GLOBAL • PROVEDOR ATIVO AGORA</strong>
    <span style="display:block;margin-top:3px;font-size:12px;font-weight:900">{{ ($globalVoiceProvider ?? 'discord') === 'teamspeak' ? 'TeamSpeak 3' : 'Discord' }}</span>
    <small style="display:block;margin-top:2px;color:#8ea0b4">Discord permanece como padrão/fallback. A partida usa o provedor definido pela Administração quando é criada.</small>
</div>
@if($qaMatch)
    <section class="gxqa-active">
        <div>
            <small>PARTIDA QA ATIVA</small>
            <b>#{{$qaMatch->id}} • {{$qaMatch->title}}</b>
            <span>{{$qaMatch->status}} • {{(int)($qaMatch->qa_players ?? $qaMatch->current_players ?? 0)}}/{{(int)($qaMatch->max_players ?? 0)}} jogadores • VETO {{strtoupper((string)($qaMatch->veto_status ?? '-'))}} • {{(int)($qaMatch->veto_count ?? 0)}} bans • VOZ {{strtoupper((string)($qaMatch->voice_provider ?? '-'))}} / {{strtoupper((string)($qaMatch->voice_status ?? 'pending'))}}</span>
        </div>
        <a href="{{url('/lobby/'.$qaMatch->id)}}">ABRIR NO LOBBY</a>
    </section>
    @endif

    <section class="gxqa-stats">
        <div class="gxqa-stat"><small>BOTS DISPONÍVEIS</small><strong>{{count($bots)}}<em>/16</em></strong></div>
        <div class="gxqa-stat"><small>LIMITE DA SALA</small><strong>16</strong></div>
        <div class="gxqa-stat"><small>READY CHECK</small><strong>30<em>s</em></strong></div>
        <div class="gxqa-stat"><small>OFFLINE / AWAY</small><strong>5<em>min</em></strong></div>
    </section>

    <section class="gxqa-panel">
        <div class="gxqa-panel-head"><div><span>01</span><b>JOGADORES DE TESTE</b><small>Os bots podem ser criados manualmente ou serão completados automaticamente ao iniciar um teste.</small></div>
        <div class="gxqa-actions"><form method="post" action="{{route('admin.qa.bots')}}">@csrf<button class="primary">CRIAR / COMPLETAR 16 BOTS</button></form><form method="post" action="{{route('admin.qa.reset')}}">@csrf<button>RESETAR ESTADO</button></form></div></div>
    </section>

    <section class="gxqa-panel">
        <div class="gxqa-panel-head"><div><span>02</span><b>CRIAR PARTIDA QA VISÍVEL</b><small>Ao clicar TESTAR, sua conta entra como 1 jogador + bots completam a sala. A partida aparece no lobby e o modal oficial deve abrir em até 3s.</small></div></div>

        <div class="gxqa-rule-title">CATEGORIAS COMPETITIVAS • FIXO 5v5</div>
        <div class="gxqa-modes gxqa-fixed">
        @foreach(['open'=>'OPEN','ranked'=>'RANKED','liga'=>'LIGA'] as $m=>$label)
            <form class="gxqa-mode" method="post" action="{{route('admin.qa.queue')}}">@csrf
                <input type="hidden" name="mode" value="{{$m}}"><input type="hidden" name="team_size" value="5">
                <div><small>CATEGORIA</small><strong>{{$label}}</strong><em>5 POR TIME • 10 TOTAL</em></div>
                <span class="gxqa-format">5v5</span><button class="primary">TESTAR</button>
            </form>
        @endforeach
        </div>

        <div class="gxqa-rule-title">MODALIDADES</div>
        <div class="gxqa-modes gxqa-mode-grid">
            <form class="gxqa-mode" method="post" action="{{route('admin.qa.queue')}}">@csrf
                <input type="hidden" name="mode" value="custom">
                <div><small>PERSONALIZADA</small><strong>X1 — X8</strong><em>1 A 8 POR TIME</em></div>
                <select name="team_size">@for($i=1;$i<=8;$i++)<option value="{{$i}}" {{$i===5?'selected':''}}>X{{$i}} • {{$i}}v{{$i}} • {{$i*2}} TOTAL</option>@endfor</select>
                <button class="primary">TESTAR</button>
            </form>
            <form class="gxqa-mode" method="post" action="{{route('admin.qa.queue')}}">@csrf
                <input type="hidden" name="mode" value="team_5l"><input type="hidden" name="team_size" value="5">
                <div><small>MODALIDADE</small><strong>5L</strong><em>PADRÃO 5 POR TIME</em></div>
                <span class="gxqa-format">5v5</span><button class="primary">TESTAR</button>
            </form>
            <form class="gxqa-mode" method="post" action="{{route('admin.qa.queue')}}">@csrf
                <input type="hidden" name="mode" value="c1s">
                <div><small>MODALIDADE</small><strong>DM / C1S</strong><em>1 A 8 POR TIME</em></div>
                <select name="team_size">@for($i=1;$i<=8;$i++)<option value="{{$i}}" {{$i===5?'selected':''}}>{{$i}}v{{$i}} • {{$i*2}} TOTAL</option>@endfor</select>
                <button class="primary">TESTAR</button>
            </form>
            <form class="gxqa-mode" method="post" action="{{route('admin.qa.queue')}}">@csrf
                <input type="hidden" name="mode" value="awp">
                <div><small>MODALIDADE</small><strong>AWP</strong><em>1 A 8 POR TIME</em></div>
                <select name="team_size">@for($i=1;$i<=8;$i++)<option value="{{$i}}" {{$i===5?'selected':''}}>{{$i}}v{{$i}} • {{$i*2}} TOTAL</option>@endfor</select>
                <button class="primary">TESTAR</button>
            </form>
        </div>
    </section>

    <section class="gxqa-panel">
        <div class="gxqa-panel-head"><div><span>03</span><b>READY CHECK REAL</b><small>Os bots recebem o cenário e sua conta permanece pendente. Use o modal oficial para CONFIRMAR ou RECUSAR.</small></div></div>
        <div class="gxqa-scenarios">
        @foreach(['all_accept'=>['TODOS CONFIRMAM','Usa o total real da modalidade'],'one_decline'=>['1 RECUSA','Mantém os confirmados e repõe 1'],'one_timeout'=>['1 TIMEOUT','Mantém os confirmados e repõe 1'],'two_timeout'=>['2 TIMEOUT','Mantém os confirmados e repõe 2']] as $val=>$data)
            <form method="post" action="{{route('admin.qa.ready')}}">@csrf<input type="hidden" name="scenario" value="{{$val}}">
                <button><b>{{$data[0]}}</b><small>{{$data[1]}}</small></button>
            </form>
        @endforeach
        </div>
    </section>


    <section class="gxqa-panel">
        <div class="gxqa-panel-head"><div><span>04</span><b>AUTOPILOT • VETO + INTEGRAÇÃO</b><small>Na partida [QA SIM], quando chegar a vez de um capitão QA_BOT, ele veta automaticamente. Na sua vez, o sistema espera sua escolha real. Se o BOT fizer o último veto, o provedor real de voz é acionado automaticamente.</small></div></div>
        <div class="gxqa-flow"><b>READY</b><i>→</i><b>SEU VETO</b><i>→</i><b>BOT VETA</b><i>→</i><b>MAPA FINAL</b><i>→</i><b>DISCORD / TS3</b></div>
        @if($qaMatch && !empty($qaMatch->voice_notes))<div class="gxqa-note">{{ $qaMatch->voice_notes }}</div>@endif
    </section>

    <section class="gxqa-panel">
        <div class="gxqa-panel-head"><div><span>05</span><b>PRESENÇA DOS BOTS</b><small>Simule heartbeat ativo ou mais de 5 minutos offline.</small></div></div>
        <div class="gxqa-bots">
        @forelse($bots as $b)
            <div class="gxqa-bot">
                <div class="gxqa-avatar">{{str_pad(substr($b->nickname,-2),2,'0',STR_PAD_LEFT)}}</div>
                <div class="gxqa-botname"><b>{{$b->nickname}}</b><small>ID #{{$b->id}}</small></div>
                <div class="gxqa-dot"><i></i> QA</div>
                <form method="post" action="{{route('admin.qa.offline')}}">@csrf<input type="hidden" name="user_id" value="{{$b->id}}"><button>+6 MIN OFFLINE</button></form>
                <form method="post" action="{{route('admin.qa.online')}}">@csrf<input type="hidden" name="user_id" value="{{$b->id}}"><button class="primary">ONLINE</button></form>
            </div>
        @empty
            <div class="gxqa-empty">Nenhum QA_BOT criado. Use <b>CRIAR / COMPLETAR 16 BOTS</b>.</div>
        @endforelse
        </div>
    </section>
</div>

<style>
.gxqa{display:grid;gap:12px;max-width:1540px;margin:0 auto}
.gxqa *{box-sizing:border-box}.gxqa form{margin:0}
.gxqa-active{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border:1px solid rgba(52,231,148,.28);background:rgba(24,185,111,.07);border-radius:10px}.gxqa-active div{display:flex;flex-direction:column;gap:2px}.gxqa-active small{font-size:8px;font-weight:1000;letter-spacing:1px;color:#48e99f}.gxqa-active b{font-size:12px;color:#eefaff}.gxqa-active span{font-size:9px;color:#78939f}.gxqa-active a{height:34px;display:inline-flex;align-items:center;padding:0 13px;border-radius:7px;background:#1dbb70;color:#03150c;text-decoration:none;font-size:9px;font-weight:1000;white-space:nowrap}
.gxqa-error{padding:10px 12px;border:1px solid rgba(255,177,64,.32);background:rgba(255,151,45,.08);border-radius:9px;color:#ffc36c;font-size:11px;font-weight:900}
.gxqa-hero,.gxqa-panel,.gxqa-stat{background:linear-gradient(145deg,rgba(9,25,35,.98),rgba(5,16,24,.98));border:1px solid rgba(87,135,157,.18);border-radius:12px}
.gxqa-hero{min-height:118px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.gxqa-hero:after{content:"QA";position:absolute;right:155px;top:-32px;font-size:145px;font-weight:1000;color:rgba(40,255,156,.035)}
.gxqa-kicker{font-size:10px;font-weight:900;letter-spacing:1.7px;color:#49efa3}.gxqa-hero h2{font-size:30px;line-height:1;margin:7px 0;color:#f4fbff}.gxqa-hero h2 span{color:#42e99d}.gxqa-hero p{margin:0;color:#8199a6;font-size:12px}
.gxqa-live{border:1px solid rgba(54,229,146,.25);background:rgba(35,203,125,.07);color:#66efad;border-radius:8px;padding:10px 13px;font-size:10px;font-weight:900;letter-spacing:.8px;z-index:1}.gxqa-live i,.gxqa-dot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3bea96;margin-right:6px;box-shadow:0 0 9px rgba(59,234,150,.5)}
.gxqa-ok{padding:11px 14px;border:1px solid rgba(48,225,142,.3);background:rgba(30,194,116,.08);color:#62ecab;border-radius:9px;font-size:12px;font-weight:800}
.gxqa-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.gxqa-stat{padding:15px 17px}.gxqa-stat small{display:block;color:#718c99;font-size:9px;font-weight:900;letter-spacing:1px}.gxqa-stat strong{display:block;color:#f4fbff;font-size:23px;margin-top:3px}.gxqa-stat em{font-style:normal;font-size:11px;color:#4ceca3;margin-left:3px}
.gxqa-panel{padding:16px}.gxqa-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.gxqa-panel-head>div:first-child{display:grid;grid-template-columns:29px auto;align-items:center}.gxqa-panel-head span{grid-row:1/3;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(61,231,153,.24);border-radius:6px;color:#42e99d;font-size:9px;font-weight:1000}.gxqa-panel-head b{font-size:12px;color:#eaf7fc;letter-spacing:.6px}.gxqa-panel-head small{font-size:10px;color:#66818e;margin-top:2px}.gxqa-actions{display:flex!important;grid-template-columns:none!important;gap:7px}
.gxqa button,.gxqa select{height:34px;border:1px solid rgba(88,127,145,.24);background:#0b202c;color:#dcebf2;border-radius:7px;padding:0 11px;font-size:9px;font-weight:900;letter-spacing:.35px;cursor:pointer}.gxqa button:hover{border-color:#39dd92}.gxqa button.primary{background:linear-gradient(180deg,#27c77c,#14955a);border-color:#37df91;color:#03130b}
.gxqa-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.gxqa-mode{padding:13px;border:1px solid rgba(76,116,135,.18);background:#071a25;border-radius:9px;display:grid;grid-template-columns:1fr 118px 104px;align-items:center;gap:8px}.gxqa-mode div small{display:block;color:#597481;font-size:8px;font-weight:900}.gxqa-mode div strong{color:#eef9fd;font-size:14px}
.gxqa-scenarios{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gxqa-scenarios form button{width:100%;height:58px;text-align:left;padding:9px 11px}.gxqa-scenarios b,.gxqa-scenarios small{display:block}.gxqa-scenarios b{font-size:10px;color:#e8f7fc}.gxqa-scenarios small{font-size:9px;color:#698692;margin-top:4px}
.gxqa-bots{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gxqa-bot{min-height:48px;border:1px solid rgba(73,111,128,.16);background:#071923;border-radius:8px;padding:6px 7px;display:grid;grid-template-columns:34px 1fr 52px auto auto;gap:6px;align-items:center}.gxqa-avatar{width:32px;height:32px;border-radius:7px;background:#0c2b37;border:1px solid rgba(54,221,145,.2);display:grid;place-items:center;color:#43e99c;font-size:10px;font-weight:1000}.gxqa-botname b,.gxqa-botname small{display:block}.gxqa-botname b{font-size:10px;color:#e6f4fa}.gxqa-botname small{font-size:8px;color:#55717d;margin-top:2px}.gxqa-dot{font-size:8px;font-weight:900;color:#6b8a96}.gxqa-dot i{width:5px;height:5px}.gxqa-bot button{height:29px;font-size:8px}.gxqa-empty{grid-column:1/-1;padding:22px;text-align:center;color:#69838f;font-size:11px}

.gxqa-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;border:1px solid rgba(62,224,149,.16);background:rgba(35,190,117,.05);border-radius:8px}.gxqa-flow b{font-size:9px;color:#dff9ec}.gxqa-flow i{font-style:normal;color:#3ee696}.gxqa-note{margin-top:8px;font-size:9px;color:#83a1ad}
.gxqa-rule-title{margin:13px 0 7px;color:#6e8a96;font-size:8px;font-weight:1000;letter-spacing:1.15px}
.gxqa-mode div em{display:block;margin-top:3px;color:#4fe7a0;font-size:8px;font-style:normal;font-weight:900}
.gxqa-format{height:34px;display:grid;place-items:center;border:1px solid rgba(62,224,149,.2);background:rgba(35,190,117,.06);border-radius:7px;color:#51e9a1;font-size:11px;font-weight:1000}
.gxqa-mode-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.gxqa-stats,.gxqa-scenarios{grid-template-columns:repeat(2,1fr)}.gxqa-modes,.gxqa-bots{grid-template-columns:1fr}.gxqa-mode{grid-template-columns:1fr 120px 110px}}
@media(max-width:650px){.gxqa-stats,.gxqa-scenarios{grid-template-columns:1fr}.gxqa-hero,.gxqa-panel-head{align-items:flex-start;flex-direction:column}.gxqa-mode{grid-template-columns:1fr}.gxqa-bot{grid-template-columns:34px 1fr}.gxqa-dot{display:none}.gxqa-bot form button{width:100%}}
</style>
@endsection