analytics.js

const totalBookmarksNode = document.getElementById("totalBookmarks");
const mostUsedBookmarkNode = document.getElementById("mostUsedBookmark");
const mostUsedDomainNode = document.getElementById("mostUsedDomain");
const mostUsedFolderNode = document.getElementById("mostUsedFolder");
const topBookmarksBody = document.getElementById("topBookmarksBody");
const topDomainsBody = document.getElementById("topDomainsBody");
const statusText = document.getElementById("statusText");
const refreshBtn = document.getElementById("refreshBtn");

/** @param {unknown} payload */
function sendMessage(payload) {
  return chrome.runtime.sendMessage(payload);
}

/**
 * @param {Array<{title: string, path: string, usageCount: number}>} bookmarks
 */
function renderTopBookmarks(bookmarks) {
  topBookmarksBody.replaceChildren();

  if (!bookmarks.length) {
    const empty = document.createElement("tr");
    empty.innerHTML = `<td colspan="3">No usage data yet.</td>`;
    topBookmarksBody.appendChild(empty);
    return;
  }

  const fragment = document.createDocumentFragment();
  bookmarks.forEach((bookmark) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td title="${bookmark.title}">${bookmark.title}</td>
      <td title="${bookmark.path || "(Root)"}">${bookmark.path || "(Root)"}</td>
      <td>${bookmark.usageCount || 0}</td>
    `;
    fragment.appendChild(row);
  });

  topBookmarksBody.appendChild(fragment);
}

/**
 * @param {Array<{domain: string, bookmarkCount: number, usageCount: number}>} domains
 */
function renderTopDomains(domains) {
  topDomainsBody.replaceChildren();

  if (!domains.length) {
    const empty = document.createElement("tr");
    empty.innerHTML = `<td colspan="3">No domain data yet.</td>`;
    topDomainsBody.appendChild(empty);
    return;
  }

  const fragment = document.createDocumentFragment();
  domains.forEach((domain) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${domain.domain}</td>
      <td>${domain.bookmarkCount}</td>
      <td>${domain.usageCount}</td>
    `;
    fragment.appendChild(row);
  });

  topDomainsBody.appendChild(fragment);
}

async function loadAnalytics() {
  try {
    const response = await sendMessage({ type: "getAnalyticsData" });
    if (!response?.ok || !response.analytics) {
      throw new Error(response?.message || "Could not load analytics.");
    }

    const data = response.analytics;
    totalBookmarksNode.textContent = String(data.totalBookmarks || 0);
    mostUsedBookmarkNode.textContent = data.mostUsedBookmark || "N/A";
    mostUsedDomainNode.textContent = data.mostUsedDomain || "N/A";
    mostUsedFolderNode.textContent = data.mostUsedFolder || "N/A";

    renderTopBookmarks(Array.isArray(data.topBookmarks) ? data.topBookmarks : []);
    renderTopDomains(Array.isArray(data.topDomains) ? data.topDomains : []);

    statusText.textContent = "Analytics updated.";
  } catch (error) {
    console.error(error);
    statusText.textContent = "Failed to load analytics data.";
  }
}

refreshBtn.addEventListener("click", () => {
  void loadAnalytics();
});

void loadAnalytics();