@php
    if (!function_exists('krx_avatar_initial')) {
        function krx_avatar_initial($value) {
            $value = trim((string) $value);
            if ($value === '') {
                return 'K';
            }
            if (function_exists('mb_substr') && function_exists('mb_strtoupper')) {
                return mb_strtoupper(mb_substr($value, 0, 1));
            }
            return strtoupper(substr($value, 0, 1));
        }
    }

    if (!function_exists('krx_has_real_avatar')) {
        function krx_has_real_avatar($value) {
            $value = trim((string) $value);
            if ($value === '') {
                return false;
            }
            return stripos($value, 'default-avatar') === false;
        }
    }
@endphp

@extends('layouts.app')

@section('title', ($team->name ?? 'Time') . ' - Time - GIGAX ARENA')
@section('page_title', 'Time')

@section('content')
@php
    $adminIds = [1,2,3,4,5,18,17];
    $isAdmin = in_array(session('user_id'), $adminIds);
@endphp

<div id="message-container"></div>
<div class="gx-team-show">
<div class="main-grid">
            <section class="hero">
                <div class="hero-grid">
                    <div>
                        <div class="team-logo-wrap">
                            @if(!empty($team->logo_url))
                                <img id="teamLogoPreview" class="team-logo team-logo-img" src="{{ asset(ltrim($team->logo_url,'/')) }}" alt="{{ $team->name }}">
                            @else
                                <div id="teamLogoPreview" class="team-logo">{{ substr($team->name, 0, 1) }}</div>
                            @endif
                            @if($isCaptain)
                                <button type="button" class="team-logo-edit" onclick="document.getElementById('teamLogoInput').click()" title="Alterar foto do clã">✎</button>
                                <input id="teamLogoInput" type="file" accept="image/png,image/jpeg,image/webp" style="display:none" onchange="uploadTeamLogo(this)">
                            @endif
                        </div>
                        <div class="pill" style="display:inline-flex; margin-bottom:10px;">Perfil do time</div>
                        <h1>{{ $team->name }}</h1>
                        @if($team->tag)<div class="team-tag">{{ $team->tag }}</div>@endif
                        @if($team->description)<p>{{ $team->description }}</p>@endif

                        <div class="hero-actions">
                            @if(!$isMember && $team->status == 'active')
                                <button class="btn btn-primary" onclick="joinTeam()">Entrar no time</button>
                            @elseif($isMember && !$isCaptain)
                                <button class="btn btn-secondary" onclick="leaveTeam()">Sair do time</button>
                            @endif
                            @if($isCaptain)
                                <button class="btn btn-warning" type="button" onclick="leaveTeam()">Sair do clã</button>
                            @endif
                            <a href="{{ route('teams.index') }}" class="btn btn-secondary">Voltar para times</a>
                        </div>

                        <div class="flash-card">
                            <div class="between">
                                <strong>Visão rápida</strong>
                                <span class="pill">Roster</span>
                            </div>
                            <div class="flash-grid">
                                <div class="summary-tile">
                                    <span class="helper">Pontos</span>
                                    <strong>{{ number_format($team->rank_points ?? 0) }}</strong>
                                </div>
                                <div class="summary-tile">
                                    <span class="helper">V/D</span>
                                    <strong>{{ $team->wins ?? 0 }}/{{ $team->losses ?? 0 }}</strong>
                                </div>
                                <div class="summary-tile">
                                    <span class="helper">Partidas</span>
                                    <strong>{{ $team->total_matches ?? 0 }}</strong>
                                </div>
                                <div class="summary-tile">
                                    <span class="helper">Membros</span>
                                    <strong>{{ count($members) }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flash-card" style="margin-top:0;">
                        <div class="between">
                            <div>
                                <div class="helper">Status do elenco</div>
                                <div class="panel-title" style="margin-top:6px;">Informações do time</div>
                            </div>
                            <span class="pill">{{ $team->status ?? 'active' }}</span>
                        </div>

                        <div class="hero-stats">
                            <div class="stat-box">
                                <span class="helper">Capitão</span>
                                <strong>{{ $team->captain_name ?? '—' }}</strong>
                            </div>
                            <div class="stat-box">
                                <span class="helper">Membros</span>
                                <strong>{{ count($members) }}</strong>
                            </div>
                            <div class="stat-box">
                                <span class="helper">Wins</span>
                                <strong>{{ $team->wins ?? 0 }}</strong>
                            </div>
                            <div class="stat-box">
                                <span class="helper">Losses</span>
                                <strong>{{ $team->losses ?? 0 }}</strong>
                            </div>
                        </div>

                        @if($isCaptain)
                        <div class="flash-card" style="margin-top:16px;">
                            <div class="between">
                                <strong>Painel do capitão</strong>
                                <span class="pill">Gestão</span>
                            </div>
                            <div class="captain-actions" style="margin-top:14px;">
                                <button type="button" class="btn btn-warning" onclick="openEditModal()">Editar clã</button>
                                <button type="button" class="btn btn-primary" onclick="openRecruitModal()">+ Recrutar jogador</button>
                                <button type="button" class="btn btn-secondary" onclick="transferLeadership()">Transferir liderança</button>
                                <button type="button" class="btn btn-danger" onclick="deleteTeam(event)">Excluir clã</button>
                            </div>

                            @if(count($members) > 1)
                            <div class="warning-box" style="margin-top:16px;">
                                <div class="warning-title">Atenção capitão</div>
                                <div class="warning-text">
                                    Para excluir o time, primeiro remova os demais membros ou transfira a liderança.
                                    Times com membros ativos não podem ser excluídos.
                                </div>
                            </div>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>
            </section>

            <section class="panel">
                <div class="panel-header">
                    <div class="panel-title">{{ $isCaptain ? 'Gerenciar membros' : 'Membros' }}</div>
                    <div class="pill">{{ count($members) }} no elenco</div>
                </div>
                <div class="panel-body">
                    <div class="members-grid">
                        @foreach($members as $member)
                            <div class="member-item" id="member-{{ $member->user_id }}">
                                @if(krx_has_real_avatar($member->avatar_url ?? null))
                                    <img src="{{ $member->avatar_url }}" class="member-avatar" alt="{{ $member->nickname }}" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">
                                    <span class="member-avatar-fallback" style="display:none">{{ krx_avatar_initial($member->nickname) }}</span>
                                @else
                                    <span class="member-avatar-fallback">{{ krx_avatar_initial($member->nickname) }}</span>
                                @endif
                                <div class="member-info">
                                    <div class="member-name">{{ $member->nickname }}</div>
                                    @php
                                        $memberUserId = (int) ($member->user_id ?? $member->id ?? 0);
                                        $memberGigaxId = $memberUserId
                                            ? (\Illuminate\Support\Facades\DB::table('users')->where('id', $memberUserId)->value('gigax_id') ?? $memberUserId)
                                            : null;
                                    @endphp
                                    @if($memberGigaxId)
                                        <div style="margin-top:2px;color:#66f39a;font-size:9px;font-weight:800;letter-spacing:.04em">
                                            GIGAX ID #{{ $memberGigaxId }}
                                        </div>
                                    @endif
                                    <div class="member-role">
                                        @if($member->role == 'captain') 👑 Capitão
                                        @elseif($member->role == 'co-captain') ⭐ Vice-Capitão
                                        @else 🎮 Membro
                                        @endif
                                    </div>
                                </div>
                                <div class="member-stats">
                                    <div>K/D: {{ number_format($member->kd_ratio ?? 0, 2) }}</div>
                                    <div>Rating: {{ number_format($member->avg_rating ?? 0, 2) }}</div>
                                </div>
                                @if($isCaptain && $member->role != 'captain')
                                    <div class="member-actions">
                                        <button class="btn btn-danger btn-small" onclick="removeMember({{ $member->user_id }}, '{{ addslashes($member->nickname) }}')">Remover</button>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>

            @if(count($recentMatches) > 0)
                <section class="panel">
                    <div class="panel-header">
                        <div class="panel-title">Últimas partidas</div>
                        <div class="pill">{{ count($recentMatches) }} recentes</div>
                    </div>
                    <div class="panel-body">
                        <div class="table-wrap">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Partida</th>
                                        <th>Mapa</th>
                                        <th>Data</th>
                                        <th>Resultado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentMatches as $match)
                                        <tr>
                                            <td>#{{ $match->match_id }}</td>
                                            <td>{{ $match->map_played }}</td>
                                            <td>{{ \Carbon\Carbon::parse($match->completed_at)->format('d/m/Y H:i') }}</td>
                                            <td>
                                                @if($match->winning_team == $match->team_side)
                                                    <span style="color: var(--success);">✅ Vitória</span>
                                                @else
                                                    <span style="color: var(--danger);">❌ Derrota</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div style="margin-top:16px;">
                            <a href="{{ route('teams.index') }}" class="back-link">← Voltar para Times</a>
                        </div>
                    </div>
                </section>
            @else
                <div style="margin-top:4px;">
                    <a href="{{ route('teams.index') }}" class="back-link">← Voltar para Times</a>
                </div>
            @endif
        </div>
    </div>

    
