@extends('layouts.admin')

@section('title', 'Categories')
@section('heading', 'Registration categories')
@section('subheading', 'Read-only overview of capacity, rules and live usage.')

@section('content')
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        @forelse ($categories as $category)
            @php
                $pct = $category->capacity ? min(100, round($category->approved_count / $category->capacity * 100)) : null;
            @endphp
            <article class="surface flex flex-col p-5 sm:p-6">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h2 class="font-display text-lg font-semibold text-navy-900">{{ $category->name }}</h2>
                        <p class="text-xs uppercase tracking-wider text-navy-500">{{ $category->entity_type }} &middot; <code>{{ $category->slug }}</code></p>
                    </div>
                    <span class="status-pill {{ $category->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600 ring-1 ring-slate-200' }}">{{ $category->is_active ? 'Active' : 'Inactive' }}</span>
                </div>

                @if ($category->description)
                    <p class="mt-3 text-sm text-navy-500">{{ $category->description }}</p>
                @endif

                <div class="mt-5">
                    <div class="flex items-baseline justify-between text-sm">
                        <span class="text-navy-500">Approved</span>
                        <span class="font-semibold text-navy-900">{{ $category->approved_count }}{{ $category->capacity ? ' / '.$category->capacity : '' }}@if ($pct !== null) <span class="text-navy-500">({{ $pct }}%)</span>@endif</span>
                    </div>
                    <div class="mt-1.5 h-2 overflow-hidden rounded-full bg-navy-100">
                        <div class="h-full rounded-full {{ $pct !== null && $pct >= 90 ? 'bg-coral-500' : 'bg-turquoise-500' }}" style="width: {{ $pct ?? 0 }}%"></div>
                    </div>
                    @if (! $category->capacity)<p class="mt-1 text-xs text-navy-500">No capacity limit</p>@endif
                </div>

                <dl class="mt-5 grid grid-cols-3 gap-2 text-center">
                    <div class="rounded-xl bg-mist p-2"><dd class="font-display text-xl font-semibold text-navy-900">{{ $category->total_count }}</dd><dt class="text-[10px] uppercase tracking-wide text-navy-500">Total</dt></div>
                    <div class="rounded-xl bg-emerald-50 p-2"><dd class="font-display text-xl font-semibold text-emerald-700">{{ $category->approved_count }}</dd><dt class="text-[10px] uppercase tracking-wide text-navy-500">Approved</dt></div>
                    <div class="rounded-xl bg-sky-50 p-2"><dd class="font-display text-xl font-semibold text-sky-700">{{ $category->waitlisted_count }}</dd><dt class="text-[10px] uppercase tracking-wide text-navy-500">Waitlist</dt></div>
                </dl>

                <ul class="mt-5 space-y-1 border-t border-navy-100 pt-4 text-xs text-navy-500">
                    <li>Ages: {{ $category->min_age ?? 'any' }}{{ $category->max_age ? '–'.$category->max_age : ($category->min_age ? '+' : '') }}</li>
                    <li>Approval: {{ $category->requires_manual_approval ? 'Manual review required' : 'Automatic after verification' }}</li>
                    @if (count($category->requiredFields()))<li>Required fields: {{ implode(', ', $category->requiredFields()) }}</li>@endif
                    @if (count($category->requiredDocuments()))<li>Documents: {{ implode(', ', $category->requiredDocuments()) }}</li>@endif
                </ul>

                <a href="{{ route('admin.registrations.index', ['category' => $category->id]) }}" class="mt-5 text-sm font-semibold text-emerald-600 hover:underline">View registrations &rarr;</a>
            </article>
        @empty
            <p class="surface p-8 text-center text-navy-500 md:col-span-2 xl:col-span-3">No categories configured.</p>
        @endforelse
    </div>
@endsection