@extends('layouts.app')

@php
    $title = 'Leaderboard - ' . config('app.name');
    $pill = fn (bool $active) => $active
        ? 'bg-primary-600 text-white border-primary-600'
        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700';
    $tabClass = fn (bool $active) => $active
        ? 'border-primary-500 text-gray-900 dark:text-white'
        : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-200';
    $periodLabel = ['today' => 'today', 'week' => 'this week', 'month' => 'this month'][$period] ?? null;
@endphp

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Leaderboard</h1>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">The most upvoted and the newest products from European makers.</p>

    <!-- Tabs -->
    <div class="mt-6 flex space-x-8 border-b border-gray-200 dark:border-gray-700">
        <a href="{{ route('leaderboard', ['tab' => 'top', 'period' => $period]) }}"
           class="inline-flex items-center px-1 pb-3 border-b-2 text-sm font-medium {{ $tabClass($tab === 'top') }}">Top</a>
        <a href="{{ route('leaderboard', ['tab' => 'new']) }}"
           class="inline-flex items-center px-1 pb-3 border-b-2 text-sm font-medium {{ $tabClass($tab === 'new') }}">New</a>
    </div>

    <!-- Period pills -->
    @if($tab === 'top')
        <div class="mt-4 flex flex-wrap gap-2">
            @foreach($periods as $key => $label)
                <a href="{{ route('leaderboard', ['tab' => 'top', 'period' => $key]) }}"
                   class="inline-flex items-center px-3 py-1 rounded-full border text-sm font-medium {{ $pill($period === $key) }}">{{ $label }}</a>
            @endforeach
        </div>
    @endif

    <!-- List -->
    @if($products->isEmpty())
        <div class="mt-8 text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            @if($tab === 'new')
                <p class="text-gray-600 dark:text-gray-400">No products yet.</p>
            @else
                <p class="text-gray-900 dark:text-white font-medium">No upvotes yet {{ $periodLabel ?? 'at all' }}</p>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Try a longer period.</p>
            @endif
        </div>
    @else
        <ol class="mt-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
            @foreach($products as $product)
                <li class="flex items-center gap-4 p-4">
                    <span data-rank="{{ $products->firstItem() + $loop->index }}"
                          class="w-8 text-xl font-bold text-gray-400 dark:text-gray-500 text-center">{{ $products->firstItem() + $loop->index }}</span>

                    <a href="{{ route('products.show', $product) }}" class="flex-shrink-0">
                        @if($product->thumbnail_url)
                            <img src="{{ $product->thumbnail_url }}" alt="{{ $product->title }}" class="h-12 w-12 rounded-lg object-cover" loading="lazy">
                        @else
                            <div class="h-12 w-12 rounded-lg bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-900 dark:to-primary-800 flex items-center justify-center text-primary-700 dark:text-primary-200 font-semibold">
                                {{ strtoupper(substr($product->title, 0, 1)) }}
                            </div>
                        @endif
                    </a>

                    <div class="flex-1 min-w-0">
                        <a href="{{ route('products.show', $product) }}" class="text-base font-semibold text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400">{{ $product->title }}</a>
                        <p class="text-sm text-gray-600 dark:text-gray-400 truncate">{{ Str::limit($product->description, 100) }}</p>
                        <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                            @foreach($product->tags->take(3) as $tag)
                                <span>#{{ $tag->name }}</span>
                            @endforeach
                            <x-product.badges :product="$product" />
                        </div>
                    </div>

                    <div class="flex-shrink-0 text-center">
                        @include('components.product.upvote-button', ['product' => $product, 'size' => 'md'])
                        @if($tab === 'top' && $periodLabel)
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ $product->period_upvotes_count }} {{ $periodLabel }}</p>
                        @endif
                    </div>
                </li>
            @endforeach
        </ol>

        <div class="mt-6">{{ $products->links() }}</div>
    @endif
</div>
@endsection