@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

    @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</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>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-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