@extends('layouts.app')

@section('title', 'Discord • Administração')

@push('styles')
<style>
.gx-discord-admin{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;padding:0 14px 22px}
.gx-discord-main{min-width:0}
.gx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
.gx-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:#28ee86;text-transform:uppercase}
.gx-title{margin:4px 0 2px;font-size:25px;font-weight:800;color:#f5f8ff}
.gx-sub{font-size:11px;color:#7f9ab1}
.gx-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #145b42;background:#073122;color:#32f191;border-radius:7px;font-size:10px;font-weight:800}
.gx-badge.bad{border-color:#6b2430;background:#2a1118;color:#ff667d}
.gx-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:10px}
.gx-card{background:#0b1926;border:1px solid #183044;border-radius:10px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.16)}
.gx-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid #193247;color:#fff;font-size:12px;font-weight:800}
.gx-card-b{padding:12px}
.gx-status{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.gx-stat{background:#0d2030;border:1px solid #1b3548;border-radius:8px;padding:10px}
.gx-stat small{display:block;color:#5e8db1;font-size:8px;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.gx-stat strong{display:block;color:#f7fbff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gx-btn{border:1px solid #24445b;background:#102536;color:#dbe8f4;border-radius:7px;padding:9px 10px;font-size:9px;font-weight:900;cursor:pointer;text-transform:uppercase}
.gx-btn.green{border-color:#0f6b48;background:#0a3b29;color:#39f399}
.gx-btn.red{border-color:#6b2935;background:#29131a;color:#ff6d82}
.gx-btn.blue{border-color:#235c86;background:#0b2c44;color:#67c8ff}
.gx-btn:disabled{opacity:.4;cursor:not-allowed}
.gx-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.gx-field label{display:block;margin-bottom:4px;color:#6f94af;font-size:8px;font-weight:800;text-transform:uppercase}
.gx-field input,.gx-field select{width:100%;box-sizing:border-box;background:#07131d;border:1px solid #1c3447;color:#e9f3fb;border-radius:7px;padding:9px 10px;font-size:10px;outline:none}
.gx-field input:focus,.gx-field select:focus{border-color:#24d47c}
.gx-notice{padding:9px 11px;border-radius:8px;margin-bottom:10px;font-size:10px;font-weight:700}
.gx-notice.ok{border:1px solid #155f42;background:#092d20;color:#39ee91}
.gx-notice.err{border:1px solid #702938;background:#2d1118;color:#ff7185}
.gx-table-wrap{max-height:430px;overflow:auto}
.gx-table{width:100%;border-collapse:collapse;font-size:9px}
.gx-table th,.gx-table td{padding:8px 7px;border-bottom:1px solid #142c3e;text-align:left;color:#a9c0d1;white-space:nowrap}
.gx-table th{position:sticky;top:0;background:#0b1926;color:#5da3d3;font-size:8px;text-transform:uppercase}
.gx-room{display:grid;grid-template-columns:90px 1fr 90px 90px;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid #142c3e}
.gx-room:last-child{border-bottom:0}
.gx-room span{font-size:9px;color:#9ab4c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-room strong{color:#fff}
@media(max-width:1150px){.gx-grid{grid-template-columns:1fr}.gx-discord-admin{grid-template-columns:1fr}.gx-status{grid-template-columns:repeat(2,1fr)}}
</style>
@endpush

@section('content')
<div class="gx-discord-admin">
    <aside>
        @include('Admin.partials.admin-menu')
    </aside>

    <main class="gx-discord-main">
        <div class="gx-head">
            <div>
                <div class="gx-kicker">GIGAX ARENA</div>
                <h1 class="gx-title">DISCORD</h1>
                <div class="gx-sub">Teste de conexão, criação de salas, movimentação dos times e limpeza sem sair da Administração.</div>
            </div>
            <span class="gx-badge {{ ($health['ok'] ?? false) && ($health['bot_ready'] ?? false) ? '' : 'bad' }}">
                ● {{ ($health['ok'] ?? false) && ($health['bot_ready'] ?? false) ? 'BOT ONLINE' : 'BOT OFFLINE' }}
            </span>
        </div>

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

        <div class="gx-grid">
            <div>
                <section class="gx-card">
                    <div class="gx-card-h">
                        <span>STATUS E CONFIGURAÇÃO</span>
                        <span class="gx-badge {{ ($health['bot_ready'] ?? false) ? '' : 'bad' }}">{{ ($health['bot_ready'] ?? false) ? 'ATIVO' : 'INDISPONÍVEL' }}</span>
                    </div>
                    <div class="gx-card-b">
                        <div class="gx-status">
                            <div class="gx-stat"><small>EVENT SERVER</small><strong>{{ $eventUrl }}</strong></div>
                            <div class="gx-stat"><small>GUILD</small><strong>{{ $discordStatus['guild_name'] ?? ($health['guild_id'] ?? '-') }}</strong></div>
                            <div class="gx-stat"><small>PENDENTES</small><strong>{{ $discordStatus['pending_moves'] ?? ($health['pending_moves'] ?? 0) }}</strong></div>
                            <div class="gx-stat"><small>SALAS</small><strong>{{ count($discordStatus['rooms'] ?? []) }}</strong></div>
                        </div>

                        <div class="gx-actions">
                            <a class="gx-btn green" href="{{ route('admin.discord') }}" style="text-align:center;text-decoration:none">ATUALIZAR STATUS</a>
                            <button type="button" class="gx-btn blue" onclick="document.getElementById('test-create-form').requestSubmit()">CRIAR TESTE DISCORD</button>
                            <button type="button" class="gx-btn red" onclick="if(confirm('Limpar TODAS as salas de teste criadas pelo painel?')) document.getElementById('cleanup-all-form').requestSubmit()">LIMPAR TESTES</button>
                        </div>
                    </div>
                </section>

                <section class="gx-card" style="margin-top:10px">
                    <div class="gx-card-h">
                        <span>EXECUTAR AÇÃO NA PARTIDA</span>
                        <span>{{ count($matches) }} disponíveis</span>
                    </div>
                    <div class="gx-card-b">
                        <form method="POST" action="{{ route('admin.discord.test-create') }}" id="test-create-form">
                            @csrf
                            <div class="gx-field">
                                <label>Partida / ID de teste</label>
                                <select name="match_id">
                                    <option value="">Criar ID de teste automático</option>
                                    @foreach($matches as $m)
                                        <option value="{{ $m->id ?? '' }}">#{{ $m->id ?? '?' }} {{ $m->title ?? $m->map_name ?? $m->status ?? '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="gx-form-row">
                                <div class="gx-field">
                                    <label>Discord IDs • Time A (opcional)</label>
                                    <input name="team_a_discord_ids" placeholder="ID, ID, ID">
                                </div>
                                <div class="gx-field">
                                    <label>Discord IDs • Time B (opcional)</label>
                                    <input name="team_b_discord_ids" placeholder="ID, ID, ID">
                                </div>
                            </div>
                            <div class="gx-actions" style="margin-top:10px">
                                <button class="gx-btn green" type="submit">CRIAR SALAS</button>
                                <button class="gx-btn blue" type="submit" formaction="{{ route('admin.discord.move') }}">MOVER JOGADORES</button>
                                <button class="gx-btn red" type="submit" formaction="{{ route('admin.discord.cleanup') }}">LIMPAR SALAS</button>
                            </div>
                        </form>
                        <form method="POST" action="{{ route('admin.discord.cleanup') }}" id="cleanup-all-form" style="display:none">
                            @csrf
                            <input type="hidden" name="all_tests" value="1">
                        </form>
                    </div>
                </section>

                <section class="gx-card" style="margin-top:10px">
                    <div class="gx-card-h"><span>STATUS DAS SALAS DISCORD</span><span>{{ count($discordStatus['rooms'] ?? []) }}</span></div>
                    <div class="gx-card-b">
                        @forelse(($discordStatus['rooms'] ?? []) as $room)
                            <div class="gx-room">
                                <span><strong>#{{ $room['match_id'] }}</strong></span>
                                <span>{{ $room['discord_room_name'] ?: 'GIGAX PARTIDA' }}</span>
                                <span>{{ $room['status'] }}</span>
                                <form method="POST" action="{{ route('admin.discord.cleanup') }}">
                                    @csrf
                                    <input type="hidden" name="match_id" value="{{ $room['match_id'] }}">
                                    <button class="gx-btn red" style="padding:6px 8px;width:100%">LIMPAR</button>
                                </form>
                            </div>
                        @empty
                            <div class="gx-sub">Nenhuma sala Discord registrada ainda.</div>
                        @endforelse
                    </div>
                </section>
            </div>

            <section class="gx-card">
                <div class="gx-card-h"><span>LOGS RECENTES DISCORD</span><span>{{ count($discordEvents) }}</span></div>
                <div class="gx-table-wrap">
                    <table class="gx-table">
                        <thead><tr><th>ID</th><th>Partida</th><th>Ação</th><th>Quando</th></tr></thead>
                        <tbody>
                        @forelse($discordEvents as $event)
                            <tr>
                                <td>{{ $event['id'] ?? '-' }}</td>
                                <td>#{{ $event['match_id'] ?? 0 }}</td>
                                <td>{{ $event['event_type'] ?? '-' }}</td>
                                <td>{{ $event['created_at'] ?? '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4">Nenhum log Discord encontrado.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </main>
</div>
@endsection