@php
    use App\Support\Format;
@endphp

<x-layouts.app :title="$channel->title.' – YouTube channel stats'"
    :description="'Subscriber and view statistics for '.$channel->title.'.'">

    <div class="flex flex-wrap items-center gap-5">
        @if ($channel->thumbnail_url)
            <img src="{{ $channel->thumbnail_url }}" alt="" referrerpolicy="no-referrer" class="size-20 rounded-full bg-zinc-200">
        @endif
        <div class="min-w-0 flex-1">
            <h1 class="truncate text-2xl font-semibold tracking-tight">{{ $channel->title }}</h1>
            <p class="mt-1 text-sm text-zinc-500">
                {{ collect([
                    $channel->handle,
                    config("markets.countries.{$channel->market_country}"),
                    config("markets.categories.{$channel->category}.name"),
                ])->filter()->implode(' · ') }}
            </p>
        </div>
        <a href="{{ $channel->youtubeUrl() }}" rel="noopener" target="_blank"
            class="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">View on YouTube</a>
    </div>

    <dl class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
        @foreach ([
            'Subscribers' => $channel->subscriber_hidden ? 'Hidden' : Format::compact($channel->subscriber_count),
            'Total views' => Format::compact($channel->view_count),
            'Videos' => number_format((int) $channel->video_count),
            'Joined' => $channel->published_at?->format('M Y') ?? '—',
        ] as $label => $value)
            <div class="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
                <dt class="text-xs uppercase tracking-wide text-zinc-500">{{ $label }}</dt>
                <dd class="mt-1 text-2xl font-semibold tabular-nums">{{ $value }}</dd>
            </div>
        @endforeach
    </dl>

    @if ($ranks)
        <div class="mt-4 flex flex-wrap gap-2">
            @foreach ($ranks as $rank)
                <a href="{{ $rank['url'] }}"
                    class="rounded-full border border-zinc-200 bg-white px-3 py-1 text-sm hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900">
                    <span class="font-semibold">#{{ number_format($rank['rank']) }}</span>
                    <span class="text-zinc-500">{{ $rank['label'] }}</span>
                </a>
            @endforeach
        </div>
    @endif

    <section class="mt-10 grid gap-6 lg:grid-cols-2">
        <div class="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
            <h2 class="mb-2 font-semibold">Subscribers</h2>
            <div data-growth-chart='@json(['dates' => $chart['dates'], 'series' => [['name' => 'Subscribers', 'data' => $chart['subscribers']]]])'></div>
        </div>
        <div class="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
            <h2 class="mb-2 font-semibold">Total views</h2>
            <div data-growth-chart='@json(['dates' => $chart['dates'], 'series' => [['name' => 'Views', 'data' => $chart['views']]]])'></div>
        </div>
    </section>
    <p class="mt-2 text-xs text-zinc-500">
        Daily snapshots, last {{ \App\Compliance\Compliance::historyDays() ?? 365 }} days. Subscriber counts are rounded by YouTube.
    </p>

    <section class="mt-10">
        <h2 class="mb-4 text-lg font-semibold">Recent videos</h2>
        @if ($videos->isEmpty())
            <p class="text-sm text-zinc-500">No recent videos tracked yet.</p>
        @else
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($videos as $video)
                    <a href="{{ $video->youtubeUrl() }}" rel="noopener" target="_blank"
                        class="group overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
                        @if ($video->thumbnail_url)
                            <img src="{{ $video->thumbnail_url }}" alt="" loading="lazy" referrerpolicy="no-referrer"
                                class="aspect-video w-full bg-zinc-200 object-cover">
                        @endif
                        <div class="p-3">
                            <p class="line-clamp-2 text-sm font-medium group-hover:underline">{{ $video->title }}</p>
                            <p class="mt-1 text-xs text-zinc-500">
                                {{ Format::compact($video->view_count) }} views · {{ $video->published_at->diffForHumans() }}
                                @if ($video->is_short) · Short @endif
                            </p>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </section>
</x-layouts.app>