@php
    $notifJs = [
        'feedUrl' => route('admin.notifications.feed'),
        'markUrl' => route('admin.notifications.mark-read'),
        'clearUrl' => route('admin.notifications.clear-history'),
        'labels' => [
            'title' => __('Notifications'),
            'posts' => __('New posts'),
            'comments' => __('New comments'),
            'registrations' => __('New registrations'),
            'emptyPosts' => __('No posts yet'),
            'emptyComments' => __('No comments yet'),
            'emptyUsers' => __('No registrations yet'),
            'emptySinceClear' => __('Nothing new since you cleared the list.'),
            'onlySinceClear' => __('Only activity after clearing is shown here.'),
            'clearHistory' => __('Clear history'),
            'clearHistoryConfirm' => __('Clear notification history? The list will stay empty until new posts, comments or registrations arrive.'),
            'newBadge' => __('New'),
            'loading' => __('Loading...'),
            'published' => __('Published'),
            'draft' => __('Draft'),
            'onArticle' => __('On article'),
        ],
    ];
@endphp

<div
    class="relative"
    x-data="adminNotificationBell({{ \Illuminate\Support\Js::from($notifJs) }}, {{ (int) ($adminNotificationCount ?? 0) }})"
>
    <button
        type="button"
        @click="toggle()"
        class="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-dark-700 relative"
        :aria-expanded="open"
        aria-haspopup="true"
    >
        <i class="fas fa-bell"></i>
        <span
            x-show="badge > 0"
            x-cloak
            class="absolute -top-0.5 -right-0.5 min-w-[1.25rem] h-5 px-1 flex items-center justify-center bg-red-500 rounded-full text-[10px] font-bold text-white leading-none"
            x-text="badge > 9 ? '9+' : badge"
        ></span>
    </button>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-cloak
        @click.away="close()"
        @keydown.escape.window="if (open) close()"
        class="absolute right-0 mt-2 w-[min(100vw-2rem,22rem)] max-h-[min(80vh,28rem)] overflow-y-auto rounded-xl border border-gray-200 dark:border-dark-700 bg-white dark:bg-dark-800 shadow-xl z-[60]"
    >
        <div class="sticky top-0 z-10 flex items-center justify-between gap-2 px-4 py-3 border-b border-gray-100 dark:border-dark-700 bg-white/95 dark:bg-dark-800/95 backdrop-blur-sm">
            <span class="text-sm font-semibold text-gray-900 dark:text-white truncate" x-text="config.labels.title"></span>
            <div class="flex items-center shrink-0 gap-0.5">
                <button
                    type="button"
                    @click.stop="clearHistory()"
                    class="p-2 rounded-lg text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-dark-700"
                    :title="config.labels.clearHistory"
                >
                    <i class="fas fa-trash-alt text-sm"></i>
                </button>
                <button type="button" @click="close()" class="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-dark-700">
                    <i class="fas fa-times text-sm"></i>
                </button>
            </div>
        </div>

        <template x-if="loading">
            <div class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                <i class="fas fa-spinner fa-spin mr-2"></i>
                <span x-text="config.labels.loading"></span>
            </div>
        </template>

        <template x-if="!loading && data">
            <div class="py-2">
                <p
                    x-show="data.cleared_since"
                    class="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-dark-700"
                    x-text="config.labels.onlySinceClear"
                ></p>
                <!-- Beiträge -->
                <div class="px-3 pb-2">
                    <div class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 px-1 py-2" x-text="config.labels.posts"></div>
                    <template x-if="!data.posts || data.posts.length === 0">
                        <p class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400" x-text="data.cleared_since ? config.labels.emptySinceClear : config.labels.emptyPosts"></p>
                    </template>
                    <template x-if="data.posts && data.posts.length > 0">
                        <div class="space-y-0.5">
                            <template x-for="item in data.posts" :key="'p-' + item.id">
                                <a
                                    :href="item.url"
                                    class="flex flex-col gap-1 rounded-lg px-2 py-2 hover:bg-gray-50 dark:hover:bg-dark-700/80 text-left"
                                    @click="close()"
                                >
                                    <div class="flex items-start justify-between gap-2">
                                        <span class="text-sm font-medium text-gray-900 dark:text-white line-clamp-2" x-text="item.title"></span>
                                        <span
                                            x-show="item.is_new"
                                            class="shrink-0 text-[10px] font-bold uppercase px-1.5 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"
                                            x-text="config.labels.newBadge"
                                        ></span>
                                    </div>
                                    <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                                        <span
                                            class="font-medium"
                                            :class="item.published ? 'text-green-600 dark:text-green-400' : 'text-amber-600 dark:text-amber-400'"
                                            x-text="item.published ? config.labels.published : config.labels.draft"
                                        ></span>
                                        <span>·</span>
                                        <span x-text="item.created_at_human"></span>
                                    </div>
                                </a>
                            </template>
                        </div>
                    </template>
                </div>

                <div class="border-t border-gray-100 dark:border-dark-700 my-1"></div>

                <!-- Kommentare -->
                <div class="px-3 pb-2">
                    <div class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 px-1 py-2" x-text="config.labels.comments"></div>
                    <template x-if="!data.comments || data.comments.length === 0">
                        <p class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400" x-text="data.cleared_since ? config.labels.emptySinceClear : config.labels.emptyComments"></p>
                    </template>
                    <template x-if="data.comments && data.comments.length > 0">
                        <div class="space-y-0.5">
                            <template x-for="item in data.comments" :key="'c-' + item.id">
                                <a
                                    :href="item.url"
                                    class="flex flex-col gap-1 rounded-lg px-2 py-2 hover:bg-gray-50 dark:hover:bg-dark-700/80 text-left"
                                    @click="close()"
                                >
                                    <div class="flex items-start justify-between gap-2">
                                        <span class="text-sm text-gray-800 dark:text-gray-200 line-clamp-2" x-text="item.excerpt"></span>
                                        <span
                                            x-show="item.is_new"
                                            class="shrink-0 text-[10px] font-bold uppercase px-1.5 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"
                                            x-text="config.labels.newBadge"
                                        ></span>
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                        <span class="font-medium text-gray-700 dark:text-gray-300" x-text="item.user_name"></span>
                                        <span> · </span>
                                        <span x-text="config.labels.onArticle"></span>
                                        <span class="italic truncate" x-text="' ' + item.news_title"></span>
                                    </div>
                                    <div class="text-xs text-gray-400" x-text="item.created_at_human"></div>
                                </a>
                            </template>
                        </div>
                    </template>
                </div>

                <div class="border-t border-gray-100 dark:border-dark-700 my-1"></div>

                <!-- Registrierungen -->
                <div class="px-3 pb-3">
                    <div class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 px-1 py-2" x-text="config.labels.registrations"></div>
                    <template x-if="!data.users || data.users.length === 0">
                        <p class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400" x-text="data.cleared_since ? config.labels.emptySinceClear : config.labels.emptyUsers"></p>
                    </template>
                    <template x-if="data.users && data.users.length > 0">
                        <div class="space-y-0.5">
                            <template x-for="item in data.users" :key="'u-' + item.id">
                                <a
                                    :href="item.url"
                                    class="flex items-start justify-between gap-2 rounded-lg px-2 py-2 hover:bg-gray-50 dark:hover:bg-dark-700/80 text-left"
                                    @click="close()"
                                >
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate" x-text="item.name"></p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="item.email"></p>
                                        <p class="text-xs text-gray-400 mt-0.5" x-text="item.created_at_human"></p>
                                    </div>
                                    <span
                                        x-show="item.is_new"
                                        class="shrink-0 text-[10px] font-bold uppercase px-1.5 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 h-fit"
                                        x-text="config.labels.newBadge"
                                    ></span>
                                </a>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
        </template>
    </div>
