popup.js

const STORAGE_KEY = "keeperItems";

const elements = {
  form: document.getElementById("save-form"),
  textInput: document.getElementById("text-input"),
  noteInput: document.getElementById("note-input"),
  tagInput: document.getElementById("tag-input"),
  pageTitle: document.getElementById("page-title"),
  pageUrl: document.getElementById("page-url"),
  statusMessage: document.getElementById("status-message"),
  savedList: document.getElementById("saved-list"),
  emptyState: document.getElementById("empty-state"),
  itemCount: document.getElementById("item-count"),
  filterTabs: document.querySelectorAll(".filter-tab"),
  sortSelect: document.getElementById("sort-select"),
  exportButton: document.getElementById("export-button"),
  importButton: document.getElementById("import-button"),
  importInput: document.getElementById("import-input")
};

let currentPage = {
  title: "",
  url: ""
};
let currentSelection = "";
let currentFilter = "all";
let currentSort = "newest";

document.addEventListener("DOMContentLoaded", initializePopup);

async function initializePopup() {
  await migrateStoredItems();
  await loadCurrentTabDetails();
  bindEvents();
  updateFilterTabs();
  elements.sortSelect.value = currentSort;
  await renderItems();
  chrome.storage.onChanged.addListener(handleStorageChange);
}

function bindEvents() {
  elements.form.addEventListener("submit", handleSave);
  elements.savedList.addEventListener("click", handleListClick);
  elements.filterTabs.forEach((tab) => {
    tab.addEventListener("click", handleFilterChange);
  });
  elements.sortSelect.addEventListener("change", handleSortChange);
  elements.exportButton.addEventListener("click", handleExport);
  elements.importButton.addEventListener("click", () => {
    elements.importInput.click();
  });
  elements.importInput.addEventListener("change", handleImport);
}

async function loadCurrentTabDetails() {
  setStatus("Checking current page...");

  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    if (!tab) {
      setStatus("Could not find the current tab.");
      return;
    }

    currentPage.title = tab.title || "Untitled page";
    currentPage.url = tab.url || "";

    updatePageMeta(currentPage.title, currentPage.url);

    const selection = await getSelectedText(tab.id);
    currentSelection = selection;

    if (selection) {
      elements.textInput.value = selection;
      setStatus("Selected text found. You can save it now.");
    } else {
      setStatus("No selected text found. You can type a topic manually.");
    }
  } catch (error) {
    console.error("Failed to load current tab details:", error);
    setStatus("Could not read the current page. Manual entry still works.");
  }
}

function updatePageMeta(title, url) {
  elements.pageTitle.textContent = title || "No page title available";
  elements.pageUrl.textContent = url || "No page URL available";
  elements.pageUrl.href = url || "#";
}

async function getSelectedText(tabId) {
  if (!tabId) {
    return "";
  }

  try {
    // This runs inside the current page and returns any highlighted text.
    const results = await chrome.scripting.executeScript({
      target: { tabId },
      func: () => window.getSelection().toString().trim()
    });

    return results[0]?.result || "";
  } catch (error) {
    console.error("Failed to get selected text:", error);
    return "";
  }
}

async function handleSave(event) {
  event.preventDefault();

  const text = elements.textInput.value.trim();
  const note = elements.noteInput.value.trim();
  const tag = elements.tagInput.value.trim();

  if (!text) {
    setStatus("Add a term or topic before saving.");
    elements.textInput.focus();
    return;
  }

  const newItem = createNewItem({
    text,
    note,
    tag,
    pageTitle: currentPage.title,
    sourceUrl: currentPage.url,
    jumpUrl: buildJumpUrl(currentPage.url, currentSelection)
  });

  const items = await getStoredItems();
  items.unshift(newItem);
  await saveStoredItems(items);

  resetForm();
  await renderItems();
  setStatus("Item saved.");
}

function createNewItem({ text, note, tag, pageTitle, sourceUrl, jumpUrl }) {
  return {
    id: crypto.randomUUID(),
    text,
    note: note || "",
    tag: tag || "",
    pageTitle: pageTitle || "Unknown page",
    pageUrl: sourceUrl || "",
    sourceUrl: sourceUrl || "",
    jumpUrl: jumpUrl || "",
    status: "saved",
    createdAt: new Date().toISOString()
  };
}

async function renderItems() {
  const items = await getStoredItems();
  const visibleItems = getVisibleItems(items);

  elements.savedList.innerHTML = visibleItems.map(createItemMarkup).join("");
  elements.itemCount.textContent = String(visibleItems.length);
  elements.emptyState.hidden = visibleItems.length > 0;
}

