document.addEventListener('DOMContentLoaded', function () {
    // Create connection to the hub
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/notificationHub")
        .configureLogging(signalR.LogLevel.Error) 
        .withAutomaticReconnect()
        .build();

    // Get DOM elements
    const sendButton = document.getElementById("sendButton");
    const joinGroupButton = document.getElementById("joinGroupButton");
    const sendToGroupButton = document.getElementById("sendToGroupButton");
    const userInput = document.getElementById("userInput");
    const messageInput = document.getElementById("messageInput");
    const groupInput = document.getElementById("groupInput");
    const messagesList = document.getElementById("messagesList");

    // Handle receiving messages
    connection.on("ReceiveMessage", function (user, message) {
        const li = document.createElement("li");
        li.className = "message";

        const userSpan = document.createElement("span");
        userSpan.className = "user";
        userSpan.textContent = user + ": ";

        const messageText = document.createTextNode(message);

        li.appendChild(userSpan);
        li.appendChild(messageText);
        messagesList.insertBefore(li, messagesList.firstChild);
    });

    // Handle user connection events
    connection.on("UserConnected", function (connectionId) {
        const li = document.createElement("li");
        li.className = "message";
        li.textContent = `User connected: ${connectionId}`;
        messagesList.insertBefore(li, messagesList.firstChild);
    });

    connection.on("UserDisconnected", function (connectionId) {
        const li = document.createElement("li");
        li.className = "message";
        li.textContent = `User disconnected: ${connectionId}`;
        messagesList.insertBefore(li, messagesList.firstChild);
    });

    // Start the connection
    connection.start()
        .then(function () {
           // console.log("SignalR Connected!");

            // Add send message functionality
            sendButton.addEventListener("click", function (event) {
                const user = userInput.value || "Anonymous";
                const message = messageInput.value;

                if (message) {
                    connection.invoke("SendMessage", user, message)
                        .catch(function (err) {
                            console.error(err.toString());
                        });
                    messageInput.value = "";
                }
                event.preventDefault();
            });

            // Add join group functionality
            joinGroupButton.addEventListener("click", function (event) {
                const groupName = groupInput.value;

                if (groupName) {
                    connection.invoke("JoinGroup", groupName)
                        .then(function () {
                            const li = document.createElement("li");
                            li.className = "message";
                            li.textContent = `Joined group: ${groupName}`;
                            messagesList.insertBefore(li, messagesList.firstChild);
                        })
                        .catch(function (err) {
                            console.error(err.toString());
                        });
                }
                event.preventDefault();
            });

            // Add send to group functionality
            sendToGroupButton.addEventListener("click", function (event) {
                const user = userInput.value || "Anonymous";
                const message = messageInput.value;
                const groupName = groupInput.value;

                if (message && groupName) {
                    connection.invoke("SendMessageToGroup", groupName, user, message)
                        .catch(function (err) {
                            console.error(err.toString());
                        });
                    messageInput.value = "";
                }
                event.preventDefault();
            });
        })
        .catch(function (err) {
            console.error(err.toString());
        });
});