@auth
@if (auth()->user()->isPcp() || auth()->user()->isBhcm())
<div
    x-data="providerAssessmentNotificationListener({
        userId: {{ auth()->id() }},
        patientShowUrlTemplate: @js(route('admin.patients.show', ['patientProfile' => '__ID__'])),
    })"
    x-init="init()"
    class="pointer-events-none fixed bottom-5 right-5 z-[90] w-[min(24rem,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-accent-muted/60 bg-white shadow-[0_18px_50px_-24px_rgba(11,39,84,0.55)]">
            <div class="flex items-start gap-3 p-4">
                <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-accent-muted text-accent">
                    <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="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </div>

                <a :href="notice.url" class="min-w-0 flex-1">
                    <p class="text-sm font-semibold text-accent" x-text="notice.title"></p>
                    <p class="mt-0.5 text-sm text-ink-secondary" x-text="notice.body"></p>
                    <p class="mt-2 text-xs font-medium text-accent-hover">Open patient chart</p>
                </a>

                <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 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 providerAssessmentNotificationListener({ userId, patientShowUrlTemplate }) {
            return {
                notices: [],
                broadcastsSubscribed: false,

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

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

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

                        this.broadcastsSubscribed = true;
                        window.Echo.private(`App.Models.User.${userId}`)
                            .listen('.assessment.completed', (payload) => this.onCompleted(payload));
                    };

                    subscribe();

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

                onCompleted(payload) {
                    const id = `${payload.assessment_response_id}-${Date.now()}`;
                    const patientProfileId = payload.patient_profile_id;

                    this.notices.unshift({
                        id,
                        title: 'Assessment completed',
                        body: 'A patient assessment is ready for review.',
                        url: patientShowUrlTemplate.replace('__ID__', patientProfileId),
                    });

                    this.notices = this.notices.slice(0, 4);
                    window.setTimeout(() => this.dismiss(id), 9000);
                },

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