@extends('layouts.app')

@section('title', is_array($game) ? ($game['name'] ?? 'Game') : ($game->translationName() ?? $game->name))

@section('content')
@php
    $isMock = is_array($game);
    if ($isMock) {
        $gameName = $game['name'] ?? 'Game';
        $gameType = $game['genre'] ?? 'Esports';
        $gamePublisher = $game['publisher'] ?? '—';
        $coverPath = $game['cover'] ?? null;
        $description = $game['description'] ?? null;
        $playerCount = count($players);
    } else {
        $gameName = $game->translationName() ?? $game->name;
        $gameType = $game->game_type->label();
        $gamePublisher = $game->publisher ?? '—';
        $coverPath = $game->cover_path;
        $description = $game->description;
        $playerCount = $game->player_game_profiles_count ?? $players->count();
    }
@endphp
<div class="container-fluid px-0 py-0" data-reveal>
    <div class="position-relative" style="height: 260px; overflow: hidden; background: linear-gradient(135deg, #161820 0%, #090B0F 100%);">
        @if($coverPath)
            <img src="{{ asset(ltrim($coverPath, '/')) }}" alt="{{ $gameName }}" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.45;">
        @endif
        <div class="position-absolute" style="inset: 0; background: linear-gradient(to top, var(--arena-bg) 0%, transparent 100%);"></div>
    </div>

    <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">
            <div>
                <span class="badge-arena badge-accent mb-2">{{ $gameType }}</span>
                <h1 class="display-md text-white mb-2">{{ $gameName }}</h1>
                <p class="text-muted fs-sm mb-0">
                    {{ $gamePublisher }} · {{ $playerCount }} registered players
                </p>
            </div>
            <div>
                @unless($isMock)
                    @auth
                        <a href="{{ route('profile.games.create') }}" class="btn-arena btn-primary btn-sm"><i class="bi bi-controller"></i> Register Profile</a>
                    @else
                        <a href="{{ route('login') }}" class="btn-arena btn-primary btn-sm"><i class="bi bi-controller"></i> Register Profile</a>
                    @endauth
                @endunless
            </div>
        </div>

        <div class="row g-4 mb-5">
            <div class="col-lg-8">
                <div class="card-arena p-4 mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="card-title mb-0">Active Players</span>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        @if($isMock)
                            @forelse($players as $player)
                            <div class="p-3 d-flex align-items-center justify-content-between" style="background: var(--arena-surface-02); border-radius: var(--r-md); border: 1px solid var(--arena-border);">
                                <div>
                                    <div class="fw-700 text-white fs-xs">{{ $player['username'] ?? $player['name'] ?? 'Player' }}</div>
                                    <div class="fs-xs text-muted">{{ $player['role'] ?? 'Competitor' }}</div>
                                </div>
                                <span class="fw-800 text-info fs-xs">{{ $player['rank'] ?? 'Unranked' }}</span>
                            </div>
                            @empty
                            <p class="text-muted mb-0 fs-sm">No public player profiles yet.</p>
                            @endforelse
                        @else
                            @forelse($players as $playerProfile)
                            <div class="p-3 d-flex align-items-center justify-content-between" style="background: var(--arena-surface-02); border-radius: var(--r-md); border: 1px solid var(--arena-border);">
                                <div>
                                    <div class="fw-700 text-white fs-xs">{{ $playerProfile->in_game_name }}</div>
                                    <div class="fs-xs text-muted">{{ $playerProfile->playerProfile?->display_name }}</div>
                                </div>
                                <span class="fw-800 text-info fs-xs">{{ $playerProfile->currentRank?->name ?? 'Unranked' }}</span>
                            </div>
                            @empty
                            <p class="text-muted mb-0 fs-sm">No public player profiles yet.</p>
                            @endforelse
                        @endif
                    </div>
                </div>

                @if($description)
                <div class="card-arena p-4">
                    <span class="card-title">About</span>
                    <p class="text-muted mb-0">{{ $description }}</p>
                </div>
                @endif
            </div>

            @unless($isMock)
            <div class="col-lg-4">
                @if($game->ranks->isNotEmpty())
                <div class="card-arena p-4 mb-4">
                    <span class="card-title">Supported Ranks</span>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($game->ranks as $rank)
                        <span class="badge-arena badge-muted" @if($rank->color) style="border-color: {{ $rank->color }} !important;" @endif>
                            {{ $rank->name }}
                        </span>
                        @endforeach
                    </div>
                </div>
                @endif

                @if($game->roles->isNotEmpty())
                <div class="card-arena p-4 mb-4">
                    <span class="card-title">Roles</span>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($game->roles as $role)
                        <span class="badge-arena badge-muted">{{ $role->name }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                @if($game->platforms->isNotEmpty())
                <div class="card-arena p-4">
                    <span class="card-title">Platforms</span>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($game->platforms as $platform)
                        <span class="badge-arena badge-muted">{{ $platform->name }}</span>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
            @endunless
        </div>
    </div>
</div>
@endsection
