@extends('layouts.app')

@section('title', 'Esports Tournaments')

@section('content')
@php
    $isPreview = request()->routeIs('preview.*');
    $tournamentUrl = fn (string $slug): string => $isPreview
        ? url('preview/tournaments/'.$slug)
        : route('events.show', ['event' => $slug]);
    $eventsIndexRoute = $isPreview ? route('preview.tournaments') : route('events.index');
@endphp
<div class="container-fluid px-4 py-4 tournaments-hero-bg" data-reveal>

    {{-- Page Hero --}}
    <div class="page-hero 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:#FFD700; text-shadow: 0 0 12px rgba(255,215,0,0.5);">//</span> Tournaments
                </h1>
                <p class="page-subheading">Join championships, climb brackets, and win prizes.</p>
            </div>
            <button class="btn-arena btn-primary btn-sm btn-glow">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Host Tournament
            </button>
        </div>
    </div>

    {{-- FEATURED EVENTS (major tile treatment) --}}
    @if(count($featured) > 0)
    <div class="mb-5">
        <h2 style="font-family:var(--font-hud); font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,215,0,0.6); margin-bottom:16px;">
            Featured Events
            <span style="display:inline-block; width:30px; height:1px; background:linear-gradient(90deg,rgba(255,215,0,0.4),transparent); vertical-align:middle; margin-left:8px;"></span>
        </h2>
        <div class="row g-4">
            @foreach($featured as $i => $t)
            <div class="col-md-6">
                <a class="card-arena d-block overflow-hidden text-decoration-none position-relative card-tilt"
                   href="{{ $tournamentUrl($t['slug']) }}"
                   style="border-top: 2px solid rgba(255,215,0,0.4); padding:0; transition: all 220ms cubic-bezier(0.16,1,0.3,1);"
                   onmouseover="this.style.transform='translateY(-4px)'; this.style.borderTopColor='rgba(255,215,0,0.65)'; this.style.boxShadow='0 8px 0 rgba(0,0,0,0.35), 0 20px 52px rgba(0,0,0,0.65), 0 0 40px rgba(255,215,0,0.07)';"
                   onmouseout="this.style.transform=''; this.style.borderTopColor='rgba(255,215,0,0.4)'; this.style.boxShadow='';">

                    {{-- Cover image --}}
                    <div style="height: 200px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255,215,0,0.04), var(--arena-surface-02));">
                        <img src="{{ asset('assets/images/generated/tournaments/tournament-cover-' . (($i % 2) + 1) . '.webp') }}"
                             alt="{{ $t['name'] }} cover"
                             style="width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(1.2); transition: transform 400ms ease;"
                             onerror="this.style.display='none';"
                             onmouseover="this.style.transform='scale(1.05)';"
                             onmouseout="this.style.transform='';">
                        {{-- Gradient overlay --}}
                        <div style="position:absolute; inset:0; background:linear-gradient(to top, rgba(9,11,15,0.95) 0%, transparent 60%);"></div>
                        {{-- HUD scan line --}}
                        <div class="hud-scan-line" style="opacity:0.4;"></div>
                        {{-- Prize Badge --}}
                        <span class="prize-badge position-absolute" style="top: 16px; right: 16px; padding: 4px 12px; border-radius: 4px; font-size: 0.78rem;">
                            ${{ number_format($t['prize_pool']) }}
                        </span>
                        {{-- Status Badge --}}
                        <div class="position-absolute" style="bottom: 16px; left: 16px;">
                            @if($t['status'] === 'live')
                                <span class="badge-arena badge-live">● Live Now</span>
                            @else
                                <span class="badge-arena badge-green">Registration Open</span>
                            @endif
                        </div>
                    </div>

                    {{-- Content --}}
                    <div class="p-4">
                        <div style="font-family:var(--font-hud); font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,215,0,0.6); margin-bottom:8px;">
                            {{ $t['game_name'] }} · {{ $t['region'] }}
                        </div>
                        <h3 class="tournament-card-name mb-2">{{ $t['name'] }}</h3>
                        <p style="font-family:var(--font-hud); font-size:0.75rem; color:var(--arena-text-muted); margin:0;">
                            Format: {{ $t['format'] }} · Starts: {{ \Carbon\Carbon::parse($t['start_date'])->format('M d, Y') }}
                        </p>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ALL TOURNAMENTS --}}
    <div>
        <h2 style="font-family:var(--font-hud); font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0,212,255,0.5); margin-bottom:16px;">
            All Tournaments
            <span style="display:inline-block; width:30px; height:1px; background:linear-gradient(90deg,rgba(0,212,255,0.4),transparent); vertical-align:middle; margin-left:8px;"></span>
        </h2>

        {{-- Filter Bar --}}
        <div class="filter-hud p-3 mb-4">
            <div class="filter-hud-inner">
                <form method="GET" action="{{ $eventsIndexRoute }}" class="row g-2 align-items-center">
                    <div class="col-md-4">
                        <select name="game" class="form-select input-arena" onchange="this.form.submit()">
                            <option value="">All Games</option>
                            @foreach($games as $game)
                                @php
                                    $gameValue = is_array($game) ? ($game['id'] ?? $game['slug']) : $game->slug;
                                    $gameLabel = is_array($game) ? ($game['name'] ?? '') : ($game->translationName() ?? $game->name);
                                @endphp
                                <option value="{{ $gameValue }}" {{ request('game') == $gameValue ? 'selected' : '' }}>{{ $gameLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select name="status" class="form-select input-arena" onchange="this.form.submit()">
                            <option value="">All Statuses</option>
                            <option value="registration_open" {{ request('status') == 'registration_open' ? 'selected' : '' }}>Registration Open</option>
                            <option value="live" {{ request('status') == 'live' ? 'selected' : '' }}>Live Now</option>
                            <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="region" class="form-select input-arena" onchange="this.form.submit()">
                            <option value="">All Regions</option>
                            @foreach(['MENA', 'EU', 'NA', 'APAC'] as $r)
                                <option value="{{ $r }}" {{ request('region') == $r ? 'selected' : '' }}>{{ $r }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ $eventsIndexRoute }}" class="btn-arena btn-ghost btn-sm w-100 py-2">Clear</a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Tournaments Grid --}}
        <div class="row g-4">
            @forelse($tournaments as $i => $t)
            <div class="col-md-6 col-lg-3">
                <a class="tournament-card d-block text-decoration-none" href="{{ $tournamentUrl($t['slug']) }}">
                    {{-- Cover --}}
                    <div class="tournament-card-cover" style="position:relative; overflow:hidden;">
                        <img src="{{ asset('assets/images/generated/tournaments/tournament-cover-' . (($i % 2) + 1) . '.webp') }}"
                             alt="{{ $t['name'] }}"
                             style="width:100%; height:100%; object-fit:cover; transition: transform 400ms ease;"
                             onerror="this.parentNode.style.background='linear-gradient(135deg,var(--arena-surface-03),var(--arena-surface-04))';">
                        {{-- Overlay --}}
                        <div style="position:absolute; inset:0; background:linear-gradient(to top, rgba(9,11,15,1) 0%, rgba(9,11,15,0.3) 60%, transparent 100%);"></div>
                        {{-- Prize --}}
                        <div class="prize-badge position-absolute" style="top: 12px; right: 12px; font-size: 0.7rem; padding: 3px 8px;">
                            ${{ number_format($t['prize_pool']) }}
                        </div>
                        {{-- Status --}}
                        <div style="position:absolute; bottom:12px; left:12px;">
                            @if($t['status'] === 'live')
                                <span class="badge-arena badge-live" style="font-size:0.6rem;">● Live</span>
                            @elseif($t['status'] === 'registration_open')
                                <span class="badge-arena badge-green" style="font-size:0.6rem;">Open</span>
                            @elseif($t['status'] === 'completed')
                                <span class="badge-arena badge-muted" style="font-size:0.6rem;">Ended</span>
                            @else
                                <span class="badge-arena badge-accent" style="font-size:0.6rem;">{{ $t['status_label'] }}</span>
                            @endif
                        </div>
                    </div>

                    {{-- Card Body --}}
                    <div class="tournament-card-body">
                        <div class="tournament-card-name">{{ $t['name'] }}</div>
                        <div class="tournament-card-meta">
                            <span class="badge-arena badge-muted" style="font-size: 0.6rem;">{{ $t['game_name'] }}</span>
                            <span style="font-family:var(--font-hud); font-size:0.65rem; color:var(--arena-text-muted);">{{ $t['region'] }}</span>
                        </div>
                    </div>

                    {{-- Card Footer --}}
                    <div class="tournament-card-footer">
                        <div style="font-family:var(--font-hud); font-size:0.68rem; color:var(--arena-text-muted); display:flex; align-items:center; gap:5px;">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                            {{ $t['registered_teams'] }}/{{ $t['max_teams'] }} Teams
                        </div>
                        <div style="font-family:var(--font-hud); font-size:0.68rem; color:var(--arena-text-muted); display:flex; align-items:center; gap:5px;">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                            {{ \Carbon\Carbon::parse($t['start_date'])->format('M d') }}
                        </div>
                    </div>
                </a>
            </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(255,215,0,0.05); border:1px solid rgba(255,215,0,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(255,215,0,0.4)" stroke-width="1.5"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>
                    </div>
                    <div class="empty-title" style="font-size:1rem; margin-bottom:8px;">No Tournaments Found</div>
                    <p class="page-subheading" style="margin-bottom:16px;">Adjust your filter choices to discover active gaming leagues.</p>
                </div>
            </div>
            @endforelse
        </div>
    </div>
</div>
@endsection
