@extends('layouts.admin')

@section('title', 'Overview')
@section('heading', 'Overview')
@section('subheading', 'Live registration and check-in numbers for '.config('event.short_name'))

@php
    $maxDay = max(1, (int) $registrationsPerDay->max());
    $approvedShare = $capacityTarget > 0 ? min(100, round($totals['approved'] / $capacityTarget * 100)) : 0;
    $tz = config('event.timezone');
@endphp

@section('content')
    @if ($failedNotifications > 0)
        <div class="mb-6 flex items-center justify-between gap-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800" role="alert">
            <span><strong>{{ $failedNotifications }}</strong> notification{{ $failedNotifications === 1 ? '' : 's' }} failed to send. Open a registration to review delivery history.</span>
        </div>
    @endif

    {{-- KPI row --}}
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-5">
        @foreach ([
            ['label' => 'Registrations', 'value' => $totals['registrations'], 'tone' => 'text-navy-900', 'href' => route('admin.registrations.index')],
            ['label' => 'Pending review', 'value' => $totals['pending_review'], 'tone' => 'text-amber-600', 'href' => route('admin.registrations.index', ['status' => 'pending_review'])],
            ['label' => 'Approved', 'value' => $totals['approved'], 'tone' => 'text-emerald-600', 'href' => route('admin.registrations.index', ['status' => 'approved'])],
            ['label' => 'Waitlisted', 'value' => $totals['waitlisted'], 'tone' => 'text-sky-600', 'href' => route('admin.registrations.index', ['status' => 'waitlisted'])],
            ['label' => 'Rejected', 'value' => $totals['rejected'], 'tone' => 'text-coral-600', 'href' => route('admin.registrations.index', ['status' => 'rejected'])],
        ] as $kpi)
            <a href="{{ $kpi['href'] }}" class="surface block p-4 transition hover:border-emerald-500 sm:p-5 {{ $loop->first ? 'col-span-2 lg:col-span-1' : '' }}">
                <p class="text-xs font-semibold uppercase tracking-wider text-navy-500">{{ $kpi['label'] }}</p>
                <p class="mt-2 font-display text-3xl font-semibold tabular-nums sm:text-4xl {{ $kpi['tone'] }}">{{ number_format($kpi['value']) }}</p>
            </a>
        @endforeach
    </div>

    <div class="mt-6 grid gap-6 xl:grid-cols-3">
        {{-- Registrations per day --}}
        <section class="surface p-5 sm:p-6 xl:col-span-2" aria-labelledby="perday">
            <div class="flex items-baseline justify-between gap-4">
                <h2 id="perday" class="font-display text-lg font-semibold text-navy-900">Registrations — last 14 days</h2>
                <p class="text-sm text-navy-500">{{ $registrationsPerDay->sum() }} total</p>
            </div>
            <div class="mt-6 flex h-44 items-end gap-1.5 sm:gap-2" role="img" aria-label="Bar chart of registrations per day">
                @foreach ($registrationsPerDay as $day => $count)
                    <div class="group flex h-full flex-1 flex-col items-center justify-end gap-1">
                        <span class="text-[10px] font-semibold text-navy-500 opacity-0 transition group-hover:opacity-100">{{ $count }}</span>
                        <div class="w-full rounded-t-md bg-gradient-to-t from-emerald-500 to-turquoise-500 {{ $count === 0 ? 'opacity-30' : '' }}" style="height: {{ max(3, round($count / $maxDay * 100)) }}%" title="{{ \Illuminate\Support\Carbon::parse($day)->format('j M') }}: {{ $count }}"></div>
                    </div>
                @endforeach
            </div>
            <div class="mt-2 flex justify-between text-[11px] text-navy-500">
                <span>{{ \Illuminate\Support\Carbon::parse($registrationsPerDay->keys()->first())->format('j M') }}</span>
                <span>{{ \Illuminate\Support\Carbon::parse($registrationsPerDay->keys()->last())->format('j M') }}</span>
            </div>
        </section>

        {{-- Capacity + status breakdown --}}
        <section class="surface p-5 sm:p-6" aria-labelledby="capacity">
            <h2 id="capacity" class="font-display text-lg font-semibold text-navy-900">Overall capacity</h2>
            <p class="mt-1 text-sm text-navy-500">{{ number_format($totals['approved']) }} approved of {{ number_format($capacityTarget) }} target</p>
            <div class="mt-3 h-3 overflow-hidden rounded-full bg-navy-100" role="progressbar" aria-valuenow="{{ $approvedShare }}" aria-valuemin="0" aria-valuemax="100">
                <div class="h-full rounded-full bg-emerald-500" style="width: {{ $approvedShare }}%"></div>
            </div>
            <p class="mt-1 text-right text-xs font-semibold text-emerald-600">{{ $approvedShare }}%</p>

            <h3 class="mt-5 text-xs font-semibold uppercase tracking-wider text-navy-500">By status</h3>
            <ul class="mt-2 space-y-2">
                @foreach ($statusCounts as $value => $count)
                    <li class="flex items-center justify-between text-sm">
                        <x-status-badge :status="$value" />
                        <span class="font-semibold tabular-nums text-navy-900">{{ number_format($count) }}</span>
                    </li>
                @endforeach
            </ul>
        </section>
    </div>

    <div class="mt-6 grid gap-6 xl:grid-cols-3">
        {{-- Categories --}}
        <section class="surface p-5 sm:p-6 xl:col-span-2" aria-labelledby="cats">
            <div class="flex items-center justify-between">
                <h2 id="cats" class="font-display text-lg font-semibold text-navy-900">Categories</h2>
                @if (auth()->user()->isSuperAdmin() || auth()->user()->hasAnyRole([\App\Enums\UserRole::EventManager, \App\Enums\UserRole::Auditor]))
                    <a href="{{ route('admin.categories.index') }}" class="text-sm font-semibold text-emerald-600 hover:underline">Details</a>
                @endif
            </div>
            <ul class="mt-4 space-y-4">
                @foreach ($categories as $category)
                    @php($pct = $category->capacity ? min(100, round($category->approved_count / $category->capacity * 100)) : null)
                    <li>
                        <div class="flex flex-wrap items-baseline justify-between gap-x-4 text-sm">
                            <span class="font-semibold text-navy-900">{{ $category->name }}</span>
                            <span class="text-navy-500">
                                {{ $category->approved_count }} approved{{ $category->capacity ? ' / '.$category->capacity : '' }}
                                &middot; {{ $category->pending_count }} pending &middot; {{ $category->total_count }} total
                            </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>
                    </li>
                @endforeach
            </ul>
        </section>

        {{-- Check-in --}}
        <section class="surface p-5 sm:p-6" aria-labelledby="checkins">
            <div class="flex items-center justify-between">
                <h2 id="checkins" class="font-display text-lg font-semibold text-navy-900">Check-in today</h2>
                @if (Route::has('admin.checkin.index') && (auth()->user()->isSuperAdmin() || auth()->user()->hasAnyRole([\App\Enums\UserRole::EventManager, \App\Enums\UserRole::CheckinOfficer])))
                    <a href="{{ route('admin.checkin.index') }}" class="text-sm font-semibold text-emerald-600 hover:underline">Open scanner</a>
                @endif
            </div>
            <p class="mt-1 text-xs text-navy-500">{{ \Illuminate\Support\Carbon::parse($today)->format('l, j F Y') }}</p>
            <dl class="mt-4 grid grid-cols-3 gap-3 text-center">
                <div class="rounded-xl bg-emerald-50 p-3"><dd class="font-display text-2xl font-semibold text-emerald-700">{{ $checkinToday['total_unique'] }}</dd><dt class="text-[11px] uppercase tracking-wide text-navy-500">Checked in</dt></div>
                <div class="rounded-xl bg-navy-50 p-3"><dd class="font-display text-2xl font-semibold text-navy-700">{{ $checkinToday['checked_out'] }}</dd><dt class="text-[11px] uppercase tracking-wide text-navy-500">Left</dt></div>
                <div class="rounded-xl bg-amber-50 p-3"><dd class="font-display text-2xl font-semibold text-amber-700">{{ $checkinToday['duplicates'] }}</dd><dt class="text-[11px] uppercase tracking-wide text-navy-500">Duplicate</dt></div>
            </dl>
            @if ($checkinDays->isNotEmpty())
                <h3 class="mt-5 text-xs font-semibold uppercase tracking-wider text-navy-500">By event day</h3>
                <ul class="mt-2 divide-y divide-navy-100 text-sm">
                    @foreach ($checkinDays as $day => $stats)
                        <li class="flex items-center justify-between py-2 {{ $day === $today ? 'font-semibold text-emerald-700' : 'text-navy-700' }}">
                            <span>{{ \Illuminate\Support\Carbon::parse($day)->format('D j M') }}</span>
                            <span class="tabular-nums">{{ $stats['total_unique'] }} in &middot; {{ $stats['checked_out'] }} out</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <section class="surface p-5 sm:p-6">
            <h2 class="font-display text-lg font-semibold text-navy-900">Latest registrations</h2>
            <ul class="mt-3 divide-y divide-navy-100">
                @forelse ($recentRegistrations as $registration)
                    <li class="flex items-center justify-between gap-3 py-3">
                        <div class="min-w-0">
                            <a href="{{ route('admin.registrations.show', $registration) }}" class="block truncate font-semibold text-navy-900 hover:text-emerald-600">{{ $registration->full_name }}</a>
                            <p class="truncate text-xs text-navy-500">{{ $registration->category?->name }} &middot; {{ $registration->created_at->diffForHumans() }}</p>
                        </div>
                        <x-status-badge :status="$registration->status" />
                    </li>
                @empty
                    <li class="py-6 text-center text-sm text-navy-500">No registrations yet.</li>
                @endforelse
            </ul>
        </section>

        <section class="surface p-5 sm:p-6">
            <h2 class="font-display text-lg font-semibold text-navy-900">Latest check-ins</h2>
            <ul class="mt-3 divide-y divide-navy-100">
                @forelse ($recentCheckins as $checkin)
                    <li class="flex items-center justify-between gap-3 py-3">
                        <div class="min-w-0">
                            <p class="truncate font-semibold text-navy-900">{{ $checkin->registration?->full_name ?? 'Unknown' }}</p>
                            <p class="truncate text-xs text-navy-500">{{ $checkin->registration?->category?->name }} &middot; {{ $checkin->registration?->reference }}</p>
                        </div>
                        <span class="shrink-0 text-sm font-semibold tabular-nums text-emerald-600">{{ $checkin->checked_in_at->timezone($tz)->format('H:i') }}</span>
                    </li>
                @empty
                    <li class="py-6 text-center text-sm text-navy-500">No check-ins yet.</li>
                @endforelse
            </ul>
        </section>
    </div>
@endsection