@extends('layouts.app')

@section('title', 'Browse Players')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>

    {{-- Page Hero --}}
    <div class="page-hero players-hero-bg mb-4">
        <div class="page-hero-content d-flex align-items-start justify-content-between flex-wrap gap-3">
            <div class="page-hero-inner" style="padding:4px 8px;">
                <h1 class="page-heading-pixel mb-1">
                    <span style="color:var(--arena-accent);">//</span> Browse Players
                </h1>
                <p class="page-subheading">Discover and connect with esports athletes globally.</p>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <span class="badge-arena badge-accent" style="font-family:var(--font-hud); letter-spacing:0.08em;">
                    <span style="width:6px;height:6px;border-radius:50%;background:var(--arena-green);box-shadow:0 0 8px rgba(34,212,126,0.7);display:inline-block;"></span>
                    {{ count($players) }} Active
                </span>
            </div>
        </div>
    </div>

    {{-- Filter Toolbar (HUD Style) --}}
    <div class="filter-hud p-3 mb-4 sticky-top" style="top: 72px; z-index: var(--z-raised);">
        <div class="filter-hud-inner">
            <form method="GET" action="{{ route('preview.players') }}" class="row g-2 align-items-center">
                {{-- Search --}}
                <div class="col-md-3">
                    <div class="position-relative">
                        <input type="text" name="search" class="form-control input-arena" placeholder="Search callsign..." value="{{ request('search') }}" style="padding-inline-start: var(--sp-8);">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted position-absolute" style="left:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--arena-text-muted);"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                    </div>
                </div>

                {{-- Game --}}
                <div class="col-md-3">
                    <select name="game" class="form-select input-arena" onchange="this.form.submit()">
                        <option value="">All Games</option>
                        @foreach($games as $game)
                            <option value="{{ $game['id'] }}" {{ request('game') == $game['id'] ? 'selected' : '' }}>
                                {{ $game['name'] }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Rank --}}
                <div class="col-md-3">
                    <select name="rank" class="form-select input-arena" onchange="this.form.submit()">
                        <option value="">All Ranks</option>
                        @foreach(['Iron', 'Bronze', 'Silver', 'Gold', 'Platinum', 'Diamond', 'Mythic', 'Legend'] as $r)
                            <option value="{{ $r }}" {{ request('rank') == $r ? 'selected' : '' }}>{{ $r }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- LFT --}}
                <div class="col-md-2">
                    <select name="looking_for_team" class="form-select input-arena" onchange="this.form.submit()">
                        <option value="">All Statuses</option>
                        <option value="1" {{ request('looking_for_team') == '1' ? 'selected' : '' }}>Looking for Team</option>
                    </select>
                </div>

                {{-- Reset --}}
                <div class="col-md-1 text-md-end">
                    <a href="{{ route('preview.players') }}" class="btn-arena btn-ghost btn-sm w-100 py-2">Clear</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Active filter pills --}}
    @if(request('game') || request('rank') || request('looking_for_team') || request('search'))
    <div class="d-flex flex-wrap gap-2 mb-4">
        @if(request('search'))
            <span class="badge-arena badge-muted d-flex align-items-center gap-2">
                Search: "{{ request('search') }}"
                <a href="{{ request()->fullUrlWithQuery(['search' => null]) }}" style="color: inherit; text-decoration: none;">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </a>
            </span>
        @endif
        @if(request('game'))
            <span class="badge-arena badge-accent d-flex align-items-center gap-2">
                Game: {{ $games[array_search(request('game'), array_column($games, 'id'))]['name'] ?? request('game') }}
                <a href="{{ request()->fullUrlWithQuery(['game' => null]) }}" style="color: inherit; text-decoration: none;">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </a>
            </span>
        @endif
        @if(request('rank'))
            <span class="badge-arena badge-warm d-flex align-items-center gap-2">
                Rank: {{ request('rank') }}
                <a href="{{ request()->fullUrlWithQuery(['rank' => null]) }}" style="color: inherit; text-decoration: none;">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </a>
            </span>
        @endif
        @if(request('looking_for_team'))
            <span class="badge-arena badge-green d-flex align-items-center gap-2">
                LFT
                <a href="{{ request()->fullUrlWithQuery(['looking_for_team' => null]) }}" style="color: inherit; text-decoration: none;">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </a>
            </span>
        @endif
    </div>
    @endif

    {{-- Players Grid — Gamer ID Cards --}}
    <div class="row g-4">
        @forelse($players as $player)
        <div class="col-md-6 col-lg-4">
            <div class="card-arena card-glow h-100 p-4 d-flex flex-column position-relative card-tilt {{ $player['looking_for_team'] ? 'player-lft' : '' }}"
                 style="border-top: 2px solid {{ $player['looking_for_team'] ? 'rgba(34,212,126,0.45)' : 'rgba(0,212,255,0.3)' }};">

                {{-- Top-right corner indicator --}}
                <div class="position-absolute" style="top: 14px; right: 16px; display: flex; gap: 8px; align-items: center; z-index:2;">
                    @if($player['looking_for_team'])
                        <span class="badge-arena badge-green" style="font-size: 0.58rem; letter-spacing:0.1em;">LFT</span>
                    @endif
                    <span class="status-dot {{ $player['online'] ? 'online' : 'offline' }}" title="{{ $player['online'] ? 'Online' : 'Offline' }}"></span>
                </div>

                {{-- Avatar & Identity --}}
                <div class="d-flex align-items-center gap-3 mb-4">
                    <div style="position:relative; flex-shrink:0;">
                        <img src="{{ asset($player['avatar']) }}" alt="{{ $player['username'] }}"
                             style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--arena-accent); box-shadow: 0 0 16px rgba(0,212,255,0.35);"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22><rect width=%2264%22 height=%2264%22 rx=%2232%22 fill=%22%231D2030%22/></svg>'">
                        @if($player['verified'])
                        <div style="position:absolute; bottom:-2px; right:-2px; width:18px; height:18px; background:var(--arena-bg); border-radius:50%; display:flex; align-items:center; justify-content:center;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="#00D4FF" style="filter:drop-shadow(0 0 4px rgba(0,212,255,0.7));"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" fill="none" stroke="#00D4FF" stroke-width="2"/></svg>
                        </div>
                        @endif
                    </div>
                    <div>
                        <div style="font-family:var(--font-hud); font-weight:800; font-size:1.05rem; color:var(--arena-text-primary); letter-spacing:0.01em;">
                            {{ $player['username'] }}
                        </div>
                        <div style="font-family:var(--font-hud); font-size:0.7rem; color:var(--arena-text-muted); letter-spacing:0.04em; margin-top:2px;">
                            {{ $player['flag'] }} {{ $player['country_name'] }}
                        </div>
                    </div>
                </div>

                {{-- Game & Ranks --}}
                <div class="mb-4">
                    <div class="text-hud mb-2">Game Profiles</div>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($player['games'] as $g)
                            @php
                                $rankClass = strtolower($g['rank'] ?? 'iron');
                            @endphp
                            <span class="rank-badge {{ $rankClass }}" style="font-size: 0.65rem; padding: 3px 8px;">
                                {{ $g['game_name'] }} · {{ $g['rank'] }}
                            </span>
                        @endforeach
                    </div>
                </div>

                {{-- Stats Block --}}
                <div class="player-stats-block row g-0 text-center p-3 mb-4 mt-auto" style="border-radius: 6px;">
                    <div class="col-4">
                        <div class="player-stat-value" style="font-size:1.1rem;">{{ $player['stats']['kd_ratio'] }}</div>
                        <div class="player-stat-label">K/D</div>
                    </div>
                    <div class="col-4" style="border-inline: 1px solid rgba(0,212,255,0.1);">
                        <div class="player-stat-value" style="font-size:1.1rem;">{{ $player['stats']['win_rate'] }}%</div>
                        <div class="player-stat-label">Win Rate</div>
                    </div>
                    <div class="col-4">
                        <div class="player-stat-value" style="font-size:1.1rem;">{{ $player['stats']['matches_played'] }}</div>
                        <div class="player-stat-label">Matches</div>
                    </div>
                </div>

                {{-- Action --}}
                <a href="/preview/players/{{ $player['slug'] }}" class="btn-arena btn-secondary w-100 btn-sm text-center">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    View Profile
                </a>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="card-arena p-5 text-center empty-state">
                <div style="width:64px; height:64px; margin:0 auto 16px; background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="rgba(0,212,255,0.4)" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/><line x1="18" y1="8" x2="23" y2="13"/><line x1="23" y1="8" x2="18" y2="13"/></svg>
                </div>
                <div class="empty-title" style="font-size:1rem; margin-bottom:8px;">No Players Found</div>
                <p class="page-subheading" style="margin-bottom:16px;">Adjust your filter choices or search term to try again.</p>
                <a href="{{ route('preview.players') }}" class="btn-arena btn-primary btn-sm">Reset Filters</a>
            </div>
        </div>
        @endforelse
    </div>
</div>
@endsection
