@auth
@can('viewAny', App\Models\EmergencySafetyAlert::class)
<div x-data="emergencyAlertWidget({
        tenantId: {{ auth()->user()->tenant_id ?? session('impersonating_tenant_id', 'null') }},
        indexUrl: '{{ route('admin.emergency-alerts.index') }}',
        showUrlTemplate: '{{ route('admin.emergency-alerts.show', ['alert' => '__ID__']) }}',
        acknowledgeUrlTemplate: '{{ route('admin.emergency-alerts.acknowledge', ['alert' => '__ID__']) }}',
    })"
    x-init="init()"
    class="relative">

    {{-- Bell trigger --}}
    <button @click="open = !open" type="button" class="relative flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-2 transition-colors">
        <svg class="w-5 h-5 text-ink-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
        </svg>
        <span x-show="alerts.length > 0" x-cloak
            class="absolute -top-0.5 -right-0.5 w-5 h-5 rounded-full bg-status-critical text-white text-[10px] font-bold flex items-center justify-center alert-flashing ring-2 ring-surface-1"
            x-text="alerts.length"></span>
    </button>

    {{-- Dropdown --}}
    <div x-show="open" x-cloak @click.outside="open = false"
        class="absolute right-0 mt-2 w-96 card-raised shadow-2xl shadow-black/40 z-50 overflow-hidden">
        <div class="px-4 py-3 border-b border-border-subtle flex items-center justify-between">
            <h3 class="text-sm font-semibold text-accent">Emergency Safety Alerts</h3>
            <span class="text-xs text-ink-muted" x-text="alerts.length + ' active'"></span>
        </div>

        <div class="max-h-96 overflow-y-auto divide-y divide-border-subtle">
            <template x-if="alerts.length === 0">
                <p class="px-4 py-6 text-sm text-ink-muted text-center">No active alerts.</p>
            </template>

            <template x-for="alert in alerts" :key="alert.id">
                <div class="px-4 py-3 bg-status-critical/10">
                    <div class="flex items-start justify-between gap-2">
                        <div>
                            <p class="text-sm font-semibold text-status-critical" x-text="alert.patient_name ?? 'Unknown patient'"></p>
                            <p class="text-xs text-ink-secondary mt-0.5" x-text="'Location: ' + alert.room_location"></p>
                            <p class="text-xs text-ink-secondary" x-text="'PCP: ' + (alert.pcp_name ?? '—') + ' · BHCM: ' + (alert.bhcm_name ?? '—')"></p>
                            <template x-if="alert.question_text">
                                <div class="mt-2 rounded-lg bg-surface-1 border border-status-critical/20 px-2.5 py-2">
                                    <p class="text-xs text-ink-secondary" x-text="alert.question_text"></p>
                                    <p class="text-xs font-semibold text-status-critical mt-0.5" x-text="'Response: ' + alert.answer_value"></p>
                                </div>
                            </template>
                            <p class="text-xs text-ink-muted mt-1" x-text="'Triggered ' + formatTime(alert.triggered_at)"></p>
                        </div>
                    </div>
                    <button @click="startAcknowledge(alert)" type="button"
                        class="mt-2 w-full rounded-lg bg-status-critical text-white text-xs font-semibold py-1.5 hover:opacity-90">
                        Acknowledge Alert
                    </button>
                </div>
            </template>
        </div>
    </div>

    {{-- Confirmation modal --}}
    <template x-teleport="body">
        <div x-show="confirmingAlert !== null" x-cloak
            x-transition.opacity.duration.150ms
            @keydown.escape.window="confirmingAlert = null"
            class="fixed inset-0 z-[100] flex items-center justify-center bg-accent/70 px-4 py-6 backdrop-blur-sm sm:px-6"
            role="presentation">
            <div @click.outside="confirmingAlert = null"
                x-show="confirmingAlert !== null"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 translate-y-3 scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                x-transition:leave-end="opacity-0 translate-y-2 scale-95"
                class="w-full max-w-md overflow-hidden rounded-lg border border-border-subtle bg-white shadow-[0_28px_80px_-28px_rgba(11,39,84,0.55)]"
                role="dialog"
                aria-modal="true"
                aria-labelledby="emergency-alert-confirm-title">
                <div class="border-b border-status-critical/20 bg-status-critical/5 px-5 py-4">
                    <p class="text-xs font-bold uppercase tracking-wider text-status-critical">Emergency safety alert</p>
                    <h3 id="emergency-alert-confirm-title" class="mt-1 text-lg font-semibold text-accent">Confirm response</h3>
                </div>

                <div class="px-5 py-4">
                    <p class="text-sm leading-6 text-ink-secondary">
                        Confirm that you have physically responded to this safety alert. Your user ID and the current timestamp will be recorded for audit purposes.
                    </p>

                    <div class="mt-4 rounded-lg border border-border-subtle bg-surface-2 px-3 py-3">
                        <p class="text-xs font-semibold uppercase tracking-wider text-ink-muted">Patient</p>
                        <p class="mt-1 text-base font-semibold text-accent" x-text="confirmingAlert?.patient_name ?? 'Selected patient'"></p>

                        <template x-if="confirmingAlert?.question_text">
                            <div class="mt-3 rounded-lg border border-status-critical/20 bg-white px-3 py-2">
                                <p class="text-xs leading-5 text-ink-secondary" x-text="confirmingAlert.question_text"></p>
                                <p class="mt-1 text-xs font-semibold text-status-critical" x-text="'Response: ' + confirmingAlert.answer_value"></p>
                            </div>
                        </template>
                    </div>
                </div>

                <div class="flex flex-col-reverse gap-2 border-t border-border-subtle bg-surface-1 px-5 py-4 sm:flex-row sm:justify-end">
                    <button @click="confirmingAlert = null; open = true" type="button"
                        class="btn-secondary min-h-10 px-5">
                        Cancel
                    </button>
                    <button @click="acknowledge(confirmingAlert)" type="button"
                        class="inline-flex min-h-10 items-center justify-center rounded-lg bg-status-critical px-5 text-sm font-semibold text-white transition-all hover:opacity-90 active:scale-[0.98]">
                        Confirm & Acknowledge
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>

