"use strict";

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

function setStatus(message) {
  statusEl.textContent = message;
}

function entryLabel(entry) {
  return entry && entry.fullUrl ? "full candidate" : "preview fallback";
}

function formatMeta(entry) {
  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 `Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
}

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

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

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

  const status = document.createElement("p");
  status.className = "status";
  status.textContent = `Source: ${entry.source || "unknown"} | Mode: ${entryLabel(entry)} | ID: ${entry.sampleId || "n/a"}`;

  const meta = document.createElement("p");
  meta.className = "status";
  meta.textContent = formatMeta(entry);

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

  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;
    }
    setStatus(result.mode === "full" ? "Downloaded full file URL." : "Downloaded decoded preview fallback.");
  });

  const copy = document.createElement("button");
  copy.type = "button";
  copy.className = "secondary";
  copy.textContent = "Copy URL";
  copy.addEventListener("click", async () => {
    const url = entry.fullUrl || entry.previewUrl || "";
    await navigator.clipboard.writeText(url);
  });

  actions.appendChild(download);
  actions.appendChild(copy);
  li.appendChild(p);
  li.appendChild(status);
  li.appendChild(meta);
  li.appendChild(actions);
  return li;
}

async function loadCapturedUrls() {
  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
  const activeTab = tabs[0];

  if (!activeTab || typeof activeTab.id !== "number") {
    setStatus("No active tab found.");
    return;
  }

  const response = await browser.runtime.sendMessage({
    type: "GET_TAB_URLS",
    tabId: activeTab.id
  });

  if (!response || !response.ok) {
    setStatus("Unable to load captured URLs.");
    return;
  }

  listEl.innerHTML = "";
  const entries = Array.isArray(response.entries) ? response.entries : [];
  if (!entries.length) {
    setStatus("No captured S3 URLs for this tab yet.");
    return;
  }

  setStatus(`Captured samples for this tab: ${entries.length}`);
  for (const entry of entries) {
    listEl.appendChild(buildRow(entry));
  }
}

openHistoryBtn.addEventListener("click", async () => {
  await browser.runtime.sendMessage({ type: "OPEN_HISTORY" });
  window.close();
});

loadCapturedUrls().catch(() => {
  setStatus("Unexpected error while loading URLs.");
});