@extends('layouts.admin')

@section('title', 'Send to Kiosk')

@section('content')
<div class="max-w-3xl">
    <div class="card p-6">
        <h3 class="text-base font-semibold text-ink-primary mb-1">Confirm kiosk handover</h3>
        <p class="text-sm text-ink-secondary mb-5">
            Choose the screening flow this kiosk session should show. The patient-facing tablet
            will only open the selected flow for the next 30 minutes.
        </p>

        <div class="rounded-xl border border-border-subtle bg-surface-2 px-4 py-4 mb-6">
            <p class="text-lg font-bold text-ink-primary">{{ $firstName }}</p>
            <p class="text-sm text-ink-secondary">Date of birth: {{ $maskedDob }}</p>
        </div>

        @if ($errors->any())
            <div class="mb-4 rounded-lg border border-status-critical/30 bg-status-critical/10 px-3 py-2 text-sm text-status-critical">
                {{ $errors->first() }}
            </div>
        @endif

        @php
            $pendingResponseByTemplate = $pendingResponses->keyBy('assessment_template_id');
            $hasPhqFlow = $phq2Template && $phq9Template;
            $packetItems = $assessmentPacket?->items ?? collect();
            $rawDefaultPacketId = old('assessment_packet_id', $assessmentPacket?->id);
            $rawDefaultTemplateId = old('assessment_template_id', $rawDefaultPacketId ? null : ($pendingResponses->first()?->assessment_template_id ?? $templates->first()?->id));

            if ($hasPhqFlow && (int) $rawDefaultTemplateId === (int) $phq9Template->id) {
                $rawDefaultTemplateId = $phq2Template->id;
            }

            $defaultPacketId = $rawDefaultPacketId ? (string) $rawDefaultPacketId : '';
            $defaultTemplateId = $rawDefaultTemplateId ? (string) $rawDefaultTemplateId : '';
            $visibleTemplates = $templates
                ->reject(fn ($template) => $hasPhqFlow && $template->name === 'PHQ-9')
                ->sortBy(fn ($template) => $hasPhqFlow && $template->is($phq2Template) ? '0-'.$template->name : '1-'.$template->name)
                ->values();
            $phq2PendingResponse = $hasPhqFlow ? $pendingResponseByTemplate->get($phq2Template->id) : null;
            $phq9PendingResponse = $hasPhqFlow ? $pendingResponseByTemplate->get($phq9Template->id) : null;
        @endphp

        <div
            class="mb-5"
            x-data="{
                selectedPacketId: @js($defaultPacketId),
                selectedTemplateId: @js($defaultTemplateId),
                phq2TemplateId: @js($phq2Template ? (string) $phq2Template->id : null),
                phq9TemplateId: @js($phq9Template ? (string) $phq9Template->id : null),
                choosePacket(packetId) {
                    this.selectedPacketId = packetId;
                    this.selectedTemplateId = '';
                },
                choose(templateId) {
                    this.selectedPacketId = '';
                    this.selectedTemplateId = this.phq2TemplateId && templateId === this.phq9TemplateId
                        ? this.phq2TemplateId
                        : templateId;
                },
                selectedPacket(packetId) {
                    return this.selectedPacketId === packetId;
                },
                selected(templateId) {
                    return !this.selectedPacketId && this.selectedTemplateId === templateId;
                },
            }"
        >
            @if ($assessmentPacket)
                <input
                    type="hidden"
                    name="assessment_packet_id"
                    value="{{ $defaultPacketId }}"
                    x-bind:value="selectedPacketId"
                    form="kiosk-launch-form"
                >
            @endif

            @if ($templates->isNotEmpty())
                <input
                    type="hidden"
                    name="assessment_template_id"
                    value="{{ $defaultTemplateId }}"
                    x-bind:value="selectedPacketId ? '' : selectedTemplateId"
                    form="kiosk-launch-form"
                >
            @endif

            <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted mb-2">Screening flow for this kiosk session</p>
            @if ($assessmentPacket)
                <button
                    type="button"
                    @click="choosePacket(@js((string) $assessmentPacket->id))"
                    class="mb-3 w-full rounded-xl border border-border-subtle bg-white/90 px-4 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.92),0_18px_42px_-30px_rgba(11,39,84,0.45)] transition-all"
                    :class="selectedPacket(@js((string) $assessmentPacket->id)) ? 'border-accent ring-2 ring-accent/15' : 'hover:border-accent/40 hover:bg-white'"
                >
                    <span class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <span class="min-w-0">
                            <span class="block text-sm font-bold text-accent">Assigned Assessment Packet</span>
                            <span class="mt-1 block text-xs leading-relaxed text-ink-secondary">
                                The kiosk will present these assessments in order and unlock each one after the prior item is complete.
                            </span>
                        </span>
                        <span
                            class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-colors"
                            :class="selectedPacket(@js((string) $assessmentPacket->id)) ? 'border-accent bg-accent text-white' : 'border-border-default bg-white'"
                        >
                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                        </span>
                    </span>
                    <span class="mt-4 grid gap-2 sm:grid-cols-2">
                        @foreach ($packetItems as $item)
                            <span class="rounded-lg border border-border-subtle bg-surface-2/70 px-3 py-3">
                                <span class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Step {{ $item->sequence }}</span>
                                <span class="mt-1 block text-sm font-semibold text-accent">{{ $item->assessmentTemplate?->name ?? 'Assessment' }}</span>
                            </span>
                        @endforeach
                    </span>
                </button>
            @endif
            <div class="grid gap-3 lg:grid-cols-2">
                @forelse ($visibleTemplates as $template)
                    @php($pendingResponse = $pendingResponseByTemplate->get($template->id))
                    @if ($hasPhqFlow && $template->is($phq2Template))
                        <button
                            type="button"
                            @click="choose(@js((string) $phq2Template->id))"
                            class="w-full rounded-xl border border-border-subtle bg-white/90 px-4 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.92),0_18px_42px_-30px_rgba(11,39,84,0.45)] transition-all lg:col-span-2"
                            :class="selected(@js((string) $phq2Template->id)) ? 'border-accent ring-2 ring-accent/15' : 'hover:border-accent/40 hover:bg-white'"
                        >
                            <span class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                                <span class="min-w-0">
                                    <span class="block text-sm font-bold text-accent">PHQ Depression Screening</span>
                                    <span class="mt-1 block text-xs leading-relaxed text-ink-secondary">
                                        PHQ-2 starts first. PHQ-9 opens automatically when PHQ-2 is a positive depression screen (score 3+).
                                    </span>
                                </span>
                                <span
                                    class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-colors"
                                    :class="selected(@js((string) $phq2Template->id)) ? 'border-accent bg-accent text-white' : 'border-border-default bg-white'"
                                >
                                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                                </span>
                            </span>

                            <span class="mt-4 grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-center">
                                <span
                                    class="rounded-lg border px-3 py-3 transition-colors"
                                    :class="selected(@js((string) $phq2Template->id)) ? 'border-accent/30 bg-accent-muted/50' : 'border-border-subtle bg-surface-2/70'"
                                >
                                    <span class="flex items-center justify-between gap-2">
                                        <span class="text-sm font-semibold text-accent">PHQ-2</span>
                                        <span class="rounded-full bg-white px-2 py-0.5 text-[11px] font-semibold text-ink-muted">Starts</span>
                                    </span>
                                    <span class="mt-1 block text-xs text-ink-secondary">{{ $phq2Template->estimated_minutes ? $phq2Template->estimated_minutes.' min' : 'Short prescreen' }}</span>
                                </span>
                                <span class="hidden text-xs font-semibold uppercase tracking-wide text-ink-muted sm:block">Then</span>
                                <span
                                    class="rounded-lg border px-3 py-3 transition-colors"
                                    :class="selected(@js((string) $phq2Template->id)) ? 'border-brand-orange/30 bg-brand-orange-muted/45' : 'border-border-subtle bg-surface-2/70'"
                                >
                                    <span class="flex items-center justify-between gap-2">
                                        <span class="text-sm font-semibold text-accent">PHQ-9</span>
                                        <span class="rounded-full bg-white px-2 py-0.5 text-[11px] font-semibold text-brand-orange">If positive</span>
                                    </span>
                                    <span class="mt-1 block text-xs text-ink-secondary">{{ $phq9Template->estimated_minutes ? $phq9Template->estimated_minutes.' min' : 'Follow-up assessment' }}</span>
                                </span>
                            </span>

                            @if ($phq2PendingResponse || $phq9PendingResponse)
                                <span class="mt-3 flex flex-wrap gap-2 text-xs">
                                    @if ($phq2PendingResponse)
                                        <span class="rounded-full bg-status-good/10 px-2 py-0.5 font-semibold text-status-good">PHQ-2 packet ready</span>
                                    @endif
                                    @if ($phq9PendingResponse)
                                        <span class="rounded-full bg-status-good/10 px-2 py-0.5 font-semibold text-status-good">PHQ-9 follow-up ready</span>
                                    @endif
                                </span>
                            @endif
                        </button>
                    @else
                        <button
                            type="button"
                            @click="choose(@js((string) $template->id))"
                            class="flex h-full w-full items-start justify-between gap-3 rounded-xl border border-border-subtle bg-white/90 px-4 py-4 text-left text-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.92),0_18px_42px_-32px_rgba(11,39,84,0.42)] transition-all"
                            :class="selected(@js((string) $template->id)) ? 'border-accent ring-2 ring-accent/15' : 'hover:border-accent/40 hover:bg-white'"
                        >
                            <span class="min-w-0">
                                <span class="block font-semibold text-accent">{{ $template->name }} <span class="text-xs text-ink-muted">v{{ $template->version }}</span></span>
                                <span class="mt-1 block text-xs text-ink-secondary">
                                    {{ $template->estimated_minutes ? $template->estimated_minutes.' min' : 'Short check-in' }}
                                    @if ($pendingResponse)
                                        <span class="ml-2 rounded-full bg-status-good/10 px-2 py-0.5 font-semibold text-status-good">Assigned packet ready</span>
                                    @endif
                                </span>
                            </span>
                            <span
                                class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-colors"
                                :class="selected(@js((string) $template->id)) ? 'border-accent bg-accent text-white' : 'border-border-default bg-white'"
                            >
                                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                            </span>
                        </button>
                    @endif
                @empty
                    <p class="rounded-lg border border-border-subtle bg-surface-2 px-3 py-3 text-sm text-ink-muted">
                        No active assessment templates are available. Add or activate a template before launching kiosk check-in.
                    </p>
                @endforelse
            </div>
        </div>

        <div class="flex items-center gap-3">
            <form id="kiosk-launch-form" method="POST" action="{{ route('admin.kiosk.launch', $patientProfile) }}">
                @csrf
                <button type="submit" class="btn-primary" @disabled($templates->isEmpty())>Create kiosk link for {{ $firstName }}</button>
            </form>
            <a href="{{ route('admin.onboarding.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </div>
</div>
@endsection