</div>

@once
    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('adminNotificationBell', (config, initialBadge) => ({
                    open: false,
                    loading: false,
                    data: null,
                    badge: initialBadge,
                    config,

                    toggle() {
                        this.open = !this.open;
                        if (this.open) {
                            this.refresh();
                        }
                    },

                    close() {
                        this.open = false;
                    },

                    async clearHistory() {
                        if (!window.confirm(this.config.labels.clearHistoryConfirm)) {
                            return;
                        }
                        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                        try {
                            const r = await fetch(config.clearUrl, {
                                method: 'POST',
                                headers: {
                                    Accept: 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': token || '',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                                body: '{}',
                            });
                            if (r.ok) {
                                this.data = await r.json();
                                this.badge = 0;
                            }
                        } catch (e) {
                            /* ignore */
                        }
                    },

                    async refresh() {
                        this.loading = true;
                        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                        try {
                            const r = await fetch(config.feedUrl, {
                                headers: {
                                    Accept: 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                            });
                            if (!r.ok) {
                                throw new Error('feed failed');
                            }
                            this.data = await r.json();
                            this.badge = this.data.unread_count ?? 0;

                            const mark = await fetch(config.markUrl, {
                                method: 'POST',
                                headers: {
                                    Accept: 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': token || '',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                                body: '{}',
                            });
                            if (mark.ok) {
                                this.badge = 0;
                            }
                        } catch (e) {
                            this.data = { posts: [], comments: [], users: [] };
                        } finally {
                            this.loading = false;
                        }
                    },
                }));
            });
        </script>
    @endpush
@endonce
