popup.js

// Grab popup: renders items, supports drag-out, copy, delete, download, and theme toggle.
const STORAGE_KEY = "grab_items";
const THEME_KEY = "grab_theme";
const DOWNLOAD_FAIL_MESSAGE = "다운로드가 불가한 이미지입니다.";

const grid = document.getElementById("grid");
const emptyState = document.getElementById("emptyState");
const toast = document.getElementById("toast");
const searchToggle = document.getElementById("searchToggle");
const searchRow = document.getElementById("searchRow");
const searchInput = document.getElementById("searchInput");
const clearAllButton = document.getElementById("clearAll");
const themeToggle = document.getElementById("themeToggle");

let items = [];
let toastTimer = null;
let currentTheme = "light";
const pendingDownloads = new Map();

initTheme();
loadItems();

chrome.storage.onChanged.addListener((changes, area) => {
  if (area === "local" && changes[STORAGE_KEY]) {
    items = changes[STORAGE_KEY].newValue || [];
    render();
  }
});

if (chrome.downloads?.onChanged) {
  chrome.downloads.onChanged.addListener((delta) => {
    if (!pendingDownloads.has(delta.id)) return;
    if (delta.state?.current === "interrupted") {
      pendingDownloads.delete(delta.id);
      showToast(DOWNLOAD_FAIL_MESSAGE);
    }
    if (delta.state?.current === "complete") {
      pendingDownloads.delete(delta.id);
    }
  });
}

searchToggle.addEventListener("click", () => {
  searchRow.classList.toggle("hidden");
  if (searchRow.classList.contains("hidden")) {
    searchInput.value = "";
    render();
  } else {
    searchInput.focus();
  }
});

searchInput.addEventListener("input", render);

clearAllButton.addEventListener("click", () => {
  if (!items.length) return;
  chrome.storage.local.set({ [STORAGE_KEY]: [] });
});

themeToggle.addEventListener("click", () => {
  currentTheme = currentTheme === "dark" ? "light" : "dark";
  applyTheme(currentTheme);
  chrome.storage.local.set({ [THEME_KEY]: currentTheme });
});

function initTheme() {
  chrome.storage.local.get({ [THEME_KEY]: "" }, (result) => {
    const stored = result[THEME_KEY];
    if (stored === "light" || stored === "dark") {
      currentTheme = stored;
    } else {
      currentTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    }
    applyTheme(currentTheme);
  });
}

function applyTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
  themeToggle.textContent = theme === "dark" ? "Light" : "Dark";
  themeToggle.title = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
}

function loadItems() {
  chrome.storage.local.get({ [STORAGE_KEY]: [] }, (result) => {
    items = Array.isArray(result[STORAGE_KEY]) ? result[STORAGE_KEY] : [];
    render();
  });
}

function render() {
  grid.innerHTML = "";

  const query = searchInput.value.trim().toLowerCase();
  const visibleItems = items
    .slice()
    .sort((a, b) => b.id - a.id)
    .filter((item) => {
      if (!query) return true;
      const haystack = [
        item.content,
        item.source_title,
        item.source_url,
        item.filename,
        item.mime
      ]
        .filter(Boolean)
        .join(" ")
        .toLowerCase();
      return haystack.includes(query);
    });

  if (!visibleItems.length) {
    emptyState.classList.remove("hidden");
    return;
  }

  emptyState.classList.add("hidden");

  visibleItems.forEach((item) => {
    grid.appendChild(createCard(item));
  });
}

function createCard(item) {
  const card = document.createElement("div");
  card.className = "card";
  card.draggable = true;

  const actions = document.createElement("div");
  actions.className = "card-actions";

  if (item.type === "image" || item.type === "file") {
    const downloadButton = document.createElement("button");
    downloadButton.className = "icon-btn";
    downloadButton.textContent = "Download";
    downloadButton.type = "button";
    downloadButton.addEventListener("click", (event) => {
      event.stopPropagation();
      handleDownload(item);
    });
    actions.appendChild(downloadButton);
  }

  const deleteButton = document.createElement("button");
  deleteButton.type = "button";
  deleteButton.className = "icon-btn danger";
  deleteButton.textContent = "×";
  deleteButton.title = "Delete";
  deleteButton.setAttribute("aria-label", "Delete");

  deleteButton.addEventListener("click", (event) => {
    event.stopPropagation();
    removeItem(item.id);
  });

  actions.appendChild(deleteButton);
  card.appendChild(actions);

  if (item.type === "image") {
    const img = document.createElement("img");
    img.src = item.content;
    img.alt = "Grabbed image";
    img.className = "card-media";
    card.appendChild(img);
  }

  const body = document.createElement("div");
  body.className = "card-body";

  if (item.type === "text") {
    const text = document.createElement("p");
    text.className = "card-text";
    text.textContent = item.content;
    body.appendChild(text);
  }

  if (item.type === "file") {
    const fileWrap = document.createElement("div");
    fileWrap.className = "card-file";

    const fileName = document.createElement("div");
    fileName.textContent = item.filename || "Untitled file";

    const fileMeta = document.createElement("div");
    fileMeta.className = "file-pill";
    fileMeta.textContent = item.mime || "File";

    fileWrap.appendChild(fileName);
    fileWrap.appendChild(fileMeta);
    body.appendChild(fileWrap);
  }

  const source = document.createElement("div");
  source.className = "card-source";
  source.title = item.source_url || "";

  const sourceDot = document.createElement("span");
  sourceDot.className = "source-dot";

  const sourceText = document.createElement("span");
  sourceText.textContent = getSourceLabel(item);

  source.appendChild(sourceDot);
  source.appendChild(sourceText);
  body.appendChild(source);

  const meta = document.createElement("div");
  meta.className = "card-meta";
  meta.textContent = formatDate(item.created_at);
  body.appendChild(meta);

  card.appendChild(body);

  card.addEventListener("click", () => copyToClipboard(item));

  card.addEventListener("dragstart", (event) => {
    if (item.type === "image") {
      event.dataTransfer.setData("text/uri-list", item.content);
      event.dataTransfer.setData("text/plain", item.content);
    } else {
      event.dataTransfer.setData("text/plain", item.content);
    }
    event.dataTransfer.effectAllowed = "copy";
    setDragPreview(event, item);
  });

  return card;
}

