@extends('layouts.app')

@section('title', $tournament['name'])

@section('content')
<div class="container-fluid px-0 py-0" data-reveal>
    <!-- Tournament Header Cover -->
    <div class="position-relative" style="height: 300px; 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: -100px; 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 Details -->
            <div>
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span class="badge-arena badge-muted" style="font-size: 0.65rem;">{{ $tournament['game_name'] }}</span>
                    @if($tournament['status'] === 'live')
                        <span class="badge-arena badge-live">● Live</span>
                    @elseif($tournament['status'] === 'registration_open')
                        <span class="badge-arena badge-green">Registration Open</span>
                    @else
                        <span class="badge-arena badge-muted">{{ $tournament['status_label'] }}</span>
                    @endif
                </div>
                <h1 class="display-md text-white mb-2" style="line-height: 1.1;">{{ $tournament['name'] }}</h1>
                <p class="text-muted fs-sm mb-0">
                    Organized by <span class="text-white fw-600">{{ $tournament['organizer'] }}</span> ·
                    Region: <span class="text-white">{{ $tournament['region'] }}</span> ·
                    Format: <span class="text-white">{{ $tournament['format'] }}</span>
                </p>
            </div>

            <!-- Right Registration Action -->
            <div class="d-flex gap-2">
                @if($tournament['status'] === 'registration_open')
                    @isset($event)
                        <a href="{{ route('events.register.create', $event) }}" class="btn-arena btn-primary btn-sm"><i class="bi bi-shield-plus"></i> Register</a>
                    @else
                        <button class="btn-arena btn-primary btn-sm"><i class="bi bi-shield-plus"></i> Register Team</button>
                    @endisset
                @endif
                @if($tournament['stream_url'])
                    <a href="{{ $tournament['stream_url'] }}" target="_blank" class="btn-arena btn-secondary btn-sm">
                        <i class="bi bi-broadcast"></i> Watch Stream
                    </a>
                @endif
            </div>
        </div>

        <!-- Custom Tabs -->
        <div class="tabs-arena mb-4" data-tabs="tournament-tabs">
            <button class="tab-btn active" data-tab="tourney-overview">Overview</button>
            <button class="tab-btn" data-tab="tourney-bracket">Brackets & Stages</button>
            <button class="tab-btn" data-tab="tourney-teams">Registered Teams</button>
        </div>

        <!-- Tab Panes -->
        <div class="row g-4 mb-5">
            <!-- Main Content Pane -->
            <div class="col-lg-8">
                <!-- Overview Tab -->
                <div class="tab-pane active" id="tourney-overview">
                    <!-- Stats Grid -->
                    <div class="row g-3 mb-4 text-center">
                        <div class="col-4">
                            <div class="p-3" style="background: var(--arena-surface-01); border: 1px solid var(--arena-border); border-radius: var(--r-lg);">
                                <div class="fw-800 text-warning fs-4">💰 ${{ number_format($tournament['prize_pool']) }}</div>
                                <div class="text-label mt-1" style="font-size: 0.6rem;">Prize Pool</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-3" style="background: var(--arena-surface-01); border: 1px solid var(--arena-border); border-radius: var(--r-lg);">
                                <div class="fw-800 text-white fs-4">{{ $tournament['registered_teams'] }} / {{ $tournament['max_teams'] }}</div>
                                <div class="text-label mt-1" style="font-size: 0.6rem;">Registered Teams</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-3" style="background: var(--arena-surface-01); border: 1px solid var(--arena-border); border-radius: var(--r-lg);">
                                <div class="fw-800 text-white fs-4">{{ \Carbon\Carbon::parse($tournament['start_date'])->format('M d') }}</div>
                                <div class="text-label mt-1" style="font-size: 0.6rem;">Start Date</div>
                            </div>
                        </div>
                    </div>

                    <!-- Requirements -->
                    <div class="card-arena p-4 mb-4">
                        <span class="card-title">Event Requirements</span>
                        <div class="d-flex flex-column gap-3 fs-sm text-white">
                            <div class="d-flex justify-content-between border-bottom pb-2" style="border-color: var(--arena-border) !important;">
                                <span class="text-muted">Minimum Rank</span>
                                <span class="fw-600">{{ $tournament['requirements']['min_rank'] }}</span>
                            </div>
                            <div class="d-flex justify-content-between border-bottom pb-2" style="border-color: var(--arena-border) !important;">
                                <span class="text-muted">Verified Status Required</span>
                                <span class="fw-600">{{ $tournament['requirements']['verified_only'] ? 'Yes' : 'No' }}</span>
                            </div>
                            <div class="d-flex justify-content-between" style="border-color: var(--arena-border) !important;">
                                <span class="text-muted">Region Locked</span>
                                <span class="fw-600">{{ $tournament['requirements']['region_locked'] ? 'Yes' : 'No' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bracket Tab -->
                <div class="tab-pane" id="tourney-bracket">
                    <div class="card-arena p-4">
                        <span class="card-title">Tournament Stages</span>
                        @if(isset($tournament['stages']))
                        <div class="d-flex flex-column gap-3">
                            @foreach($tournament['stages'] as $stage)
                            <div class="p-3 d-flex align-items-center justify-content-between" 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.25rem;">📊</div>
                                    <div>
                                        <div class="fw-700 text-white fs-sm">{{ $stage['name'] }}</div>
                                        <div class="fs-xs text-muted">Competition phase</div>
                                    </div>
                                </div>
                                <span class="badge-arena badge-muted" style="font-size: 0.55rem;">UPCOMING</span>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <div class="text-center p-4">
                            <i class="bi bi-diagram-3 text-muted display-6 mb-2"></i>
                            <p class="text-muted mb-0 fs-sm">Bracket will generate after registration phase closes.</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Teams Tab -->
                <div class="tab-pane" id="tourney-teams">
                    <div class="card-arena p-4">
                        <span class="card-title">Registered Competitors</span>
                        <div class="row g-3">
                            @foreach(($teams ?? []) as $team)
                            <div class="col-md-6">
                                <div class="p-3 d-flex align-items-center gap-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg); border: 1px solid var(--arena-border);">
                                    <img src="{{ asset($team['logo']) }}" alt="{{ $team['name'] }}" style="width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: contain; background: var(--arena-surface-03); padding: 2px;">
                                    <div>
                                        <div class="fw-700 text-white fs-xs">{{ $team['name'] }}</div>
                                        <div class="fs-xs text-muted">{{ $team['flag'] }} {{ $team['region'] }}</div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Info -->
            <div class="col-lg-4">
                <!-- Registration countdown card -->
                @if($tournament['status'] === 'registration_open')
                <div class="card-arena p-4 mb-4" style="border-color: var(--arena-border-accent);">
                    <span class="card-title text-info">Registration Closes</span>
                    <div class="fw-800 text-white fs-4 mb-2">{{ \Carbon\Carbon::parse($tournament['registration_deadline'])->format('M d, Y') }}</div>
                    <p class="fs-xs text-muted mb-0">Roster changes permitted up to 2 hours before bracket draw.</p>
                </div>
                @endif

                <!-- Rules Card -->
                <div class="card-arena p-4">
                    <span class="card-title">Tournament Rules</span>
                    <ul class="fs-xs text-muted ps-3 mb-0" style="line-height: 1.7;">
                        <li>Teams must check-in 60 minutes before matches.</li>
                        <li>Verified match screenshots required on dispute claims.</li>
                        <li>Standard game lobby settings apply.</li>
                        <li>Zero-tolerance policy on cheats or toxic conduct.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