function getVisibleItems(items) {
  return items
    .map(normalizeItem)
    .filter(matchesCurrentFilter)
    .sort(compareItems);
}

function createItemMarkup(item) {
  const noteMarkup = item.note
    ? `<p class="item__note"><strong>Note:</strong> ${escapeHtml(item.note)}</p>`
    : "";
  const tagMarkup = item.tag
    ? `<p class="item__tag"><span class="item__tag-badge">${escapeHtml(item.tag)}</span></p>`
    : "";
  const hasSourceUrl = Boolean(item.sourceUrl);
  const hasJumpUrl = Boolean(item.jumpUrl);
  const hostname = getDisplayHostname(item.sourceUrl);
  const pageTitleMarkup = hasSourceUrl
    ? `
        <a
          class="item__page-link"
          href="${escapeAttribute(item.sourceUrl)}"
          target="_blank"
          rel="noreferrer"
          title="Open source page"
        >
          ${escapeHtml(item.pageTitle || "Open source page")}
        </a>
      `
    : `<span class="item__page-text">${escapeHtml(item.pageTitle || "No saved page")}</span>`;

  const learnedButtonLabel = item.status === "learned" ? "Learned" : "Mark learned";
  const learnedButtonDisabled = item.status === "learned" ? "disabled" : "";
  const openButtonDisabled = hasSourceUrl ? "" : "disabled";
  const jumpButtonDisabled = hasJumpUrl ? "" : "disabled";
  const copyButtonDisabled = hasSourceUrl ? "" : "disabled";
  const statusBadgeClass =
    item.status === "learned"
      ? "item__status-badge item__status-badge--learned"
      : "item__status-badge";
  const cardClass = item.status === "learned" ? "card item item--learned" : "card item";

  return `
    <li class="${cardClass}" data-id="${item.id}">
      <div>
        <p class="item__meta">Saved topic</p>
        <h3 class="item__title">${escapeHtml(item.text)}</h3>
      </div>
      ${tagMarkup}
      ${noteMarkup}
      <div class="item__source">
        <p class="item__meta">Source page</p>
        <p class="item__page">${pageTitleMarkup}</p>
        <p class="item__hostname">${escapeHtml(hostname)}</p>
      </div>
      <p class="item__status">
        <span class="item__status-label">Status</span>
        <span class="${statusBadgeClass}">${escapeHtml(item.status)}</span>
      </p>
      <p class="item__date">${formatDate(item.createdAt)}</p>
      <div class="item__actions">
        <button type="button" class="button button--secondary" data-action="open-source" ${openButtonDisabled}>
          Open Page
        </button>
        <button type="button" class="button button--secondary" data-action="open-jump" ${jumpButtonDisabled}>
          Jump to Text
        </button>
        <button type="button" class="button button--secondary" data-action="copy-url" ${copyButtonDisabled}>
          Copy URL
        </button>
        <button type="button" class="button button--secondary" data-action="learned" ${learnedButtonDisabled}>
          ${learnedButtonLabel}
        </button>
        <button type="button" class="button button--danger" data-action="delete">
          Delete
        </button>
      </div>
    </li>
  `;
}

async function handleListClick(event) {
  const actionButton = event.target.closest("button[data-action]");

  if (!actionButton) {
    return;
  }

  const listItem = actionButton.closest("[data-id]");
  const itemId = listItem?.dataset.id;

  if (!itemId) {
    return;
  }

  const action = actionButton.dataset.action;

  if (action === "delete") {
    await deleteItem(itemId);
    return;
  }

  if (action === "open-source") {
    await openItemSourcePage(itemId);
    return;
  }

  if (action === "open-jump") {
    await openItemJumpPage(itemId);
    return;
  }

  if (action === "copy-url") {
    await copyItemUrl(itemId);
    return;
  }

  if (action === "learned") {
    await markItemAsLearned(itemId);
  }
}

async function deleteItem(itemId) {
  const items = await getStoredItems();
  const updatedItems = items.filter((item) => item.id !== itemId);
  await saveStoredItems(updatedItems);
  await renderItems();
  setStatus("Item deleted.");
}

async function markItemAsLearned(itemId) {
  const items = await getStoredItems();
  const updatedItems = items.map((item) => {
    if (item.id !== itemId) {
      return item;
    }

    return {
      ...item,
      status: "learned"
    };
  });

  await saveStoredItems(updatedItems);
  await renderItems();
  setStatus("Item marked as learned.");
}