function copyToClipboard(item) {
  const text = item.type === "file" ? item.filename || "File" : item.content;
  navigator.clipboard
    .writeText(text)
    .then(() => showToast("Copied!"))
    .catch(() => showToast("Copy failed"));
}

function removeItem(id) {
  const nextItems = items.filter((item) => item.id !== id);
  chrome.storage.local.set({ [STORAGE_KEY]: nextItems });
}

function formatDate(isoString) {
  if (!isoString) return "";
  const date = new Date(isoString);
  return date.toLocaleString();
}

function getSourceLabel(item) {
  const title = item.source_title ? item.source_title.trim() : "";
  const host = getHost(item.source_url);

  if (title && host) return `${title} • ${host}`;
  if (title) return title;
  if (host) return host;
  return "Source unknown";
}

function getHost(url) {
  if (!url) return "";
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch {
    return "";
  }
}

function buildDownloadName(item) {
  if (item.filename) return item.filename;

  const extFromMime = extensionFromMime(item.mime || "");
  if (extFromMime) return `grab-${item.id}.${extFromMime}`;

  try {
    const url = new URL(item.content);
    const pathName = url.pathname.split("/").pop();
    if (pathName) return pathName;
  } catch {
    // ignore
  }

  return `grab-${item.id}`;
}

function extensionFromMime(mime) {
  if (!mime) return "";
  if (mime.includes("png")) return "png";
  if (mime.includes("jpeg")) return "jpg";
  if (mime.includes("gif")) return "gif";
  if (mime.includes("webp")) return "webp";
  if (mime.includes("svg")) return "svg";
  if (mime.includes("pdf")) return "pdf";
  if (mime.includes("plain")) return "txt";
  return "";
}

function handleDownload(item) {
  if (!chrome.downloads) {
    showToast(DOWNLOAD_FAIL_MESSAGE);
    return;
  }

  const options = {
    url: item.content,
    filename: buildDownloadName(item),
    saveAs: false
  };

  chrome.downloads.download(options, (downloadId) => {
    if (chrome.runtime.lastError || !downloadId) {
      showToast(DOWNLOAD_FAIL_MESSAGE);
      return;
    }
    pendingDownloads.set(downloadId, item);
  });
}

function showToast(message) {
  toast.textContent = message;
  toast.classList.add("show");

  if (toastTimer) clearTimeout(toastTimer);
  toastTimer = setTimeout(() => {
    toast.classList.remove("show");
  }, 1200);
}

function setDragPreview(event, item) {
  const preview = document.createElement("div");
  preview.className = "grab-drag-preview";

  if (item.type === "image") {
    const img = document.createElement("img");
    img.src = item.content;
    img.alt = "";
    preview.appendChild(img);
  } else if (item.type === "file") {
    const badge = document.createElement("div");
    badge.className = "grab-drag-preview__badge";
    badge.textContent = "File";
    const text = document.createElement("div");
    text.className = "grab-drag-preview__text";
    text.textContent = item.filename || "File";
    preview.appendChild(badge);
    preview.appendChild(text);
  } else {
    const badge = document.createElement("div");
    badge.className = "grab-drag-preview__badge";
    badge.textContent = "Text";
    const text = document.createElement("div");
    text.className = "grab-drag-preview__text";
    text.textContent = item.content;
    preview.appendChild(badge);
    preview.appendChild(text);
  }

  document.body.appendChild(preview);
  const { width, height } = preview.getBoundingClientRect();
  event.dataTransfer.setDragImage(preview, width / 2, height / 2);

  requestAnimationFrame(() => {
    preview.remove();
  });
}