@auth
@if (auth()->user()->isPatient())
<div
    x-data="patientWarmHandoffNotificationListener({
        userId: {{ auth()->id() }},
        dashboardUrl: @js(route('patient.dashboard')),
        callUrlTemplate: @js(route('patient.warm-handoff.call', ['warmHandoffSession' => '__ID__'])),
    })"
    x-init="init()"
    class="pointer-events-none fixed right-5 top-24 z-[95] w-[min(26rem,calc(100vw-2rem))] space-y-2">
    <template x-for="notice in notices" :key="notice.id">
        <div
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="-translate-y-3 opacity-0"
            x-transition:enter-end="translate-y-0 opacity-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="translate-y-0 opacity-100"
            x-transition:leave-end="-translate-y-2 opacity-0"
            class="pointer-events-auto overflow-hidden rounded-lg border border-status-good/30 bg-white shadow-[0_20px_60px_-24px_rgba(11,39,84,0.6)]">
            <div class="flex items-start gap-3 p-4">
                <div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-status-good/10 text-status-good">
                    <svg class="h-5 w-5" 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.72M4.5 18.75h9A2.25 2.25 0 0 0 15.75 16.5v-9A2.25 2.25 0 0 0 13.5 5.25h-9A2.25 2.25 0 0 0 2.25 7.5v9A2.25 2.25 0 0 0 4.5 18.75Z" />
                    </svg>
                </div>

                <div class="min-w-0 flex-1">
                    <p class="text-sm font-semibold text-accent">Your care team is ready</p>
                    <p class="mt-0.5 text-sm text-ink-secondary">Join your secure video handoff now.</p>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <a :href="notice.callUrl" @click="stopRinging()" class="btn-primary px-3 py-2 text-xs">Join video call</a>
                    </div>
                </div>

                <button
                    @click="dismiss(notice.id)"
                    type="button"
                    class="rounded-lg p-1.5 text-ink-muted transition-colors hover:bg-surface-2 hover:text-ink-primary"
                    aria-label="Dismiss video call notification">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </template>
</div>

@once
    @push('scripts')
    <script>
        function patientWarmHandoffNotificationListener({ userId, dashboardUrl, callUrlTemplate }) {
            return {
                notices: [],
                broadcastsSubscribed: false,
                audioContext: null,
                ringTimer: null,
                ringStopTimer: null,

                init() {
                    this.prepareAudioUnlock();
                    this.subscribeToBroadcasts();
                },

                prepareAudioUnlock() {
                    const unlock = () => {
                        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
                        if (!AudioContextClass) {
                            return;
                        }

                        this.audioContext = this.audioContext || new AudioContextClass();
                        this.audioContext.resume?.();
                    };

                    window.addEventListener('pointerdown', unlock, { once: true });
                    window.addEventListener('keydown', unlock, { once: true });
                },

                subscribeToBroadcasts() {
                    if (!userId) {
                        return;
                    }

                    const subscribe = () => {
                        if (this.broadcastsSubscribed || !window.Echo) {
                            return;
                        }

                        this.broadcastsSubscribed = true;
                        window.Echo.private(`App.Models.User.${userId}`)
                            .listen('.warm-handoff.patient-invited', (payload) => this.onInvited(payload));
                    };

                    subscribe();

                    if (!this.broadcastsSubscribed) {
                        window.addEventListener('meduvo:echo-ready', subscribe, { once: true });
                    }
                },

                onInvited(payload) {
                    const sessionId = payload.warm_handoff_session_id;
                    const callUrl = sessionId
                        ? callUrlTemplate.replace('__ID__', sessionId)
                        : dashboardUrl;

                    this.notices.unshift({
                        id: `${sessionId || 'handoff'}-${Date.now()}`,
                        callUrl,
                    });

                    this.notices = this.notices.slice(0, 3);
                    this.notifyBrowser();
                    this.startRinging();
                },

                startRinging() {
                    this.stopRinging();

                    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
                    if (!AudioContextClass) {
                        return;
                    }

                    this.audioContext = this.audioContext || new AudioContextClass();
                    this.audioContext.resume?.().catch(() => {});

                    const playPair = () => {
                        this.playTone(660, 0.34, 0);
                        this.playTone(880, 0.34, 0.45);
                    };

                    playPair();
                    this.ringTimer = window.setInterval(playPair, 2200);
                    this.ringStopTimer = window.setTimeout(() => this.stopRinging(), 30000);
                },

                playTone(frequency, duration, delay) {
                    if (!this.audioContext) {
                        return;
                    }

                    const startAt = this.audioContext.currentTime + delay;
                    const oscillator = this.audioContext.createOscillator();
                    const gain = this.audioContext.createGain();

                    oscillator.type = 'sine';
                    oscillator.frequency.setValueAtTime(frequency, startAt);
                    gain.gain.setValueAtTime(0.0001, startAt);
                    gain.gain.exponentialRampToValueAtTime(0.18, startAt + 0.04);
                    gain.gain.exponentialRampToValueAtTime(0.0001, startAt + duration);

                    oscillator.connect(gain);
                    gain.connect(this.audioContext.destination);
                    oscillator.start(startAt);
                    oscillator.stop(startAt + duration + 0.05);
                },

                stopRinging() {
                    if (this.ringTimer) {
                        window.clearInterval(this.ringTimer);
                    }
                    if (this.ringStopTimer) {
                        window.clearTimeout(this.ringStopTimer);
                    }
                    this.ringTimer = null;
                    this.ringStopTimer = null;
                },

                notifyBrowser() {
                    if (!('Notification' in window) || Notification.permission !== 'granted') {
                        return;
                    }

                    new Notification('Your care team is ready', {
                        body: 'Join your secure video handoff now.',
                    });
                },

                dismiss(id) {
                    this.notices = this.notices.filter((notice) => notice.id !== id);
                    if (this.notices.length === 0) {
                        this.stopRinging();
                    }
                },
            };
        }
    </script>
    @endpush
@endonce
@endif
@endauth