$(document).ready(function () {
    let lastNotifData = {};

    function loadNotifications(category = 'all') {
        if (lastNotifData[category]) {
            return;
        }
        let notifContainer = $(`#notif-container-${category}`);
        notifContainer.html(`<p class="text-gray-500 text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</p>`);
        $.ajax({ 
            url: "/notifications",
            type: "GET",
            data: { category: category },
            success: function (data) {
                lastNotifData[category] = data;
                notifContainer.html("");

                if (data.length === 0) {
                    notifContainer.append('<p class="text-gray-500 text-center">No notifications available</p>');
                    return;
                }

                data.forEach(notif => {
                    let iconClass, bgColor;

                    switch (notif.category) {
                        case 'system':
                            iconClass = "fa fa-cogs text-info";
                            bgColor = "bg-info/10 dark:bg-info/15";
                            break;
                        case 'success':
                            iconClass = "fa fa-check-circle text-success";
                            bgColor = "bg-success/10 dark:bg-success/15";
                            break;
                        case 'warning':
                            iconClass = "fa fa-exclamation-triangle text-warning";
                            bgColor = "bg-warning/10 dark:bg-warning/15";
                            break;
                        case 'error':
                            iconClass = "fa fa-times-circle text-error";
                            bgColor = "bg-error/10 dark:bg-error/15";
                            break;
                        default:
                            iconClass = "fa fa-bell text-gray-500";
                            bgColor = "bg-gray-200 dark:bg-gray-700";
                            break;
                    }

                    let notifHTML = `
                    <div x-data="{ showModal: false }">
                        <div @click="showModal = true" class="flex items-center space-x-3 notif" data-id="${notif.id}" data-title="${notif.title}" data-message="${notif.message}">
                            <div class="flex size-10 shrink-0 items-center justify-center rounded-lg ${bgColor}">
                                <i class="${iconClass}"></i>
                            </div>
                            <div>
                                <p class="font-medium text-slate-600 dark:text-navy-100">${notif.title}</p>
                                <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                                    ${notif.message}
                                </div>
                            </div>
                        </div>
                        <template x-teleport="#x-teleport-target">
                            <div
                                class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                x-show="showModal"
                                role="dialog"
                                @keydown.window.escape="showModal = false"
                            >
                                <div
                                    class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                    @click="showModal = false"
                                    x-show="showModal"
                                    x-transition:enter="ease-out"
                                    x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100"
                                    x-transition:leave="ease-in"
                                    x-transition:leave-start="opacity-100"
                                    x-transition:leave-end="opacity-0"
                                ></div>
                                <div
                                    class="relative max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
                                    x-show="showModal"
                                    x-transition:enter="ease-out"
                                    x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100"
                                    x-transition:leave="ease-in"
                                    x-transition:leave-start="opacity-100"
                                    x-transition:leave-end="opacity-0"
                                >
                                    <div class="mt-4">
                                        <h2 class="text-2xl text-slate-700 dark:text-navy-100">
                                            <i class="${iconClass}"></i> ${notif.title}
                                        </h2>
                                        <p class="mt-2">
                                            ${notif.message}
                                        </p>
                                        <button
                                            @click="showModal = false"
                                            class="btn mt-6 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90"
                                        >
                                            Close
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    `;
                    notifContainer.append(notifHTML);
                });
            }
        });
    }

    $(".notif-btn").click(function () {
        loadNotifications();
    });
    
    $(".tab-button").click(function () {
        let category = $(this).data("category");
        loadNotifications(category);
    });

    $(document).on("click", ".notif", function () {
        let id = $(this).data("id");
        
        $.ajax({
            url: `/notifications/${id}/read`,
            type: "PUT",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function () {
                $(".new-notif").remove();
            }
        });
    });
});