function buildBookmarkRows(bookmarks) {
  const fields = document.getElementById("bookmark-fields");
  fields.textContent = "";

  bookmarks.forEach((bookmark, index) => {
    const row = document.createElement("div");
    row.className = "bookmark-row";

    const title = document.createElement("input");
    title.type = "text";
    title.name = `bookmark-title-${index}`;
    title.placeholder = `Bookmark ${index + 1} title`;
    title.value = bookmark.title || "";

    const url = document.createElement("input");
    url.type = "text";
    url.name = `bookmark-url-${index}`;
    url.placeholder = `Bookmark ${index + 1} URL`;
    url.value = bookmark.url || "";

    row.append(title, url);
    fields.append(row);
  });
}

async function render() {
  const settings = await browser.runtime.sendMessage({ type: "get-settings" });
  buildBookmarkRows(settings.bookmarks);

  document.querySelector('[name="trackers"]').checked = settings.blocking.trackers;
  document.querySelector('[name="ads"]').checked = settings.blocking.ads;
  document.querySelector('[name="analytics"]').checked = settings.blocking.analytics;
  document.querySelector('[name="social"]').checked = settings.blocking.social;
}

document.getElementById("settings-form").addEventListener("submit", async (event) => {
  event.preventDefault();

  const bookmarks = Array.from({ length: 4 }, (_, index) => ({
    title: document.querySelector(`[name="bookmark-title-${index}"]`).value.trim(),
    url: document.querySelector(`[name="bookmark-url-${index}"]`).value.trim()
  }));

  await browser.runtime.sendMessage({
    type: "save-settings",
    settings: {
      bookmarks,
      blocking: {
        trackers: document.querySelector('[name="trackers"]').checked,
        ads: document.querySelector('[name="ads"]').checked,
        analytics: document.querySelector('[name="analytics"]').checked,
        social: document.querySelector('[name="social"]').checked
      }
    }
  });

  const status = document.getElementById("save-status");
  status.textContent = "Saved";
  window.setTimeout(() => {
    status.textContent = "";
  }, 1500);
});

void render();