</div>

<div id="editModal" class="edit-modal">
        <div class="modal-content">
            <h2>Editar time</h2>
            <form id="editTeamForm">
                <input class="input" type="text" id="editName" placeholder="Nome do Time" value="{{ $team->name }}" required>
                <input class="input" type="text" id="editTag" placeholder="Tag" value="{{ $team->tag ?? '' }}" maxlength="10">
                <textarea id="editDescription" rows="3" placeholder="Descrição do time">{{ $team->description ?? '' }}</textarea>
                <div class="modal-actions" style="justify-content:flex-end; margin-top:14px;">
                    <button type="button" class="btn btn-secondary" onclick="closeEditModal()">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Salvar alterações</button>
                </div>
            </form>
        </div>
    </div>

    <div id="recruitModal" class="recruit-modal">
        <div class="modal-content">
            <h2>Recrutar jogador</h2>
            <input class="input" type="text" id="searchPlayer" placeholder="Digite o nickname do jogador..." autocomplete="off">
            <div id="searchResults" class="search-results">
                <div style="text-align:center; color: var(--muted); padding: 1rem;">Digite pelo menos 2 caracteres para buscar</div>
            </div>
            <div class="modal-actions" style="justify-content:flex-end; margin-top:14px;">
                <button type="button" class="btn btn-secondary" onclick="closeRecruitModal()">Cancelar</button>
            </div>
        </div>
    </div>

    
