@extends('layouts.app')
@section('title', 'TeamSpeak 3 - GIGAX ARENA')
@section('page_title', 'TeamSpeak 3')

@php
    $activeMatches = collect($activeMatches ?? []);
    $recentLogs = collect($recentLogs ?? []);
    $selectedLobbyId = (int) ($selectedLobbyId ?? 0);
    $configSummary = $configSummary ?? [];
    $status = $status ?? null;
@endphp

@push('styles')
<style>
.gx-ts-page{width:100%;min-width:0;display:grid;gap:12px}
.gx-ts-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gx-ts-head h2{margin:0;font-size:17px;text-transform:uppercase}.gx-ts-head p{margin:4px 0 0;color:var(--mut);font-size:9px}
.gx-ts-state{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;border:1px solid var(--line);font-size:8px;font-weight:1000;text-transform:uppercase}
.gx-ts-state.ok{color:var(--green);border-color:rgba(36,245,111,.26);background:rgba(36,245,111,.05)}.gx-ts-state.bad{color:#ff6878;border-color:rgba(255,72,92,.28)}
.gx-ts-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:10px}
.gx-ts-card{min-width:0;border:1px solid rgba(166,202,234,.13);border-radius:10px;background:linear-gradient(180deg,rgba(15,30,44,.96),rgba(7,15,24,.98));overflow:hidden}
.gx-ts-card-head{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:space-between;gap:8px}
.gx-ts-card-head h3{margin:0;font-size:11px;text-transform:uppercase}.gx-ts-card-body{padding:11px 12px}
.gx-ts-config{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:9px}
.gx-ts-chip{padding:8px;border:1px solid rgba(255,255,255,.055);border-radius:7px;background:rgba(255,255,255,.018);min-width:0}
.gx-ts-chip small,.gx-ts-chip strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gx-ts-chip small{font-size:7px;color:var(--mut);text-transform:uppercase}.gx-ts-chip strong{font-size:9px;margin-top:3px}
.gx-ts-select{width:100%;height:34px;border:1px solid var(--line);border-radius:7px;background:#091724;color:#e9f4ff;padding:0 9px;font-size:9px}
.gx-ts-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}
.gx-ts-actions form{margin:0}.gx-ts-btn{width:100%;min-height:32px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.04);color:#fff;font-size:8px;font-weight:900;cursor:pointer}.gx-ts-btn.primary{background:rgba(36,245,111,.08);color:var(--green);border-color:rgba(36,245,111,.22)}.gx-ts-btn.danger{color:#ff7b88;border-color:rgba(255,80,96,.25)}
.gx-ts-test{margin-top:8px}.gx-ts-test .gx-ts-btn{max-width:220px}
.gx-ts-flash{padding:9px 11px;border-radius:8px;font-size:9px;border:1px solid var(--line)}.gx-ts-flash.ok{color:var(--green);border-color:rgba(36,245,111,.25);background:rgba(36,245,111,.05)}.gx-ts-flash.err{color:#ff7585;border-color:rgba(255,80,96,.25);background:rgba(255,80,96,.05)}
.gx-ts-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gx-ts-status-item{padding:8px;border-radius:7px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.055)}.gx-ts-status-item small{display:block;color:var(--mut);font-size:7px;text-transform:uppercase}.gx-ts-status-item strong{display:block;margin-top:3px;font-size:9px}
.gx-ts-section-title{font-size:9px;margin:12px 0 6px;text-transform:uppercase;color:#91bde2}
.gx-ts-table-wrap{overflow:auto}.gx-ts-table{width:100%;border-collapse:collapse;min-width:460px}.gx-ts-table th,.gx-ts-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.05);text-align:left;font-size:8px}.gx-ts-table th{color:#79b8ee;text-transform:uppercase;font-size:7px}.gx-ts-empty{color:var(--mut);font-size:9px;padding:10px 0}
.gx-ts-payload{margin-top:8px;padding:8px;border-radius:7px;border:1px solid rgba(255,255,255,.055);background:#06111b;color:#9ec4e6;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-all}
@media(max-width:1200px){.gx-ts-grid{grid-template-columns:1fr}.gx-ts-config{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gx-ts-config,.gx-ts-status-grid,.gx-ts-actions{grid-template-columns:1fr}}
</style>
@endpush

@section('content')
<div class="gx-ts-page">
    <div class="gx-ts-head">
        <div>
            <h2>Controle TeamSpeak 3</h2>
            <p>Teste de conexão, criação de salas, movimentação dos times e limpeza sem sair da Administração.</p>
        </div>
        <span class="gx-ts-state {{ $teamspeakEnabled ? 'ok' : 'bad' }}">
            {{ $teamspeakEnabled ? '● Serviço habilitado' : '● Serviço desabilitado' }}
        </span>
    </div>

    @if(session('success'))
        <div class="gx-ts-flash ok">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="gx-ts-flash err">{{ session('error') }}</div>
    @endif

    <div class="gx-ts-grid">
        <section class="gx-ts-card">
            <div class="gx-ts-card-head"><h3>Status e configuração</h3><span class="gx-ts-state {{ $teamspeakEnabled ? 'ok' : 'bad' }}">{{ $teamspeakEnabled ? 'ATIVO' : 'OFF' }}</span></div>
            <div class="gx-ts-card-body">
                <div class="gx-ts-config">
                    <div class="gx-ts-chip"><small>Host</small><strong>{{ $configSummary['host'] ?? '-' }}</strong></div>
                    <div class="gx-ts-chip"><small>Query</small><strong>{{ $configSummary['query_port'] ?? '-' }}</strong></div>
                    <div class="gx-ts-chip"><small>Server ID</small><strong>{{ $configSummary['server_id'] ?? '-' }}</strong></div>
                    <div class="gx-ts-chip"><small>Canal pai</small><strong>{{ $configSummary['parent_channel_id'] ?? '-' }}</strong></div>
                    <div class="gx-ts-chip"><small>Fallback</small><strong>{{ $configSummary['fallback_channel_id'] ?? '-' }}</strong></div>
                </div>

                <div class="gx-ts-actions" style="margin-top:10px">
                    <form method="POST" action="{{ route('admin.teamspeak.test') }}">
                        @csrf
                        <button class="gx-ts-btn primary" type="submit">TESTAR CONEXÃO TS3</button>
                    </form>
                    <form method="POST" action="{{ route('admin.teamspeak.full-test') }}" onsubmit="return confirm('O GIGAX criará [GIGAX] TESTE com TIME A e TIME B e manterá as salas abertas para inspeção. Continuar?')">
                        @csrf
                        <button class="gx-ts-btn" type="submit">TESTE COMPLETO TS3</button>
                    </form>
                    <form method="POST" action="{{ route('admin.teamspeak.cleanup-test') }}" onsubmit="return confirm('Remover todas as estruturas [GIGAX] TESTE criadas pelo diagnóstico?')">
                        @csrf
                        <button class="gx-ts-btn danger" type="submit">LIMPAR TESTE TS3</button>
                    </form>
                </div>

                @if(session('ts3_diagnostic_steps'))
                    <div class="gx-ts-payload" style="margin-top:12px;white-space:normal">
                        @foreach(session('ts3_diagnostic_steps') as $step)
                            <div>✓ {{ $step }}</div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>

        <section class="gx-ts-card">
            <div class="gx-ts-card-head"><h3>Executar ação na partida</h3><span>{{ $activeMatches->count() }} disponíveis</span></div>
            <div class="gx-ts-card-body">
                <form method="GET" action="{{ route('admin.teamspeak') }}">
                    <select class="gx-ts-select" name="lobby_id" onchange="this.form.submit()">
                        <option value="">Selecione uma partida</option>
                        @foreach($activeMatches as $match)
                            <option value="{{ $match->id }}" @selected($selectedLobbyId === (int)$match->id)>
                                #{{ $match->id }} · {{ $match->title ?? $match->map_name ?? 'Partida' }} · {{ $match->players_count ?? 0 }}/10
                            </option>
                        @endforeach
                    </select>
                </form>

                <div class="gx-ts-actions">
                    <form method="POST" action="{{ route('admin.teamspeak.provision') }}">@csrf<input type="hidden" name="lobby_id" value="{{ $selectedLobbyId }}"><button class="gx-ts-btn primary" type="submit" @disabled($selectedLobbyId < 1)>CRIAR SALAS</button></form>
                    <form method="POST" action="{{ route('admin.teamspeak.move') }}">@csrf<input type="hidden" name="lobby_id" value="{{ $selectedLobbyId }}"><button class="gx-ts-btn" type="submit" @disabled($selectedLobbyId < 1)>MOVER JOGADORES</button></form>
                    <form method="POST" action="{{ route('admin.teamspeak.cleanup') }}">@csrf<input type="hidden" name="lobby_id" value="{{ $selectedLobbyId }}"><button class="gx-ts-btn danger" type="submit" @disabled($selectedLobbyId < 1)>LIMPAR SALAS</button></form>
                </div>
            </div>
        </section>

        <section class="gx-ts-card">
            <div class="gx-ts-card-head"><h3>Status da partida selecionada</h3><span>{{ $selectedLobbyId > 0 ? '#'.$selectedLobbyId : '—' }}</span></div>
            <div class="gx-ts-card-body">
                @if($status)
                    @php
                        $channels = $status['channels'] ?? $status['channel_record'] ?? null;
                        $onlinePlayers = collect($status['online_players'] ?? []);
                        $pendingPlayers = collect($status['pending_players'] ?? $status['unmatched_players'] ?? []);
                    @endphp

                    <div class="gx-ts-status-grid">
                        <div class="gx-ts-status-item"><small>Conexão</small><strong>{{ ($status['success'] ?? true) ? 'OK' : 'ERRO' }}</strong></div>
                        <div class="gx-ts-status-item"><small>Online TS3</small><strong>{{ $onlinePlayers->count() }}</strong></div>
                        <div class="gx-ts-status-item"><small>Pendentes</small><strong>{{ $pendingPlayers->count() }}</strong></div>
                    </div>

                    @if($channels)
                        <div class="gx-ts-section-title">Canais</div>
                        <div class="gx-ts-status-grid">
                            <div class="gx-ts-status-item"><small>Principal</small><strong>{{ $channels->root_channel_name ?? $channels['root_channel_name'] ?? '-' }}</strong></div>
                            <div class="gx-ts-status-item"><small>Time A</small><strong>{{ $channels->team_a_channel_name ?? $channels['team_a_channel_name'] ?? 'Time A' }}</strong></div>
                            <div class="gx-ts-status-item"><small>Time B</small><strong>{{ $channels->team_b_channel_name ?? $channels['team_b_channel_name'] ?? 'Time B' }}</strong></div>
                        </div>
                    @endif

                    <div class="gx-ts-section-title">Jogadores online no TS3</div>
                    <div class="gx-ts-table-wrap">
                        <table class="gx-ts-table">
                            <thead><tr><th>Jogador</th><th>UID</th><th>Canal</th><th>Time</th></tr></thead>
                            <tbody>
                            @forelse($onlinePlayers as $player)
                                <tr>
                                    <td>{{ $player['nickname'] ?? $player->nickname ?? '-' }}</td>
                                    <td>{{ $player['unique_id'] ?? $player['ts3_unique_id'] ?? $player->unique_id ?? $player->ts3_unique_id ?? '-' }}</td>
                                    <td>{{ $player['channel_name'] ?? $player->channel_name ?? '-' }}</td>
                                    <td>{{ $player['team'] ?? $player->team ?? '-' }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="gx-ts-empty">Nenhum jogador online encontrado.</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($pendingPlayers->isNotEmpty())
                        <div class="gx-ts-section-title">Jogadores pendentes</div>
                        <div class="gx-ts-table-wrap">
                            <table class="gx-ts-table">
                                <thead><tr><th>Jogador</th><th>Time</th><th>Motivo</th></tr></thead>
                                <tbody>
                                @foreach($pendingPlayers as $player)
                                    <tr>
                                        <td>{{ $player['nickname'] ?? $player->nickname ?? '-' }}</td>
                                        <td>{{ $player['team'] ?? $player->team ?? '-' }}</td>
                                        <td>{{ $player['reason'] ?? $player->reason ?? 'UID/cliente não localizado' }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                @else
                    <div class="gx-ts-empty">Selecione uma partida acima para carregar o status das salas e dos jogadores.</div>
                @endif
            </div>
        </section>

        <section class="gx-ts-card">
            <div class="gx-ts-card-head"><h3>Logs recentes TS3</h3><span>{{ $recentLogs->count() }}</span></div>
            <div class="gx-ts-card-body">
                <div class="gx-ts-table-wrap">
                    <table class="gx-ts-table">
                        <thead><tr><th>ID</th><th>Partida</th><th>Ação</th><th>Status</th><th>Quando</th></tr></thead>
                        <tbody>
                        @forelse($recentLogs as $log)
                            <tr>
                                <td>{{ $log->id ?? '-' }}</td>
                                <td>#{{ $log->training_match_id ?? 0 }}</td>
                                <td>{{ $log->action ?? $log->action_type ?? '-' }}</td>
                                <td>{{ strtoupper((string)($log->status ?? '-')) }}</td>
                                <td>{{ !empty($log->created_at) ? \Illuminate\Support\Carbon::parse($log->created_at)->format('d/m/Y H:i:s') : '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="gx-ts-empty">Nenhum log encontrado.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                @php
                    $lastPayload = optional($recentLogs->first())->payload ?? null;
                @endphp
                @if($lastPayload)
                    <div class="gx-ts-section-title">Último payload</div>
                    <div class="gx-ts-payload">{{ $lastPayload }}</div>
                @endif
            </div>
        </section>
    </div>
</div>
@endsection