@extends('layouts.admin')

@section('title', 'Check-in')
@section('heading', 'Gate check-in')
@section('subheading', \Illuminate\Support\Carbon::parse($today)->format('l, j F Y'))

@php
    $tz = config('event.timezone');
    $flash = session('checkin_result');
@endphp

@section('content')
    @unless ($isEventDay)
        <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800" role="alert">
            Today is not an event day ({{ collect($eventDays)->map(fn ($d) => \Illuminate\Support\Carbon::parse($d)->format('j M'))->implode(', ') }}). Scans will be rejected unless a manager provides an override reason.
        </div>
    @endunless

    <div class="grid gap-6 lg:grid-cols-3"
         x-data='checkinScanner(@json(route("admin.checkin.process")), @json(csrf_token()), @json($stats))'
         x-on:beforeunload.window="stopCamera()">

        <div class="space-y-6 lg:col-span-2">
            {{-- Stats --}}
            <dl class="grid grid-cols-3 gap-3 sm:gap-4" aria-live="polite">
                <div class="surface p-4 text-center">
                    <dd class="font-display text-3xl font-semibold tabular-nums text-emerald-600" x-text="stats.total_unique">{{ $stats['total_unique'] }}</dd>
                    <dt class="text-[11px] font-semibold uppercase tracking-wider text-navy-500">Checked in</dt>
                </div>
                <div class="surface p-4 text-center">
                    <dd class="font-display text-3xl font-semibold tabular-nums text-navy-700" x-text="stats.checked_out">{{ $stats['checked_out'] }}</dd>
                    <dt class="text-[11px] font-semibold uppercase tracking-wider text-navy-500">Checked out</dt>
                </div>
                <div class="surface p-4 text-center">
                    <dd class="font-display text-3xl font-semibold tabular-nums text-amber-600" x-text="stats.duplicates">{{ $stats['duplicates'] }}</dd>
                    <dt class="text-[11px] font-semibold uppercase tracking-wider text-navy-500">Duplicates</dt>
                </div>
            </dl>

            {{-- Scanner --}}
            <section class="surface p-5 sm:p-6" aria-labelledby="scan-title">
                <h2 id="scan-title" class="font-display text-lg font-semibold text-navy-900">Scan badge</h2>
                <p class="mt-1 text-sm text-navy-500">Scan with a handheld reader (it types into the field), use the camera, or enter the reference manually.</p>

                <form class="mt-5 space-y-4" @submit.prevent="submit()">
                    <fieldset>
                        <legend class="sr-only">Action</legend>
                        <div class="grid grid-cols-2 gap-2">
                            <label class="flex cursor-pointer items-center justify-center rounded-xl border border-navy-100 bg-white px-3 py-2.5 text-sm font-semibold has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50 has-[:checked]:text-emerald-700">
                                <input type="radio" value="checkin" x-model="action" class="sr-only"> Check in
                            </label>
                            <label class="flex cursor-pointer items-center justify-center rounded-xl border border-navy-100 bg-white px-3 py-2.5 text-sm font-semibold has-[:checked]:border-navy-700 has-[:checked]:bg-navy-50 has-[:checked]:text-navy-800">
                                <input type="radio" value="checkout" x-model="action" class="sr-only"> Check out
                            </label>
                        </div>
                    </fieldset>

                    <div>
                        <label for="token" class="label">Badge code, link or reference</label>
                        <input id="token" x-ref="token" x-model="token" type="text" class="field font-mono" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus placeholder="Scan or type…">
                    </div>

                    <div class="grid gap-4 sm:grid-cols-[1fr_auto] sm:items-end">
                        <div>
                            <label for="gate" class="label">Gate <span class="font-normal text-navy-500">(optional)</span></label>
                            <input id="gate" x-model="gate" type="text" maxlength="60" class="field" placeholder="e.g. Main entrance">
                        </div>
                        <div class="flex gap-2">
                            <button type="submit" class="btn-primary flex-1 sm:flex-none sm:px-8" :disabled="busy || !token">
                                <span x-show="!busy" x-text="action === 'checkout' ? 'Check out' : 'Check in'">Check in</span>
                                <span x-cloak x-show="busy">Checking…</span>
                            </button>
                            <button type="button" class="btn-ghost" @click="cameraOn ? stopCamera() : startCamera()" x-text="cameraOn ? 'Stop camera' : 'Camera'">Camera</button>
                        </div>
                    </div>
                </form>

                <p x-cloak x-show="cameraError" x-text="cameraError" class="mt-3 text-sm text-coral-600" role="alert"></p>
                <div x-cloak x-show="cameraOn" class="mt-4 overflow-hidden rounded-2xl bg-navy-900">
                    <video x-ref="video" class="aspect-video w-full object-cover" playsinline muted></video>
                </div>

                {{-- AJAX result --}}
                <div x-cloak x-show="result" class="mt-5" role="status" aria-live="assertive">
                    <div class="rounded-2xl border-2 p-5"
                         :class="result?.ok ? 'border-emerald-500 bg-emerald-50' : (result?.code === 'duplicate' ? 'border-amber-500 bg-amber-50' : 'border-coral-500 bg-red-50')">
                        <p class="font-display text-xl font-semibold"
                           :class="result?.ok ? 'text-emerald-700' : (result?.code === 'duplicate' ? 'text-amber-700' : 'text-coral-600')"
                           x-text="result?.ok ? 'ALLOW' : (result?.code === 'duplicate' ? 'ALREADY IN' : 'DENY')"></p>
                        <p class="mt-1 text-sm text-navy-800" x-text="result?.message"></p>
                        <template x-if="result?.attendee">
                            <dl class="mt-3 grid gap-x-6 gap-y-1 text-sm sm:grid-cols-2">
                                <div><dt class="inline text-navy-500">Name: </dt><dd class="inline font-semibold text-navy-900" x-text="result.attendee.name"></dd></div>
                                <div><dt class="inline text-navy-500">Category: </dt><dd class="inline font-semibold text-navy-900" x-text="result.attendee.category"></dd></div>
                                <div><dt class="inline text-navy-500">Reference: </dt><dd class="inline font-mono font-semibold text-navy-900" x-text="result.attendee.reference"></dd></div>
                                <template x-if="result.attendee.organisation"><div><dt class="inline text-navy-500">Organisation: </dt><dd class="inline font-semibold text-navy-900" x-text="result.attendee.organisation"></dd></div></template>
                            </dl>
                        </template>

                        {{-- Manager override --}}
                        <template x-if="result && !result.ok && result.overridable">
                            <div class="mt-4 border-t border-navy-200 pt-4">
                                <label for="override_reason" class="label">Manager override — reason</label>
                                <input id="override_reason" x-model="overrideReason" type="text" class="field" placeholder="At least 5 characters">
                                <button type="button" class="btn-coral mt-3" :disabled="busy || overrideReason.trim().length < 5" @click="submit(true)">Admit with override</button>
                            </div>
                        </template>
                    </div>
                </div>

                <ul x-cloak x-show="history.length" class="mt-5 divide-y divide-navy-100 text-sm" aria-label="This session">
                    <template x-for="(item, i) in history" :key="i">
                        <li class="flex items-center justify-between gap-3 py-2">
                            <span class="flex min-w-0 items-center gap-2">
                                <span class="h-2 w-2 shrink-0 rounded-full" :class="item.ok ? 'bg-emerald-500' : 'bg-coral-500'"></span>
                                <span class="truncate font-medium text-navy-900" x-text="item.name"></span>
                            </span>
                            <span class="shrink-0 text-xs text-navy-500" x-text="item.at"></span>
                        </li>
                    </template>
                </ul>
            </section>

            <section class="surface p-5 sm:p-6" aria-labelledby="manual-title">
                <h2 id="manual-title" class="font-display text-lg font-semibold text-navy-900">Manual entry</h2>
                <p class="mt-1 text-sm text-navy-500">Fallback form — reloads the page with the result. Paste a badge link or type the reference.</p>
                <form method="POST" action="{{ route('admin.checkin.process') }}" class="mt-4 grid gap-3 sm:grid-cols-[1fr_auto_auto]">
                    @csrf
                    <div class="sm:col-span-3">
                        <label for="manual_token" class="label">Badge code, link or reference</label>
                        <input id="manual_token" type="text" name="token" class="field font-mono" value="{{ old('token') }}" required autocomplete="off">
                        <x-input-error :messages="$errors->get('token')" class="mt-1" />
                    </div>
                    <select name="action" class="field sm:w-40" aria-label="Action">
                        <option value="checkin">Check in</option>
                        <option value="checkout">Check out</option>
                    </select>
                    <input type="text" name="override_reason" class="field sm:w-64" placeholder="Override reason (managers only)" aria-label="Override reason" minlength="5" maxlength="500">
                    <button type="submit" class="btn-primary">Submit</button>
                </form>

                @if ($flash)
                    <div class="mt-4 rounded-xl border px-4 py-3 text-sm {{ $flash['ok'] ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-red-200 bg-red-50 text-coral-600' }}">
                        <p class="font-semibold">{{ $flash['ok'] ? 'ALLOW' : 'DENY' }} &mdash; {{ $flash['message'] }}</p>
                        @if (! empty($flash['attendee']))
                            <p class="mt-1 text-navy-700">{{ $flash['attendee']['name'] }} &middot; {{ $flash['attendee']['category'] }} &middot; {{ $flash['attendee']['reference'] }}</p>
                        @endif
                    </div>
                @endif
            </section>
        </div>

        {{-- Recent --}}
        <aside class="surface h-fit p-5 sm:p-6" aria-labelledby="recent-title">
            <h2 id="recent-title" class="font-display text-lg font-semibold text-navy-900">Recent scans</h2>
            <ul class="mt-3 divide-y divide-navy-100">
                @forelse ($recent as $checkin)
                    <li class="py-3 text-sm">
                        <div class="flex items-start justify-between gap-2">
                            <p class="min-w-0 truncate font-semibold text-navy-900">{{ $checkin->registration?->full_name ?? 'Unknown' }}</p>
                            <span class="shrink-0 tabular-nums text-xs text-navy-500">{{ $checkin->checked_in_at->timezone($tz)->format('H:i') }}</span>
                        </div>
                        <p class="truncate text-xs text-navy-500">
                            {{ $checkin->registration?->category?->name }}
                            @if ($checkin->is_duplicate)<span class="font-semibold text-amber-600">&middot; duplicate</span>@endif
                            @if ($checkin->override_by)<span class="font-semibold text-coral-600">&middot; override</span>@endif
                            @if ($checkin->checked_out_at)&middot; out {{ $checkin->checked_out_at->timezone($tz)->format('H:i') }}@endif
                        </p>
                    </li>
                @empty
                    <li class="py-6 text-center text-sm text-navy-500">No scans yet.</li>
                @endforelse
            </ul>
        </aside>
    </div>
@endsection