// ==UserScript==
// @name         ylOppTactsPreview (MODIFIED)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Shows last 6 tactics of an opponent on the scheduled matches page… (made by kostrzak16)
// @author       kostrzak16 in MZ
// @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";

  const linksWithTid = document.querySelectorAll('a[href*="tid"].clippable');

  const fetchLatestSixTactics = (tidValue, theType) => {
    fetch(
      "https://www.managerzone.com/ajax.php?p=matches&sub=list&sport=soccer",
      {
        headers: {
          accept: "application/json, text/javascript, */*; q=0.01",
          "accept-language": "pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7",
          "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
          "sec-ch-ua":
            '"Not A(Brand";v="99", "Opera";v="107", "Chromium";v="121"',
          "sec-ch-ua-mobile": "?0",
          "sec-ch-ua-platform": '"Windows"',
          "sec-fetch-dest": "empty",
          "sec-fetch-mode": "cors",
          "sec-fetch-site": "same-origin",
          "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");
        }
        return response.json();
      })
      .then((data) => {
        const listHTML = data.list;
        const parser = new DOMParser();
        const htmlDocument = parser.parseFromString(listHTML, "text/html");

        const scoreShownLinks = htmlDocument.querySelectorAll("a.score-shown");

        const container = document.createElement("div");
        container.id = "oppLast";
        container.style.position = "fixed";
        container.style.top = "5%";
        container.style.left = "5px";
        container.style.display = "grid";
        container.style.gridTemplateColumns = "repeat(2, 150px)";
        container.style.gridTemplateRows = "repeat(3, 200px)";
        container.style.gap = "5px";
        document.body.appendChild(container);

        const katowice = 6;

        for (let i = 0; i < Math.min(katowice, scoreShownLinks.length); i++) {
          const isHome = checkNextDdForStrong(scoreShownLinks[i]);
          if (!isHome) {
            container.appendChild(
              createCanvasWithModifiedColorsAndRotation(
                "https://www.managerzone.com/dynimg/pitch.php?match_id=" +
                  extractMidFromUrl(scoreShownLinks[i].href)
              )
            );
          } else {
            container.appendChild(
              createCanvasWithReplacedColors(
                "https://www.managerzone.com/dynimg/pitch.php?match_id=" +
                  extractMidFromUrl(scoreShownLinks[i].href)
              )
            );
          }

        }
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  };

  linksWithTid.forEach((link) => {
    const triggerElement = document.createElement("span");
    triggerElement.textContent = "🔍";
    triggerElement.style.cursor = "pointer";
    triggerElement.style.fontSize = "12px";
    triggerElement.style.marginLeft = "5px";

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

    triggerElement.addEventListener("click", () => {
      const tidValue = new URL(link.href).searchParams.get("tid");
      const matchType = prompt(
        "Enter match type (u18, u21, u23, no_restriction):",
        "u18"
      );
      const validTypes = ["u18", "u21", "u23", "no_restriction"];
      if (!validTypes.includes(matchType)) {
        alert(
          "Invalid match type. Please enter u18, u21, u23, or no_restriction."
        );
        return;
      }

      fetchLatestSixTactics(tidValue, matchType);
    });
  });

  // HELPERS

  function extractMidFromUrl(url) {
    const urlSearchParams = new URLSearchParams(new URL(url).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.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; // R channel
          data[i + 1] = 154; // G channel
          data[i + 2] = 64; // B channel
        }
      }

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

    image.src = imageUrl;

    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.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) {
        // Replace black colors with green
        if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) {
          data[i] = 64; // R channel
          data[i + 1] = 154; // G channel
          data[i + 2] = 64; // B channel
        }
        // Replace yellow colors with black
        else if (data[i] > 200 && data[i + 1] > 200 && data[i + 2] < 100) {
          data[i] = 0; // R channel
          data[i + 1] = 0; // G channel
          data[i + 2] = 0; // B channel
        }
      }

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

    image.src = imageUrl;

    return canvas;
  }
})();