@extends('layouts.app')

@section('title', 'Amigos - GIGAX ARENA')
@section('page_title', 'Amigos')

@section('content')
@php
    $allFriends = collect($friends ?? []);
    $online = collect($onlineFriends ?? []);
    $inGame = collect($inGameFriends ?? $playingFriends ?? []);
    $offline = collect($offlineFriends ?? []);

    if ($allFriends->isEmpty()) {
        $allFriends = $inGame->concat($online)->concat($offline)->unique(function ($item) {
            return data_get($item, 'id')
                ?? data_get($item, 'user_id')
                ?? data_get($item, 'friend_id')
                ?? data_get($item, 'nickname')
                ?? data_get($item, 'name');
        })->values();
    }

    $received = collect($receivedRequests ?? $pendingReceived ?? $incomingRequests ?? []);
    $sent = collect($sentRequests ?? $pendingSent ?? $outgoingRequests ?? []);

    $totalFriends = $allFriends->count();
    $onlineCount = $online->count();
    $inGameCount = $inGame->count();
    $receivedCount = $received->count();
    $sentCount = $sent->count();

    $friendId = function ($friend) {
        return data_get($friend, 'id')
            ?? data_get($friend, 'user_id')
            ?? data_get($friend, 'friend_id')
            ?? data_get($friend, 'friend_user_id');
    };

    $friendName = function ($friend) {
        return data_get($friend, 'nickname')
            ?? data_get($friend, 'name')
            ?? data_get($friend, 'username')
            ?? 'Jogador';
    };

    $statusOf = function ($friend) {
        $raw = strtolower((string) (data_get($friend, 'status') ?? data_get($friend, 'presence') ?? ''));
        if (in_array($raw, ['playing','in_game','ingame','em_partida','match'], true) || data_get($friend, 'in_game') || data_get($friend, 'is_playing')) return 'ingame';
        if (in_array($raw, ['online','available','ativo'], true) || data_get($friend, 'online') || data_get($friend, 'is_online')) return 'online';
        return 'offline';
    };
@endphp

