@extends('layouts.app')

@section('title','Admin • Clãs - GIGAX ARENA')
@section('page_title','Administração de Clãs')

@push('styles')
<style>
.gx-clans{display:grid;gap:12px}.gx-head,.gx-card{border:1px solid rgba(145,187,219,.13);background:linear-gradient(180deg,rgba(12,29,43,.98),rgba(5,15,24,.99));border-radius:11px}.gx-head{padding:16px}.gx-kicker{color:#24f56f;font-size:8px;font-weight:1000;text-transform:uppercase}.gx-head h1{margin:4px 0 4px;font-size:22px}.gx-muted{color:#7f95a8;font-size:9px}.gx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.gx-stat{padding:10px;border:1px solid rgba(145,187,219,.10);border-radius:8px;background:rgba(255,255,255,.025)}.gx-stat small,.gx-stat strong{display:block}.gx-stat small{color:#7890a3;font-size:7px;text-transform:uppercase}.gx-stat strong{font-size:18px;margin-top:3px}.gx-card{padding:12px}.gx-filter{display:flex;gap:7px;flex-wrap:wrap}.gx-input,.gx-select{height:34px;border:1px solid rgba(145,187,219,.16);border-radius:7px;background:#07131d;color:#fff;padding:0 10px}.gx-input{min-width:260px;flex:1}.gx-btn{min-height:31px;border:1px solid rgba(145,187,219,.18);border-radius:7px;background:#102536;color:#dce8ef;padding:7px 10px;font-size:8px;font-weight:1000;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.gx-btn.green{border:0;background:#24f56f;color:#04160c}.gx-btn.red{border-color:#ff586d55;background:#2a0d13;color:#ff8795}.gx-btn.gold{border-color:#ffd35a55;color:#ffd35a;background:#211b0c}.gx-table-wrap{overflow:auto}.gx-table{width:100%;border-collapse:collapse;min-width:900px}.gx-table th,.gx-table td{padding:9px;border-bottom:1px solid rgba(145,187,219,.08);text-align:left;font-size:8px}.gx-table th{color:#849bad;text-transform:uppercase}.gx-clan{display:flex;align-items:center;gap:9px}.gx-logo{width:38px;height:38px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:#1748a8;color:#fff;font-weight:1000}.gx-tag{color:#ffd35a}.gx-actions{display:flex;gap:5px;flex-wrap:wrap}.gx-status{padding:4px 7px;border-radius:99px;border:1px solid #29475c}.gx-status.active{color:#64ffad;border-color:#24f56f55}.gx-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:18px}.gx-modal.on{display:flex}.gx-modal-box{width:min(660px,96vw);max-height:90vh;overflow:auto;padding:16px;border:1px solid rgba(145,187,219,.18);border-radius:12px;background:#07131f}.gx-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.gx-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.gx-grid label{color:#8399aa;font-size:8px}.gx-grid .full{grid-column:1/-1}.gx-grid input,.gx-grid textarea,.gx-grid select{width:100%;margin-top:5px;border:1px solid rgba(145,187,219,.16);border-radius:7px;background:#05101a;color:#fff;padding:9px}.gx-grid textarea{min-height:80px}.gx-member-list{display:grid;gap:6px;margin-top:8px}.gx-member{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(145,187,219,.10);border-radius:7px}.gx-member img,.gx-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#15314a;display:grid;place-items:center;font-size:9px}.gx-msg{display:none;padding:9px;border-radius:7px;margin-bottom:10px;font-size:9px}.gx-msg.on{display:block}.gx-msg.ok{background:#0a2a1c;color:#75ffb4}.gx-msg.err{background:#2a0d13;color:#ff9cab}@media(max-width:800px){.gx-stats{grid-template-columns:repeat(2,1fr)}.gx-grid{grid-template-columns:1fr}.gx-grid .full{grid-column:auto}}
</style>
@endpush

@section('content')
<div class="gx-clans">
    <section class="gx-head">
        <div class="gx-kicker">GIGAX ADMIN • CLÃS</div>
        <h1>Gerenciamento de Clãs</h1>
        <div class="gx-muted">Corrija nomes e tags, altere foto, troque capitão ou remova clãs criados incorretamente.</div>

        <div class="gx-stats">
            <div class="gx-stat"><small>Total</small><strong>{{$stats->total}}</strong></div>
            <div class="gx-stat"><small>Ativos</small><strong>{{$stats->active}}</strong></div>
            <div class="gx-stat"><small>Inativos</small><strong>{{$stats->inactive}}</strong></div>
            <div class="gx-stat"><small>Jogadores em clãs</small><strong>{{$stats->members}}</strong></div>
        </div>
    </section>

    <section class="gx-card">
        <form class="gx-filter" method="GET">
            <input class="gx-input" name="q" value="{{$q}}" placeholder="Buscar nome, tag ou capitão...">
            <select class="gx-select" name="status">
                <option value="active" @selected($status==='active')>Ativos</option>
                <option value="inactive" @selected($status==='inactive')>Inativos</option>
                <option value="all" @selected($status==='all')>Todos</option>
            </select>
            <button class="gx-btn green">BUSCAR</button>
            <a class="gx-btn" href="{{route('admin.clans.index')}}">LIMPAR</a>
        </form>
    </section>

    <section class="gx-card">
        <div class="gx-table-wrap">
            <table class="gx-table">
                <thead><tr><th>Clã</th><th>Capitão</th><th>Membros</th><th>Pontos</th><th>Status</th><th>Ações</th></tr></thead>
                <tbody>
                @forelse($clans as $clan)
                    <tr id="clan-row-{{$clan->id}}">
                        <td>
                            <div class="gx-clan">
                                @if(!empty($clan->logo_url))
                                    <img class="gx-logo" src="{{asset(ltrim($clan->logo_url,'/'))}}" alt="">
                                @else
                                    <div class="gx-logo">{{strtoupper(substr($clan->name,0,1))}}</div>
                                @endif
                                <div><b>{{$clan->name}}</b><div class="gx-tag">[{{$clan->tag ?: 'SEM TAG'}}] • ID {{$clan->id}}</div></div>
                            </div>
                        </td>
                        <td>{{$clan->captain_name ?: '—'}}</td>
                        <td>{{$clan->member_count}}</td>
                        <td>{{number_format($clan->rank_points ?? 0)}}</td>
                        <td><span class="gx-status {{$clan->status}}">{{$clan->status}}</span></td>
                        <td>
                            <div class="gx-actions">
                                <a class="gx-btn" target="_blank" href="{{route('teams.show',$clan->id)}}">ABRIR</a>
                                <button class="gx-btn gold" type="button" onclick="openClan({{$clan->id}})">EDITAR</button>
                                <button class="gx-btn red" type="button" onclick="deleteClan({{$clan->id}}, @js($clan->name))">EXCLUIR</button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" style="text-align:center;color:#71889b;padding:22px">Nenhum clã encontrado.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<div id="clanModal" class="gx-modal">
    <div class="gx-modal-box">
        <div id="modalMsg" class="gx-msg"></div>
        <div class="gx-modal-head">
            <div><div class="gx-kicker">ADMINISTRAÇÃO</div><h2 style="margin:3px 0 0">Editar clã</h2></div>
            <button class="gx-btn" type="button" onclick="closeClan()">✕</button>
        </div>

        <form id="editClanForm" class="gx-grid">
            <input type="hidden" id="clanId">
            <label>Nome<input id="clanName" required maxlength="50"></label>
            <label>Tag<input id="clanTag" maxlength="10"></label>
            <label>Status<select id="clanStatus"><option value="active">Ativo</option><option value="inactive">Inativo</option></select></label>
            <label>Foto do clã<input id="clanLogo" type="file" accept="image/png,image/jpeg,image/webp"></label>
            <label class="full">Descrição<textarea id="clanDescription"></textarea></label>
            <div class="full gx-actions">
                <button class="gx-btn green" type="submit">SALVAR CORREÇÕES</button>
                <button class="gx-btn" type="button" onclick="uploadLogo()">ALTERAR FOTO</button>
            </div>
        </form>

        <div style="margin-top:16px;border-top:1px solid rgba(145,187,219,.10);padding-top:12px">
            <div class="gx-kicker">ELENCO</div>
            <div class="gx-muted">Selecione um membro para torná-lo capitão.</div>
            <div id="memberList" class="gx-member-list"></div>
            <div class="gx-actions" style="margin-top:9px">
                <select id="captainSelect" class="gx-select" style="min-width:220px"></select>
                <button class="gx-btn gold" type="button" onclick="transferCaptain()">TROCAR CAPITÃO</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const csrf='{{csrf_token()}}';
const modal=document.getElementById('clanModal');
const msg=document.getElementById('modalMsg');

function flash(text,type='ok'){
    msg.textContent=text; msg.className='gx-msg on '+type;
}
function closeClan(){modal.classList.remove('on');msg.className='gx-msg';}

async function openClan(id){
    try{
        const r=await fetch(`/admin/clans/${id}`,{headers:{'Accept':'application/json'}});
        const d=await r.json();
        if(!d.success){alert(d.message||'Erro');return;}
        const c=d.clan;
        document.getElementById('clanId').value=c.id;
        document.getElementById('clanName').value=c.name||'';
        document.getElementById('clanTag').value=c.tag||'';
        document.getElementById('clanStatus').value=c.status||'active';
        document.getElementById('clanDescription').value=c.description||'';

        const list=document.getElementById('memberList');
        const sel=document.getElementById('captainSelect');
        list.innerHTML=''; sel.innerHTML='';

        d.members.forEach(m=>{
            const div=document.createElement('div');
            div.className='gx-member';
            const avatar=m.avatar_url?`<img src="${m.avatar_url}" alt="">`:`<span class="gx-avatar">${(m.nickname||'J')[0]}</span>`;
            div.innerHTML=`${avatar}<div><b>${escapeHtml(m.nickname)}</b><div class="gx-muted">${escapeHtml(m.role)}</div></div>`;
            list.appendChild(div);

            const opt=document.createElement('option');
            opt.value=m.id; opt.textContent=m.nickname+(m.role==='captain'?' • atual':'');
            if(Number(m.id)===Number(c.captain_id))opt.selected=true;
            sel.appendChild(opt);
        });

        modal.classList.add('on');
    }catch(e){alert('Erro ao carregar clã.');}
}

document.getElementById('editClanForm').addEventListener('submit',async e=>{
    e.preventDefault();
    const id=document.getElementById('clanId').value;
    const body={
        name:document.getElementById('clanName').value,
        tag:document.getElementById('clanTag').value,
        description:document.getElementById('clanDescription').value,
        status:document.getElementById('clanStatus').value
    };
    const r=await fetch(`/admin/clans/${id}`,{
        method:'PUT',
        headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrf},
        body:JSON.stringify(body)
    });
    const d=await r.json().catch(()=>({}));
    if(d.success){flash(d.message);setTimeout(()=>location.reload(),700)}
    else flash(d.message||'Erro ao salvar.','err');
});

