pokemon-stock-checker/chrome-extension/popup.js

// Pokemon Stock Monitor - Popup Script

document.addEventListener("DOMContentLoaded", async () => {
  // Load current config
  const config = await chrome.runtime.sendMessage({ type: "getConfig" });
  const stats = await chrome.runtime.sendMessage({ type: "getStats" });

  // Populate form
  document.getElementById("webhook").value = config.discordWebhook || "";
  document.getElementById("urls").value = (config.urls || []).join("\n");
  document.getElementById("keywords").value = (config.keywords || []).join(", ");
  document.getElementById("interval").value = config.checkIntervalSeconds || 15;
  document.getElementById("enabled").checked = config.enabled !== false;
  document.getElementById("notifyNew").checked = config.notifyNewProducts !== false;
  document.getElementById("notifyRestock").checked = config.notifyRestocks !== false;
  document.getElementById("syncDashboard").checked = config.syncToDashboard !== false;
  document.getElementById("dashboardUrl").value = config.dashboardUrl || "http://localhost:5000";

  // Update stats
  document.getElementById("productCount").textContent = stats.totalProducts || 0;
  updateStatus(stats.enabled !== false);

  // Save button
  document.getElementById("saveBtn").addEventListener("click", async () => {
    const urlsText = document.getElementById("urls").value;
    const keywordsText = document.getElementById("keywords").value;

    const newConfig = {
      discordWebhook: document.getElementById("webhook").value.trim(),
      urls: urlsText.split("\n").map(u => u.trim()).filter(u => u),
      keywords: keywordsText.split(",").map(k => k.trim()).filter(k => k),
      checkIntervalSeconds: parseInt(document.getElementById("interval").value) || 15,
      enabled: document.getElementById("enabled").checked,
      notifyNewProducts: document.getElementById("notifyNew").checked,
      notifyRestocks: document.getElementById("notifyRestock").checked,
      syncToDashboard: document.getElementById("syncDashboard").checked,
      dashboardUrl: document.getElementById("dashboardUrl").value.trim() || "http://localhost:5000"
    };

    await chrome.runtime.sendMessage({ type: "saveConfig", config: newConfig });
    updateStatus(newConfig.enabled);
    showSaved();
  });

  // Check Now button
  document.getElementById("checkNowBtn").addEventListener("click", async () => {
    await chrome.runtime.sendMessage({ type: "runCheck" });
    showSaved("Check started!");
  });

  // Clear button
  document.getElementById("clearBtn").addEventListener("click", async () => {
    if (confirm("Clear all tracked products? This will treat all products as new on next check.")) {
      await chrome.runtime.sendMessage({ type: "clearProducts" });
      document.getElementById("productCount").textContent = "0";
      showSaved("History cleared!");
    }
  });

  // Sync to Dashboard button
  document.getElementById("syncBtn").addEventListener("click", async () => {
    const result = await chrome.runtime.sendMessage({ type: "syncToDashboard" });
    if (result.success) {
      showSaved(`Synced! ${result.total_skus || 0} SKUs, ${result.total_products || 0} products`);
    } else {
      showSaved("Sync failed - is dashboard running?");
    }
  });
});

function updateStatus(enabled) {
  const dot = document.getElementById("statusDot");
  const text = document.getElementById("statusText");

  if (enabled) {
    dot.className = "status-dot active";
    text.textContent = "Active";
  } else {
    dot.className = "status-dot inactive";
    text.textContent = "Disabled";
  }
}

function showSaved(msg = "Settings saved!") {
  const el = document.getElementById("savedMsg");
  el.textContent = msg;
  el.classList.add("show");
  setTimeout(() => el.classList.remove("show"), 2000);
}