@extends('layouts.admin')

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

@section('content')
<div class="max-w-lg">
    <div class="card p-6">
        <div class="flex items-center gap-2 mb-1">
            <svg class="w-5 h-5" style="color: var(--color-status-good)" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
            <h3 class="text-base font-semibold text-ink-primary">Kiosk session ready for {{ $firstName }}</h3>
        </div>
        <p class="text-sm text-ink-secondary mb-5">
            This link is valid for 30 minutes (expires {{ $expiresAt->format('g:i A') }}).
            Open it on the kiosk tablet — scan the QR code with the tablet's camera, or type
            the link into its browser. Your own session here stays exactly where it is.
        </p>

        <div class="mb-5 rounded-xl border border-border-subtle bg-surface-2 px-4 py-3">
            <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Tablet will show</p>
            @if ($assessmentPacket)
                <p class="mt-1 text-base font-bold text-accent">Assigned assessment packet</p>
                <div class="mt-3 grid gap-2">
                    @foreach ($assessmentPacket->items as $item)
                        <div class="rounded-lg border border-border-subtle bg-white px-3 py-2">
                            <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Step {{ $item->sequence }}</p>
                            <p class="text-sm font-semibold text-accent">{{ $item->assessmentTemplate?->name ?? 'Assessment' }}</p>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="mt-1 text-base font-bold text-accent">{{ $assessmentTemplate->name }} <span class="text-xs text-ink-muted">v{{ $assessmentTemplate->version }}</span></p>
                <p class="mt-1 text-xs text-ink-secondary">
                    @if ($assignedResponse)
                        Uses assigned response #{{ $assignedResponse->id }}.
                    @else
                        Starts a new response for this questionnaire.
                    @endif
                </p>
            @endif
            @if ($conditionalFollowUpTemplate)
                <p class="mt-2 rounded-lg border border-brand-orange/20 bg-brand-orange-muted px-3 py-2 text-xs font-medium text-accent">
                    {{ $conditionalFollowUpTemplate->name }} opens automatically if PHQ-2 is a positive depression screen (score 3+).
                </p>
            @endif
        </div>

        <div class="flex justify-center mb-5">
            <canvas id="kiosk-qr-canvas" class="rounded-xl border border-border-subtle"></canvas>
        </div>

        <div class="flex items-center gap-2 mb-6">
            <input
                id="kiosk-link-input"
                type="text"
                readonly
                value="{{ $kioskUrl }}"
                class="input-field flex-1 font-mono text-xs"
            >
            <button id="kiosk-copy-button" type="button" class="btn-secondary shrink-0">Copy link</button>
        </div>

        <a href="{{ route('admin.onboarding.index') }}" class="btn-secondary">Done</a>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/kiosk-link.js'])
@endpush