"use strict";

const rows = document.getElementById("rows");
const nameInput = document.getElementById("name");
const createBtn = document.getElementById("create");
const errorEl = document.getElementById("error");
const statusEl = document.getElementById("status");
const modal = document.getElementById("secret-modal");
const secretEl = document.getElementById("secret");
const copyBtn = document.getElementById("copy");
const closeBtn = document.getElementById("close");

function showError(text) {
  errorEl.hidden = !text;
  errorEl.textContent = text || "";
}

function render(clients) {
  if (!clients.length) {
    rows.innerHTML = '<tr><td colspan="4" class="muted">No clients yet. Generate a secret to get started.</td></tr>';
    return;
  }
  rows.innerHTML = "";
  for (const client of clients) {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${escapeHtml(client.name)}</td>
      <td>${escapeHtml(client.created || "")}</td>
      <td>${escapeHtml(client.last_used || "never")}</td>
      <td><button type="button" data-revoke="${escapeHtml(client.id)}">Revoke</button></td>`;
    rows.appendChild(tr);
  }
}

function escapeHtml(value) {
  return String(value)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

async function refresh() {
  render(await listClients());
  try {
    const info = await browser.runtime.sendMessage({ type: "status" });
    statusEl.textContent = info && info.hostUp
      ? "Local script access is on. Agents can call in while this browser is open."
      : "Secrets work here. Install the native host if you want scripts and agents to call in.";
  } catch (err) {
    statusEl.textContent = "Secrets work here. Local script access status is unavailable.";
  }
}

createBtn.addEventListener("click", async () => {
  showError("");
  try {
    const created = await createClient(nameInput.value.trim());
    nameInput.value = "";
    secretEl.value = created.token;
    modal.showModal();
    await refresh();
  } catch (err) {
    showError(err.message);
  }
});

rows.addEventListener("click", async (event) => {
  const id = event.target && event.target.getAttribute("data-revoke");
  if (!id) {
    return;
  }
  showError("");
  try {
    await revokeClient(id);
    await refresh();
  } catch (err) {
    showError(err.message);
  }
});

copyBtn.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(secretEl.value);
    copyBtn.textContent = "Copied";
  } catch (err) {
    showError(err.message);
  }
});

closeBtn.addEventListener("click", () => {
  secretEl.value = "";
  copyBtn.textContent = "Copy";
  modal.close();
});

refresh().catch((err) => showError(err.message));