popup.js

const $enabled = document.getElementById("enabled");
const $camera = document.getElementById("camera");
const $customLabel = document.getElementById("customLabel");
const $status = document.getElementById("status");
const $errorSection = document.getElementById("errorSection");
const $errorMsg = document.getElementById("errorMsg");
const $cameraSection = document.getElementById("cameraSection");
const $grantBtn = document.getElementById("grantBtn");
const $cameraNames = document.getElementById("cameraNames");

let cameras = [];

function renderCameraNames() {
  $cameraNames.innerHTML = "";
  cameras.forEach((cam) => {
    const li = document.createElement("li");
    li.textContent = cam.label;
    li.addEventListener("click", () => {
      navigator.clipboard.writeText(cam.label);
      li.classList.add("copied");
      li.textContent = "Copied!";
      setTimeout(() => {
        li.classList.remove("copied");
        li.textContent = cam.label;
      }, 1000);
    });
    $cameraNames.appendChild(li);
  });
}

function showError(msg, showGrant) {
  $errorSection.style.display = "";
  $errorMsg.textContent = msg;
  $grantBtn.style.display = showGrant ? "" : "none";
  $cameraSection.style.display = "none";
}

async function getActiveTab() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  return tab;
}

function sendToTab(tabId, message) {
  return new Promise((resolve, reject) => {
    chrome.tabs.sendMessage(tabId, message, (response) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
      } else {
        resolve(response);
      }
    });
  });
}

async function loadCameras() {
  const tab = await getActiveTab();
  if (!tab) {
    showError("No active tab found.", false);
    return;
  }

  let result;
  try {
    result = await sendToTab(tab.id, { type: "getDevices" });
  } catch (err) {
    showError(
      "Cannot reach this page. Open a regular website, reload it, and reopen this popup.",
      false
    );
    return;
  }

  const devices = result.cameras || [];
  const hasLabels = devices.some((d) => d.label);

  if (!hasLabels) {
    showError("Camera access needed on this site to see device names.", true);
    return;
  }

  cameras = devices.filter((d) => d.label);

  $errorSection.style.display = "none";
  $cameraSection.style.display = "";
  $camera.innerHTML = "";

  cameras.forEach((cam) => {
    const opt = document.createElement("option");
    opt.value = cam.label;
    opt.textContent = cam.label;
    $camera.appendChild(opt);
  });

  renderCameraNames();
}

async function loadConfig() {
  const result = await chrome.storage.local.get("camSpoofer");
  const config = result.camSpoofer;
  if (!config) return;

  $enabled.checked = !!config.enabled;
  $customLabel.value = config.customLabel || "";

  if (config.selectedLabel) {
    $camera.value = config.selectedLabel;
    if (!$camera.value && cameras.length) {
      $camera.value = cameras[0].label;
    }
  }
}

function save() {
  const selectedLabel = $camera.value;

  const config = {
    enabled: $enabled.checked,
    selectedLabel,
    customLabel: $customLabel.value.trim(),
  };

  chrome.storage.local.set({ camSpoofer: config }, () => {
    $status.textContent = "Saved — reload tabs to apply";
    $status.className = "status saved";
    setTimeout(() => {
      $status.textContent = "";
      $status.className = "status";
    }, 2000);
  });
}

$grantBtn.addEventListener("click", async () => {
  const tab = await getActiveTab();
  if (!tab) return;
  try {
    const result = await sendToTab(tab.id, { type: "requestCamera" });
    const devices = result.cameras || [];
    if (devices.some((d) => d.label)) {
      cameras = devices.filter((d) => d.label);
      $errorSection.style.display = "none";
      $cameraSection.style.display = "";
      $camera.innerHTML = "";
      cameras.forEach((cam) => {
        const opt = document.createElement("option");
        opt.value = cam.label;
        opt.textContent = cam.label;
        $camera.appendChild(opt);
      });
      renderCameraNames();
      await loadConfig();
    } else {
      showError("Permission denied. Allow camera in browser and retry.", false);
    }
  } catch (_) {
    showError("Could not request camera. Reload the page and try again.", false);
  }
});

$enabled.addEventListener("change", save);
$camera.addEventListener("change", save);
$customLabel.addEventListener("input", save);

loadCameras().then(loadConfig);