// ==UserScript==
// @name         ANDP GPT Portal Helper
// @namespace    https://www.gentics.com/
// @version      1.3
// @description  Element-Selecting Tool for ANDP-Portal
// @author       Gentics
// @match        *://*/*
// @icon         https://euca.cloud/static/egov/files/images/GEN_Logo_weisser_Text.png
// @grant        none
// @run-at       document-ready
// ==/UserScript==


(function () {
    'use strict';

    let isExtensionActive = false;
    let popupVisible = false;
    let mouseX, mouseY;
    let focusInterval;
    let oldObject = null;
    let allLinks = [];

    // Create the status dialog with a white, transparent background
    let statusDialog = document.createElement("div");
    statusDialog.id = "extensionStatusDialog"; // Assign an ID to the status dialog
    statusDialog.style.position = "fixed";
    statusDialog.style.top = "10px";
    statusDialog.style.left = "50%";
    statusDialog.style.transform = "translateX(-50%)"; // Center horizontally
    statusDialog.style.padding = "10px 15px";
    statusDialog.style.backgroundColor = "rgba(255, 255, 255, 0.9)"; // White transparent background
    statusDialog.style.color = "#333";
    statusDialog.style.borderRadius = "8px";
    statusDialog.style.fontFamily = "Arial, sans-serif";
    statusDialog.style.fontSize = "14px";
    statusDialog.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)";
    statusDialog.style.zIndex = "1000";
    statusDialog.style.textAlign = "center";
    statusDialog.style.width = "auto";
    statusDialog.style.maxWidth = "400px";
    statusDialog.style.transition = "opacity 0.3s ease";
    statusDialog.style.userSelect = "none"; // Prevent selecting the text
    statusDialog.style.pointerEvents = "none"; // Disable hover and interaction
    statusDialog.style.cursor = "not-allowed"; // Set cursor to X when hovered

    // Initial content for the dialog
    statusDialog.innerHTML = `
        <div id="statusText" style="font-size: 18px; font-weight: bold; color: #000;">Erweiterung deaktiviert</div>
        <div id="actionText" style="font-size: 12px; color: gray; margin-top: 5px;">Drücke <strong>Strg + O</strong> zum Aktivieren</div>
    `;

    // Append the dialog to the body
    document.body.appendChild(statusDialog);

    // Toggle extension state with Ctrl + O
    document.addEventListener("keydown", (e) => {
        if (e.ctrlKey && e.key.toLowerCase() === "o") {
            toggleExtension();
        } else if (e.shiftKey) {
            hideStatusDialogTemporary();
        }
    });

    // Show status dialog again when Shift is released
    document.addEventListener("keyup", (e) => {
        if (!e.shiftKey) {
            statusDialog.style.opacity = "1"; // Show dialog again when Shift is released
        }
    });

    // Function to hide the status dialog temporarily when Shift is pressed
    function hideStatusDialogTemporary() {
        statusDialog.style.opacity = "0"; // Hide dialog when Shift is pressed
    }

    // Toggle the extension activation status
    function toggleExtension() {
        isExtensionActive = !isExtensionActive;

        const statusText = document.getElementById("statusText");
        const actionText = document.getElementById("actionText");

        if (isExtensionActive) {
            statusText.innerHTML = "Erweiterung aktiviert";
            statusText.style.color = "#28a745"; // Green color for active state
            actionText.innerHTML = `
                Wähle ein Element aus<br>
                Halte <strong>Shift</strong>, um das Fenster kurzzeitig auszublenden<br>
                Drücke <strong>Strg + O</strong> zum Deaktivieren
            `;
            document.body.style.cursor = "crosshair"; // Set custom cursor when active
            disableLinks(); // Disable all links
        } else {
            statusText.innerHTML = "Erweiterung deaktiviert";
            statusText.style.color = "#dc3545"; // Red color for deactivated state
            actionText.innerHTML = `
                Drücke <strong>Strg + O</strong> zum Aktivieren
            `;
            document.body.style.cursor = "default"; // Restore default cursor
            enableLinks(); // Enable all links again
            closePopup(); // Close any open popups when the extension is deactivated
            resetAllCSS(); // Reset any changes made to elements
        }
    }

    // Function to disable all links on the page
    function disableLinks() {
        allLinks = document.querySelectorAll('a'); // Get all links
        allLinks.forEach(link => {
            link.dataset.href = link.getAttribute('href'); // Store original href
            link.setAttribute('href', '#'); // Disable the link
            link.style.pointerEvents = "none"; // Disable pointer events
            link.style.cursor = "not-allowed"; // Change cursor to not-allowed
        });
    }

    // Function to re-enable all links on the page
    function enableLinks() {
        allLinks.forEach(link => {
            if (link.dataset.href) {
                link.setAttribute('href', link.dataset.href); // Restore original href
                link.style.pointerEvents = "auto"; // Enable pointer events
                link.style.cursor = "pointer"; // Restore cursor to pointer
            }
        });
    }

    // Reset all CSS changes (e.g., remove hover effects, borders, etc.)
    function resetAllCSS() {
        if (oldObject != null && oldObject.target != null) {
            oldObject.target.style.boxShadow = "none"; // Remove blue outline
            oldObject.target.style.outline = "none"; // Remove outline
        }
        const allElements = document.querySelectorAll('*');
        allElements.forEach(element => {
            element.style.boxShadow = ''; // Remove any added box-shadow effects
        });
    }

    // Popup for element interaction
    let customPopup = document.createElement("div");
    customPopup.style.position = "absolute";
    customPopup.style.background = "#ffffff";
    customPopup.style.border = "1px solid #ddd";
    customPopup.style.padding = "10px";
    customPopup.style.width = "250px";
    customPopup.style.boxShadow = "0px 10px 30px rgba(0, 0, 0, 0.1)";
    customPopup.style.borderRadius = "10px";
    customPopup.style.borderWidth = "1px";
    customPopup.style.display = "none";
    customPopup.style.zIndex = "1000";
    customPopup.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out";
    customPopup.innerHTML = `
        <div id="inputContainer">
            <textarea id="customPopupInput" rows="4" style="border-radius: 8px; width: 100%; padding: 8px; font-size: 14px; border: 1px solid #ccc; outline: none;" placeholder="Was möchtest du ändern?"></textarea><br>
        </div>
        <div id="copyMessage" style="display: none; color: green; font-size: 14px; text-align: center;">In die Zwischenablage kopiert!</div>
    `;
    document.body.appendChild(customPopup);

    // Track mouse position
    document.onmousemove = function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
        if (popupVisible) {
            adjustPopupPosition(mouseX, mouseY);
        }
    };

    // Function to adjust the popup position based on mouse position
    function adjustPopupPosition(mouseX, mouseY) {
        let popupWidth = customPopup.offsetWidth;
        let popupHeight = customPopup.offsetHeight;
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        let left = mouseX + 15;
        let top = mouseY + 15;

        if (left + popupWidth > windowWidth) {
            left = mouseX - popupWidth - 15;
        }

        if (top + popupHeight > windowHeight) {
            top = mouseY - popupHeight - 15;
        }

        customPopup.style.left = `${left}px`;
        customPopup.style.top = `${top}px`;
    }

    function closePopup() {
        customPopup.style.display = "none";
        document.body.style.cursor = "default"; // Restore the cursor when popup is closed
        popupVisible = false;
        clearInterval(focusInterval); // Stop checking for focus when popup is closed
        if (oldObject) {
            oldObject.target.style.boxShadow = "none";
            oldObject.target.style.outline = "none";
            oldObject = null;
        }

        // Remove Enter and Escape instructions when popup is closed
        if (isExtensionActive) {
            statusDialog.innerHTML = `
                <div id="statusText" style="font-size: 18px; font-weight: bold; color: #28a745;">Erweiterung aktiviert</div>
                <div style="font-size: 12px; color: gray; margin-top: 5px;">Wähle ein Element aus</div>
                <div style="font-size: 12px; color: gray;">Halte <strong>Shift</strong>, um das Fenster unsichtbar zu machen</div>
                <div style="font-size: 12px; color: gray;">Drücke <strong>Strg + O</strong> zum Deaktivieren</div>
            `;
        }
    }

    // Apply hover effect and show popup
    document.onmouseover = (e) => {
        if (!popupVisible && oldObject === null && isExtensionActive) {
            e.target.style.transition = "box-shadow 0.3s ease-out";
            e.target.style.boxShadow = "0 12px 24px rgba(0, 0, 0, 0.25)"; // Stronger hover shadow
        }
    };

    // Remove hover effect when mouse leaves
    document.onmouseout = (e) => {
        if (!popupVisible && oldObject === null && isExtensionActive) {
            e.target.style.boxShadow = "none";
        }
    };

    // Prevent selecting the status dialog
    document.onclick = (e) => {
        if (!isExtensionActive || popupVisible || e.target.id === "extensionStatusDialog") {
            return; // Prevent selecting the status dialog
        }

        if (oldObject != null) {
            oldObject.target.style.boxShadow = "none";
        }
        oldObject = e;

        // Restore hover effect
        e.target.style.transition = "box-shadow 0.3s ease-out";
        e.target.style.boxShadow = "0 0 0 3px rgba(0, 123, 255, 0.5)"; // Blue outline when selected
        e.target.style.outline = "none";

        let Ids = "";
        let CssKlassen = "";
        let ElternTag = "";
        let KindTags = "";

        // Erfasse die ID des Elements
        if (e.target.id != null && e.target.id.length > 0) {
            Ids = " - Id: " + e.target.id;
        }

        // Erfasse die CSS-Klassen des Elements
        if (e.target.className != null && e.target.className.length > 0) {
            CssKlassen = "CSS Klassen: " + e.target.className;
        }

        // Erfasse das Eltern-Tag und die Eltern-Klassen
        if (e.target.parentElement) {
            let parent = e.target.parentElement;
            ElternTag = " - Eltern-Tag: " + parent.tagName;
            if (parent.className) {
                ElternTag += " - Eltern CSS Klassen: " + parent.className;
            }
        }

        // Erfasse die Kind-Tags und deren Klassen
        if (e.target.children.length > 0) {
            let kinder = Array.from(e.target.children).map(child => {
                return child.tagName + (child.className ? " (" + child.className + ")" : "");
            }).join(", ");
            KindTags = " - Kind-Tags: " + kinder;
        }

        let unchangedHTML = "HTML-Tag: " + e.target.tagName + " - " + CssKlassen + Ids + ElternTag + KindTags;

        customPopup.style.display = "block";
        document.body.style.cursor = "none"; // Hide the cursor when popup is visible
        popupVisible = true;

        adjustPopupPosition(mouseX, mouseY);

        let inputField = document.getElementById("customPopupInput");
        let inputContainer = document.getElementById("inputContainer");
        let copyMessage = document.getElementById("copyMessage");
        inputField.focus();

        // Show Enter and Escape instructions when the popup is shown
        statusDialog.innerHTML = `
            <div id="statusText" style="font-size: 18px; font-weight: bold; color: #28a745;">Erweiterung aktiviert</div>
            <div style="font-size: 12px; color: gray; margin-top: 5px;">Enter zum Bestätigen, Escape zum Abbrechen</div>
            <div style="font-size: 12px; color: gray;">Halte <strong>Shift</strong>, um das Fenster unsichtbar zu machen</div>
            <div style="font-size: 12px; color: gray;">Drücke <strong>Strg + O</strong> zum Deaktivieren</div>
        `;

        focusInterval = setInterval(() => {
            if (document.activeElement !== inputField) {
                inputField.focus();
            }
        }, 100);

        inputField.onkeydown = function (event) {
            if (event.key === "Enter") {
                event.preventDefault();
                let userInput = inputField.value.trim();
                if (userInput.length > 0) {
                    let chatGPTinput = "Mitgegebenes Element: " + unchangedHTML + " - Deine Aufgabe: " + userInput;
                    navigator.clipboard.writeText(chatGPTinput);

                    inputContainer.style.display = "none";
                    copyMessage.style.display = "block";

                    oldObject.target.style.boxShadow = "0 0 0 3px rgba(0, 255, 0, 0.5)";

                    setTimeout(function () {
                        customPopup.style.transform = "scale(0.8)";
                        customPopup.style.opacity = "0";

                        setTimeout(function () {
                            closePopup();
                            customPopup.style.transform = "scale(1)";
                            customPopup.style.opacity = "1";
                            inputField.value = '';
                            copyMessage.style.display = "none";
                            inputContainer.style.display = "block";
                        }, 500);
                    }, 1000);
                }
            } else if (event.key === "Escape") {
                inputField.value = '';
                closePopup();
            }
        };
    };

    document.onkeydown = function (event) {
        if (event.key === "Escape" && popupVisible) {
            let inputField = document.getElementById("customPopupInput");
            inputField.value = '';
            closePopup();
        }
    };

})();