content.js

let currentVideo = null;
let channelId = null;
const debouncedRenderView = debounce(renderView, 300);

function run() {
  // const container = document.querySelector("ytd-popup-container");
  setTimeout(() => {
    const menu = document.querySelector("tp-yt-iron-dropdown");
    if (menu?.parentElement) {
      menu.parentElement.style.maxHeight = "none";
    }
  }, 500);
}

document.addEventListener("click", (e) => {
  if (
    e.target.closest(
      "yt-icon-button#button.dropdown-trigger.style-scope.ytd-menu-renderer"
    )
  ) {
    const videoID = e.target
      .closest("#content")
      .querySelector("#thumbnail a")
      .getAttribute("href");
    currentVideo = videoID;
  }
});

new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (
        node.nodeType === 1 && // element node
        node.tagName === "YTD-RICH-ITEM-RENDERER"
      ) {
        debouncedRenderView(channelId); // ✅ only run when a video item is added
        return;
      }
      if (
        node.nodeType === 1 &&
        node.tagName.toLowerCase() === "tp-yt-iron-dropdown"
      ) {
        const interval = setInterval(() => {
          const menuList = node.querySelector("#items");
          if (!menuList) return;

          const items = menuList.querySelectorAll(
            "ytd-menu-service-item-renderer"
          );
          if (items.length > 0) {
            // Check for an existing custom item and remove it first
            const existWatch = menuList.querySelector(".custom-watched-item");
            if (existWatch) existWatch.remove();
            clearInterval(interval);

            // Create the new menu item
            const watched = document.createElement("div");
            watched.classList.add("custom-watched-item"); // tag it so we can find/remove later
            watched.style.display = "flex";
            watched.style.alignItems = "center";
            watched.style.height = `36px`;
            watched.style.cursor = "pointer";

            // child one: icon
            const watch1 = document.createElement("div");
            watch1.style.paddingLeft = "16px";
            watch1.style.marginRight = "16px";
            watch1.innerHTML = `<div style="width: 24px; height: 24px; display: block; fill: currentcolor;">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5 14L8.23309 16.4248C8.66178 16.7463 9.26772 16.6728 9.60705 16.2581L18 6" stroke="#222222" stroke-linecap="round"></path> </g></svg>
            </div>`; // your SVG markup

            // child two: label
            const watch2 = document.createElement("div");
            watch2.innerText = "Watched";
            watch2.style.fontSize = "1.4rem";

            // assemble
            watched.appendChild(watch1);
            watched.appendChild(watch2);

            // append to menu
            watched.addEventListener("click", () =>
              watchedRender(currentVideo)
            );
            menuList.appendChild(watched);

            // Check for an existing custom item and remove it first
            const existRemove = menuList.querySelector(".custom-remove-item");
            if (existRemove) existRemove.remove();
            clearInterval(existRemove);

            // Create the new menu item
            const remove = document.createElement("div");
            remove.classList.add("custom-remove-item"); // tag it so we can find/remove later
            remove.style.display = "flex";
            remove.style.alignItems = "center";
            remove.style.height = `36px`;
            remove.style.cursor = "pointer";

            // child one: icon
            const remove1 = document.createElement("div");
            remove1.style.paddingLeft = "16px";
            remove1.style.marginRight = "16px";
            remove1.innerHTML = `<div style="width: 24px; height: 24px; display: block; fill: currentcolor;">
            <svg id="Layer_1" style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M41.7,23.3l-8.5-8.5c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l6.8,6.8H19.1c-0.6,0-1,0.4-1,1s0.4,1,1,1h19.4l-6.8,6.8   c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l8.5-8.5c0.2-0.2,0.3-0.4,0.3-0.7S41.9,23.5,41.7,23.3z"/><path d="M26.1,34.3c-0.5,0-0.9,0.4-0.9,0.9V39c0,0.6-0.5,1.1-1.1,1.1H9c-0.6,0-1.1-0.5-1.1-1.1V9c0-0.6,0.5-1.1,1.1-1.1h15.2   c0.6,0,1.1,0.5,1.1,1.1v3.9c0,0.5,0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9V9c0-1.6-1.3-2.9-2.9-2.9H9C7.4,6.1,6.1,7.4,6.1,9v30   c0,1.6,1.3,2.9,2.9,2.9h15.2c1.6,0,2.9-1.3,2.9-2.9v-3.8C27,34.7,26.6,34.3,26.1,34.3z"/></g></svg>
            </div>`; // your SVG markup

            // child two: label
            const remove2 = document.createElement("div");
            remove2.innerText = "Remove";
            remove2.style.fontSize = "1.4rem";

            // assemble
            remove.appendChild(remove1);
            remove.appendChild(remove2);

            // append to menu
            remove.addEventListener("click", () => removeRender(currentVideo));
            menuList.appendChild(remove);

            console.log("✅ Custom item injected into menu.");
          }
        }, 50);
      }
    });
  });
}).observe(document.body, {
  childList: true,
  subtree: true,
});

