@php
    $showButton = $showButton ?? true;
    $showDrawer = $showDrawer ?? true;
    $containerClass = $containerClass ?? 'flex items-center gap-1.5';
@endphp

<div class="{{ $containerClass }}" id="tenant_notification_center_root">
    @if($showButton)
        <button
            class="kt-btn kt-btn-ghost kt-btn-icon size-8 hover:bg-background hover:[&_i]:text-primary relative"
            data-kt-drawer-toggle="#notifications_drawer"
            id="tenant_notification_bell_btn"
            type="button"
            aria-label="Notifications">
            <i class="ki-filled ki-notification-status text-lg"></i>
            <span
                id="tenant_notification_badge"
                class="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 font-semibold hidden">
                0
            </span>
        </button>
    @endif

    @if($showDrawer)
        <div
            class="hidden kt-drawer kt-drawer-end card flex-col max-w-[90%] w-[450px] top-5 bottom-5 end-5 rounded-xl border border-border"
            data-kt-drawer="true"
            data-kt-drawer-container="body"
            id="notifications_drawer">
            <div class="flex items-center justify-between gap-2.5 text-sm text-mono font-semibold px-5 py-2.5 border-b border-b-border">
                <span>Notifications</span>
                <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-drawer-dismiss="true" type="button">
                    <i class="ki-filled ki-cross"></i>
                </button>
            </div>

            <div class="flex items-center justify-between px-5 py-3 border-b border-b-border">
                <button class="kt-btn kt-btn-sm kt-btn-outline" type="button" id="tenant_notifications_mark_all_btn">
                    Mark all read
                </button>
                <a class="kt-btn kt-btn-sm kt-btn-mono" href="{{ url('/notifications/all') }}">
                    View all
                </a>
            </div>

            <div class="grow kt-scrollable-y-auto" data-kt-scrollable="true" data-kt-scrollable-max-height="auto" data-kt-scrollable-offset="150px">
                <div class="divide-y divide-border" id="tenant_notifications_list">
                    <div class="px-5 py-6 text-sm text-muted-foreground" id="tenant_notifications_empty_state">
                        No notifications yet.
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