@once
    @push('scripts')
    <script>
        function emergencyAlertWidget({ tenantId, indexUrl, showUrlTemplate, acknowledgeUrlTemplate }) {
            return {
                open: false,
                alerts: [],
                confirmingAlert: null,
                broadcastsSubscribed: false,

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

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

                            this.broadcastsSubscribed = true;
                            window.Echo.private(`tenant.${tenantId}.providers`)
                                .listen('.safety-alert.triggered', (payload) => this.onTriggered(payload))
                                .listen('.safety-alert.acknowledged', (payload) => this.onAcknowledged(payload));
                        };

                        subscribe();

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

                async loadInitial() {
                    const response = await fetch(indexUrl, { headers: { 'Accept': 'application/json' } });
                    if (!response.ok) return;
                    const data = await response.json();
                    this.alerts = data.alerts;
                },

                async onTriggered(payload) {
                    const url = showUrlTemplate.replace('__ID__', payload.alert_id);
                    const response = await fetch(url, { headers: { 'Accept': 'application/json' } });
                    if (!response.ok) return;
                    const data = await response.json();
                    this.alerts.push(data.alert);
                    this.open = true;
                },

                onAcknowledged(payload) {
                    this.alerts = this.alerts.filter((a) => a.id !== payload.alert_id);
                },

                startAcknowledge(alert) {
                    this.confirmingAlert = alert;
                    this.open = false;
                },

                async acknowledge(alert) {
                    if (!alert) return;

                    const url = acknowledgeUrlTemplate.replace('__ID__', alert.id);
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                        },
                    });

                    if (response.ok) {
                        this.alerts = this.alerts.filter((a) => a.id !== alert.id);
                        this.confirmingAlert = null;
                        this.open = false;
                    }
                },

                formatTime(iso) {
                    return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                },
            };
        }
    </script>
    @endpush
@endonce
@endcan
@endauth