f0ckm-uploader/browser-extension/popup/popup.js

function initPopup() {
  const modeDesktop = document.getElementById("mode-desktop");
  const modeDirect = document.getElementById("mode-direct");
  const btnUploadTab = document.getElementById("btn-upload-tab");
  const btnUploadText = document.getElementById("btn-upload-text");
  const btnUploadUrl = document.getElementById("btn-upload-url");
  const urlInput = document.getElementById("url-input");
  const statusCard = document.getElementById("status-card");
  const statusSpinner = document.getElementById("status-spinner");
  const statusText = document.getElementById("status-text");
  const resultContainer = document.getElementById("result-container");
  const resultLink = document.getElementById("result-link");
  const btnCopyResult = document.getElementById("btn-copy-result");
  const siteBadge = document.getElementById("site-badge");
  const tabTitle = document.getElementById("tab-title");
  const tabUrlPreview = document.getElementById("tab-url-preview");

  let activeTabUrl = "";

  // 1. Load settings asynchronously without blocking UI initialization
  try {
    chrome.storage.sync.get({ uploadMode: "desktop" }, (settings) => {
      if (chrome.runtime.lastError || !settings) return;
      if (settings.uploadMode === "direct") {
        if (modeDirect) modeDirect.checked = true;
      } else {
        if (modeDesktop) modeDesktop.checked = true;
      }
    });
  } catch (e) {}

  if (modeDesktop) {
    modeDesktop.addEventListener("change", () => {
      chrome.storage.sync.set({ uploadMode: "desktop" });
    });
  }
  if (modeDirect) {
    modeDirect.addEventListener("change", () => {
      chrome.storage.sync.set({ uploadMode: "direct" });
    });
  }

  // 2. Query Tab Info immediately
  try {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs && tabs[0]) {
        populateTabInfo(tabs[0]);
      } else {
        chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs2) => {
          if (tabs2 && tabs2[0]) {
            populateTabInfo(tabs2[0]);
          }
        });
      }
    });
  } catch (e) {}

  function populateTabInfo(tab) {
    if (!tab) return;
    activeTabUrl = tab.url || tab.pendingUrl || "";
    if (tabTitle) tabTitle.textContent = tab.title || "Active Page";
    if (tabUrlPreview) tabUrlPreview.textContent = activeTabUrl || "No URL available";

    const isYouTube = activeTabUrl.includes("youtube.com") || activeTabUrl.includes("youtu.be");
    if (isYouTube) {
      if (siteBadge) {
        siteBadge.textContent = "▶ YouTube";
        siteBadge.classList.add("youtube");
      }
      if (btnUploadText) btnUploadText.textContent = "Upload YouTube Video to f0ckm";
      if (btnUploadTab) btnUploadTab.classList.add("youtube-style");
    } else {
      if (siteBadge) {
        siteBadge.textContent = "🌐 Web Page";
        siteBadge.classList.remove("youtube");
      }
      if (btnUploadText) btnUploadText.textContent = "Upload Page URL to f0ckm";
      if (btnUploadTab) btnUploadTab.classList.remove("youtube-style");
    }
  }

  // 3. Upload Active Tab Button Click Handler
  if (btnUploadTab) {
    btnUploadTab.addEventListener("click", () => {
      if (activeTabUrl && (activeTabUrl.startsWith("http://") || activeTabUrl.startsWith("https://"))) {
        triggerUpload(activeTabUrl);
      } else {
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          const tab = tabs ? tabs[0] : null;
          const url = tab ? (tab.url || tab.pendingUrl) : "";
          if (url && (url.startsWith("http://") || url.startsWith("https://"))) {
            activeTabUrl = url;
            triggerUpload(url);
          } else {
            showStatus("Could not get active tab URL.", false);
          }
        });
      }
    });
  }

  // 4. Custom pasted URL Upload Button Click Handler
  if (btnUploadUrl) {
    btnUploadUrl.addEventListener("click", () => {
      const url = urlInput ? urlInput.value.trim() : "";
      if (url) {
        triggerUpload(url);
      } else {
        showStatus("Please enter a valid URL.", false);
      }
    });
  }

  if (urlInput) {
    urlInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter" && btnUploadUrl) {
        btnUploadUrl.click();
      }
    });
  }

  if (btnCopyResult) {
    btnCopyResult.addEventListener("click", () => {
      const linkUrl = resultLink ? resultLink.href : "";
      if (linkUrl && linkUrl !== "#" && !linkUrl.endsWith("#")) {
        navigator.clipboard.writeText(linkUrl);
        btnCopyResult.textContent = "Copied!";
        setTimeout(() => {
          btnCopyResult.textContent = "Copy Link";
        }, 1500);
      }
    });
  }

  function showStatus(text, loading = false) {
    if (!statusCard) return;
    statusCard.classList.remove("hidden");
    if (statusText) statusText.textContent = text;
    if (loading) {
      if (statusSpinner) statusSpinner.classList.remove("hidden");
      if (resultContainer) resultContainer.classList.add("hidden");
    } else {
      if (statusSpinner) statusSpinner.classList.add("hidden");
    }
  }

  function showSuccessResult(finalUrl) {
    if (!statusCard) return;
    statusCard.classList.remove("hidden");
    if (statusSpinner) statusSpinner.classList.add("hidden");
    if (statusText) statusText.textContent = "Upload Successful! Click link to open:";
    if (resultLink) {
      resultLink.href = finalUrl;
      resultLink.textContent = finalUrl;
    }
    if (resultContainer) resultContainer.classList.remove("hidden");
  }

  function triggerUpload(url) {
    const currentMode = (modeDirect && modeDirect.checked) ? "direct" : "desktop";

    if (currentMode === "desktop") {
      showStatus("Sending URL to f0ckm desktop app...", true);
      chrome.runtime.sendMessage({ action: "upload_url", url: url }, () => {
        showStatus("URL sent to f0ckm app! Check system tray / notifications.", false);
      });
    } else {
      showStatus("Sending URL to f0ckm API...", true);
      chrome.runtime.sendMessage({ action: "upload_url", url: url }, (response) => {
        if (response && response.resultUrl) {
          showSuccessResult(response.resultUrl);
        } else {
          showStatus("URL Upload queued! Link copied to clipboard.", false);
        }
      });
    }
  }
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initPopup);
} else {
  initPopup();
}