<script setup>
import { ref, onMounted } from 'vue';
import { usePage, router, Link } from '@inertiajs/vue3';
import { BellIcon, CheckCircleIcon, EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
import Icon from "@/Shared/Icon.vue";

// Reactive state for local component
const showDropdown = ref(false);
const showOptionsMenu = ref(false);
const isBellShaking = ref(false); // For animation

const page = usePage();

// Get initial data from Inertia
const notifications = ref(page.props.notifications || []);
const notificationCount = ref(page.props.notification_count || 0);

const markAsReadAndVisit = (notification) => {
    router.post(route('notifications.read', notification.id), {}, {
        onSuccess: () => {
            showDropdown.value = false;
        },
    });
};

const markAllAsRead = () => {
    router.post(route('notifications.markAllAsRead'), {}, {
        preserveScroll: true,
        onSuccess: () => {
            // Manually update frontend state to reflect change immediately
            notifications.value.forEach(n => n.read_at = new Date().toISOString());
            notificationCount.value = 0;
            showOptionsMenu.value = false;
            showDropdown.value = false;
        }
    })
}

onMounted(() => {
    if (window.Echo && page.props.auth?.user) {
        // Check if Echo has authentication configured (safely check for options and authEndpoint)
        if (window.Echo.options && window.Echo.options.authEndpoint) {
            const channel = window.Echo.private(`App.Models.User.${page.props.auth.user.id}`)

            // Add subscription error handler (only log in dev)
            if (channel.subscription) {
                channel.subscription.bind('pusher:subscription_error', (status) => {
                    if (import.meta.env.DEV) {
                        console.error('NotificationBell: Channel subscription error:', status)
                    }
                })
            }

            channel
                .notification((notification) => {
                    // Manually add id and data wrapper to match structure of database notifications
                    const newNotification = {
                        id: notification.id, // Pusher doesn't send the UUID, so we need to generate it or get it from the payload
                        data: { ...notification },
                        read_at: null,
                    };
                    notifications.value.unshift(newNotification);
                notificationCount.value++;

                // Trigger bell animation
                isBellShaking.value = true;
                setTimeout(() => {
                    isBellShaking.value = false;
                }, 700); // Duration should match animation duration
            });
        }
    }
});
</script>

<template>
    <div class="relative flex">
        <button @click="showDropdown = !showDropdown" type="button" class="relative rounded-full text-gray-600 dark:text-slate-400 hover:text-black dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 transition-colors duration-200">
            <span class="sr-only">View notifications</span>
            <Icon name="notification" class="h-7 w-7" :class="{ 'animate-bell-shake': isBellShaking }" aria-hidden="true" />
            <span v-if="notificationCount > 0" class="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 dark:bg-red-600 text-white text-xs flex items-center justify-center font-medium shadow-sm dark:shadow-none dark:ring-1 dark:ring-red-400/30">{{ notificationCount }}</span>
        </button>

        <!-- Dropdown -->
        <div v-if="showDropdown" @click.away="showDropdown = false" class="absolute right-0 z-[1000] top-7 w-80 origin-top-right rounded-xl bg-white dark:bg-slate-800 shadow-lg dark:shadow-none ring-1 ring-black/5 dark:ring-slate-700/80 focus:outline-none overflow-hidden">
            <div class="flex justify-between items-center px-4 py-2.5 text-sm text-gray-700 dark:text-slate-200 font-bold border-b border-gray-200 dark:border-slate-700">
                <span>{{ $t('Notifications') }}</span>
                <!-- 3-Dot Options Menu -->
                <div class="relative">
                    <button @click.stop="showOptionsMenu = !showOptionsMenu" type="button" class="p-1 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-700 dark:hover:text-slate-200 transition-colors duration-200">
                        <EllipsisVerticalIcon class="h-5 w-5" />
                    </button>
                    <div v-if="showOptionsMenu" @click.away="showOptionsMenu = false" class="absolute right-0 mt-1 w-48 bg-white dark:bg-slate-800 rounded-lg shadow-lg dark:shadow-none py-1 ring-1 ring-black/5 dark:ring-slate-700/80 border border-gray-100 dark:border-slate-700">
                        <a @click.prevent="markAllAsRead" href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700/80">Mark all as read</a>
                        <Link :href="route('notifications.index')" class="block px-4 py-2 text-sm text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700/80">All Notifications</Link>
                    </div>
                </div>
            </div>
            <div v-if="notifications.length > 0" class="max-h-96 overflow-y-auto">
                <a v-for="notification in notifications" :key="notification.id" @click.prevent="markAsReadAndVisit(notification)" href="#" class="block px-4 py-3 text-sm text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700/60 border-b border-gray-100 dark:border-slate-700/80 transition-colors duration-200" :class="{'font-semibold': !notification.read_at}">
                    <p class="text-gray-800 dark:text-slate-200">{{ notification.data.message }}</p>
                    <p class="text-xs text-gray-400 dark:text-slate-500 mt-1">{{ $t('Ticket') }}: {{ notification.data.ticket_subject }}</p>
                </a>
            </div>
            <div v-else class="px-4 py-5 text-center">
                <CheckCircleIcon class="h-8 w-8 text-green-400 dark:text-green-500 mx-auto mb-2" />
                <p class="text-sm text-gray-500 dark:text-slate-400">You're all caught up!</p>
            </div>
        </div>
    </div>
</template>