async function getStoredItems() {
  const storedData = await chrome.storage.local.get(STORAGE_KEY);
  return storedData[STORAGE_KEY] || [];
}

async function saveStoredItems(items) {
  await chrome.storage.local.set({ [STORAGE_KEY]: items });
}

async function migrateStoredItems() {
  const items = await getStoredItems();
  const migratedItems = items.map(normalizeItem);
  const hasChanges = JSON.stringify(items) !== JSON.stringify(migratedItems);

  if (hasChanges) {
    await saveStoredItems(migratedItems);
  }
}

async function getItemById(itemId) {
  const items = await getStoredItems();
  const item = items.find((entry) => entry.id === itemId);
  return item ? normalizeItem(item) : null;
}

async function openItemSourcePage(itemId) {
  const item = await getItemById(itemId);

  if (!item?.sourceUrl) {
    setStatus("No source page URL for this item.");
    return;
  }

  await chrome.tabs.create({ url: item.sourceUrl });
  setStatus("Opened source page in a new tab.");
}

async function openItemJumpPage(itemId) {
  const item = await getItemById(itemId);

  if (!item?.jumpUrl) {
    setStatus("No jump link saved for this item.");
    return;
  }

  await chrome.tabs.create({ url: item.jumpUrl });
  setStatus("Opened jump link in a new tab.");
}

async function copyItemUrl(itemId) {
  const item = await getItemById(itemId);

  if (!item?.sourceUrl) {
    setStatus("No saved page URL to copy.");
    return;
  }

  try {
    await navigator.clipboard.writeText(item.sourceUrl);
    setStatus("Copied page URL.");
  } catch (error) {
    console.error("Failed to copy URL:", error);
    setStatus("Could not copy the URL.");
  }
}

async function handleExport() {
  const items = await getStoredItems();
  const jsonText = JSON.stringify(items, null, 2);
  const blob = new Blob([jsonText], { type: "application/json" });
  const objectUrl = URL.createObjectURL(blob);
  const link = document.createElement("a");

  link.href = objectUrl;
  link.download = `keeper-export-${new Date().toISOString().slice(0, 10)}.json`;
  link.click();

  URL.revokeObjectURL(objectUrl);
  setStatus("Exported Keeper data.");
}

async function handleImport(event) {
  const file = event.target.files[0];

  if (!file) {
    return;
  }

  try {
    const fileText = await file.text();
    const parsedData = JSON.parse(fileText);
    const importedItems = getImportedItems(parsedData);

    if (!importedItems.length) {
      setStatus("No valid Keeper items found in the file.");
      return;
    }

    const existingItems = await getStoredItems();
    const mergedItems = mergeImportedItems(existingItems, importedItems);

    await saveStoredItems(mergedItems);
    setStatus("Imported Keeper data.");
  } catch (error) {
    console.error("Failed to import Keeper data:", error);
    setStatus("Could not import that JSON file.");
  } finally {
    event.target.value = "";
  }
}

function getImportedItems(parsedData) {
  const rawItems = Array.isArray(parsedData) ? parsedData : parsedData?.items;

  if (!Array.isArray(rawItems)) {
    return [];
  }

  return rawItems
    .map(sanitizeImportedItem)
    .filter(Boolean);
}

function sanitizeImportedItem(rawItem) {
  if (!rawItem || typeof rawItem !== "object") {
    return null;
  }

  const text = String(rawItem.text || "").trim();

  if (!text) {
    return null;
  }

  const createdAt = isValidDate(rawItem.createdAt)
    ? new Date(rawItem.createdAt).toISOString()
    : new Date().toISOString();
  const sourceUrl = String(rawItem.sourceUrl || rawItem.pageUrl || "").trim();
  const jumpUrl = String(rawItem.jumpUrl || getStoredJumpUrl(rawItem) || "").trim();

  return normalizeItem({
    id: String(rawItem.id || crypto.randomUUID()),
    text,
    note: String(rawItem.note || ""),
    tag: String(rawItem.tag || ""),
    pageTitle: String(rawItem.pageTitle || "Unknown page"),
    pageUrl: sourceUrl,
    sourceUrl,
    jumpUrl,
    status: rawItem.status === "learned" ? "learned" : "saved",
    createdAt
  });
}

function mergeImportedItems(existingItems, importedItems) {
  const mergedItems = [...existingItems];

  importedItems.forEach((importedItem) => {
    if (!hasDuplicateItem(mergedItems, importedItem)) {
      mergedItems.push(importedItem);
    }
  });

  return mergedItems.sort((firstItem, secondItem) => {
    return getItemTime(secondItem) - getItemTime(firstItem);
  });
}

