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

@section('content')
@php
    $selectedType = $selectedType ?? request('type', 'all');
    $selectedLevel = $selectedLevel ?? request('level', 'all');
    $stats = $stats ?? (object) [
        'total_trainings' => 0,
        'completed_trainings' => 0,
        'avg_score' => 0,
    ];
    $trainings = $trainings ?? collect();
    $rankingUrl = \Illuminate\Support\Facades\Route::has('gigax.xp-ranking')
        ? route('gigax.xp-ranking')
        : (\Illuminate\Support\Facades\Route::has('ranking') ? route('ranking') : url('/ranking'));
@endphp

<div class="gx-training-page">
    <section class="gx-training-hero">
        <div class="gx-training-copy">
            <span class="gx-eyebrow">CENTRAL DE EVOLUÇÃO GIGAX</span>
            <h2>Treinos e <b>preparação</b></h2>
            <p>Escolha uma atividade, acompanhe sua evolução e mantenha a rotina competitiva sem sair do padrão do dashboard.</p>

            <div class="gx-hero-actions">
                <a class="gx-btn gx-btn-primary" href="#catalogo">Ver treinamentos</a>
                <a class="gx-btn gx-btn-secondary" href="{{ $rankingUrl }}">Ir para ranking</a>
            </div>
        </div>

        <div class="gx-target" aria-hidden="true">
            <span></span><span></span><span></span><i></i>
        </div>
    </section>

    <section class="gx-stats-grid">
        <article class="gx-stat">
            <span>Treinos disponíveis</span>
            <strong>{{ (int) ($stats->total_trainings ?? 0) }}</strong>
            <small>catálogo atual</small>
        </article>
        <article class="gx-stat">
            <span>Concluídos</span>
            <strong>{{ (int) ($stats->completed_trainings ?? 0) }}</strong>
            <small>histórico do jogador</small>
        </article>
        <article class="gx-stat">
            <span>Pontuação média</span>
            <strong>{{ (int) ($stats->avg_score ?? 0) }}%</strong>
            <small>desempenho geral</small>
        </article>
        <article class="gx-stat">
            <span>Níveis</span>
            <strong>4+</strong>
            <small>iniciante ao profissional</small>
        </article>
    </section>

    <section class="gx-training-workspace" id="catalogo">
        <main class="gx-training-main">
            <section class="gx-panel gx-filter-panel">
                <div class="gx-panel-head">
                    <div>
                        <span class="gx-panel-kicker">CATÁLOGO</span>
                        <h3>Painel de treinamentos</h3>
                    </div>
                    <span class="gx-board-pill">Training Board</span>
                </div>

                <div class="gx-filter-row">
                    <div class="gx-filter-group">
                        <span>Filtrar por tipo</span>
                        <div class="gx-filter-chips">
                            <button type="button" class="{{ $selectedType === 'all' ? 'active' : '' }}" data-type="all">Todos</button>
                            <button type="button" class="{{ $selectedType === 'aim' ? 'active' : '' }}" data-type="aim">🎯 Mira</button>
                            <button type="button" class="{{ $selectedType === 'strategy' ? 'active' : '' }}" data-type="strategy">🧠 Estratégia</button>
                            <button type="button" class="{{ $selectedType === 'teamwork' ? 'active' : '' }}" data-type="teamwork">🤝 Equipe</button>
                            <button type="button" class="{{ $selectedType === 'demo_review' ? 'active' : '' }}" data-type="demo_review">🎬 Demo</button>
                        </div>
                    </div>

                    <div class="gx-filter-group">
                        <span>Filtrar por nível</span>
                        <div class="gx-filter-chips">
                            <button type="button" class="{{ $selectedLevel === 'all' ? 'active' : '' }}" data-level="all">Todos</button>
                            <button type="button" class="{{ $selectedLevel === 'beginner' ? 'active' : '' }}" data-level="beginner">Iniciante</button>
                            <button type="button" class="{{ $selectedLevel === 'intermediate' ? 'active' : '' }}" data-level="intermediate">Intermediário</button>
                            <button type="button" class="{{ $selectedLevel === 'advanced' ? 'active' : '' }}" data-level="advanced">Avançado</button>
                            <button type="button" class="{{ $selectedLevel === 'pro' ? 'active' : '' }}" data-level="pro">Profissional</button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="gx-training-grid">
                @forelse($trainings as $training)
                    @php
                        $status = $training->user_status ?? null;
                        $statusLabel = $status === 'completed'
                            ? 'Concluído'
                            : ($status === 'in_progress' ? 'Em andamento' : 'Disponível');
                    @endphp

                    <article class="gx-training-card">
                        <div class="gx-card-top">
                            <div class="gx-training-icon">
                                {{ ($training->type ?? '') === 'aim' ? '◎' : (($training->type ?? '') === 'strategy' ? '♟' : (($training->type ?? '') === 'teamwork' ? '⚔' : '▶')) }}
                            </div>
                            <span class="gx-status gx-status-{{ $status ?: 'available' }}">{{ $statusLabel }}</span>
                        </div>

                        <h3>{{ $training->title }}</h3>
                        <p>{{ \Illuminate\Support\Str::limit($training->description ?? 'Treinamento competitivo GIGAX.', 105) }}</p>

                        <div class="gx-training-meta">
                            <span>🎯 {{ ucfirst(str_replace('_', ' ', $training->type ?? 'treino')) }}</span>
                            <span>⭐ {{ ucfirst($training->level ?? 'beginner') }}</span>
                            <span>⏱ {{ (int) ($training->duration_minutes ?? 0) }} min</span>
                        </div>

                        <div class="gx-card-footer">
                            <small>Criado por {{ $training->created_by_name ?? 'GIGAX' }}</small>
                            @if($status === 'completed')
                                <strong>{{ (int) ($training->user_score ?? 0) }}%</strong>
                            @endif
                        </div>

                        <a class="gx-btn gx-btn-primary gx-full" href="{{ route('trainings.show', $training->id) }}">
                            {{ $status === 'in_progress' ? 'Continuar treinamento' : 'Abrir treinamento' }}
                        </a>
                    </article>
                @empty
                    <div class="gx-empty-state">
                        <div class="gx-empty-icon">▤</div>
                        <strong>Nenhum treinamento encontrado</strong>
                        <p>Tente outro filtro ou aguarde novos conteúdos.</p>
                        <a class="gx-btn gx-btn-secondary" href="{{ route('trainings.index') }}?type=all&level=all">Limpar filtros</a>
                    </div>
                @endforelse
            </section>

            @php
                $isPaginator =
                    $trainings instanceof \Illuminate\Contracts\Pagination\Paginator ||
                    $trainings instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator;
            @endphp

            @if($isPaginator && $trainings->hasPages())
                <nav class="gx-pagination">
                    <span>Página {{ $trainings->currentPage() }} de {{ $trainings->lastPage() }}</span>
                    <div>
                        @if(!$trainings->onFirstPage())
                            <a href="{{ $trainings->previousPageUrl() }}">← Anterior</a>
                        @endif
                        @if($trainings->hasMorePages())
                            <a href="{{ $trainings->nextPageUrl() }}">Próxima →</a>
                        @endif
                    </div>
                </nav>
            @endif
        </main>

        <aside class="gx-training-sidebar">
            <section class="gx-panel">
                <div class="gx-panel-head compact">
                    <h3>Atalhos</h3>
                    <span class="gx-board-pill">Quick</span>
                </div>

                <div class="gx-shortcuts">
                    <a href="{{ route('trainings.index') }}?type=all&level=all">⌁ Limpar filtros</a>
                    <a href="{{ $rankingUrl }}">▥ Abrir ranking</a>
                    <a href="{{ \Illuminate\Support\Facades\Route::has('profile') ? route('profile') : url('/profile') }}">● Meu perfil</a>
                    <a href="{{ \Illuminate\Support\Facades\Route::has('dashboard') ? route('dashboard') : url('/dashboard') }}">⌂ Dashboard</a>
                </div>
            </section>

            <section class="gx-panel">
                <div class="gx-panel-head compact"><h3>Filtros ativos</h3></div>
                <div class="gx-current-filter">
                    <span>Tipo</span><strong>{{ ucfirst($selectedType === 'all' ? 'todos' : str_replace('_', ' ', $selectedType)) }}</strong>
                </div>
                <div class="gx-current-filter">
                    <span>Nível</span><strong>{{ ucfirst($selectedLevel === 'all' ? 'todos' : $selectedLevel) }}</strong>
                </div>
            </section>

            <section class="gx-tip-card">
                <span>EVOLUÇÃO</span>
                <strong>Treine com frequência</strong>
                <p>Consistência e análise de resultado melhoram sua posição no ranking.</p>
                <a href="{{ $rankingUrl }}">Ver evolução →</a>
            </section>
        </aside>
    </section>
