"use strict";

const statusEl = document.getElementById("status");
const listEl = document.getElementById("historyList");

function formatDate(ms) {
  try {
    return new Date(ms).toLocaleString();
  } catch (error) {
    return "unknown time";
  }
}

function buildItem(entry) {
  const li = document.createElement("li");
  li.className = "history-item";

  const url = document.createElement("p");
  url.className = "history-url";
  url.textContent = entry.fullUrl || entry.previewUrl || entry.url || "";

  const meta = document.createElement("p");
  meta.className = "history-meta";
  const mode = entry.fullUrl ? "full candidate" : "preview fallback";
  meta.textContent = `Captured: ${formatDate(entry.capturedAt)} | Mode: ${mode} | Source: ${entry.source || "unknown"}`;

  const download = document.createElement("button");
  download.type = "button";
  download.textContent = "Download";
  download.addEventListener("click", async () => {
    const result = await browser.runtime.sendMessage({
      type: "DOWNLOAD_ENTRY",
      entry
    });
    if (!result || !result.ok) {
      window.alert((result && result.error) || "Download failed.");
      return;
    }
    statusEl.textContent = result.mode === "full" ? "Downloaded full file URL." : "Downloaded decoded preview fallback.";
  });

  li.appendChild(url);
  li.appendChild(meta);
  li.appendChild(download);
  return li;
}

async function loadHistory() {
  const response = await browser.runtime.sendMessage({ type: "GET_HISTORY" });
  if (!response || !response.ok) {
    statusEl.textContent = "Unable to load history.";
    return;
  }

  const rows = Array.isArray(response.history) ? response.history : [];
  if (!rows.length) {
    statusEl.textContent = "No captured S3 URLs yet.";
    return;
  }

  statusEl.textContent = `Total captured URLs: ${rows.length}`;
  listEl.innerHTML = "";
  for (const entry of rows) {
    listEl.appendChild(buildItem(entry));
  }
}

loadHistory().catch(() => {
  statusEl.textContent = "Unexpected error while loading history.";
});