@extends('layouts.app')
@section('title', $tournament->title)
@section('show-header', true)
@section('back-button', true)
@section('page-title', 'Match Details')

@section('content')
{{-- Banner --}}
<div class="relative">
    <img src="{{ $tournament->banner_url }}" alt="{{ $tournament->title }}" class="w-full h-52 object-cover">
    <div class="absolute inset-0 bg-gradient-to-t from-[#0f0d2e] via-[#0f0d2e]/40 to-transparent"></div>
    <div class="absolute bottom-4 left-4 right-4">
        <div class="flex items-center gap-2 mb-2">
            @if($tournament->status === 'upcoming')
            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-blue-500 text-white">Upcoming</span>
            @elseif($tournament->status === 'ongoing')
            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-green-500 text-white animate-pulse">🔴 Live</span>
            @elseif($tournament->status === 'result')
            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-500 text-white">Result</span>
            @elseif($tournament->status === 'cancelled')
            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white">Cancelled</span>
            @endif
            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-white/20 text-white uppercase">{{ $tournament->match_type }}</span>
        </div>
        <h1 class="text-white font-black text-xl leading-tight">{{ $tournament->title }}</h1>
    </div>
</div>

<div class="px-4 py-4 space-y-4">

    {{-- Prize Pool Info --}}
    <div class="bg-gradient-to-r from-indigo-600/20 to-purple-600/20 border border-indigo-500/30 rounded-2xl p-4">
        <p class="text-indigo-300 text-xs uppercase tracking-wider font-semibold mb-3">Prize Distribution</p>
        <div class="grid grid-cols-2 gap-3">
            <div class="bg-white/5 rounded-xl p-3 text-center">
                <p class="text-yellow-400 font-black text-lg">৳{{ number_format($tournament->prize_1st) }}</p>
                <p class="text-gray-400 text-xs">🥇 1st Place</p>
            </div>
            <div class="bg-white/5 rounded-xl p-3 text-center">
                <p class="text-gray-300 font-black text-lg">৳{{ number_format($tournament->prize_2nd) }}</p>
                <p class="text-gray-400 text-xs">🥈 2nd Place</p>
            </div>
            <div class="bg-white/5 rounded-xl p-3 text-center">
                <p class="text-orange-400 font-black text-lg">৳{{ number_format($tournament->prize_3rd) }}</p>
                <p class="text-gray-400 text-xs">🥉 3rd Place</p>
            </div>
            <div class="bg-white/5 rounded-xl p-3 text-center">
                <p class="text-green-400 font-black text-lg">৳{{ number_format($tournament->per_kill_prize) }}</p>
                <p class="text-gray-400 text-xs">⚔️ Per Kill</p>
            </div>
        </div>
        <div class="mt-3 pt-3 border-t border-white/10 flex justify-between">
            <span class="text-gray-400 text-sm">Total Prize Pool</span>
            <span class="text-white font-bold">৳{{ number_format($tournament->total_prize) }}</span>
        </div>
    </div>

    {{-- Match Info --}}
    <div class="card p-4 rounded-2xl border border-white/10 bg-white/5 space-y-3">
        <p class="text-gray-400 text-xs uppercase tracking-wider font-semibold">Match Info</p>
        @if($tournament->map)
        <div class="flex justify-between text-sm"><span class="text-gray-400">Map</span><span class="text-white font-medium">{{ $tournament->map }}</span></div>
        @endif
        @if($tournament->version)
        <div class="flex justify-between text-sm"><span class="text-gray-400">Version</span><span class="text-white font-medium">{{ $tournament->version }}</span></div>
        @endif
        <div class="flex justify-between text-sm"><span class="text-gray-400">Mode</span><span class="text-white font-medium uppercase">{{ $tournament->match_type }}</span></div>
        <div class="flex justify-between text-sm"><span class="text-gray-400">Entry Fee</span><span class="text-white font-medium">{{ $tournament->entry_fee > 0 ? '৳'.number_format($tournament->entry_fee) : 'Free' }}</span></div>
        <div class="flex justify-between text-sm"><span class="text-gray-400">Scheduled</span><span class="text-white font-medium">{{ $tournament->scheduled_at->format('d M Y, g:ia') }}</span></div>
        <div class="flex justify-between text-sm">
            <span class="text-gray-400">Players</span>
            <span class="text-white font-medium">{{ $tournament->registered_players }}/{{ $tournament->max_players }}</span>
        </div>
    </div>

    {{-- Room ID & Password (only for joined users when ongoing) --}}
    @if($hasJoined && $tournament->status === 'ongoing' && $tournament->room_id)
    <div class="bg-green-500/10 border border-green-500/40 rounded-2xl p-4">
        <p class="text-green-400 text-xs uppercase tracking-wider font-semibold mb-3">🚀 Room Details</p>
        <div class="grid grid-cols-2 gap-3">
            <div class="bg-black/30 rounded-xl p-3 text-center">
                <p class="text-gray-400 text-xs mb-1">Room ID</p>
                <p class="text-white font-black text-lg font-mono">{{ $tournament->room_id }}</p>
                <button onclick="copyText('{{ $tournament->room_id }}')" class="text-indigo-400 text-xs mt-1">Copy</button>
            </div>
            <div class="bg-black/30 rounded-xl p-3 text-center">
                <p class="text-gray-400 text-xs mb-1">Password</p>
                <p class="text-white font-black text-lg font-mono">{{ $tournament->room_password ?: 'None' }}</p>
                @if($tournament->room_password)
                <button onclick="copyText('{{ $tournament->room_password }}')" class="text-indigo-400 text-xs mt-1">Copy</button>
                @endif
            </div>
        </div>
    </div>
    @endif

    {{-- My Registration Info --}}
    @if($hasJoined && $myRegistration)
    <div class="bg-indigo-500/10 border border-indigo-500/30 rounded-2xl p-4">
        <p class="text-indigo-300 text-xs uppercase font-semibold mb-2">Your Registration</p>
        <div class="grid grid-cols-2 gap-2 text-sm">
            <div><span class="text-gray-400">Game UID:</span> <span class="text-white font-mono">{{ $myRegistration->game_uid }}</span></div>
            <div><span class="text-gray-400">Name:</span> <span class="text-white">{{ $myRegistration->player_name }}</span></div>
            @if($tournament->status === 'result')
            <div><span class="text-gray-400">Kills:</span> <span class="text-white font-bold">{{ $myRegistration->kills }}</span></div>
            <div><span class="text-gray-400">Position:</span> <span class="text-white font-bold">#{{ $myRegistration->position ?? '-' }}</span></div>
            <div class="col-span-2"><span class="text-gray-400">Prize Won:</span> <span class="text-yellow-400 font-bold text-base">৳{{ number_format($myRegistration->prize_won, 2) }}</span></div>
            @endif
        </div>
    </div>
    @endif

    {{-- Join Button --}}
    @if(!$hasJoined && $tournament->status === 'upcoming')
    @if(!$tournament->getIsFull())
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
        <p class="text-white font-semibold mb-3">Join Tournament</p>
        <form method="POST" action="{{ route('matches.join', $tournament) }}">
            @csrf
            <div class="space-y-3">
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Your In-Game UID</label>
                    <input type="text" name="game_uid" placeholder="Enter your UID" required
                        class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500">
                    @error('game_uid')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Your In-Game Name</label>
                    <input type="text" name="player_name" placeholder="Enter your player name" required
                        class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500">
                    @error('player_name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                @error('join')<p class="text-red-400 text-xs">{{ $message }}</p>@enderror
                <div class="flex items-center justify-between text-sm text-gray-400 bg-black/20 rounded-xl px-3 py-2">
                    <span>Entry Fee</span>
                    <span class="text-white font-bold">{{ $tournament->entry_fee > 0 ? '৳'.number_format($tournament->entry_fee) : 'Free' }}</span>
                </div>
                <div class="flex items-center justify-between text-sm text-gray-400 bg-black/20 rounded-xl px-3 py-2">
                    <span>Your Balance</span>
                    <span class="{{ auth()->user()->balance >= $tournament->entry_fee ? 'text-green-400' : 'text-red-400' }} font-bold">৳{{ number_format(auth()->user()->balance, 2) }}</span>
                </div>
                <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold rounded-xl hover:from-indigo-600 hover:to-purple-700 transition shadow-lg shadow-indigo-500/25">
                    🎮 Join Now — ৳{{ number_format($tournament->entry_fee) }}
                </button>
            </div>
        </form>
    </div>
    @else
    <div class="bg-red-500/10 border border-red-500/30 rounded-2xl p-4 text-center">
        <p class="text-red-400 font-semibold">Tournament Full</p>
        <p class="text-gray-500 text-sm mt-1">No more slots available</p>
    </div>
    @endif
    @elseif($hasJoined)
    <div class="bg-green-500/10 border border-green-500/30 rounded-2xl p-3 text-center">
        <p class="text-green-400 font-semibold text-sm">✅ You have joined this tournament</p>
    </div>
    @endif

    {{-- Rules --}}
    @if($tournament->rules)
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
        <p class="text-gray-400 text-xs uppercase tracking-wider font-semibold mb-3">Rules & Regulations</p>
        <div class="text-sm text-gray-300 space-y-1 whitespace-pre-line">{{ $tournament->rules }}</div>
    </div>
    @endif

    {{-- Players List --}}
    @if($players->count())
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
        <p class="text-gray-400 text-xs uppercase tracking-wider font-semibold mb-3">
            {{ $tournament->status === 'result' ? 'Results' : 'Registered Players' }}
            <span class="text-white">({{ $players->count() }})</span>
        </p>
        <div class="space-y-2 max-h-64 overflow-y-auto">
            @foreach($players as $i => $player)
            <div class="flex items-center justify-between text-sm bg-black/20 rounded-xl px-3 py-2">
                <div class="flex items-center gap-2">
                    @if($tournament->status === 'result' && $player->position)
                    <span class="text-xs font-bold {{ $player->position == 1 ? 'text-yellow-400' : ($player->position == 2 ? 'text-gray-300' : ($player->position == 3 ? 'text-orange-400' : 'text-gray-500')) }}">
                        #{{ $player->position }}
                    </span>
                    @else
                    <span class="text-xs text-gray-500">#{{ $i+1 }}</span>
                    @endif
                    <span class="text-white">{{ $player->player_name }}</span>
                </div>
                @if($tournament->status === 'result')
                <div class="flex items-center gap-3 text-xs text-gray-400">
                    <span>⚔️ {{ $player->kills }} kills</span>
                    @if($player->prize_won > 0)
                    <span class="text-yellow-400 font-bold">৳{{ number_format($player->prize_won) }}</span>
                    @endif
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Description --}}
    @if($tournament->description)
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
        <p class="text-gray-400 text-xs uppercase tracking-wider font-semibold mb-2">About</p>
        <p class="text-sm text-gray-300">{{ $tournament->description }}</p>
    </div>
    @endif

</div>
@endsection

@push('scripts')
<script>
    function copyText(text) {
        navigator.clipboard.writeText(text).then(() => {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.innerHTML = '<div class="bg-green-500 text-white px-4 py-2 rounded-xl text-sm font-medium shadow-2xl">Copied!</div>';
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        });
    }

    // Countdown timers
    document.querySelectorAll('.countdown').forEach(el => {
        const target = parseInt(el.dataset.time) * 1000;
        function update() {
            const diff = target - Date.now();
            if (diff <= 0) { el.textContent = 'Starting soon'; return; }
            const d = Math.floor(diff / 86400000);
            const h = Math.floor((diff % 86400000) / 3600000);
            const m = Math.floor((diff % 3600000) / 60000);
            const s = Math.floor((diff % 60000) / 1000);
            el.textContent = d > 0 ? `${d}d ${h}h ${m}m` : `${h}h ${m}m ${s}s`;
        }
        update();
        setInterval(update, 1000);
    });
</script>
@endpush