@extends('layouts.app')

@section('title', $player['username'] . ' Profile')

@section('content')
<div class="container-fluid px-0 py-0" data-reveal>
    <!-- Profile Cover & Header -->
    <div class="position-relative" style="height: 280px; overflow: hidden; background: linear-gradient(135deg, #161820 0%, #090B0F 100%);">
        <img src="{{ asset('assets/images/generated/heroes/hero-arena.webp') }}" alt="Cover" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.35;">
        <div class="position-absolute" style="inset: 0; background: linear-gradient(to top, var(--arena-bg) 0%, transparent 100%);"></div>
    </div>

    <!-- Header Overlay Details -->
    <div class="container-fluid px-4" style="margin-top: -80px; position: relative; z-index: var(--z-raised);">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-3 mb-4">
            <!-- Left Info -->
            <div class="d-flex flex-column flex-md-row align-items-md-end gap-3">
                <div class="position-relative">
                    <img src="{{ asset($player['avatar']) }}" alt="{{ $player['username'] }}"
                         style="width: 96px; height: 96px; border-radius: var(--r-full); object-fit: cover; border: 4px solid var(--arena-bg); background: var(--arena-surface-03);"
                         onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22><rect width=%2296%22 height=%2296%22 rx=%2248%22 fill=%22%231D2030%22/></svg>'">
                    <span class="badge-dot {{ $player['online'] ? 'online' : 'offline' }} position-absolute" style="bottom: 4px; right: 4px; width: 14px; height: 14px; border: 3px solid var(--arena-bg);"></span>
                </div>
                <div>
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <h1 class="display-md mb-0 text-white" style="line-height: 1.1;">{{ $player['username'] }}</h1>
                        @if($player['verified'])
                            <i class="bi bi-patch-check-fill text-info" style="font-size: 1.125rem;" title="Verified Profile"></i>
                        @endif
                        @if($player['premium'])
                            <span class="badge-arena badge-accent" style="font-size: 0.55rem; padding: 2px 8px;">PRO</span>
                        @endif
                    </div>
                    <p class="text-muted fs-sm mb-0">
                        {{ $player['flag'] }} {{ $player['country_name'] }} ·
                        <span class="text-white">{{ implode(', ', $player['languages']) }}</span>
                    </p>
                </div>
            </div>

            <!-- Right Buttons (If not the logged in player) -->
            <div class="d-flex gap-2">
                @if($player['slug'] !== 'nightfalcon')
                    <a href="/preview/chat?player={{ $player['slug'] }}" class="btn-arena btn-primary btn-sm">
                        <i class="bi bi-chat-dots"></i> Message
                    </a>
                    <button class="btn-arena btn-secondary btn-sm"><i class="bi bi-person-plus"></i> Follow</button>
                @else
                    <a href="/preview/settings" class="btn-arena btn-secondary btn-sm"><i class="bi bi-gear"></i> Settings</a>
                    <a href="/preview/verification" class="btn-arena btn-ghost btn-sm text-info"><i class="bi bi-patch-check"></i> Verification</a>
                @endif
            </div>
        </div>

        <!-- Custom Navigation Tabs -->
        <div class="tabs-arena mb-4" data-tabs="profile-tabs">
            <button class="tab-btn active" data-tab="tab-overview">Overview</button>
            <button class="tab-btn" data-tab="tab-stats">Stats</button>
            <button class="tab-btn" data-tab="tab-games">Games</button>
        </div>

        <!-- Tab Panes -->
        <div class="row g-4 mb-5">
            <!-- Main Pane Col -->
            <div class="col-lg-8">
                <!-- Overview Tab -->
                <div class="tab-pane active" id="tab-overview">
                    <!-- Bio -->
                    <div class="card-arena p-4 mb-4">
                        <span class="card-title">Biography</span>
                        <p class="text-white mb-0 fs-sm" style="line-height: 1.6;">
                            {{ $player['bio'] }}
                        </p>
                    </div>

                    <!-- Career stats cards -->
                    <div class="row g-3 mb-4">
                        @foreach([
                            ['K/D Ratio', $player['stats']['kd_ratio'], 'bi-percent', 'accent'],
                            ['Win Rate', $player['stats']['win_rate'].'%', 'bi-graph-up', 'green'],
                            ['Trophies Won', $player['stats']['tournaments_won'], 'bi-trophy', 'warm'],
                            ['MVP Count', $player['stats']['mvp_count'], 'bi-star', 'violet']
                        ] as $cstat)
                        <div class="col-6 col-md-3">
                            <div class="p-3 text-center" style="background: var(--arena-surface-01); border: 1px solid var(--arena-border); border-radius: var(--r-lg);">
                                <i class="bi {{ $cstat[2] }} mb-2 text-{{ $cstat[3] === 'accent' ? 'info' : ($cstat[3] === 'green' ? 'success' : ($cstat[3] === 'warm' ? 'warning' : 'primary')) }}" style="font-size: 1.25rem;"></i>
                                <div class="fw-800 text-white fs-5 mt-1">{{ $cstat[1] }}</div>
                                <div class="text-label mt-1" style="font-size: 0.6rem;">{{ $cstat[0] }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <!-- Game Profiles Detail -->
                    <div class="card-arena p-4">
                        <span class="card-title">Game Profiles</span>
                        <div class="d-flex flex-column gap-3">
                            @foreach($player['games'] as $g)
                            <div class="p-3 d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2" style="background: var(--arena-surface-02); border-radius: var(--r-lg); border: 1px solid var(--arena-border);">
                                <div class="d-flex align-items-center gap-3">
                                    <div style="font-size: 1.5rem;">🎮</div>
                                    <div>
                                        <div class="fw-700 text-white">{{ $g['game_name'] }}</div>
                                        <div class="fs-xs text-muted">Role: <span class="text-white fw-600">{{ $g['role'] }}</span></div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-3">
                                    <span class="rank-badge {{ strtolower($g['rank']) }}">{{ $g['rank'] }}</span>
                                    <span class="fw-800 text-white">{{ number_format($g['rp']) }} RP</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Stats Tab -->
                <div class="tab-pane" id="tab-stats">
                    <div class="card-arena p-4">
                        <span class="card-title">Advanced Performance</span>
                        <div class="d-flex flex-column gap-4">
                            <!-- Win Rate Progress -->
                            <div>
                                <div class="d-flex justify-content-between mb-2 fs-sm">
                                    <span class="text-white fw-600">Win Rate</span>
                                    <span class="text-success fw-700">{{ $player['stats']['win_rate'] }}%</span>
                                </div>
                                <div class="progress" style="background: var(--arena-surface-03); height: 8px; border-radius: var(--r-full);">
                                    <div class="progress-bar-arena bg-success" data-progress="{{ $player['stats']['win_rate'] }}" style="width: 0%; height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out-expo);"></div>
                                </div>
                            </div>

                            <!-- KD Ratio Progress -->
                            <div>
                                <div class="d-flex justify-content-between mb-2 fs-sm">
                                    <span class="text-white fw-600">Kill/Death Ratio</span>
                                    <span class="text-info fw-700">{{ $player['stats']['kd_ratio'] }}</span>
                                </div>
                                <div class="progress" style="background: var(--arena-surface-03); height: 8px; border-radius: var(--r-full);">
                                    <!-- Map ratio range to a normalized 0-100% bar. If 2.1 then say 70% -->
                                    <div class="progress-bar-arena bg-info" data-progress="{{ min(($player['stats']['kd_ratio'] / 3.0) * 100, 100) }}" style="width: 0%; height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out-expo);"></div>
                                </div>
                            </div>

                            <!-- Raw stats grid -->
                            <div class="row g-3 mt-2 text-center">
                                <div class="col-4">
                                    <div class="p-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg);">
                                        <div class="display-md mb-0 text-white" data-counter="{{ $player['stats']['matches_played'] }}">0</div>
                                        <div class="text-label mt-1">Matches Played</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="p-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg);">
                                        <div class="display-md mb-0 text-white" data-counter="{{ $player['stats']['tournaments_won'] }}">0</div>
                                        <div class="text-label mt-1">Tournaments Won</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="p-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg);">
                                        <div class="display-md mb-0 text-white" data-counter="{{ $player['stats']['mvp_count'] }}">0</div>
                                        <div class="text-label mt-1">MVP Medals</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Games Tab -->
                <div class="tab-pane" id="tab-games">
                    <div class="row g-3">
                        @foreach($player['games'] as $g)
                        <div class="col-md-6">
                            <div class="card-arena p-4">
                                <div style="font-size: 2rem; margin-bottom: var(--sp-3);">🎮</div>
                                <h3 class="text-white fw-700 fs-5 mb-1">{{ $g['game_name'] }}</h3>
                                <div class="fs-xs text-muted mb-3">Active Competitive Profile</div>
                                <div class="d-flex justify-content-between align-items-center mb-2 fs-sm">
                                    <span class="text-muted">Rank</span>
                                    <span class="rank-badge {{ strtolower($g['rank']) }}">{{ $g['rank'] }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2 fs-sm">
                                    <span class="text-muted">Role</span>
                                    <span class="text-white fw-600">{{ $g['role'] }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center fs-sm">
                                    <span class="text-muted">Rank Rating</span>
                                    <span class="text-info fw-700">{{ number_format($g['rp']) }} RP</span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Sidebar Column -->
            <div class="col-lg-4">
                <!-- Roster Info -->
                @if($player['current_team'])
                <div class="card-arena p-4 mb-4">
                    <span class="card-title">Current Team</span>
                    <div class="d-flex align-items-center gap-3">
                        <img src="{{ asset($player['current_team']['logo']) }}" alt="{{ $player['current_team']['name'] }}"
                             style="width: 48px; height: 48px; border-radius: var(--r-md); object-fit: contain; background: var(--arena-surface-03); padding: 4px; border: 1px solid var(--arena-border);"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22><rect width=%2248%22 height=%2248%22 rx=%228%22 fill=%22%231D2030%22/><text x=%2224%22 y=%2230%22 text-anchor=%22middle%22 fill=%22%2300D4FF%22 font-size=%2216%22>T</text></svg>'">
                        <div>
                            <a href="/preview/teams/{{ $player['current_team']['slug'] }}" class="text-decoration-none text-white fw-700 fs-sm">{{ $player['current_team']['name'] }}</a>
                            <div class="fs-xs text-muted">Signed Athlete</div>
                        </div>
                    </div>
                </div>
                @else
                <div class="card-arena p-4 mb-4">
                    <span class="card-title">Team Status</span>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge-dot {{ $player['looking_for_team'] ? 'online' : 'offline' }}"></span>
                        <span class="text-white fs-sm">{{ $player['looking_for_team'] ? 'Looking for Team' : 'Free Agent' }}</span>
                    </div>
                </div>
                @endif

                <!-- Feed Mini / Activity -->
                <div class="card-arena p-4">
                    <span class="card-title">Recent Updates</span>
                    <div class="d-flex flex-column gap-3">
                        @foreach($feed as $item)
                        <div class="d-flex gap-2">
                            <span style="font-size: 1rem;">📢</span>
                            <div class="fs-xs text-muted">
                                <span class="text-white fw-600">{{ $item['actor']['name'] }}</span>
                                {{ str_replace('{target}', isset($item['target']) ? $item['target']['name'] : '', $item['text']) }}
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