chrome.storage.local.onChanged.addListener((changes) => {
  if (changes[channelId]) {
    debouncedRenderView(channelId);
  }
});

function watchedRender(videoID) {
  injectScriptFile("inject.js");
  if (!videoID || !channelId) return;

  chrome.storage.local.get([channelId], (result) => {
    const data = result[channelId] || { watched: [], removed: [] };
    if (!data.watched.includes(videoID)) {
      data.watched.push(videoID);
      chrome.storage.local.set({ [channelId]: data });
      console.log("✅ Saved video:", videoID, "Channel of: ", channelId);
    } else {
      console.log("ℹ️ Already saved:", videoID, "Channel of: ", channelId);
    }
  });
}

function removeRender(videoID) {
  injectScriptFile("inject.js");
  if (!videoID || !channelId) return;

  chrome.storage.local.get([channelId], (result) => {
    const data = result[channelId] || { watched: [], removed: [] };

    if (!data.removed.includes(videoID)) {
      data.removed.push(videoID);
    }

    chrome.storage.local.set({ [channelId]: data }, () => {
      console.log("✅ Removed video for", channelId, ":", videoID);
    });
  });
}

function injectScriptFile(fileName) {
  const script = document.createElement("script");
  script.src = chrome.runtime.getURL(fileName);
  script.onload = () => script.remove();
  (document.head || document.documentElement).appendChild(script);
}

function renderView(channelId) {
  const items = document.querySelectorAll(
    "div#contents.style-scope.ytd-rich-grid-renderer ytd-rich-item-renderer"
  );
  console.log(items.length);

  chrome.storage.local.get([channelId], (result) => {
    const data = result[channelId] || { watched: [], removed: [] };

    items.forEach((item) => {
      const link = item.querySelector("a#thumbnail")?.getAttribute("href");
      if (data.removed.includes(link)) {
        item.remove();
      }

      if (data.watched.includes(link)) {
        const container = item.querySelector(
          "div#thumbnail.style-scope.ytd-rich-grid-media"
        );
        if (!container) return;
        container.style.position = "relative";

        const existingOverlay = container.querySelector(".imageOverlay");
        if (existingOverlay) existingOverlay.remove();

        // Create the overlay
        const overlay = document.createElement("div");
        overlay.classList.add("imageOverlay");

        // Apply all the overlay styles
        Object.assign(overlay.style, {
          position: "absolute",
          top: "0",
          left: "0",
          width: "100%",
          borderRadius: "12px",
          height: "100%",
          backdropFilter: "blur(8px)", // or 'blur(4px)' if you want lighter blur
          backgroundColor: "rgba(255, 255, 255, 0.3)", // optional: semi-transparent white
          zIndex: "10", // ensure it's on top
          pointerEvents: "none", // allow clicks through it
        });

        const svgWrapper = document.createElement("div");
        Object.assign(svgWrapper.style, {
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          zIndex: "11", // above the overlay
          pointerEvents: "none",
        });

        // Add your SVG here
        svgWrapper.innerHTML = `
 <svg width="64px" height="64px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#000000" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path></g></svg>
`;

        // Append the SVG wrapper to the overlay
        overlay.appendChild(svgWrapper);

        // Append to the container
        container.appendChild(overlay);
      }
    });
  });
}

(function start() {
  let currentUrl = location.href;
  console.log("🔗 Loaded:", currentUrl);

  function waitForElement(selector, callback) {
    const el = document.querySelector(selector);
    if (el) return callback(el);

    const observer = new MutationObserver(() => {
      const el = document.querySelector(selector);
      if (el) {
        observer.disconnect();
        callback(el);
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });
  }

  function handlePageChange() {
    if (currentUrl.match(/^https:\/\/www\.youtube\.com\/@[^/]+\/videos\/?/)) {
      waitForElement("yt-content-metadata-view-model div", (el) => {
        channelId = el.textContent;
        console.log("📺 Channel ID:", channelId);
        run();
        debouncedRenderView(channelId);
      });
    }
  }

  // First load
  handlePageChange();

  // SPA navigation
  new MutationObserver(() => {
    if (location.href !== currentUrl) {
      currentUrl = location.href;
      console.log("🔗 Navigated to:", currentUrl);
      handlePageChange();
    }
  }).observe(document.body, { childList: true, subtree: true });
})();

function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}