@extends($layout ?? 'layouts.admin')

@section('title', $pageTitle ?? 'Warm Handoff Call')

@push('head')
    <style>
        [data-warm-handoff-call] [data-remote-video],
        [data-warm-handoff-call] [data-local-video] {
            background: #000;
        }

        [data-warm-handoff-call] .agora_video_player,
        [data-warm-handoff-call] video {
            object-fit: contain !important;
        }
    </style>
@endpush

@section('content')
@php
    $patientName = $session->patientProfile?->user?->name ?? 'Patient';
    $pcpName = $session->initiatedBy?->name ?? 'PCP';
    $bhcmName = $session->bhcm?->name ?? 'BHCM';
    $isBhcm = auth()->user()->isBhcm();
    $isPatient = auth()->user()->isPatient();
    $backUrl = $backUrl ?? route('admin.bhm.index');
    $tokenUrl = $tokenUrl ?? route('admin.warm-handoff.token', $session);
    $joinUrl = $joinUrl ?? route('admin.warm-handoff.join', $session);
    $declineUrl = $declineUrl ?? route('admin.warm-handoff.decline', $session);
    $endUrl = $endUrl ?? route('admin.warm-handoff.end', $session);
    $completionUrl = $completionUrl ?? '';
    $joinButtonLabel = $joinButtonLabel ?? ($isBhcm || $isPatient ? 'Join call' : 'Start video');
    $endButtonLabel = $endButtonLabel ?? 'End';
    $emptyTitle = $emptyTitle ?? ($isBhcm || $isPatient ? 'Ready to join' : 'Waiting for BHCM');
    $emptyMessage = $emptyMessage ?? ($isBhcm || $isPatient ? 'Join the secure room when you are ready.' : 'The assigned BHCM will appear here after joining.');
    $showDecline = $showDecline ?? ($isBhcm && $session->status === 'pending');
    $canEndOnLoad = $canEndOnLoad ?? false;
@endphp

<div
    class="-mx-8 -my-6 min-h-[calc(100vh-4.5rem)] bg-[#061b35] text-white"
    data-warm-handoff-call
    data-token-url="{{ $tokenUrl }}"
    data-join-url="{{ $joinUrl }}"
    data-decline-url="{{ $declineUrl }}"
    data-end-url="{{ $endUrl }}"
    data-back-url="{{ $backUrl }}"
    data-completion-url="{{ $completionUrl }}"
    data-session-id="{{ $session->id }}"
    data-initial-status="{{ $session->status }}"
    data-agora-ready="{{ $agoraReady ? '1' : '0' }}"
    data-current-role="{{ $currentUserRole }}"
    data-current-user-id="{{ auth()->id() }}"
    data-can-end-on-load="{{ $canEndOnLoad ? '1' : '0' }}"
>
    <div class="flex min-h-[calc(100vh-4.5rem)] flex-col">
        <header class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-black/20 px-5 py-4 backdrop-blur">
            <div class="min-w-0">
                <p class="text-xs font-semibold uppercase tracking-wide text-white/55">Secure warm handoff</p>
                <h2 class="mt-1 truncate text-lg font-bold">{{ $patientName }}</h2>
                <p class="mt-0.5 text-sm text-white/60">{{ $pcpName }} to {{ $bhcmName }}</p>
            </div>

            <div class="flex items-center gap-2">
                <span data-call-status class="rounded-full bg-white/10 px-3 py-1.5 text-xs font-semibold text-white/75">{{ ucfirst($session->status) }}</span>
                <a href="{{ $backUrl }}" class="rounded-lg border border-white/20 px-3 py-2 text-sm font-semibold text-white/80 transition hover:bg-white/10">Back</a>
            </div>
        </header>

        @unless ($agoraReady)
            <div class="mx-auto mt-10 max-w-2xl rounded-lg border border-status-critical/35 bg-status-critical/15 p-5 text-status-critical">
                <p class="font-semibold">Video calling is not configured.</p>
                <p class="mt-1 text-sm">Missing: {{ implode(', ', $agoraMissingKeys) }}</p>
            </div>
        @else
            <main class="relative min-h-0 flex-1 overflow-hidden">
                <div data-remote-grid class="absolute inset-0 grid gap-3 p-4 pb-28 pt-5 md:p-5 md:pb-32">
                    <div data-empty-state class="flex h-full min-h-[22rem] items-center justify-center rounded-lg border border-white/10 bg-white/[0.04]">
                        <div class="max-w-sm text-center">
                            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-white/10">
                                <svg class="h-7 w-7 text-white/75" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                                </svg>
                            </div>
                            <p class="mt-4 text-xl font-bold" data-empty-title>{{ $emptyTitle }}</p>
                            <p class="mt-2 text-sm text-white/60" data-empty-message>{{ $emptyMessage }}</p>
                        </div>
                    </div>
                </div>

                <div class="absolute right-4 top-4 z-10 h-36 w-28 overflow-hidden rounded-lg border border-white/20 bg-black/40 shadow-2xl md:h-44 md:w-36">
                    <div data-local-video class="h-full w-full"></div>
                    <div data-local-muted class="absolute inset-0 hidden items-center justify-center bg-black/55">
                        <svg class="h-8 w-8 text-white/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M12 18.75H4.5A2.25 2.25 0 0 1 2.25 16.5v-9A2.25 2.25 0 0 1 4.5 5.25H12a2.25 2.25 0 0 1 2.25 2.25v9A2.25 2.25 0 0 1 12 18.75Z" />
                        </svg>
                    </div>
                </div>

                <div data-error-banner class="pointer-events-none absolute left-4 right-4 top-4 z-20 hidden rounded-lg border border-status-critical/30 bg-status-critical/95 px-4 py-3 text-sm font-semibold text-white shadow-xl md:left-1/2 md:right-auto md:w-[30rem] md:-translate-x-1/2"></div>

                <footer class="absolute inset-x-0 bottom-0 z-20 border-t border-white/10 bg-black/45 px-4 py-4 backdrop-blur">
                    <div class="mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-3">
                        <button data-join-call type="button" class="rounded-full bg-status-good px-6 py-3 text-sm font-bold text-white shadow-lg shadow-black/20 transition hover:brightness-105">
                            {{ $joinButtonLabel }}
                        </button>
                        @if ($showDecline)
                            <button data-decline-call type="button" class="rounded-full border border-white/20 px-5 py-3 text-sm font-semibold text-white/85 transition hover:bg-white/10">Decline</button>
                        @endif
                        <button data-toggle-audio type="button" class="rounded-full border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/15" disabled>Mute</button>
                        <button data-toggle-video type="button" class="rounded-full border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/15" disabled>Camera off</button>
                        <button data-leave-call type="button" class="rounded-full bg-status-critical px-5 py-3 text-sm font-bold text-white shadow-lg shadow-black/20 transition hover:brightness-105" @disabled(! $canEndOnLoad)>{{ $endButtonLabel }}</button>
                    </div>
                </footer>
            </main>
        @endunless
    </div>
</div>
@endsection