// ==UserScript==
// @name         ylOppTactsPreview (MODIFIED)
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Shows latest 6 tactics of a specific opponent on the scheduled matches page… (made by kostrzak16)
// @author       kostrzak16 in MZ feat. D and X
// @match        https://www.managerzone.com/?p=match&sub=scheduled
// @icon         https://www.google.com/s2/favicons?sz=64&domain=managerzone.com
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function () {
    "use strict";

    function insertIconsAndListeners() {
        const linksWithTid = document.querySelectorAll('a[href*="tid"].clippable');
        console.log("Links found:", linksWithTid.length);

        linksWithTid.forEach((link) => {
            if (link.parentNode.querySelector('.magnifier-icon')) return;

            const triggerElement = document.createElement("span");
            triggerElement.textContent = "🔍";
            triggerElement.classList.add('magnifier-icon');
            triggerElement.style.cursor = "pointer";
            triggerElement.style.fontSize = "12px";
            triggerElement.style.marginLeft = "5px";

            link.parentNode.insertBefore(triggerElement, link.nextSibling);
        });
    }

    document.body.addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('magnifier-icon')) {
            e.stopPropagation();
            e.preventDefault();

            const triggerElement = e.target;
            const link = triggerElement.previousSibling;

            if (!link || !link.href) return;

            const tidValue = new URL(link.href, window.location.origin).searchParams.get("tid");
            console.log("Extracted tidValue:", tidValue);

            showMatchTypeSelector(tidValue);
        }
    });

    function showMatchTypeSelector(tidValue) {
        const existingSelector = document.getElementById("matchTypeSelector");
        if (existingSelector) {
            existingSelector.remove();
        }

        const selectorDiv = document.createElement("div");
        selectorDiv.id = "matchTypeSelector";
        selectorDiv.style.position = "fixed";
        selectorDiv.style.top = "50%";
        selectorDiv.style.left = "50%";
        selectorDiv.style.transform = "translate(-50%, -50%)";
        selectorDiv.style.backgroundColor = "#fff";
        selectorDiv.style.border = "1px solid #ccc";
        selectorDiv.style.padding = "20px";
        selectorDiv.style.zIndex = "1000";
        selectorDiv.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
        selectorDiv.style.textAlign = "center";

        const label = document.createElement("label");
        label.textContent = "Select match type:";
        label.style.marginRight = "10px";

        const select = document.createElement("select");
        select.id = "matchTypeSelect";
        ["u18", "u21", "u23", "no_restriction"].forEach((type) => {
            const option = document.createElement("option");
            option.value = type;
            option.textContent = type;
            select.appendChild(option);
        });

        const okButton = document.createElement("button");
        okButton.textContent = "OK";
        okButton.style.marginLeft = "10px";
        okButton.addEventListener("click", () => {
            const matchType = select.value;
            console.log("Selected matchType:", matchType);
            selectorDiv.remove();
            fetchLatestSixTactics(tidValue, matchType);
        });

        const cancelButton = document.createElement("button");
        cancelButton.textContent = "Cancel";
        cancelButton.style.marginLeft = "10px";
        cancelButton.addEventListener("click", () => {
            selectorDiv.remove();
        });

        selectorDiv.appendChild(label);
        selectorDiv.appendChild(select);
        selectorDiv.appendChild(okButton);
        selectorDiv.appendChild(cancelButton);

        document.body.appendChild(selectorDiv);
    }

    const fetchLatestSixTactics = (tidValue, theType) => {
        console.log("Starting fetch for tid:", tidValue, "with type:", theType);

        fetch(
            "https://www.managerzone.com/ajax.php?p=matches&sub=list&sport=soccer",
            {
                headers: {
                    accept: "application/json, text/javascript, */*; q=0.01",
                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                    "x-requested-with": "XMLHttpRequest",
                },
                referrer:
                    "https://www.managerzone.com/?p=match&sub=played&tid=" + tidValue,
                referrerPolicy: "strict-origin-when-cross-origin",
                body:
                    "type=played&hidescore=false&tid1=" +
                    tidValue +
                    "&offset=&selectType=" +
                    theType +
                    "&limit=default",
                method: "POST",
                mode: "cors",
                credentials: "include",
            }
        )
            .then((response) => {
                if (!response.ok) {
                    throw new Error("Network response was not ok");
                }
                console.log("Response received successfully");
                return response.json();
            })
            .then((data) => {
                console.log("Data received:", data);
                const listHTML = data.list;
                const parser = new DOMParser();
                const htmlDocument = parser.parseFromString(listHTML, "text/html");

                const scoreShownLinks = htmlDocument.querySelectorAll("a.score-shown");
                console.log("Found score-shown links:", scoreShownLinks.length);

                const existingContainer = document.getElementById("oppLast");
                if (existingContainer) {
                    existingContainer.remove();
                }

                const container = document.createElement("div");
                container.id = "oppLast";
                container.style.position = "fixed";
                container.style.top = "150px";
                container.style.right = "5px";
                container.style.display = "grid";
                container.style.gridTemplateColumns = "repeat(2, 150px)";
                container.style.gridTemplateRows = "repeat(3, 200px)";
                container.style.gap = "5px";
                container.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
                container.style.padding = "10px";
                container.style.border = "1px solid #ccc";
                container.style.zIndex = "10";
                container.style.maxHeight = "80%";
                container.style.overflowY = "auto";
                container.style.boxSizing = "border-box";
                container.style.width = "320px";
                container.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
                container.style.borderRadius = "5px";
                container.style.pointerEvents = 'none';

                const closeButton = document.createElement("button");
                closeButton.textContent = "Close";
                closeButton.style.position = "absolute";
                closeButton.style.top = "5px";
                closeButton.style.right = "5px";
                closeButton.style.pointerEvents = 'auto';
                closeButton.addEventListener("click", () => {
                    container.remove();
                });
                container.appendChild(closeButton);

                document.body.appendChild(container);

                const maxMatches = 6;
                for (let i = 0; i < Math.min(maxMatches, scoreShownLinks.length); i++) {
                    const isHome = checkNextDdForStrong(scoreShownLinks[i]);
                    console.log("Is home game?", isHome);

                    let canvas;
                    if (!isHome) {
                        canvas = createCanvasWithModifiedColorsAndRotation(
                            "https://www.managerzone.com/dynimg/pitch.php?match_id=" +
                                extractMidFromUrl(scoreShownLinks[i].href)
                        );
                    } else {
                        canvas = createCanvasWithReplacedColors(
                            "https://www.managerzone.com/dynimg/pitch.php?match_id=" +
                                extractMidFromUrl(scoreShownLinks[i].href)
                        );
                    }
                    canvas.style.cursor = "pointer";
                    canvas.style.pointerEvents = 'auto';
                    container.appendChild(canvas);
                }
            })
            .catch((error) => {
                console.error("There was a problem with the fetch operation:", error);
            });
    };

    setTimeout(() => {
        if (document.getElementById("legendDiv")) {
            if (document.getElementById("eloScheduledSelect").checked) {
                waitToStatsXenteELOValues(1500);
            } else {
                insertIconsAndListeners();
            }
        } else {
            insertIconsAndListeners();
        }
    }, 500);

    function waitToStatsXenteELOValues(miliseconds) {
        let interval = setInterval(function () {
            let elements = document.querySelectorAll(".home-team-column.flex-grow-1");
            if (elements.length > 0 && elements[elements.length - 1]) {
                if (elements[elements.length - 1].innerHTML.includes("br")) {
                    clearInterval(interval);
                    clearTimeout(timeout);
                    insertIconsAndListeners();
                }
            }
        }, 100);

        let timeout = setTimeout(function () {
            clearInterval(interval);
            insertIconsAndListeners();
        }, miliseconds);
    }

    function extractMidFromUrl(url) {
        const urlSearchParams = new URLSearchParams(new URL(url, window.location.origin).search);
        return urlSearchParams.get("mid");
    }

    function checkNextDdForStrong(ele) {
        const closestDd = ele.closest("dd");
        if (closestDd) {
            const nextDd = closestDd.nextElementSibling;
            if (nextDd && nextDd.querySelector("strong")) return true;
        }
        return false;
    }

    function createCanvasWithReplacedColors(imageUrl) {
        const canvas = document.createElement("canvas");
        canvas.width = 150;
        canvas.height = 200;

        const context = canvas.getContext("2d");

        const image = new Image();
        image.crossOrigin = "Anonymous";
        image.onload = function () {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                if (data[i] > 200 && data[i + 1] > 200 && data[i + 2] < 100) {
                    data[i] = 64;
                    data[i + 1] = 154;
                    data[i + 2] = 64;
                }
            }

            context.putImageData(imageData, 0, 0);
        };

        image.src = imageUrl;

        canvas.style.pointerEvents = 'auto';
        return canvas;
    }

    function createCanvasWithModifiedColorsAndRotation(imageUrl) {
        const canvas = document.createElement("canvas");
        canvas.width = 150;
        canvas.height = 200;

        const context = canvas.getContext("2d");

        const image = new Image();
        image.crossOrigin = "Anonymous";
        image.onload = function () {
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate(Math.PI);
            context.translate(-canvas.width / 2, -canvas.height / 2);
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) {
                    data[i] = 64;
                    data[i + 1] = 154;
                    data[i + 2] = 64;
                } else if (data[i] > 200 && data[i + 1] > 200 && data[i + 2] < 100) {
                    data[i] = 0;
                    data[i + 1] = 0;
                    data[i + 2] = 0;
                }
            }

            context.putImageData(imageData, 0, 0);
        };

        image.src = imageUrl;

        canvas.style.pointerEvents = 'auto';
        return canvas;
    }
})();