script.js

const username = localStorage.getItem("username");
const room = localStorage.getItem("room");
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
const socket = new WebSocket(`${protocol}://${window.location.hostname}:3000`);

if (!username || !room) {
    window.location.href = "index.html"; // Redirect if username or room is missing
}

document.getElementById("chat-room-title").innerText = `Room: ${room}`;

const messagesDiv = document.getElementById("messages");
const messageInput = document.getElementById("message");
const sendBtn = document.getElementById("send");
const typingIndicator = document.getElementById("typing-indicator");
const fileInput = document.getElementById("file-input");
const fileUploadBtn = document.getElementById("file-upload-btn");
const leaveChatBtn = document.getElementById("leave-chat");
const userListDiv = document.getElementById("user-list"); // Sidebar user list

let typingTimeout;

// Notify Server that User Joined Room
socket.onopen = () => {
    socket.send(JSON.stringify({ type: "join", username, room }));
};

// Load Previous Messages from LocalStorage
const storedMessages = JSON.parse(localStorage.getItem(`chat_${room}`)) || [];
storedMessages.forEach(msg => addMessage(msg));

// Send Message on Button Click
sendBtn.addEventListener("click", sendMessage);
messageInput.addEventListener("keypress", (event) => {
    if (event.key === "Enter") sendMessage();
});

function sendMessage() {
    const message = messageInput.value.trim();
    if (message) {
        socket.send(JSON.stringify({ type: "message", username, message, room }));
        messageInput.value = "";
    }
}

// Send File
fileUploadBtn.addEventListener("click", () => fileInput.click());

fileInput.addEventListener("change", () => {
    const file = fileInput.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = () => {
            socket.send(JSON.stringify({
                type: "file",
                username,
                room,
                fileName: file.name,
                fileType: file.type,
                fileContent: reader.result // Base64 data
            }));
        };
        reader.readAsDataURL(file);
    }
});

// Show Files in Chat
function addFileMessage(data) {
    const msgDiv = document.createElement("div");
    msgDiv.classList.add("message");
    const senderName = data.username === username ? "You" : data.username;

    if (data.fileType.startsWith("image/")) {
        msgDiv.innerHTML = `<strong>${senderName}:</strong><br>
                            <img src="${data.fileContent}" alt="${data.fileName}" style="max-width: 100%; border-radius: 8px;">`;
    } else {
        msgDiv.innerHTML = `<strong>${senderName}:</strong><br>
                            <a href="${data.fileContent}" download="${data.fileName}" style="color: blue;">
                            📂 ${data.fileName} (Download)</a>`;
    }

    msgDiv.style.background = data.username === username ? "black" : "grey";
    messagesDiv.appendChild(msgDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

// Typing Indicator
messageInput.addEventListener("input", () => {
    socket.send(JSON.stringify({ type: "typing", username, room }));
    clearTimeout(typingTimeout);
    typingTimeout = setTimeout(() => {
        socket.send(JSON.stringify({ type: "stop_typing", room }));
    }, 2000);
});

//  Receive Messages & Update UI
socket.onmessage = (event) => {
    const data = JSON.parse(event.data);

    if (data.room === room) {
        if (data.type === "message") addMessage(data);
        else if (data.type === "file") addFileMessage(data);
        else if (data.type === "system") addSystemMessage(data.message);
        else if (data.type === "typing") typingIndicator.innerText = `${data.username} is typing...`;
        else if (data.type === "stop_typing") typingIndicator.innerText = "";
        else if (data.type === "user_list") updateActiveUsersUI(data.users);
    }
};

// Update Active Users List in Sidebar
function updateActiveUsersUI(users) {
    userListDiv.innerHTML = ""; // Clear the existing user list

    users.forEach(user => {
        const li = document.createElement("li");
        li.classList.add("active-user-item");

        // Green dot for active users
        li.innerHTML = ` ${user}<span class="green-dot"></span>`;
        userListDiv.appendChild(li);
    });
}

// Add Message to UI
function addMessage(data) {
    const msgDiv = document.createElement("div");
    msgDiv.classList.add("message");
    msgDiv.style.background = data.username === username ? "black" : "grey";
    msgDiv.style.textAlign = data.username === username ? "right" : "left";
    msgDiv.innerHTML = `<strong>${data.username === username ? "You" : data.username}:</strong> ${data.message}`;
    messagesDiv.appendChild(msgDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

// System Messages
function addSystemMessage(message) {
    const msgDiv = document.createElement("div");
    msgDiv.classList.add("system-message");
    msgDiv.style.color = "black";
    msgDiv.style.fontWeight = "bold";
    msgDiv.style.textAlign = "center"; 
    msgDiv.innerText = message;
    messagesDiv.appendChild(msgDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

// Leave Chat
leaveChatBtn.addEventListener("click", () => {
    socket.send(JSON.stringify({ type: "leave", username, room }));
    localStorage.removeItem("username");
    localStorage.removeItem("room");
    setTimeout(() => window.location.href = "index.html", 500);
});

// WebSocket Auto-Reconnect
socket.onclose = () => {
    setTimeout(() => {
        window.location.reload();
    }, 3000);
};

// Handle Errors
socket.onerror = (err) => {
    console.error("WebSocket Error:", err);
};