const slider = document.getElementById("slider");
const val = document.getElementById("val");

slider.addEventListener("input", () => {
  val.textContent = slider.value;
});

slider.addEventListener("change", async () => {
  const volume = Number(slider.value);
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab?.id) return;

  // Ensure page_script.js is injected
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["page_script.js"],
  });

  // Send message to the injected page script
  chrome.tabs.sendMessage(tab.id, { action: "setVolume", volume });
});

// Initialize with current volume
(async function init() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab?.id) return;

  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["page_script.js"],
  });

  chrome.tabs.sendMessage(tab.id, { action: "getVolume" }, (response) => {
    if (chrome.runtime.lastError) return; // ignore if no response
    if (response && typeof response.volume === "number") {
      slider.value = response.volume;
      val.textContent = response.volume;
    }
  });
})();