options.js

const domainInput = document.querySelector("#domain-input");
const addDomainButton = document.querySelector("#add-domain");
const domainList = document.querySelector("#domain-list");
const statusMessage = document.querySelector("#status-message");

function normalizeDomain(input) {
  if (!input) {
    return null;
  }

  let value = String(input).trim().toLowerCase();
  if (!value) {
    return null;
  }

  if (!value.includes("://")) {
    value = `https://${value}`;
  }

  try {
    const url = new URL(value);
    let hostname = url.hostname.replace(/\.$/, "");

    if (hostname.startsWith("www.")) {
      hostname = hostname.slice(4);
    }

    return hostname || null;
  } catch {
    return null;
  }
}

async function getBlockedDomains() {
  const { blockedDomains = [] } = await chrome.storage.sync.get("blockedDomains");
  return blockedDomains;
}

async function saveBlockedDomains(blockedDomains) {
  await chrome.storage.sync.set({ blockedDomains });
}

function setStatus(message, isError = false) {
  statusMessage.textContent = message;
  statusMessage.dataset.state = isError ? "error" : "success";
}

function renderBlockedDomains(blockedDomains) {
  domainList.textContent = "";

  if (!blockedDomains.length) {
    const emptyState = document.createElement("li");
    emptyState.className = "empty-state";
    emptyState.textContent = "No blocked websites yet.";
    domainList.append(emptyState);
    return;
  }

  blockedDomains.forEach((domain) => {
    const item = document.createElement("li");
    item.className = "domain-item";

    const label = document.createElement("span");
    label.className = "domain-pill";
    label.textContent = domain;

    const removeButton = document.createElement("button");
    removeButton.className = "remove-button";
    removeButton.type = "button";
    removeButton.textContent = "Remove";
    removeButton.addEventListener("click", () => {
      void removeDomain(domain);
    });

    item.append(label, removeButton);
    domainList.append(item);
  });
}

async function refreshList() {
  const blockedDomains = await getBlockedDomains();
  renderBlockedDomains(blockedDomains);
}

async function addDomain(rawValue) {
  const normalized = normalizeDomain(rawValue);
  if (!normalized) {
    setStatus("Enter a valid domain like tiktok.com.", true);
    return;
  }

  const blockedDomains = await getBlockedDomains();
  if (blockedDomains.includes(normalized)) {
    setStatus("That domain is already on the block list.", true);
    return;
  }

  const nextDomains = [...blockedDomains, normalized].sort();
  await saveBlockedDomains(nextDomains);
  domainInput.value = "";
  await refreshList();
  setStatus(`${normalized} added to your block list.`);
}

async function removeDomain(domainToRemove) {
  const blockedDomains = await getBlockedDomains();
  const nextDomains = blockedDomains.filter((domain) => domain !== domainToRemove);
  await saveBlockedDomains(nextDomains);
  await refreshList();
  setStatus(`${domainToRemove} removed from the block list.`);
}

addDomainButton.addEventListener("click", () => {
  void addDomain(domainInput.value);
});

domainInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    event.preventDefault();
    void addDomain(domainInput.value);
  }
});

chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === "sync" && changes.blockedDomains) {
    void refreshList();
  }
});

void refreshList();