const input = document.getElementById("channelInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("channelList");

function loadChannels() {
  chrome.storage.local.get({ whitelist: [] }, ({ whitelist }) => {
    list.innerHTML = "";
    whitelist.forEach((name, index) => {
      const li = document.createElement("li");
      li.textContent = name;

      const remove = document.createElement("button");
      remove.textContent = "x";
      remove.onclick = () => removeChannel(index);

      li.appendChild(remove);
      list.appendChild(li);
    });
  });
}

function addChannel() {
  const name = input.value.trim();
  if (!name) return;

  chrome.storage.local.get({ whitelist: [] }, ({ whitelist }) => {
    whitelist.push(name);
    chrome.storage.local.set({ whitelist }, loadChannels);
  });

  input.value = "";
}

function removeChannel(index) {
  chrome.storage.local.get({ whitelist: [] }, ({ whitelist }) => {
    whitelist.splice(index, 1);
    chrome.storage.local.set({ whitelist }, loadChannels);
  });
}

addBtn.onclick = addChannel;
loadChannels();