// ==UserScript==
// @name         user table with resizable and collapsible items
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Intercept WebSocket messages on StumbleChat and display them in a resizable and collapsible table overlay
// @author       MeKLiN
// @match        https://stumblechat.com/room/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stumblechat.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let pingCount = 0;
    let messageSections = {}; // Store sections by handle
    let handleMessages = {}; // Track handles and associated messages

    const reopenButton = document.createElement("button");
    reopenButton.textContent = "Open WebSocket Log";
    reopenButton.style.position = "fixed";
    reopenButton.style.bottom = "10px";
    reopenButton.style.left = "10px";
    reopenButton.style.padding = "10px 15px";
    reopenButton.style.backgroundColor = "#4CAF50";
    reopenButton.style.color = "white";
    reopenButton.style.border = "none";
    reopenButton.style.cursor = "pointer";
    reopenButton.style.display = "none";
    reopenButton.style.zIndex = "10000";
    document.body.appendChild(reopenButton);

    function createWebSocketOverlay() {
        const overlay = document.createElement("div");
        overlay.id = "webSocketOverlay";
        overlay.style.position = "fixed";
        overlay.style.top = "10%";
        overlay.style.left = "10%";
        overlay.style.fontSize = "12px";
        overlay.style.width = "900px";
        overlay.style.height = "800px";
        overlay.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
        overlay.style.zIndex = "9999";
        overlay.style.display = "none";
        overlay.style.alignItems = "center";
        overlay.style.justifyContent = "center";
        overlay.style.padding = "10px";
        overlay.style.resize = "both";
        overlay.style.overflow = "auto";
        overlay.style.boxSizing = "border-box";
        overlay.style.cursor = "move";

        let offsetX, offsetY, isDragging = false;

        overlay.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - overlay.offsetLeft;
            offsetY = e.clientY - overlay.offsetTop;
            document.addEventListener('mousemove', dragOverlay);
            document.addEventListener('mouseup', () => {
                isDragging = false;
                document.removeEventListener('mousemove', dragOverlay);
            });
        });

        function dragOverlay(e) {
            if (isDragging) {
                overlay.style.left = (e.clientX - offsetX) + 'px';
                overlay.style.top = (e.clientY - offsetY) + 'px';
            }
        }

        const closeButton = document.createElement("button");
        closeButton.textContent = "Close";
        closeButton.style.position = "absolute";
        closeButton.style.top = "10px";
        closeButton.style.right = "10px";
        closeButton.style.padding = "5px 10px";
        closeButton.style.backgroundColor = "#ff4b5c";
        closeButton.style.color = "white";
        closeButton.style.border = "none";
        closeButton.style.cursor = "pointer";
        closeButton.addEventListener('click', () => {
            overlay.style.display = "none";
            reopenButton.style.display = "inline-block";
        });
        overlay.appendChild(closeButton);

        const table = document.createElement("table");
        table.style.width = "100%";
        table.style.backgroundColor = "white";
        table.style.borderCollapse = "collapse";
        overlay.appendChild(table);

        document.body.appendChild(overlay);

        return { overlay, table };
    }

    function createCollapsibleSection(handle, content, symbol) {
        const section = document.createElement("tr");
        const header = document.createElement("td");
        header.colSpan = 2;
        header.style.padding = "10px";
        header.style.cursor = "pointer";
        header.style.backgroundColor = "#f2f2f2";
        header.innerHTML = `<strong style="color: red;">${symbol}</strong> ${handle}`;

        header.addEventListener("click", () => {
            const contentRow = section.querySelector(".contentRow");
            contentRow.style.display = contentRow.style.display === "none" ? "table-row" : "none";
        });

        section.appendChild(header);

        const contentRow = document.createElement("tr");
        contentRow.classList.add("contentRow");
        contentRow.style.display = "none";
        const contentCell = document.createElement("td");
        contentCell.colSpan = 2;
        contentCell.style.padding = "10px";
        contentCell.style.whiteSpace = "pre-wrap";
        contentCell.textContent = content;

        contentRow.appendChild(contentCell);
        section.appendChild(contentRow);

        return section;
    }

    function displayWebSocketMessage(message, table) {
        const data = JSON.parse(message);

        if (message === "0") {
            if (!messageSections["0"]) {
                const section = createCollapsibleSection("SYSMSG: 0 ", "🟢 Total Pings: " + pingCount);
                table.appendChild(section);
                messageSections["0"] = section;
            }

            pingCount++;
            const contentRow = messageSections["0"].querySelector(".contentRow td");
            let pingLabel = contentRow.querySelector("span");
            if (pingLabel) {
                pingLabel.textContent = "🟢 Total Pings: " + pingCount;
            } else {
                pingLabel = document.createElement("span");
                pingLabel.textContent = "🟢 Total Pings: " + pingCount;
                contentRow.appendChild(pingLabel);
            }
        } else {
            const handle = data.handle;
            let symbol = "🔵";

            switch (data.stumble) {
                case "sysmsg":
                    symbol = "🟢";
                    break;
                case "join":
                case "msg":
                    symbol = "🔵";
                    break;
            }

            // Check if a section for this handle exists
            if (!messageSections[handle]) {
                const section = createCollapsibleSection(handle, JSON.stringify(data, null, 2), symbol);
                table.appendChild(section);
                messageSections[handle] = section; // Store the reference to this handle's section
                handleMessages[handle] = [data]; // Store the first message for this handle
            } else {
                // If the section exists, append the new message to the existing section
                const section = messageSections[handle];
                const contentRow = section.querySelector(".contentRow td");
                contentRow.textContent += `\n${JSON.stringify(data, null, 2)}`;
                handleMessages[handle].push(data); // Append the new message to the handle's list
            }
        }
    }

    const originalWebSocket = window.WebSocket;
    window.WebSocket = function(url, protocols) {
        console.log('WebSocket URL:', url);

        const ws = new originalWebSocket(url, protocols);

        const { overlay, table } = createWebSocketOverlay();

        ws.addEventListener('message', event => {
            displayWebSocketMessage(event.data, table);
            overlay.style.display = "flex";
            reopenButton.style.display = "none";
        });

        reopenButton.addEventListener('click', () => {
            overlay.style.display = "flex";
            reopenButton.style.display = "none";
        });

        return ws;
    };

})();