@if($showDrawer)
<script>
(function () {
    if (window.__tenantNotificationCenterInit) {
        return;
    }
    window.__tenantNotificationCenterInit = true;

    const endpoints = {
        count: '/api/notifications/unread-count',
        bell: '/api/notifications/bell?per_page=10',
        markRead: (id) => `/api/notifications/${id}/read`,
        markAllRead: '/api/notifications/mark-all-read'
    };

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    const badgeEl = document.getElementById('tenant_notification_badge');
    const listEl = document.getElementById('tenant_notifications_list');
    const emptyEl = document.getElementById('tenant_notifications_empty_state');
    const bellBtn = document.getElementById('tenant_notification_bell_btn');
    const markAllBtn = document.getElementById('tenant_notifications_mark_all_btn');
    const currentUserId = Number('{{ (int) auth()->id() }}');
    const allNotificationsUrl = '{{ route('theme.sphf.notifications') }}';

    function escapeHtml(value) {
        return String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/\"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    function formatWhen(rawDate) {
        if (!rawDate) {
            return '';
        }

        const d = new Date(rawDate);
        if (Number.isNaN(d.getTime())) {
            return '';
        }

        return d.toLocaleString();
    }

    function setBadge(count) {
        if (!badgeEl) {
            return;
        }

        const n = Math.max(0, Number(count || 0));
        if (n > 0) {
            badgeEl.textContent = String(n > 99 ? '99+' : n);
            badgeEl.classList.remove('hidden');
            badgeEl.classList.add('flex');
        } else {
            badgeEl.classList.add('hidden');
            badgeEl.classList.remove('flex');
        }
    }

    async function refreshCount() {
        try {
            const res = await fetch(endpoints.count, { headers: { 'Accept': 'application/json' } });
            if (!res.ok) {
                return;
            }

            const payload = await res.json();
            setBadge(payload?.data?.unread_count || 0);
        } catch (_e) {
            // Keep UI quiet on tenant-context transitions.
        }
    }

    function attachRowActions() {
        if (!listEl) {
            return;
        }

        listEl.querySelectorAll('[data-open-notification-id]').forEach((el) => {
            el.addEventListener('click', () => {
                const id = (el.getAttribute('data-open-notification-id') || '').trim();
                if (!id) {
                    window.location.href = allNotificationsUrl;
                    return;
                }
                openNotificationDetail(id);
            });
        });

        listEl.querySelectorAll('[data-mark-read-id]').forEach((el) => {
            el.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                const id = (el.getAttribute('data-mark-read-id') || '').trim();
                if (!id) {
                    return;
                }
                openNotificationDetail(id);
            });
        });
    }

    function openNotificationDetail(id) {
        window.location.href = `${allNotificationsUrl}?open_notification_id=${encodeURIComponent(id)}`;
    }

    async function refreshBell() {
        if (!listEl) {
            return;
        }

        try {
            const res = await fetch(endpoints.bell, { headers: { 'Accept': 'application/json' } });
            if (!res.ok) {
                return;
            }

            const payload = await res.json();
            const rows = Array.isArray(payload?.data) ? payload.data : [];

            if (rows.length === 0) {
                if (emptyEl) {
                    emptyEl.classList.remove('hidden');
                }
                listEl.querySelectorAll('[data-notification-row]').forEach((r) => r.remove());
                return;
            }

            if (emptyEl) {
                emptyEl.classList.add('hidden');
            }

            listEl.querySelectorAll('[data-notification-row]').forEach((r) => r.remove());

            rows.forEach((row) => {
                const isRead = !!row.read_at;
                const wrapper = document.createElement('div');
                wrapper.setAttribute('data-notification-row', '1');
                wrapper.setAttribute('data-open-notification-id', String(row.id || ''));
                wrapper.className = 'px-5 py-3 cursor-pointer hover:bg-muted/40 transition-colors';

                const severity = escapeHtml(row.severity || 'green');
                const title = escapeHtml(row.title || 'Notification');
                const body = escapeHtml(row.body || '');
                const when = escapeHtml(formatWhen(row.created_at));

                wrapper.innerHTML = `
                    <div class="flex items-start justify-between gap-3 ${isRead ? 'opacity-70' : ''}">
                        <div class="min-w-0">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="kt-badge kt-badge-sm kt-badge-outline">${severity}</span>
                                <span class="text-xs text-muted-foreground">${when}</span>
                            </div>
                            <div class="text-sm font-semibold text-mono truncate">${title}</div>
                            <div class="text-xs text-muted-foreground mt-1">${body}</div>
                        </div>
                        ${isRead ? '' : `<button class="kt-btn kt-btn-xs kt-btn-outline" type="button" data-mark-read-id="${escapeHtml(row.id || '')}">Read</button>`}
                    </div>
                `;

                listEl.appendChild(wrapper);
            });

            attachRowActions();
        } catch (_e) {
            // Keep UI quiet on transient API failures.
        }
    }

    async function markAllRead() {
        try {
            await fetch(endpoints.markAllRead, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                }
            });
        } catch (_e) {
            // Ignore and refresh state.
        }

        await Promise.all([refreshBell(), refreshCount()]);
    }

    if (bellBtn) {
        bellBtn.addEventListener('click', () => {
            refreshBell();
            refreshCount();
        });
    }

    if (markAllBtn) {
        markAllBtn.addEventListener('click', markAllRead);
    }

    refreshCount();
    setInterval(refreshCount, 20000);

    // WebSocket-ready hook. Works when Laravel Echo is configured.
    if (window.Echo && currentUserId > 0) {
        try {
            window.Echo.private(`users.${currentUserId}.notifications`)
                .listen('.notification.created', () => {
                    refreshCount();
                    refreshBell();
                });
        } catch (_e) {
            // Keep optional transport silent if channel is unavailable.
        }
    }
})();
</script>
@endif