@extends('layouts.app')
@push('styles')
<style>
.gx-card{background:linear-gradient(180deg,#0c1b28,#09151f);border:1px solid #183149;border-radius:10px;padding:14px;margin-bottom:14px}
.gx-hero{position:relative;overflow:hidden;padding:0;min-height:190px;background:#09151f}
.gx-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.33;filter:saturate(.9)}
.gx-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,22,.98) 0%,rgba(4,14,22,.86) 46%,rgba(4,14,22,.25) 100%)}
.gx-hero-inner{position:relative;z-index:2;padding:20px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;min-height:190px}
.gx-kicker{color:#00ef79;font-size:9px;font-weight:900;text-transform:uppercase}
.gx-name{font-size:25px;font-weight:950;margin:4px 0 10px}
.gx-meta{display:flex;gap:8px;flex-wrap:wrap;color:#9cb0c0;font-size:9px}.gx-pill{border:1px solid #21435a;background:#091722cc;border-radius:99px;padding:6px 10px}
.gx-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.gx-btn{border:0;border-radius:7px;background:#00df73;color:#04150d;padding:10px 14px;font-size:9px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.gx-btn.alt{background:#102536;color:#dce8ef;border:1px solid #21435a}.gx-btn.warn{background:#ffb020;color:#241500}.gx-btn[disabled]{opacity:.45;cursor:not-allowed}
.gx-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.gx-stack{display:grid;gap:14px;align-content:start}
.gx-section-title{font-size:12px;font-weight:950;margin:4px 0 10px}.gx-muted{color:#7f96a8;font-size:9px;line-height:1.55}
.gx-registration{border:1px solid #1d4158;background:linear-gradient(180deg,#0b1c29,#09151f);border-radius:10px;padding:14px}
.gx-registration.good{border-color:#00c96b55;background:linear-gradient(180deg,#0b261d,#091a15)}
.gx-registration.warn{border-color:#ffb02055;background:linear-gradient(180deg,#271d0b,#171309)}
.gx-registration.bad{border-color:#ff5d7a55;background:linear-gradient(180deg,#291019,#190b10)}
.gx-reg-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.gx-reg-title{font-size:13px;font-weight:950}.gx-reg-value{font-size:22px;font-weight:950;color:#00ef79}
.gx-progress{height:7px;background:#07131d;border-radius:99px;overflow:hidden;margin:10px 0}.gx-progress>span{display:block;height:100%;background:linear-gradient(90deg,#00df73,#58ffa0)}
.gx-steps{display:grid;gap:7px;margin-top:12px}.gx-step{display:flex;gap:8px;align-items:flex-start;font-size:9px;color:#91a7b8}.gx-step b{color:#dce8ef}.gx-step i{font-style:normal;width:18px;height:18px;display:grid;place-items:center;border:1px solid #24485f;border-radius:50%;font-size:8px}
.gx-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.gx-team{background:#0a1721;border:1px solid #173047;border-radius:8px;padding:9px;font-size:9px}.gx-team b{display:block}.gx-team small{color:#71889b}
.gx-share{display:grid;grid-template-columns:1fr 1fr;gap:7px}.gx-share button,.gx-share a{border:1px solid #21435a;background:#0a1823;color:#dce8ef;border-radius:7px;padding:9px;font-size:9px;font-weight:800;text-align:center;text-decoration:none;cursor:pointer}
.gx-info-list{display:grid;gap:8px}.gx-info-item{background:#0a1721;border:1px solid #173047;border-radius:8px;padding:10px}.gx-info-item small{display:block;color:#71889b;font-size:8px;text-transform:uppercase}.gx-info-item b{font-size:10px}
.gx-bracket-wrap{overflow:auto;padding:8px 0}.gx-bracket{display:flex;gap:34px;min-width:max-content;align-items:stretch}.gx-round{width:235px;display:flex;flex-direction:column;justify-content:space-around;gap:18px}.gx-round-title{text-align:center;color:#00ef79;font-size:9px;font-weight:900;text-transform:uppercase;margin-bottom:8px}
.gx-match{position:relative;background:#091722;border:1px solid #1a394e;border-radius:9px;overflow:hidden;min-height:92px}.gx-match:after{content:"";position:absolute;right:-35px;top:50%;width:35px;border-top:1px solid #28506a}.gx-round:last-child .gx-match:after{display:none}
.gx-side{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-bottom:1px solid #132d3e;font-size:9px}.gx-side.win{color:#00ef79;font-weight:900}.gx-score{font-size:13px;font-weight:950}.gx-result{display:flex;gap:5px;padding:7px;border-top:1px solid #132d3e}.gx-result input{width:48px;background:#07131d;border:1px solid #21435a;color:white;border-radius:5px;padding:5px}.gx-result button{flex:1;background:#00df73;border:0;border-radius:5px;font-size:8px;font-weight:900}
.gx-empty{color:#70889a;font-size:10px;text-align:center;padding:30px}.gx-alert{border-color:#00df73}.gx-danger{border-color:#ff5d7a}
@media(max-width:1100px){.gx-grid{grid-template-columns:1fr}.gx-hero-inner{flex-direction:column}.gx-actions{justify-content:flex-start}}
</style>@endpush

@section('title',$tournament->name.' - GIGAX ARENA')
@section('page_title','Torneios')

@section('content')
@if(session('success'))<div class="gx-card gx-alert">{{session('success')}}</div>@endif
@if(session('error'))<div class="gx-card gx-danger">{{session('error')}}</div>@endif

<section class="gx-card gx-hero">
    @if(!empty($tournament->banner_url))
        <div class="gx-hero-bg" style="background-image:url('{{asset(ltrim($tournament->banner_url,'/'))}}')"></div>
    @endif
    <div class="gx-hero-inner">
        <div>
            <div class="gx-kicker">GIGAX ARENA • CAMPEONATO</div>
            <div class="gx-name">{{$tournament->name}}</div>
            <div class="gx-meta">
                <span class="gx-pill">● {{strtoupper($tournament->status)}}</span>
                <span class="gx-pill">📅 {{\Carbon\Carbon::parse($tournament->start_date)->format('d/m/Y H:i')}}</span>
                <span class="gx-pill">👥 {{$tournament->registered_count}}/{{$tournament->max_teams}} TIMES</span>
                <span class="gx-pill">🎮 {{$tournament->game_mode}}</span>
                <span class="gx-pill">🏆 R$ {{number_format($tournament->prize_pool,2,',','.')}}</span>
            </div>
            @if($tournament->description)
                <p class="gx-muted" style="max-width:760px;margin-top:12px">{{$tournament->description}}</p>
            @endif
        </div>

        <div class="gx-actions">
            {{-- GIGAX_TOURNAMENT_EDIT_BUTTON_V1 --}}
            @if($isTournamentAdmin)<a class="gx-btn alt" href="{{ route('tournaments.admin.edit',$tournament->id) }}">✎ EDITAR CAMPEONATO</a>@endif

            @if($isTournamentAdmin && $tournament->status!=='finished')
                <form method="POST" action="{{route('tournaments.bracket.generate',$tournament->id)}}">@csrf
                    <button class="gx-btn alt" @if($registeredTeams->count()<2) disabled title="É preciso pelo menos 2 times" @endif>GERAR / REFAZER CHAVE</button>
                </form>
            @endif
        </div>
    </div>
</section>

<div class="gx-grid">
    <main class="gx-stack">

        @php
            $pct = $tournament->max_teams > 0 ? min(100, round(($tournament->registered_count / $tournament->max_teams)*100)) : 0;
            $deadline = !empty($tournament->registration_end) ? \Carbon\Carbon::parse($tournament->registration_end) : null;
        @endphp

        @if($tournament->status === 'registration')
            @if($alreadyRegistered)
                <section class="gx-registration good">
                    <div class="gx-reg-top"><div><div class="gx-kicker">Sua inscrição</div><div class="gx-reg-title">✓ SEU TIME ESTÁ INSCRITO</div></div><div class="gx-reg-value">{{$spotsRemaining}}</div></div>
                    <div class="gx-muted">Seu time já está confirmado neste campeonato. Agora acompanhe o encerramento das inscrições e a geração da chave.</div>
                </section>
            @elseif($registrationExpired)
                <section class="gx-registration bad">
                    <div class="gx-kicker">Inscrições encerradas</div><div class="gx-reg-title">O PRAZO DE INSCRIÇÃO TERMINOU</div>
                    <div class="gx-muted">Aguarde a organização iniciar o campeonato e publicar o chaveamento.</div>
                </section>
            @elseif($spotsRemaining <= 0)
                <section class="gx-registration bad">
                    <div class="gx-kicker">Lotado</div><div class="gx-reg-title">TODAS AS VAGAS FORAM PREENCHIDAS</div>
                    <div class="gx-muted">O campeonato atingiu {{$tournament->max_teams}} times inscritos.</div>
                </section>
            @elseif($canRegister && $userTeam)
                <section class="gx-registration good">
                    <div class="gx-reg-top"><div><div class="gx-kicker">Inscrições abertas</div><div class="gx-reg-title">INSCREVA SEU TIME AGORA</div></div><div class="gx-reg-value">{{$spotsRemaining}}</div></div>
                    <div class="gx-muted">Você é {{str_replace('-',' ', $userTeam->member_role ?? 'capitão')}} do time <b>{{$userTeam->name}}</b> e pode confirmar a inscrição.</div>
                    <div class="gx-progress"><span style="width:{{$pct}}%"></span></div>
                    <button class="gx-btn" style="width:100%;margin-top:5px" onclick="registerTeam()">INSCREVER {{$userTeam->name}}</button>
                </section>
            @elseif($memberTeam)
                <section class="gx-registration warn">
                    <div class="gx-kicker">Inscrições abertas</div><div class="gx-reg-title">VOCÊ JÁ TEM UM TIME, MAS NÃO PODE INSCREVÊ-LO</div>
                    <div class="gx-muted">A inscrição deve ser feita pelo capitão ou co-capitão do <b>{{$memberTeam->name}}</b>.</div>
                    <div class="gx-steps">
                        <div class="gx-step"><i>1</i><div>Avise o <b>capitão/co-capitão</b> do seu time.</div></div>
                        <div class="gx-step"><i>2</i><div>Ele abre esta página e clica em <b>INSCREVER MEU TIME</b>.</div></div>
                    </div>
                </section>
            @else
                <section class="gx-registration warn">
                    <div class="gx-kicker">Inscrições abertas</div><div class="gx-reg-title">VOCÊ PRECISA DE UM TIME PARA PARTICIPAR</div>
                    <div class="gx-muted">Crie ou entre em um time. Depois, o capitão ou co-capitão poderá fazer a inscrição.</div>
                    <a class="gx-btn" style="margin-top:10px" href="{{route('teams.index')}}">IR PARA TIMES</a>
                </section>
            @endif
        @elseif($tournament->status === 'ongoing')
            <section class="gx-registration good"><div class="gx-kicker">Campeonato iniciado</div><div class="gx-reg-title">CHAVEAMENTO EM ANDAMENTO</div><div class="gx-muted">Acompanhe abaixo os confrontos e resultados.</div></section>
        @elseif($tournament->status === 'finished')
            <section class="gx-registration"><div class="gx-kicker">Campeonato finalizado</div><div class="gx-reg-title">EVENTO ENCERRADO</div><div class="gx-muted">Confira a árvore completa e os resultados finais.</div></section>
        @endif

        <section class="gx-card">
            <div class="gx-kicker">Participantes</div>
            <div class="gx-section-title">TIMES INSCRITOS</div>
            <div class="gx-teams">
                @forelse($registeredTeams as $t)
                    <div class="gx-team"><b>[{{$t->team_tag}}] {{$t->team_name}}</b><small>Capitão: {{$t->captain_name}}</small></div>
                @empty
                    <div class="gx-empty">Nenhum time inscrito ainda.</div>
                @endforelse
            </div>
        </section>

        <section class="gx-card">
            <div class="gx-kicker">Chaveamento oficial</div>
            <div class="gx-section-title">ÁRVORE DO TORNEIO</div>
            @if($matches->isEmpty())
                <div class="gx-empty">A chave ainda não foi gerada. Quando houver pelo menos 2 times, o administrador poderá gerar a árvore automaticamente.</div>
            @else
                <div class="gx-bracket-wrap"><div class="gx-bracket">
                    @foreach($rounds->sortKeysDesc() as $roundNo=>$roundMatches)
                        <div class="gx-round">
                            <div class="gx-round-title">@if($roundNo==1) FINAL @elseif($roundNo==2) SEMIFINAL @elseif($roundNo==3) QUARTAS DE FINAL @elseif($roundNo==4) OITAVAS DE FINAL @else FASE {{$roundNo}} @endif</div>
                            @foreach($roundMatches as $m)
                                <div class="gx-match">
                                    <div class="gx-side {{$m->winner_team_id==$m->team_a_id&&$m->team_a_id?'win':''}}"><span>{{$m->team_a_name??'A definir'}}</span><span class="gx-score">{{$m->score_a}}</span></div>
                                    <div class="gx-side {{$m->winner_team_id==$m->team_b_id&&$m->team_b_id?'win':''}}"><span>{{$m->team_b_name??'A definir'}}</span><span class="gx-score">{{$m->score_b}}</span></div>
                                    @if($isTournamentAdmin && $m->team_a_id && $m->team_b_id && $tournament->status!=='finished')
                                        <form class="gx-result" method="POST" action="{{route('tournaments.match.result',[$tournament->id,$m->id])}}">@csrf
                                            <input name="score_a" type="number" min="0" value="{{$m->score_a}}">
                                            <input name="score_b" type="number" min="0" value="{{$m->score_b}}">
                                            <button>SALVAR RESULTADO</button>
                                        </form>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </div></div>
            @endif
        </section>
    </main>

    <aside class="gx-stack">
        <section class="gx-card">
            <div class="gx-kicker">Informações do evento</div>
            <div class="gx-section-title">DETALHES</div>
            <div class="gx-info-list">
                <div class="gx-info-item"><small>Organizador</small><b>{{$tournament->created_by_name ?? 'GIGAX Arena'}}</b></div>
                <div class="gx-info-item"><small>Formato</small><b>{{$tournament->game_mode}} • {{$tournament->team_size}} jogadores/time</b></div>
                <div class="gx-info-item"><small>Vagas restantes</small><b>{{$spotsRemaining}} de {{$tournament->max_teams}}</b></div>
                <div class="gx-info-item"><small>Inscrições até</small><b>{{$deadline ? $deadline->format('d/m/Y H:i') : 'Sem prazo definido'}}</b></div>
                <div class="gx-info-item"><small>Taxa de inscrição</small><b>R$ {{number_format($tournament->entry_fee,2,',','.')}}</b></div>
                <div class="gx-info-item"><small>Premiação</small><b>R$ {{number_format($tournament->prize_pool,2,',','.')}}</b></div>
            </div>
        </section>

        <section class="gx-card">
            <div class="gx-kicker">Compartilhar</div>
            <div class="gx-section-title">CONVIDE OUTROS TIMES</div>
            <div class="gx-share">
                <button type="button" onclick="copyTournamentLink()">🔗 COPIAR LINK</button>
                <a target="_blank" href="https://wa.me/?text={{urlencode('Confira o campeonato '.$tournament->name.' na GIGAX Arena: '.request()->fullUrl())}}">WHATSAPP</a>
                <a target="_blank" href="https://t.me/share/url?url={{urlencode(request()->fullUrl())}}&text={{urlencode($tournament->name.' - GIGAX Arena')}}">TELEGRAM</a>
                <a target="_blank" href="https://twitter.com/intent/tweet?text={{urlencode($tournament->name.' - GIGAX Arena')}}&url={{urlencode(request()->fullUrl())}}">X / TWITTER</a>
            </div>
        </section>

        @if(!empty($tournament->rules))
        <section class="gx-card">
            <div class="gx-kicker">Regulamento</div>
            <div class="gx-section-title">REGRAS PRINCIPAIS</div>
            <div class="gx-muted" style="white-space:pre-line">{{$tournament->rules}}</div>
        </section>
        @endif

        <section class="gx-card">
            <div class="gx-kicker">Como funciona</div>
            <div class="gx-section-title">FLUXO DO CAMPEONATO</div>
            <div class="gx-steps">
                <div class="gx-step"><i>1</i><div><b>Inscrição</b> do time pelo capitão/co-capitão.</div></div>
                <div class="gx-step"><i>2</i><div>A organização encerra as inscrições.</div></div>
                <div class="gx-step"><i>3</i><div>A <b>chave é gerada automaticamente</b>.</div></div>
                <div class="gx-step"><i>4</i><div>Resultados avançam o vencedor para a fase seguinte.</div></div>
                <div class="gx-step"><i>5</i><div>A final define o <b>campeão oficial</b>.</div></div>
            </div>
        </section>
    </aside>
</div>

<a href="{{route('tournaments.index')}}" style="color:#00ef79;text-decoration:none;font-size:10px;font-weight:900">← VOLTAR AOS TORNEIOS</a>

@push('scripts')
<script>
function registerTeam(){
    if(!confirm('Confirmar a inscrição do seu time neste campeonato?')) return;
    fetch('{{route('tournaments.register',$tournament->id)}}',{
        method:'POST',
        headers:{'X-CSRF-TOKEN':'{{csrf_token()}}','Accept':'application/json','Content-Type':'application/json'}
    }).then(async r=>{
        let d=await r.json();
        alert(d.message||'Concluído');
        if(d.success) location.reload();
    }).catch(()=>alert('Erro ao realizar inscrição.'));
}
async function copyTournamentLink(){
    try{
        await navigator.clipboard.writeText(window.location.href);
        alert('Link do campeonato copiado!');
    }catch(e){
        prompt('Copie o link do campeonato:', window.location.href);
    }
}
</script>
@endpush
@endsection