@php
    use App\Ranking\Scope;
    use App\Support\Format;

    $countries = config('markets.countries');
    $categories = config('markets.categories');
    $scopeLabel = collect([
        $scope->country === Scope::ALL ? null : $countries[$scope->country],
        $scope->category === Scope::ALL ? null : $categories[$scope->category]['name'],
    ])->filter()->implode(' · ');
@endphp

<x-layouts.app
    :title="'Most Subscribed YouTube Channels'.($scopeLabel ? ' – '.$scopeLabel : '')"
    description="YouTube channels ranked by subscribers, filterable by country, category and size.">

    <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight">Most Subscribers</h1>
            <p class="mt-1 text-sm text-zinc-500">
                {{ collect([
                    $scopeLabel ?: 'All markets',
                    $date ? 'updated '.\Illuminate\Support\Carbon::parse($date)->format('j M Y') : null,
                ])->filter()->implode(' · ') }}
            </p>
        </div>

        <form method="GET" action="{{ route('rankings.subscribers') }}" class="flex flex-wrap gap-2 text-sm">
            <select name="country" onchange="this.form.submit()" aria-label="Country"
                class="rounded-md border border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-900">
                <option value="">All markets</option>
                @foreach ($countries as $code => $name)
                    <option value="{{ $code }}" @selected($scope->country === $code)>{{ $name }}</option>
                @endforeach
            </select>
            <select name="category" onchange="this.form.submit()" aria-label="Category"
                class="rounded-md border border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-900">
                <option value="">All categories</option>
                @foreach ($categories as $slug => $category)
                    <option value="{{ $slug }}" @selected($scope->category === $slug)>{{ $category['name'] }}</option>
                @endforeach
            </select>
            <select name="subs" onchange="this.form.submit()" aria-label="Subscriber range"
                class="rounded-md border border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-900">
                <option value="">Any size</option>
                @foreach (config('markets.subscriber_ranges') as $key => $range)
                    <option value="{{ $key }}" @selected($rangeKey === $key)>{{ $range['label'] }}</option>
                @endforeach
            </select>
            <noscript><button class="rounded-md bg-zinc-900 px-3 py-2 text-white">Filter</button></noscript>
        </form>
    </div>

    @if ($entries->isEmpty())
        <div class="rounded-lg border border-dashed border-zinc-300 p-12 text-center text-zinc-500 dark:border-zinc-700">
            No channels match these filters yet.
        </div>
    @else
        <div class="overflow-x-auto rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
            <table class="w-full text-sm">
                <thead class="border-b border-zinc-200 text-left text-xs uppercase tracking-wide text-zinc-500 dark:border-zinc-800">
                    <tr>
                        <th class="w-16 px-4 py-3 text-right">#</th>
                        <th class="px-4 py-3">Channel</th>
                        <th class="px-4 py-3 text-right">Subscribers</th>
                        <th class="hidden px-4 py-3 text-right sm:table-cell">Views</th>
                        <th class="hidden px-4 py-3 text-right md:table-cell">Videos</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @foreach ($entries as $entry)
                        <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
                            <td class="px-4 py-3 text-right tabular-nums">
                                <div class="font-semibold">{{ $entry->rank }}</div>
                                @if ($entry->prev_rank && $entry->prev_rank !== $entry->rank)
                                    <div class="text-xs {{ $entry->prev_rank > $entry->rank ? 'text-emerald-600' : 'text-red-600' }}">
                                        {{ $entry->prev_rank > $entry->rank ? '▲' : '▼' }}{{ abs($entry->prev_rank - $entry->rank) }}
                                    </div>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <a href="{{ route('channels.show', $entry->handle ?: $entry->yt_id) }}" class="flex items-center gap-3">
                                    @if ($entry->thumbnail_url)
                                        <img src="{{ $entry->thumbnail_url }}" alt="" loading="lazy" referrerpolicy="no-referrer"
                                            class="size-10 shrink-0 rounded-full bg-zinc-200">
                                    @endif
                                    <span>
                                        <span class="font-medium hover:underline">{{ $entry->title }}</span>
                                        <span class="block text-xs text-zinc-500">
                                            {{ collect([
                                                $countries[$entry->market_country] ?? null,
                                                $categories[$entry->category]['name'] ?? null,
                                            ])->filter()->implode(' · ') }}
                                        </span>
                                    </span>
                                </a>
                            </td>
                            <td class="px-4 py-3 text-right font-semibold tabular-nums">{{ Format::compact($entry->subscriber_count) }}</td>
                            <td class="hidden px-4 py-3 text-right tabular-nums text-zinc-600 sm:table-cell dark:text-zinc-400">{{ Format::compact($entry->view_count) }}</td>
                            <td class="hidden px-4 py-3 text-right tabular-nums text-zinc-600 md:table-cell dark:text-zinc-400">{{ number_format((int) $entry->video_count) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

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

    <p class="mt-6 text-xs text-zinc-500">
        Subscriber counts are the public figures reported by YouTube, which rounds them to three significant figures.
        Channels that hide their subscriber count are not ranked.
    </p>
</x-layouts.app>