// ==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';

    // Function to create the resizable, collapsible WebSocket overlay
    function createWebSocketOverlay() {
        const overlay = document.createElement("div");
        overlay.id = "webSocketOverlay";
        overlay.style.position = "fixed";
        overlay.style.top = "10%";
        overlay.style.left = "10%";
        overlay.style.width = "600px"; // Set the default size to 600px width
        overlay.style.height = "60%";
        overlay.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
        overlay.style.zIndex = "9999";
        overlay.style.display = "none"; // Initially hidden
        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";

        // Create a close button for the overlay
        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"; // Show the reopen button when overlay is closed
        });
        overlay.appendChild(closeButton);

        // Create the main table to hold all message items
        const table = document.createElement("table");
        table.style.width = "100%";
        table.style.backgroundColor = "white";
        table.style.borderCollapse = "collapse";
        overlay.appendChild(table);

        // Append overlay to the document body
        document.body.appendChild(overlay);

        return { overlay, table };
    }

    // Method to create a collapsible section for each message type
    function createCollapsibleSection(title, 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>${symbol}</strong> ${title ? title : ""}`; // Avoid showing "Unknown" if no title

        // Toggle the visibility of the content when clicked
        header.addEventListener("click", () => {
            const contentRow = section.querySelector(".contentRow");
            if (contentRow.style.display === "none") {
                contentRow.style.display = "table-row";
            } else {
                contentRow.style.display = "none";
            }
        });

        section.appendChild(header);

        // Create a row for content (initially hidden)
        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;
    }

    // Method to display WebSocket messages
    function displayWebSocketMessage(message, table) {
        const data = JSON.parse(message); // Assuming message is a JSON string

        // Add the broadcast section
        if (data.type === "broadcast") {
            const broadcastRow = document.createElement("tr");
            const broadcastCell = document.createElement("td");
            broadcastCell.colSpan = 2;
            broadcastCell.style.padding = "10px";
            broadcastCell.style.backgroundColor = "#ffeb3b";
            broadcastCell.textContent = JSON.stringify(data, null, 2); // Format the broadcast JSON
            broadcastRow.appendChild(broadcastCell);
            table.appendChild(broadcastRow);
        } else {
            // Create a collapsible section for non-broadcast messages
            const section = createCollapsibleSection(data.type || "", JSON.stringify(data, null, 2), "🔽");
            table.appendChild(section);
        }
    }

    // Override WebSocket constructor to intercept WebSocket creation
    const originalWebSocket = window.WebSocket;
    window.WebSocket = function(url, protocols) {
        console.log('WebSocket URL:', url);

        // Call original WebSocket constructor
        const ws = new originalWebSocket(url, protocols);

        // Create the overlay and table
        const { overlay, table } = createWebSocketOverlay();

        // Create the reopen button (initially hidden)
        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"; // Initially hidden
        reopenButton.style.zIndex = "10000"; // Ensure it stays on top
        reopenButton.addEventListener('click', () => {
            overlay.style.display = "flex";
            reopenButton.style.display = "none"; // Hide reopen button when overlay is open
        });
        document.body.appendChild(reopenButton);

        // Event listener for receiving messages
        ws.addEventListener('message', event => {
            displayWebSocketMessage(event.data, table);
            overlay.style.display = "flex"; // Show the overlay when a message is received
            reopenButton.style.display = "none"; // Hide reopen button when overlay is open
        });

        return ws;
    };

})();