function hasDuplicateItem(items, candidateItem) {
  return items.some((existingItem) => {
    const normalizedExistingItem = normalizeItem(existingItem);

    if (normalizedExistingItem.id === candidateItem.id) {
      return true;
    }

    return (
      normalizedExistingItem.text === candidateItem.text &&
      normalizedExistingItem.sourceUrl === candidateItem.sourceUrl &&
      normalizedExistingItem.createdAt === candidateItem.createdAt
    );
  });
}

function buildJumpUrl(pageUrl, selectedText) {
  if (!pageUrl || !selectedText) {
    return "";
  }

  try {
    const url = new URL(pageUrl);

    if (url.protocol !== "http:" && url.protocol !== "https:") {
      return "";
    }

    // Text fragments let Chrome jump close to the selected text on supported pages.
    const cleanText = selectedText.replace(/\s+/g, " ").trim();

    if (!cleanText) {
      return "";
    }

    const existingHash = url.hash.replace(/^#/, "");
    const textFragment = `:~:text=${encodeURIComponent(cleanText)}`;
    url.hash = existingHash ? `${existingHash}${textFragment}` : textFragment;
    return url.toString();
  } catch (error) {
    console.error("Failed to build text fragment URL:", error);
    return "";
  }
}

function normalizeItem(item) {
  const sourceUrl = item.sourceUrl || stripTextFragment(item.pageUrl || "");
  const jumpUrl = item.jumpUrl || getStoredJumpUrl(item);

  return {
    ...item,
    tag: item.tag || "",
    pageUrl: sourceUrl,
    sourceUrl,
    jumpUrl
  };
}

function getStoredJumpUrl(item) {
  if (hasTextFragment(item.pageUrl || "")) {
    return item.pageUrl;
  }

  return "";
}

function stripTextFragment(urlValue) {
  if (!urlValue) {
    return "";
  }

  return urlValue.replace(/:~:text=.*$/, "");
}

function hasTextFragment(urlValue) {
  return urlValue.includes("#:~:text=");
}

function getDisplayHostname(urlValue) {
  if (!urlValue) {
    return "No saved page";
  }

  try {
    return new URL(urlValue).hostname || urlValue;
  } catch (error) {
    return urlValue;
  }
}

function resetForm() {
  elements.form.reset();
  elements.textInput.value = "";
  currentSelection = "";
  updatePageMeta(currentPage.title, currentPage.url);
}

function handleFilterChange(event) {
  currentFilter = event.currentTarget.dataset.filter;
  updateFilterTabs();
  renderItems();
}

function handleSortChange(event) {
  currentSort = event.target.value;
  renderItems();
}

function updateFilterTabs() {
  elements.filterTabs.forEach((tab) => {
    const isActive = tab.dataset.filter === currentFilter;
    tab.classList.toggle("filter-tab--active", isActive);
    tab.setAttribute("aria-selected", String(isActive));
  });
}

function matchesCurrentFilter(item) {
  if (currentFilter === "saved") {
    return item.status === "saved";
  }

  if (currentFilter === "learned") {
    return item.status === "learned";
  }

  return true;
}

function compareItems(firstItem, secondItem) {
  if (currentSort === "oldest") {
    return getItemTime(firstItem) - getItemTime(secondItem);
  }

  if (currentSort === "az") {
    return firstItem.text.localeCompare(secondItem.text);
  }

  if (currentSort === "learned-last") {
    if (firstItem.status !== secondItem.status) {
      return firstItem.status === "learned" ? 1 : -1;
    }

    return getItemTime(secondItem) - getItemTime(firstItem);
  }

  return getItemTime(secondItem) - getItemTime(firstItem);
}

function getItemTime(item) {
  return new Date(item.createdAt).getTime();
}

function isValidDate(value) {
  return !Number.isNaN(new Date(value).getTime());
}

function handleStorageChange(changes, areaName) {
  if (areaName !== "local" || !changes[STORAGE_KEY]) {
    return;
  }

  renderItems();
}

function setStatus(message) {
  elements.statusMessage.textContent = message;
}

function formatDate(isoString) {
  const date = new Date(isoString);
  return date.toLocaleString([], {
    dateStyle: "medium",
    timeStyle: "short"
  });
}

function escapeHtml(value) {
  return value
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

function escapeAttribute(value) {
  return escapeHtml(value);
}