@extends('layouts.app')
@section('title', 'My Matches')
@section('show-header', true)
@section('back-button', true)
@section('page-title', 'My Matches')

@section('content')
{{-- Tabs --}}
<div class="flex border-b border-white/10 px-4 sticky top-14 bg-[#0f0d2e] z-10">
    @foreach(['upcoming' => 'Upcoming', 'ongoing' => 'Live', 'result' => 'Results'] as $key => $label)
    <a href="{{ route('matches.my', ['tab' => $key]) }}"
       class="flex-1 text-center py-3 text-sm font-semibold border-b-2 transition {{ $tab === $key ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-gray-400' }}">
        {{ $label }}
    </a>
    @endforeach
</div>

<div class="px-4 pt-4 space-y-3 pb-4">
    @forelse($registrations as $reg)
    <a href="{{ route('matches.show', $reg->tournament->slug) }}" class="block">
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4 hover:border-indigo-500/30 transition">
        <div class="flex gap-3">
            <img src="{{ $reg->tournament->banner_url }}" class="w-16 h-16 rounded-xl object-cover flex-shrink-0" alt="">
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-400">{{ $reg->tournament->game->name }}</span>
                    @if($reg->tournament->status === 'upcoming')
                    <span class="text-xs bg-blue-500/20 text-blue-300 px-2 py-0.5 rounded-full">Upcoming</span>
                    @elseif($reg->tournament->status === 'ongoing')
                    <span class="text-xs bg-green-500/20 text-green-300 px-2 py-0.5 rounded-full animate-pulse">Live</span>
                    @elseif($reg->tournament->status === 'result')
                    <span class="text-xs bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded-full">Result</span>
                    @endif
                </div>
                <h3 class="text-white font-bold text-sm truncate">{{ $reg->tournament->title }}</h3>
                <p class="text-gray-400 text-xs mt-1">{{ $reg->tournament->scheduled_at->format('d M Y, g:ia') }}</p>
            </div>
        </div>

        @if($tab === 'result')
        <div class="mt-3 pt-3 border-t border-white/10 grid grid-cols-3 gap-2">
            <div class="text-center">
                <p class="text-white font-bold">{{ $reg->kills }}</p>
                <p class="text-gray-500 text-xs">Kills</p>
            </div>
            <div class="text-center">
                <p class="text-white font-bold">{{ $reg->position ? '#'.$reg->position : '-' }}</p>
                <p class="text-gray-500 text-xs">Position</p>
            </div>
            <div class="text-center">
                <p class="text-yellow-400 font-bold">৳{{ number_format($reg->prize_won) }}</p>
                <p class="text-gray-500 text-xs">Earned</p>
            </div>
        </div>
        @endif

        @if($tab === 'ongoing' && $reg->tournament->room_id)
        <div class="mt-3 pt-3 border-t border-white/10 flex justify-around text-center">
            <div>
                <p class="text-xs text-gray-400 mb-0.5">Room ID</p>
                <p class="text-white font-mono font-bold text-sm">{{ $reg->tournament->room_id }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 mb-0.5">Password</p>
                <p class="text-white font-mono font-bold text-sm">{{ $reg->tournament->room_password ?: 'None' }}</p>
            </div>
        </div>
        @endif
    </div>
    </a>
    @empty
    <div class="text-center py-16 text-gray-500">
        <svg class="w-14 h-14 mx-auto mb-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <p class="font-semibold">No {{ $tab }} matches</p>
        <a href="{{ route('matches.index') }}" class="text-indigo-400 text-sm mt-2 inline-block">Browse Tournaments</a>
    </div>
    @endforelse

    {{ $registrations->withQueryString()->links('user.components.pagination') }}
</div>
@endsection