async function uploadLogo(){
    const id=document.getElementById('clanId').value;
    const input=document.getElementById('clanLogo');
    if(!input.files[0]){flash('Escolha uma imagem primeiro.','err');return;}
    const form=new FormData();form.append('logo',input.files[0]);
    const r=await fetch(`/admin/clans/${id}/logo`,{method:'POST',headers:{'Accept':'application/json','X-CSRF-TOKEN':csrf},body:form});
    const d=await r.json().catch(()=>({}));
    if(d.success){flash(d.message);setTimeout(()=>location.reload(),700)}
    else flash(d.message||'Erro ao enviar foto.','err');
}

async function transferCaptain(){
    const id=document.getElementById('clanId').value;
    const captain_id=document.getElementById('captainSelect').value;
    if(!captain_id){flash('O clã não possui membro disponível.','err');return;}
    if(!confirm('Confirmar troca de capitão?'))return;
    const r=await fetch(`/admin/clans/${id}/captain`,{
        method:'POST',
        headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrf},
        body:JSON.stringify({captain_id})
    });
    const d=await r.json().catch(()=>({}));
    if(d.success){flash(d.message);setTimeout(()=>location.reload(),700)}
    else flash(d.message||'Erro ao trocar capitão.','err');
}

async function deleteClan(id,name){
    if(!confirm(`Excluir o clã "${name}"?\n\nOs membros serão liberados. Se houver histórico competitivo, o registro será arquivado para preservar resultados.`))return;
    const confirmName=prompt(`Para confirmar, digite o nome do clã:\n${name}`);
    if(confirmName!==name){alert('Nome diferente. Exclusão cancelada.');return;}
    const r=await fetch(`/admin/clans/${id}`,{method:'DELETE',headers:{'Accept':'application/json','X-CSRF-TOKEN':csrf}});
    const d=await r.json().catch(()=>({}));
    alert(d.message||'Concluído');
    if(d.success)location.reload();
}

function escapeHtml(v){
    const d=document.createElement('div');d.textContent=v??'';return d.innerHTML;
}
modal.addEventListener('click',e=>{if(e.target===modal)closeClan()});
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeClan()});
</script>
@endpush
@endsection