document.getElementById('addSite').addEventListener('click', addSite);

function addSite() {
  const site = document.getElementById('site').value.trim();
  if (site) {
    chrome.storage.sync.get('blockedSites', (data) => {
      const blockedSites = new Set(data.blockedSites || []);
      blockedSites.add(site);
      chrome.storage.sync.set({ blockedSites: Array.from(blockedSites) }, () => {
        updateSiteList();
        document.getElementById('site').value = '';
      });
    });
  }
}

function removeSite(site) {
  chrome.storage.sync.get('blockedSites', (data) => {
    const blockedSites = new Set(data.blockedSites || []);
    blockedSites.delete(site);
    chrome.storage.sync.set({ blockedSites: Array.from(blockedSites) }, updateSiteList);
  });
}

function updateSiteList() {
  chrome.storage.sync.get('blockedSites', (data) => {
    const siteList = document.getElementById('siteList');
    siteList.innerHTML = '';
    (data.blockedSites || []).forEach((site) => {
      const li = document.createElement('li');
      li.textContent = site;
      const removeButton = document.createElement('button');
      removeButton.textContent = 'Remove';
      removeButton.onclick = () => removeSite(site);
      li.appendChild(removeButton);
      siteList.appendChild(li);
    });
  });
}

updateSiteList();