"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 formatMeta(entry) {
  const packName = entry && entry.packName ? entry.packName : "n/a";
  const key = entry && entry.key ? entry.key : "n/a";
  const bpm = entry && entry.bpm ? entry.bpm : "n/a";
  const tags = entry && Array.isArray(entry.tags) && entry.tags.length ? entry.tags.join(", ") : "n/a";
  return `Pack: ${packName} | Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
}

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

  if (entry.coverImageUrl) {
    const cover = document.createElement("img");
    cover.className = "history-cover-image";
    cover.src = entry.coverImageUrl;
    cover.alt = "Cover art";
    cover.loading = "lazy";
    li.appendChild(cover);
  }

  const url = document.createElement("p");
  url.className = "history-url";
  url.textContent = entry.fileName || entry.sampleId || "(unknown filename)";

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

  const details = document.createElement("p");
  details.className = "history-meta";
  details.textContent = formatMeta(entry);

  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(details);
  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.";
});