</div>
@endsection

@push('styles')
<style>
.gx-training-page{display:grid;gap:14px;max-width:1500px;margin:0 auto}
.gx-training-hero{position:relative;min-height:190px;display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;overflow:hidden;padding:24px 28px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(circle at 83% 48%,rgba(36,245,111,.15),transparent 27%),linear-gradient(135deg,#102234,#07111b)}
.gx-training-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 62%,rgba(36,245,111,.025) 62% 63%,transparent 63%);pointer-events:none}
.gx-training-copy{position:relative;z-index:2}.gx-eyebrow,.gx-panel-kicker{font-size:10px;letter-spacing:.16em;color:var(--green);font-weight:1000}.gx-training-hero h2{font-size:34px;line-height:1.05;margin:7px 0 10px}.gx-training-hero h2 b{color:var(--green)}.gx-training-hero p{max-width:680px;margin:0;color:var(--mut);font-size:14px}.gx-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.gx-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:8px;font-size:12px;font-weight:1000;transition:.18s}.gx-btn:hover{transform:translateY(-1px)}.gx-btn-primary{background:linear-gradient(180deg,#18b84b,#0b8832);color:#fff}.gx-btn-secondary{border:1px solid var(--line);background:rgba(255,255,255,.035);color:#eaf4ff}.gx-full{width:100%;margin-top:14px}
.gx-target{position:relative;width:142px;height:142px;margin:auto;border:2px solid rgba(36,245,111,.72);border-radius:50%;box-shadow:0 0 35px rgba(36,245,111,.12)}.gx-target span{position:absolute;border:1px solid rgba(36,245,111,.28);border-radius:50%}.gx-target span:nth-child(1){inset:18px}.gx-target span:nth-child(2){inset:40px}.gx-target span:nth-child(3){left:50%;top:-12px;bottom:-12px;border-width:0 0 0 1px;border-radius:0}.gx-target i{position:absolute;width:14px;height:14px;left:calc(50% - 7px);top:calc(50% - 7px);border-radius:50%;background:var(--green);box-shadow:0 0 20px var(--green)}
.gx-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.gx-stat{min-height:78px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(17,31,45,.96),rgba(7,15,24,.98))}.gx-stat span,.gx-stat small{display:block}.gx-stat span{font-size:10px;text-transform:uppercase;color:#a9bad0;font-weight:900}.gx-stat strong{display:block;font-size:23px;margin:5px 0 2px}.gx-stat small{font-size:11px;color:var(--mut)}
.gx-training-workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;align-items:start}.gx-training-main,.gx-training-sidebar{display:grid;gap:12px}.gx-panel{padding:15px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(17,31,45,.96),rgba(7,15,24,.98))}.gx-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.gx-panel-head.compact{margin-bottom:11px}.gx-panel-head h3{margin:2px 0 0;font-size:15px;text-transform:uppercase}.gx-board-pill{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:#a8b8cb;font-size:9px;font-weight:900}
.gx-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gx-filter-group{padding:11px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.025)}.gx-filter-group>span{display:block;font-size:9px;color:#8fa3b8;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.gx-filter-chips{display:flex;gap:6px;flex-wrap:wrap}.gx-filter-chips button{min-height:31px;padding:6px 10px!important;border:1px solid var(--line);border-radius:999px!important;background:#122131;color:#dbe8f4;font-size:10px;font-weight:900;cursor:pointer}.gx-filter-chips button.active{border-color:rgba(36,245,111,.6);color:var(--green);background:rgba(36,245,111,.08)}
.gx-training-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gx-training-card{display:flex;flex-direction:column;min-height:260px;padding:15px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(155deg,#0f1f2e,#07111b);transition:.18s}.gx-training-card:hover{transform:translateY(-2px);border-color:rgba(36,245,111,.3)}.gx-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.gx-training-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:rgba(36,245,111,.09);color:var(--green);font-size:21px}.gx-status{padding:5px 8px;border-radius:999px;font-size:8px;font-weight:1000;text-transform:uppercase;background:rgba(255,255,255,.05);color:#aebdd0}.gx-status-completed{color:var(--green);background:rgba(36,245,111,.08)}.gx-status-in_progress{color:#ffd35a;background:rgba(255,211,90,.08)}.gx-training-card h3{margin:13px 0 7px;font-size:16px}.gx-training-card p{margin:0;color:var(--mut);font-size:12px;line-height:1.45;min-height:51px}.gx-training-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.gx-training-meta span{padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.045);color:#b9c8d8;font-size:9px}.gx-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;color:var(--mut)}.gx-card-footer small{font-size:9px}.gx-card-footer strong{color:var(--green)}
.gx-empty-state{grid-column:1/-1;min-height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;border:1px dashed rgba(92,155,205,.35);border-radius:10px;background:#101e2b;text-align:center}.gx-empty-icon{font-size:35px;color:var(--green)}.gx-empty-state strong{margin-top:8px}.gx-empty-state p{margin:5px 0 13px;color:var(--mut);font-size:12px}
.gx-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);font-size:11px;color:var(--mut)}.gx-pagination div{display:flex;gap:7px}.gx-pagination a{padding:7px 10px;border:1px solid var(--line);border-radius:7px;color:#eaf4ff}
.gx-shortcuts{display:grid;gap:7px}.gx-shortcuts a{padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);font-size:11px;font-weight:900}.gx-shortcuts a:hover{border-color:rgba(36,245,111,.3);color:var(--green)}.gx-current-filter{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:11px}.gx-current-filter:last-child{border-bottom:0}.gx-current-filter span{color:var(--mut)}.gx-tip-card{padding:16px;border:1px solid rgba(36,245,111,.24);border-radius:10px;background:radial-gradient(circle at 90% 0,rgba(36,245,111,.12),transparent 35%),#091722}.gx-tip-card>span{font-size:9px;color:var(--green);font-weight:1000;letter-spacing:.13em}.gx-tip-card strong{display:block;margin:8px 0 5px}.gx-tip-card p{margin:0;color:var(--mut);font-size:11px;line-height:1.45}.gx-tip-card a{display:inline-block;margin-top:11px;color:var(--green);font-size:10px;font-weight:900}
@media(max-width:1220px){.gx-training-grid{grid-template-columns:repeat(2,1fr)}.gx-training-workspace{grid-template-columns:1fr}.gx-training-sidebar{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.gx-training-hero{grid-template-columns:1fr;padding:20px}.gx-target{display:none}.gx-stats-grid,.gx-filter-row,.gx-training-sidebar{grid-template-columns:1fr 1fr}.gx-training-grid{grid-template-columns:1fr}}@media(max-width:560px){.gx-stats-grid,.gx-filter-row,.gx-training-sidebar{grid-template-columns:1fr}.gx-training-hero h2{font-size:28px}}
</style>
@endpush

@push('scripts')
<script>
(function(){
    const base = @json(route('trainings.index'));
    const selectedType = @json($selectedType);
    const selectedLevel = @json($selectedLevel);

    document.querySelectorAll('[data-type]').forEach(function(button){
        button.addEventListener('click', function(){
            window.location.href = base + '?type=' + encodeURIComponent(button.dataset.type) + '&level=' + encodeURIComponent(selectedLevel);
        });
    });

    document.querySelectorAll('[data-level]').forEach(function(button){
        button.addEventListener('click', function(){
            window.location.href = base + '?type=' + encodeURIComponent(selectedType) + '&level=' + encodeURIComponent(button.dataset.level);
        });
    });
})();
</script>
@endpush