<div class="gx-friends-page" id="gxFriendsPage">
    <section class="gx-hero">
        <div>
            <span class="gx-kicker">GIGAX ARENA</span>
            <h1>Lista completa de amigos</h1>
            <p>Busca, filtros, convites e acesso rápido sem dados fictícios.</p>
        </div>
        <div class="gx-actions">
            <button type="button" class="gx-btn green" id="gxAddFriend">+ Adicionar amigo</button>
            <a class="gx-btn" href="{{ url('/lobby') }}">Ir para o Lobby</a>
        </div>

        <div class="gx-stats">
            <button type="button" class="gx-stat" data-stat-filter="all"><small>Total</small><strong>{{ $totalFriends }}</strong></button>
            <button type="button" class="gx-stat" data-stat-filter="online"><small>Online</small><strong>{{ $onlineCount }}</strong></button>
            <button type="button" class="gx-stat" data-stat-filter="ingame"><small>Em partida</small><strong>{{ $inGameCount }}</strong></button>
            <button type="button" class="gx-stat" data-scroll="#gxReceived"><small>Convites</small><strong>{{ $receivedCount + $sentCount }}</strong></button>
        </div>
    </section>

    <div class="gx-layout">
        <main class="gx-card">
            <h2>Central de amigos</h2>
            <p class="gx-muted">Filtre, busque e acesse as ações disponíveis.</p>

            <div class="gx-toolbar">
                <input id="gxFriendFilter" class="gx-input" type="search" placeholder="Buscar por nickname ou status...">
                <div class="gx-filters">
                    <button type="button" class="gx-chip active" data-filter="all">Todos</button>
                    <button type="button" class="gx-chip" data-filter="online">Online</button>
                    <button type="button" class="gx-chip" data-filter="ingame">Em partida</button>
                    <button type="button" class="gx-chip" data-filter="offline">Offline</button>
                </div>
            </div>

            <div id="gxFriendRows">
                @forelse($allFriends as $friend)
                    @php
                        $id = $friendId($friend);
                        $name = $friendName($friend);
                        $status = $statusOf($friend);
                        $label = $status === 'ingame' ? 'Em partida' : ($status === 'online' ? 'Online agora' : 'Offline');
                        $avatar = data_get($friend,'avatar_url') ?? data_get($friend,'avatar') ?? data_get($friend,'photo');
                        $initial = function_exists('mb_substr') ? mb_strtoupper(mb_substr($name,0,1)) : strtoupper(substr($name,0,1));
                    @endphp
                    <article class="gx-friend" data-friend data-status="{{ $status }}" data-search="{{ strtolower($name.' '.$label) }}">
                        <div class="gx-avatar">
                            @if($avatar)
                                <img src="{{ $avatar }}" alt="{{ $name }}">
                            @else
                                <span>{{ $initial }}</span>
                            @endif
                            <i class="{{ $status }}"></i>
                        </div>
                        <div class="gx-info">
                            <strong>{{ $name }}</strong>
                            <small>{{ $label }}</small>
                        </div>
                        <div class="gx-row-actions">
                            @if($id)
                                <a class="gx-mini blue" href="{{ url('/amigos/chat/'.$id) }}">Chat</a>
                                <a class="gx-mini green" href="{{ url('/lobby').'?invite_user='.urlencode((string)$id) }}">Convidar pra fila</a>
                                <a class="gx-mini" href="{{ url('/players/'.$id) }}">Perfil</a>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="gx-empty">Nenhum amigo cadastrado.</div>
                @endforelse
            </div>
            <div class="gx-empty gx-hide" id="gxNoMatch">Nenhum amigo corresponde à busca.</div>
        </main>

        <aside class="gx-side">
            <section class="gx-card" id="gxSearchCard">
                <h2>Busca rápida</h2>
                <p class="gx-muted">Encontre jogadores por nickname.</p>
                <form method="GET" action="{{ url('/amigos/buscar') }}" class="gx-search-form">
                    <input id="gxQuickSearch" class="gx-input" name="q" required type="search" placeholder="Digite o nickname do jogador">
                    <button class="gx-btn blue" type="submit">Buscar</button>
                </form>
                <div class="gx-small-stats">
                    <button type="button" data-scroll="#gxReceived"><small>Recebidos</small><strong>{{ $receivedCount }}</strong></button>
                    <button type="button" data-scroll="#gxSent"><small>Enviados</small><strong>{{ $sentCount }}</strong></button>
                </div>
            </section>

            <section class="gx-card" id="gxReceived">
                <h2>Convites recebidos</h2>
                <p class="gx-muted">Gerencie novas conexões.</p>
                @forelse($received as $invite)
                    @php
                        $inviteId = data_get($invite,'id') ?? data_get($invite,'request_id');
                        $sender = data_get($invite,'sender') ?? data_get($invite,'user') ?? $invite;
                    @endphp
                    <div class="gx-invite">
                        <strong>{{ $friendName($sender) }}</strong>
                        @if($inviteId)
                            <div class="gx-row-actions">
                                <form method="POST" action="{{ url('/amigos/aceitar/'.$inviteId) }}">@csrf<button class="gx-mini green" type="submit">Aceitar</button></form>
                                <form method="POST" action="{{ url('/amigos/recusar/'.$inviteId) }}">@csrf<button class="gx-mini danger" type="submit">Recusar</button></form>
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="gx-empty">Nenhum convite pendente.</div>
                @endforelse
            </section>

            <section class="gx-card" id="gxSent">
                <h2>Convites enviados</h2>
                <p class="gx-muted">Aguardando resposta.</p>
                @forelse($sent as $invite)
                    @php $target = data_get($invite,'receiver') ?? data_get($invite,'target') ?? data_get($invite,'user') ?? $invite; @endphp
                    <div class="gx-invite"><strong>{{ $friendName($target) }}</strong><small>Aguardando resposta</small></div>
                @empty
                    <div class="gx-empty">Nenhum convite enviado.</div>
                @endforelse
            </section>
        </aside>
    </div>
</div>
@endsection

