function normalizeUrl(rawUrl) {
  if (!rawUrl) {
    return "";
  }

  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(rawUrl)) {
    return rawUrl;
  }

  if (rawUrl.includes(" ") && !rawUrl.includes(".")) {
    return `https://duckduckgo.com/?q=${encodeURIComponent(rawUrl)}`;
  }

  return `https://${rawUrl}`;
}

function createBookmarkTile(bookmark) {
  const tile = document.createElement("a");
  tile.className = "bookmark-tile";
  tile.href = normalizeUrl(bookmark.url);

  const title = document.createElement("p");
  title.className = "bookmark-title";
  title.textContent = bookmark.title || "Untitled";

  const url = document.createElement("p");
  url.className = "bookmark-url";
  url.textContent = bookmark.url || "";

  tile.append(title, url);
  return tile;
}

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

  settings.bookmarks.forEach((bookmark) => {
    container.append(createBookmarkTile(bookmark));
  });
}

document.getElementById("url-form").addEventListener("submit", async (event) => {
  event.preventDefault();
  const input = document.getElementById("url-input");
  const url = input.value.trim();

  if (!url) {
    return;
  }

  await browser.runtime.sendMessage({ type: "open-url", url });
});

document.getElementById("settings-link").addEventListener("click", async () => {
  await browser.runtime.sendMessage({ type: "open-settings" });
});

document.getElementById("clear-button").addEventListener("click", async () => {
  await browser.runtime.sendMessage({ type: "clear-session" });
});

void render();