@endsection

@push('styles')
<style>
.gx-team-show,.gx-team-show *{box-sizing:border-box}
.gx-team-show{width:100%;max-width:1560px;margin:0 auto}
.gx-team-show .main-grid{display:grid;gap:12px}
.gx-team-show .hero,.gx-team-show .panel,.gx-team-show .flash-card,.gx-team-show .summary-tile,.gx-team-show .stat-box,.gx-team-show .member-item,.gx-team-show .warning-box,.gx-team-show .table-wrap{border:1px solid rgba(145,187,219,.14);background:linear-gradient(180deg,rgba(12,29,43,.97),rgba(5,15,24,.99))}
.gx-team-show .hero,.gx-team-show .panel{border-radius:11px;overflow:hidden}
.gx-team-show .hero{padding:16px}.gx-team-show .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.gx-team-show .team-logo{width:64px;height:64px;display:grid;place-items:center;margin-bottom:10px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#2563eb,#1748a8);font-size:25px;font-weight:1000}.gx-team-show .team-logo-wrap{position:relative;width:64px;margin-bottom:10px}.gx-team-show .team-logo-wrap .team-logo{margin-bottom:0}.gx-team-show .team-logo-img{display:block;object-fit:cover}.gx-team-show .team-logo-edit{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border:1px solid rgba(36,245,111,.35);border-radius:50%;background:#082318;color:#24f56f;font-weight:1000;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.35)}.gx-team-show .team-logo-edit:hover{transform:scale(1.08);background:#0b3524}
.gx-team-show .pill{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid rgba(36,245,111,.18);border-radius:999px;color:#c9f7d8;background:rgba(36,245,111,.06);font-size:8px;font-weight:900}
.gx-team-show .hero h1{margin:0 0 7px;color:#fff;font-size:27px}.gx-team-show .team-tag{margin-bottom:8px;color:#ffd35a;font-size:9px;font-weight:900}.gx-team-show .hero p{margin:0 0 11px;color:#879cad;font-size:10px}
.gx-team-show .hero-actions,.gx-team-show .captain-actions,.gx-team-show .modal-actions{display:flex;gap:7px;flex-wrap:wrap}
.gx-team-show .flash-card{padding:10px;margin-top:10px;border-radius:8px;background:rgba(255,255,255,.025)}.gx-team-show .between{display:flex;align-items:center;justify-content:space-between;gap:8px}.gx-team-show .helper{color:#7f95a8;font-size:8px}
.gx-team-show .flash-grid,.gx-team-show .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}.gx-team-show .summary-tile,.gx-team-show .stat-box{padding:8px;border-radius:7px}.gx-team-show .summary-tile strong,.gx-team-show .stat-box strong{display:block;margin-top:3px;color:#fff;font-size:13px}
.gx-team-show .panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 0}.gx-team-show .panel-title{color:#f4faff;font-size:11px;font-weight:1000;text-transform:uppercase}.gx-team-show .panel-body{padding:12px}
.gx-team-show .members-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.gx-team-show .member-item{padding:8px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:7px;align-items:center;border-radius:8px}.gx-team-show .member-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}.gx-team-show .member-info{min-width:0}.gx-team-show .member-name{color:#fff;font-size:8px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-team-show .member-role{margin-top:2px;color:#ffd35a;font-size:6px}.gx-team-show .member-stats{grid-column:1/-1;display:flex;justify-content:space-between;color:#8297a9;font-size:6px}.gx-team-show .member-actions{grid-column:1/-1}
.gx-team-show .warning-box{padding:9px;border-radius:8px}.gx-team-show .warning-title{color:#ffd35a;font-size:8px;font-weight:1000}.gx-team-show .warning-text{margin-top:4px;color:#8297a9;font-size:8px}
.gx-team-show .table-wrap{padding:7px;border-radius:8px;overflow:auto}.gx-team-show table{width:100%;border-collapse:collapse}.gx-team-show th,.gx-team-show td{padding:8px;border-bottom:1px solid rgba(145,187,219,.08);text-align:left;font-size:8px}.gx-team-show th{color:#8fa7ba}
.gx-team-show .back-link{color:var(--green);font-size:8px;font-weight:1000}
.edit-modal,.recruit-modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,13,.84);backdrop-filter:blur(8px)}.edit-modal.active,.recruit-modal.active{display:flex}.modal-content{width:min(560px,100%);padding:18px;border:1px solid rgba(145,187,219,.16);border-radius:12px;background:#091520}.modal-content h2{margin:0 0 12px;color:#fff}.modal-content .input,.modal-content textarea{width:100%;margin-top:8px;padding:10px;border:1px solid rgba(145,187,219,.16);border-radius:8px;background:#06111d;color:#fff}.search-results{display:grid;gap:7px;max-height:320px;margin-top:10px;overflow:auto}.search-result-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px;border:1px solid rgba(145,187,219,.12);border-radius:8px;background:rgba(255,255,255,.025)}.search-result-name{color:#fff;font-size:9px;font-weight:900}.search-result-stats{margin-top:2px;color:#7f95a8;font-size:7px}
.success-message,.error-message{padding:10px;margin-bottom:10px;border-radius:8px;font-size:9px}.success-message{color:#baffd0;background:rgba(36,245,111,.08)}.error-message{color:#ffc3ca;background:rgba(255,80,96,.09)}
.loading{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--green);border-radius:50%;animation:gxSpin .8s linear infinite}@keyframes gxSpin{to{transform:rotate(360deg)}}
@media(max-width:1200px){.gx-team-show .members-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:900px){.gx-team-show .hero-grid{grid-template-columns:1fr}.gx-team-show .members-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.gx-team-show .flash-grid,.gx-team-show .hero-stats{grid-template-columns:repeat(2,1fr)}.gx-team-show .members-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:440px){.gx-team-show .members-grid{grid-template-columns:1fr}}
</style>
@endpush

@push('scripts')
<script>
        let searchTimeout = null;

        function joinTeam() {
            fetch(`/teams/{{ $team->id }}/join`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showMessage('error', data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao entrar no time');
            });
        }

        function leaveTeam() {
            if (!confirm('Tem certeza que deseja sair deste time?')) return;

            fetch(`/teams/{{ $team->id }}/leave`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    setTimeout(() => window.location.href = '{{ route('teams.index') }}', 1500);
                } else {
                    showMessage('error', data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao sair do time');
            });
        }

        function openEditModal() {
            document.getElementById('editModal').classList.add('active');
        }

        function closeEditModal() {
            document.getElementById('editModal').classList.remove('active');
        }

        function openRecruitModal() {
            document.getElementById('recruitModal').classList.add('active');
            document.getElementById('searchPlayer').focus();
        }

        function closeRecruitModal() {
            document.getElementById('recruitModal').classList.remove('active');
            document.getElementById('searchPlayer').value = '';
            document.getElementById('searchResults').innerHTML = '<div style="text-align: center; color: var(--muted); padding: 1rem;">Digite pelo menos 2 caracteres para buscar</div>';
        }

        document.getElementById('editTeamForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const data = {
                name: document.getElementById('editName').value,
                tag: document.getElementById('editTag').value,
                description: document.getElementById('editDescription').value
            };

            fetch(`/teams/{{ $team->id }}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showMessage('error', data.message || 'Erro ao editar time');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao editar time');
            });
        });

        document.getElementById('searchPlayer').addEventListener('input', function() {
            const query = this.value.trim();

            if (searchTimeout) clearTimeout(searchTimeout);

            if (query.length < 2) {
                document.getElementById('searchResults').innerHTML = '<div style="text-align: center; color: var(--muted); padding: 1rem;">Digite pelo menos 2 caracteres para buscar</div>';
                return;
            }

            searchTimeout = setTimeout(() => {
                document.getElementById('searchResults').innerHTML = '<div style="text-align: center; padding: 1rem;"><span class="loading"></span> Buscando jogadores...</div>';

                fetch(`/teams/search-players?q=${encodeURIComponent(query)}`, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.players.length > 0) {
                        let html = '';
                        data.players.forEach(player => {
                            const hasTeam = player.has_team == 1;
                            html += `
                                <div class="search-result-item">
                                    <div class="search-result-info">
                                        <div class="search-result-name">${escapeHtml(player.nickname)}</div>
                                        <div class="search-result-stats">
                                            Nível ${player.skill_level} | Pontos: ${player.total_points || 0} | K/D: ${(player.kd_ratio || 0).toFixed(2)} | Partidas: ${player.matches_played || 0}
                                        </div>
                                    </div>
                                    <button class="btn ${hasTeam ? 'btn-secondary disabled' : 'btn-primary'} btn-small"
                                        onclick="recruitPlayer(event, ${player.id}, '${escapeHtml(player.nickname)}')"
                                        ${hasTeam ? 'disabled' : ''}>
                                        ${hasTeam ? 'Já tem time' : 'Recrutar'}
                                    </button>
                                </div>
                            `;
                        });
                        document.getElementById('searchResults').innerHTML = html;
                    } else {
                        document.getElementById('searchResults').innerHTML = '<div style="text-align: center; color: var(--muted); padding: 1rem;">Nenhum jogador encontrado</div>';
                    }
                })
                .catch(error => {
                    console.error('Erro:', error);
                    document.getElementById('searchResults').innerHTML = '<div style="text-align: center; color: var(--danger); padding: 1rem;">Erro ao buscar jogadores</div>';
                });
            }, 500);
        });

        
function hasRealAvatar(avatar) {
    const value = String(avatar || '').trim().toLowerCase();
    return value !== '' && !value.includes('default-avatar');
}

function avatarInitial(name) {
    const value = String(name || '').trim();
    return value ? value.charAt(0).toUpperCase() : 'K';
}

function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function recruitPlayer(evt, playerId, playerNickname) {
            const btn = evt.currentTarget || evt.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<span class="loading"></span> RECRUTANDO...';
            btn.disabled = true;

            fetch(`/teams/{{ $team->id }}/recruit`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ player_id: playerId, player_nickname: playerNickname })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    closeRecruitModal();
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showMessage('error', data.message);
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao recrutar jogador');
                btn.innerHTML = originalText;
                btn.disabled = false;
            });
        }

        function removeMember(memberId, memberNickname) {
            if (!confirm(`Tem certeza que deseja remover ${memberNickname} do time?`)) return;

            fetch(`/teams/{{ $team->id }}/member`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ member_id: memberId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showMessage('error', data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao remover membro');
            });
        }

        function transferLeadership() {
            const newCaptainNickname = prompt('Digite o nickname do novo capitão:');
            if (!newCaptainNickname) return;

            fetch(`/teams/{{ $team->id }}/transfer`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ player_nickname: newCaptainNickname })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showMessage('error', data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao transferir liderança');
            });
        }

        function deleteTeam(evt) {
            const memberCount = {{ count($members) }};
            const otherMembersCount = memberCount - 1;

            let confirmMessage = '⚠️ ATENÇÃO! Esta ação é irreversível!\n\n';

            if (otherMembersCount > 0) {
                confirmMessage += `Você tem ${otherMembersCount} membro(s) no time.\n`;
                confirmMessage += `Para excluir o time, primeiro remova todos os membros ou transfira a liderança.\n\n`;
                confirmMessage += `Deseja continuar mesmo assim?`;
            } else {
                confirmMessage += `Você está prestes a EXCLUIR PERMANENTEMENTE o time "${document.querySelector('h1').innerText}".\n\n`;
                confirmMessage += `Todos os dados do time serão perdidos!\n\n`;
                confirmMessage += `Tem certeza que deseja excluir?`;
            }

            if (!confirm(confirmMessage)) return;

            if (otherMembersCount > 0) {
                showMessage('error', 'Não é possível excluir o time com membros ativos. Remova todos os membros primeiro ou transfira a liderança.');
                return;
            }

            const btn = evt.currentTarget || evt.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<span class="loading"></span> EXCLUINDO...';
            btn.disabled = true;

            fetch(`/teams/{{ $team->id }}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage('success', data.message);
                    setTimeout(() => {
                        window.location.href = '{{ route('teams.index') }}';
                    }, 2000);
                } else {
                    showMessage('error', data.message);
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showMessage('error', 'Erro ao excluir time. Tente novamente.');
                btn.innerHTML = originalText;
                btn.disabled = false;
            });
        }

        async function uploadTeamLogo(input) {
            const file = input.files && input.files[0];
            if (!file) return;

            if (file.size > 4 * 1024 * 1024) {
                showMessage('error', 'A imagem deve ter no máximo 4 MB.');
                input.value = '';
                return;
            }

            const form = new FormData();
            form.append('logo', file);

            try {
                const response = await fetch(`/teams/{{ $team->id }}/logo`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: form
                });

                const data = await response.json().catch(() => ({}));

                if (!response.ok || !data.success) {
                    showMessage('error', data.message || 'Erro ao alterar foto do clã.');
                    return;
                }

                showMessage('success', data.message || 'Foto atualizada!');
                setTimeout(() => window.location.reload(), 700);
            } catch (error) {
                console.error(error);
                showMessage('error', 'Erro ao enviar a foto do clã.');
            } finally {
                input.value = '';
            }
        }

        function showMessage(type, message) {
            const container = document.getElementById('message-container');
            const msgDiv = document.createElement('div');
            msgDiv.className = type + '-message';
            msgDiv.textContent = message;
            container.appendChild(msgDiv);
            setTimeout(() => msgDiv.remove(), 5000);
        }

        document.getElementById('editModal').addEventListener('click', function(e) {
            if (e.target === this) closeEditModal();
        });

        document.getElementById('recruitModal').addEventListener('click', function(e) {
            if (e.target === this) closeRecruitModal();
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeEditModal();
                closeRecruitModal();
            }
        });

        @if(session('success'))
            showMessage('success', '{{ session('success') }}');
        @endif
        @if(session('error'))
            showMessage('error', '{{ session('error') }}');
        @endif
    </script>

    <script defer src="{{ asset('pwa/gigax-pwa.js') }}?v=1.0.3"></script>
@endpush