@push('styles')
<style>
.gx-friends-page,.gx-friends-page *{box-sizing:border-box}.gx-friends-page{display:grid;gap:12px}
.gx-hero,.gx-card{border:1px solid #19344a;border-radius:11px;background:#0c1925}
.gx-hero{padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;background:linear-gradient(110deg,#0c2727,#111c35)}
.gx-kicker{font-size:8px;color:#00ed78;font-weight:900;letter-spacing:.12em}.gx-hero h1{font-size:19px;margin:3px 0}.gx-hero p,.gx-muted{font-size:8px;color:#87a0b2;margin:0}
.gx-actions{display:flex;gap:7px}.gx-btn{height:34px;padding:0 12px;border:1px solid #29445c;border-radius:8px;background:#17263a;color:#fff;font-size:8px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.gx-btn.green{background:#1ed66b;color:#07170e}.gx-btn.blue{background:#3477f4}
.gx-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.gx-stat,.gx-small-stats button{border:1px solid #20384e;border-radius:8px;background:#172130;color:#fff;text-align:left;padding:10px;cursor:pointer}.gx-stat:hover,.gx-small-stats button:hover{border-color:#00ed78}.gx-stat small,.gx-small-stats small{display:block;font-size:7px;color:#8ca1b2;text-transform:uppercase;font-weight:900}.gx-stat strong,.gx-small-stats strong{font-size:17px}
.gx-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px}.gx-card{padding:13px}.gx-card h2{font-size:12px;margin:0 0 3px}.gx-side{display:grid;gap:12px;align-content:start}
.gx-toolbar{display:grid;grid-template-columns:1fr auto;gap:7px;margin:10px 0}.gx-input{height:35px;border:1px solid #213b51;border-radius:8px;background:#14202e;color:#fff;padding:0 10px;font-size:8px;outline:0}.gx-input:focus{border-color:#3477f4}
.gx-filters{display:flex;gap:5px}.gx-chip{border:1px solid #263e55;border-radius:8px;background:#19263a;color:#fff;padding:0 10px;font-size:7px;font-weight:900;cursor:pointer}.gx-chip.active,.gx-chip:hover{background:#233b71}
.gx-friend{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;border:1px solid #1d3042;border-radius:9px;background:#172130;padding:8px;margin-top:6px}.gx-avatar{width:34px;height:34px;border-radius:50%;background:#285cbf;display:grid;place-items:center;position:relative;overflow:visible}.gx-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.gx-avatar span{font-weight:900}.gx-avatar i{position:absolute;right:-1px;bottom:0;width:9px;height:9px;border:2px solid #172130;border-radius:50%;background:#71808d}.gx-avatar i.online{background:#20d96b}.gx-avatar i.ingame{background:#f1b629}
.gx-info strong{display:block;font-size:10px}.gx-info small,.gx-invite small{font-size:7px;color:#849bad}.gx-row-actions{display:flex;gap:5px;align-items:center}.gx-row-actions form{margin:0}.gx-mini{min-height:27px;padding:0 8px;border:1px solid #29445d;border-radius:7px;background:#17273a;color:#fff;font-size:7px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}.gx-mini.blue{background:#1a3154}.gx-mini.green{background:#123a2e;color:#83efaf}.gx-mini.danger{background:#401a21;color:#ff8b98}
.gx-search-form{display:grid;grid-template-columns:1fr 75px;gap:6px;margin-top:9px}.gx-small-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.gx-invite{border:1px solid #1d3245;border-radius:8px;background:#15202e;padding:9px;margin-top:7px;display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:8px}
.gx-empty{border:1px dashed #263a4c;border-radius:8px;color:#8ba0b0;text-align:center;padding:16px;margin-top:8px;font-size:8px}.gx-hide{display:none!important}
@media(max-width:1050px){.gx-layout{grid-template-columns:1fr}.gx-side{grid-template-columns:repeat(3,1fr)}}@media(max-width:750px){.gx-hero{grid-template-columns:1fr}.gx-stats{grid-template-columns:repeat(2,1fr)}.gx-toolbar{grid-template-columns:1fr}.gx-side{grid-template-columns:1fr}}@media(max-width:600px){.gx-friend{grid-template-columns:38px 1fr}.gx-row-actions{grid-column:1/-1;flex-wrap:wrap}}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded',function(){
    const root=document.getElementById('gxFriendsPage'); if(!root)return;
    const rows=[...root.querySelectorAll('[data-friend]')];
    const input=document.getElementById('gxFriendFilter');
    const chips=[...root.querySelectorAll('[data-filter]')];
    const empty=document.getElementById('gxNoMatch');
    let filter='all';

    function apply(){
        const q=(input?.value||'').trim().toLowerCase(); let shown=0;
        rows.forEach(r=>{
            const okStatus=filter==='all'||r.dataset.status===filter;
            const okText=!q||(r.dataset.search||'').includes(q);
            const show=okStatus&&okText;
            r.classList.toggle('gx-hide',!show);
            if(show)shown++;
        });
        empty?.classList.toggle('gx-hide',shown>0||rows.length===0);
    }
    function choose(v){
        filter=v;
        chips.forEach(b=>b.classList.toggle('active',b.dataset.filter===v));
        apply();
    }
    input?.addEventListener('input',apply);
    chips.forEach(b=>b.addEventListener('click',()=>choose(b.dataset.filter)));
    root.querySelectorAll('[data-stat-filter]').forEach(b=>b.addEventListener('click',()=>choose(b.dataset.statFilter)));
    root.querySelectorAll('[data-scroll]').forEach(b=>b.addEventListener('click',()=>document.querySelector(b.dataset.scroll)?.scrollIntoView({behavior:'smooth'})));
    document.getElementById('gxAddFriend')?.addEventListener('click',()=>{
        document.getElementById('gxSearchCard')?.scrollIntoView({behavior:'smooth'});
        setTimeout(()=>document.getElementById('gxQuickSearch')?.focus(),300);
    });
});
</script>
@endpush