@extends('admin.layout')

@section('title', 'Admin Overview')

@section('admin')
    <div class="flex flex-wrap items-center justify-between gap-3">
        <h1 class="text-2xl font-extrabold tracking-tight">Overview</h1>
        <a href="{{ route('admin.prompts.create') }}" class="btn btn-primary">+ New prompt</a>
    </div>

    <div class="mt-7 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ([
            ['Prompts', $stats['prompts'], 'total in the database'],
            ['Published', $stats['published'], 'visible on the site'],
            ['Premium', $stats['premium'], 'behind the paywall'],
            ['Categories', $stats['categories'], 'browse groupings'],
            ['Users', $stats['users'], 'registered accounts'],
            ['Members', $stats['members'], 'with premium access'],
        ] as [$label, $value, $hint])
            <div class="surface p-5">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $label }}</p>
                <p class="mt-2 text-3xl font-extrabold text-white">{{ $value }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
            </div>
        @endforeach
    </div>

    <div class="mt-10 grid gap-6 lg:grid-cols-2">
        <div class="surface p-5">
            <h2 class="text-sm font-bold uppercase tracking-wide text-slate-500">Recently added</h2>
            <ul class="mt-4 divide-y divide-ink-700">
                @forelse ($recent as $prompt)
                    <li class="flex items-center justify-between gap-3 py-2.5">
                        <a href="{{ route('admin.prompts.edit', $prompt) }}" class="min-w-0 truncate text-sm font-medium text-slate-200 hover:text-brand-300">
                            {{ $prompt->title }}
                        </a>
                        <span class="shrink-0 text-[11px] font-bold uppercase {{ $prompt->is_premium ? 'text-brand-300' : 'text-emerald-400' }}">
                            {{ $prompt->is_premium ? 'Premium' : 'Free' }}
                        </span>
                    </li>
                @empty
                    <li class="py-3 text-sm text-slate-500">No prompts yet.</li>
                @endforelse
            </ul>
        </div>

        <div class="surface p-5">
            <h2 class="text-sm font-bold uppercase tracking-wide text-slate-500">Most viewed</h2>
            <ul class="mt-4 divide-y divide-ink-700">
                @forelse ($popular as $prompt)
                    <li class="flex items-center justify-between gap-3 py-2.5">
                        <a href="{{ route('prompts.show', $prompt) }}" class="min-w-0 truncate text-sm font-medium text-slate-200 hover:text-brand-300">
                            {{ $prompt->title }}
                        </a>
                        <span class="shrink-0 text-xs text-slate-500">{{ number_format($prompt->views) }}</span>
                    </li>
                @empty
                    <li class="py-3 text-sm text-slate-500">No views recorded yet.</li>
                @endforelse
            </ul>
        </div>
    </div>
@endsection