// ===== Globals =====
let bulkDeleteMode = false;

// ===== Bulk Delete State =====
setBulkMode(false);
const selectedForDeletion = new Set(); // keys as `${service}||${identifier||'default'}`
function selKey(service, identifier) {
  return `${service}||${identifier || "default"}`;
}
function getSelectedCount() {
  return selectedForDeletion.size;
}
function clearSelected() {
  selectedForDeletion.clear();
  updateBulkControlsUI();
}
let _userPublicKey = ""; // reserved for future publish/auth flows
let userAddress = "";
let userName = "";
let isAuthenticated = false;
let allNames = [];
let authStatus = "idle";
let _namesStatus = "idle"; // future UI state for name loading
let _allResults = []; // planned for search results caching
let metadataArray = [];

// ===== Search State =====
const LS_LAST_SEARCH_KEY = "qedit:lastSearch";
let searchState = {
  params: null,
  results: [],
  offset: 0,
  limit: 100,
  hasMore: false,
  inFlight: false,
};

// Pagination
let currentPage = 1;
let itemsPerPage = 25;
let totalResults = 0;

// Render helper bridge (safe fallback if render helper isn't loaded yet)
function renderIntoCompat(el, htmlString, mode) {
  if (!el) {
    return;
  }
  try {
    if (window.QEditRender && typeof window.QEditRender.renderInto === "function") {
      window.QEditRender.renderInto(el, htmlString, mode || "replace");
      return;
    }
  } catch {}
  if (mode === "append") {
    el.insertAdjacentHTML("beforeend", htmlString);
  } else if (mode === "prepend") {
    el.insertAdjacentHTML("afterbegin", htmlString);
  } else {
    el.innerHTML = htmlString;
  }
}

// Pagination preferences (storage + hash)
const LS_ITEMS_PER_PAGE_KEY = "qedit_itemsPerPage";

function getPageFromHash() {
  const h = (location.hash || "").toLowerCase();
  const m = h.match(/page=(\d+)/);
  if (m) {
    const p = parseInt(m[1], 10);
    if (!isNaN(p) && p >= 1) {
      return p;
    }
  }
  return null;
}

function setPageHash(p) {
  try {
    const newHash = `#page=${p}`;
    if (location.hash !== newHash) {
      location.hash = newHash;
    }
  } catch {}
}

function initPaginationPrefs() {
  // itemsPerPage from localStorage
  try {
    const stored = localStorage.getItem(LS_ITEMS_PER_PAGE_KEY);
    const sel = document.getElementById("items-per-page-dropdown");
    if (stored) {
      const v = parseInt(stored, 10);
      if (!isNaN(v) && v > 0) {
        itemsPerPage = v;
        if (sel) {
          sel.value = String(v);
        }
      }
    } else {
      if (sel) {
        sel.value = String(itemsPerPage);
      }
    }
  } catch {}

  // page from hash
  const hp = getPageFromHash();
  if (hp) {
    currentPage = hp;
  }

  // react to browser hash navigation
  window.addEventListener("hashchange", async () => {
    const hp2 = getPageFromHash();
    if (hp2 && hp2 !== currentPage) {
      currentPage = hp2;
      await fetchPage();
    }
  });
}

let totalSize = 0;
let _currentServiceFilter = "ALL"; // reserved: legacy filter placeholder

const infoDetails = `<img src="red-x.svg" style="width:15px;height:15px;"> Click the identifier to "delete" content.<br>(This will replace it with a blank file.)<br><br>
   <img src="file-up.png" style="width:15px;height:15px;"> Click the file select icon to "edit" content.<br>(This will replace it with a selected file.)`;

// Data sets for chips-based filtering
let masterResults = []; // full unfiltered list for current name
let filteredResults = []; // results after chips selection
let selectedServices = new Set(); // inclusion set; empty => show all
let serviceCounts = {}; // { service: count }

// === Tree-driven filters ===
let currentPrefixFilter = null; // e.g., "qtube"
let currentIdentifierFilter = null; // exact identifier; if set, we will show inline preview

function clearTreeFilters() {
  currentPrefixFilter = null;
  currentIdentifierFilter = null;
}

// === Deleted-content filter (default ON) ===
const TINY_SIZE_THRESHOLD = 128; // bytes; QDN may report ~32B for 1B newline
let hideDeleted = localStorage.getItem("hideDeleted") !== "false"; // default true
function getBaselineResults() {
  // When hiding deletions, exclude items flagged as deleted
  if (!hideDeleted) {
    return masterResults;
  }
  return masterResults.filter((r) => !r.__isDeleted);
}
function recomputeServiceCounts() {
  serviceCounts = {};
  const base = getBaselineResults();
  for (const r of base) {
    const svc = r.service || "UNKNOWN";
    serviceCounts[svc] = (serviceCounts[svc] || 0) + 1;
  }
}
// ===== DOM & UI helpers =====
const contentPage = document.getElementById("content-page");
const authButton = document.getElementById("auth-button");
const nameSwitcherEl = document.getElementById("name-switcher");
const nameSelectEl = document.getElementById("name-select");
const loadingOverlay = document.getElementById("loading-overlay");

function showSpinner() {
  if (loadingOverlay) {
    loadingOverlay.style.display = "flex";
  }
}
function hideSpinner() {
  if (loadingOverlay) {
    loadingOverlay.style.display = "none";
  }
}

// ===== Sidebar toggle fallback (in case module init fails) =====
(function initSidebarToggleFallback() {
  // Expose a very simple global fallback toggler for inline onclick usage
  // This ensures the sidebar can always be toggled even if event wiring changes.
  window.QEditToggleSidebar = function (action) {
    try {
      const shell = document.getElementById("app-shell");
      const sidebar = document.getElementById("sidebar");
      const collapseBtn = document.getElementById("sidebar-collapse");
      const revealBtn = document.getElementById("sidebar-reveal");
      if (!shell || !sidebar) {
        return false;
      }
      const currentlyHidden =
        sidebar.style.display === "none" ||
        sidebar.getAttribute("aria-hidden") === "true" ||
        shell.classList.contains("is-collapsed");
      let collapse;
      if (action === "show") {
        collapse = false;
      } else if (action === "hide") {
        collapse = true;
      } else {
        collapse = !currentlyHidden;
      }
      function apply(collapsed) {
        if (collapsed) {
          shell.classList.add("is-collapsed");
          sidebar.style.display = "none";
          sidebar.setAttribute("aria-hidden", "true");
          if (collapseBtn) {
            collapseBtn.setAttribute("aria-pressed", "true");
            collapseBtn.setAttribute("aria-expanded", "false");
          }
          if (revealBtn) {
            revealBtn.style.display = "inline-block";
          }
        } else {
          shell.classList.remove("is-collapsed");
          sidebar.style.display = "";
          sidebar.removeAttribute("aria-hidden");
          if (collapseBtn) {
            collapseBtn.setAttribute("aria-pressed", "false");
            collapseBtn.setAttribute("aria-expanded", "true");
          }
          if (revealBtn) {
            revealBtn.style.display = "none";
          }
        }
        try {
          window.localStorage.setItem("qedit:sidebarCollapsed", String(!!collapsed));
        } catch {}
      }
      apply(collapse);
    } catch {}
    return false;
  };
  function getStoredCollapsed() {
    try {
      const v = window.localStorage.getItem("qedit:sidebarCollapsed");
      return v === "true";
    } catch {
      return false;
    }
  }
  function setStoredCollapsed(val) {
    try {
      window.localStorage.setItem("qedit:sidebarCollapsed", String(!!val));
    } catch {}
  }
  function applyCollapsed(collapsed) {
    const shell = document.getElementById("app-shell");
    const sidebar = document.getElementById("sidebar");
    const collapseBtn = document.getElementById("sidebar-collapse");
    const revealBtn = document.getElementById("sidebar-reveal");
    if (!shell || !sidebar) {
      return;
    }
    if (collapsed) {
      // Simple, robust: hide the sidebar directly
      shell.classList.add("is-collapsed");
      sidebar.style.display = "none";
      sidebar.setAttribute("aria-hidden", "true");
      if (collapseBtn) {
        collapseBtn.setAttribute("aria-pressed", "true");
        collapseBtn.setAttribute("aria-expanded", "false");
      }
      if (revealBtn) {
        revealBtn.style.display = "inline-block";
      }
    } else {
      shell.classList.remove("is-collapsed");
      sidebar.style.display = "";
      sidebar.removeAttribute("aria-hidden");
      if (collapseBtn) {
        collapseBtn.setAttribute("aria-pressed", "false");
        collapseBtn.setAttribute("aria-expanded", "true");
      }
      if (revealBtn) {
        revealBtn.style.display = "none";
      }
    }
  }
  function bind() {
    const shell = document.getElementById("app-shell");
    if (!shell || shell.dataset.sidebarInitialized === "1") {
      return; // module already bound
    }
    shell.dataset.sidebarInitialized = "1";
    applyCollapsed(getStoredCollapsed());
    const collapseBtn = document.getElementById("sidebar-collapse");
    const revealBtn = document.getElementById("sidebar-reveal");
    if (collapseBtn) {
      collapseBtn.addEventListener("click", () => {
        const nowCollapsed = !shell.classList.contains("is-collapsed");
        applyCollapsed(nowCollapsed);
        setStoredCollapsed(nowCollapsed);
      });
    }
    if (revealBtn) {
      revealBtn.addEventListener("click", () => {
        applyCollapsed(false);
        setStoredCollapsed(false);
      });
    }
    document.addEventListener("click", (e) => {
      // Robustly handle clicks that originate on Text/SVG nodes by finding a nearby Element
      const targetEl =
        e.target && e.target instanceof Element
          ? e.target
          : e.target && /** @type {any} */ (e.target).parentElement
            ? /** @type {HTMLElement} */ (/** @type {any} */ (e.target).parentElement)
            : null;
      const el = targetEl ? targetEl.closest("#sidebar-collapse, #sidebar-reveal") : null;
      if (!el) {
        return;
      }
      e.preventDefault();
      if (el.id === "sidebar-collapse") {
        const nowCollapsed = !shell.classList.contains("is-collapsed");
        applyCollapsed(nowCollapsed);
        setStoredCollapsed(nowCollapsed);
      } else if (el.id === "sidebar-reveal") {
        applyCollapsed(false);
        setStoredCollapsed(false);
      }
    });
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", bind, { once: true });
  } else {
    bind();
  }
})();

// ===== View Controller: show only one main section at a time =====
const Sections = {
  search: document.getElementById("search-page"),
  info: document.getElementById("info-page"),
  content: document.getElementById("content-page"),
  preview: document.getElementById("preview-page"),
  compose: document.getElementById("compose-page"),
};
function showSection(which) {
  // Promote any currently playing media before switching away
  try {
    const prev = Object.entries(Sections).find(([_k, v]) => v && v.style.display !== "none");
    const prevKey = prev ? prev[0] : null;
    if (prevKey && prevKey !== which) {
      const from = Sections[prevKey];
      if (from) {
        const av = from.querySelector("video, audio");
        const shouldPromote =
          av && (av.paused === false || ((av.currentTime || 0) > 0 && av.ended === false));
        if (shouldPromote) {
          promoteMedia(av, {
            service: av.getAttribute("data-service") || "",
            identifier: av.getAttribute("data-identifier") || "default",
            name: av.getAttribute("data-name") || userName,
          });
        }
      }
    }
  } catch {}

  for (const [key, el] of Object.entries(Sections)) {
    if (!el) {
      continue;
    }
    el.style.display = key === which ? "block" : "none";
  }
}

// ===== Search mode state =====
let searchModeActive = false;
function updateSearchButtonUI() {
  const btn = document.getElementById("search-button");
  if (!btn) {
    return;
  }
  btn.setAttribute("aria-pressed", String(!!searchModeActive));
  const isOn = !!searchModeActive;
  btn.setAttribute("title", isOn ? "Search (open)" : "Search");
  btn.setAttribute("aria-label", isOn ? "Search is open" : "Search");
}
function setSearchMode(on) {
  searchModeActive = !!on;
  updateSidebarBanner();
  updateSearchButtonUI();
  showSection(on ? "search" : "content");
  if (searchModeActive) {
    try {
      initSearchUI();
    } catch {}
  }
}

// ===== Sidebar tree =====
function buildSidebarTree() {
  const tree = document.getElementById("file-tree");
  if (!tree) {
    return;
  }
  tree.innerHTML = "";
  const base = getBaselineResults();

  // Build service -> [items]
  const byService = {};
  for (const r of base) {
    const svc = r.service || "UNKNOWN";
    (byService[svc] = byService[svc] || []).push(r);
  }

  const services = Object.keys(byService).sort();
  for (const svc of services) {
    const items = byService[svc];
    if (!items || items.length === 0) {
      continue;
    }

    const svcNode = document.createElement("div");
    svcNode.className = "tree-node";
    const line = document.createElement("div");
    line.className = "tree-line";
    line.setAttribute("role", "treeitem");
    line.setAttribute("aria-expanded", "false");

    const toggle = document.createElement("button");
    toggle.type = "button";
    toggle.className = "tree-toggle";
    toggle.textContent = "▶";
    toggle.addEventListener("click", (e) => {
      e.stopPropagation();
      const open = children.classList.toggle("expanded");
      line.setAttribute("aria-expanded", String(open));
      toggle.textContent = open ? "▼" : "▶";
    });

    const label = document.createElement("span");
    label.className = "tree-label";
    label.textContent = svc;
    label.addEventListener("click", async () => {
      // Filter to this service
      selectedServices = new Set([svc]);
      clearTreeFilters();
      applyServiceFilter();
      showSpinner();
      contentPage.style.display = "none";
      try {
        await fetchPage();
      } finally {
        showSection("content");
        hideSpinner();
      }
    });

    const count = document.createElement("span");
    count.className = "tree-count";
    count.textContent = String(items.length);

    const children = document.createElement("div");
    children.className = "tree-children";
    children.setAttribute("role", "group");

    // Group by identifier prefix (support '_' and '-') with 'q' special-case
    const byPrefix = {};
    function firstSepIndexAny(str) {
      const u = str.indexOf("_");
      const d = str.indexOf("-");
      if (u === -1) {
        return d;
      }
      if (d === -1) {
        return u;
      }
      return Math.min(u, d);
    }
    function computePrefix(id) {
      if (!id) {
        return "";
      }
      const idx1 = firstSepIndexAny(id);
      if (idx1 <= 0) {
        return "";
      }
      let pfx = id.slice(0, idx1);
      if (pfx === "q") {
        const rest = id.slice(idx1 + 1);
        const idx2 = firstSepIndexAny(rest);
        if (idx2 > 0) {
          return id.slice(0, idx1 + 1 + idx2);
        }
        // No second separator: treat as single-item group (will render as leaf)
        return id;
      }
      return pfx;
    }
    for (const r of items) {
      const id = r.identifier || "";
      const pfx = computePrefix(id);
      (byPrefix[pfx] = byPrefix[pfx] || []).push(r);
    }
    const prefixes = Object.keys(byPrefix).sort();
    const groups = prefixes.filter((p) => p && byPrefix[p].length > 1);
    const singlePrefixCoversAll =
      groups.length === 1 && byPrefix[groups[0]].length === items.length;

    if (singlePrefixCoversAll) {
      // Flatten: render all items directly
      items.slice(0, 2000).forEach((r) => {
        const leaf = document.createElement("div");
        leaf.className = "tree-node";
        const lline = document.createElement("div");
        lline.className = "tree-line";
        lline.setAttribute("role", "treeitem");
        const llabel = document.createElement("span");
        llabel.className = "tree-label";
        llabel.textContent =
          r.identifier === undefined || r.identifier === null || r.identifier === ""
            ? "default"
            : r.identifier;
        llabel.title = r.identifier || "";
        llabel.addEventListener("click", () => {
          openPreviewPage({
            service: r.service,
            identifier: r.identifier,
            name: r.name || userName,
          });
        });
        lline.appendChild(document.createElement("span"));
        lline.appendChild(llabel);
        children.appendChild(lline);
      });
    } else {
      // Render leaves (no prefix or single-item groups) first
      const leaves = [];
      for (const pfx of prefixes) {
        const arr = byPrefix[pfx];
        if (!pfx || arr.length === 1) {
          leaves.push(...arr);
        }
      }
      leaves.slice(0, 2000).forEach((r) => {
        const leaf = document.createElement("div");
        leaf.className = "tree-node";
        const lline = document.createElement("div");
        lline.className = "tree-line";
        lline.setAttribute("role", "treeitem");
        const llabel = document.createElement("span");
        llabel.className = "tree-label";
        llabel.textContent =
          r.identifier === undefined || r.identifier === null || r.identifier === ""
            ? "default"
            : r.identifier;
        llabel.title = r.identifier || "";
        llabel.addEventListener("click", () => {
          openPreviewPage({
            service: r.service,
            identifier: r.identifier,
            name: r.name || userName,
          });
        });
        lline.appendChild(document.createElement("span"));
        lline.appendChild(llabel);
        children.appendChild(lline);
      });

      // Then render multi-item groups
      for (const pfx of groups) {
        const arr = byPrefix[pfx];
        const pNode = document.createElement("div");
        pNode.className = "tree-node";
        const pline = document.createElement("div");
        pline.className = "tree-line";
        pline.setAttribute("role", "treeitem");
        pline.setAttribute("aria-expanded", "false");

        const ptoggle = document.createElement("button");
        ptoggle.type = "button";
        ptoggle.className = "tree-toggle";
        ptoggle.textContent = "▶";
        ptoggle.addEventListener("click", (e) => {
          e.stopPropagation();
          const open = pchildren.classList.toggle("expanded");
          pline.setAttribute("aria-expanded", String(open));
          ptoggle.textContent = open ? "▼" : "▶";
        });

        const plabel = document.createElement("span");
        plabel.className = "tree-label";
        plabel.textContent = pfx;
        plabel.addEventListener("click", async () => {
          // Apply service + prefix filter
          selectedServices = new Set([svc]);
          currentPrefixFilter = pfx;
          currentIdentifierFilter = null;
          applyServiceFilter();
          showSpinner();
          contentPage.style.display = "none";
          try {
            await fetchPage();
          } finally {
            showSection("content");
            hideSpinner();
          }
        });

        const pcount = document.createElement("span");
        pcount.className = "tree-count";
        pcount.textContent = String(arr.length);

        const pchildren = document.createElement("div");
        pchildren.className = "tree-children";
        pchildren.setAttribute("role", "group");

        arr.slice(0, 2000).forEach((r) => {
          const leaf = document.createElement("div");
          leaf.className = "tree-node";
          const lline = document.createElement("div");
          lline.className = "tree-line";
          lline.setAttribute("role", "treeitem");
          const llabel = document.createElement("span");
          llabel.className = "tree-label";
          llabel.textContent =
            r.identifier === undefined || r.identifier === null || r.identifier === ""
              ? "default"
              : r.identifier;
          llabel.title = r.identifier || "";
          llabel.addEventListener("click", () => {
            openPreviewPage({
              service: r.service,
              identifier: r.identifier,
              name: r.name || userName,
            });
          });
          lline.appendChild(document.createElement("span"));
          lline.appendChild(llabel);
          pchildren.appendChild(lline);
        });

        pline.appendChild(ptoggle);
        pline.appendChild(plabel);
        pline.appendChild(pcount);
        pNode.appendChild(pline);
        pNode.appendChild(pchildren);
        children.appendChild(pNode);
      }
    }

    line.appendChild(toggle);
    line.appendChild(label);
    line.appendChild(count);
    svcNode.appendChild(line);
    svcNode.appendChild(children);
    tree.appendChild(svcNode);
  }

  // Update banner
  const nm = document.getElementById("sidebar-name");
  if (nm) {
    nm.textContent = userName || "(not authenticated)";
  }
}

// Show inline preview on the content page (used when desired; currently using full Preview page)
async function _showInlinePreview(ctx) {
  try {
    const container = document.getElementById("inline-viewer");
    if (!container) {
      return;
    }
    container.style.display = "block";
    await loadPreviewInto(container, ctx);
    try {
      container.scrollIntoView({ behavior: "smooth", block: "start" });
    } catch {}
  } catch (e) {
    console.error("Inline preview failed", e);
    const container = document.getElementById("inline-viewer");
    if (container) {
      container.textContent = "Preview failed: " + ((e && e.message) || e);
    }
  }
}

// Auth UI updater (visibility + labels)
function updateAuthUI() {
  if (isAuthenticated) {
    authButton.style.display = "none";
    nameSwitcherEl.style.display = "flex";
    nameSelectEl.innerHTML = "";
    for (const n of allNames) {
      const opt = document.createElement("option");
      opt.value = n.name;
      opt.textContent = n.name || "(no name)";
      if (n.name === userName) {
        opt.selected = true;
      }
      nameSelectEl.appendChild(opt);
    }
  } else {
    authButton.style.display = "inline-block";
    nameSwitcherEl.style.display = "none";
  }
  authButton.disabled = authStatus === "loading";
  authButton.textContent = authStatus === "loading" ? "Authenticating…" : "Authenticate";
  try {
    updatePublishMenuUI();
  } catch {}
}

// Wire listeners
authButton.addEventListener("click", () => {
  if (authStatus === "loading") {
    return;
  }
  accountLogin();
});
nameSelectEl.addEventListener("change", (e) => {
  switchActiveName(e.target.value);
});
document.getElementById("items-per-page-dropdown").addEventListener("change", async function () {
  showSpinner();
  contentPage.style.display = "none";
  try {
    itemsPerPage = parseInt(this.value, 10);
    try {
      localStorage.setItem(LS_ITEMS_PER_PAGE_KEY, String(itemsPerPage));
    } catch {}
    currentPage = 1;
    setPageHash(currentPage);
    await fetchPage();
  } finally {
    showSection("content");
    hideSpinner();
  }
});
// === Auto-auth on load (runs once) ===
(function autoAuthOnce() {
  // Ensure DOM is ready before trying to auth
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", autoAuthOnce, { once: true });
    return;
  }
  // Guard: don't double-trigger
  if (!isAuthenticated && authStatus !== "loading") {
    accountLogin().catch((err) => console.error("Auto-auth failed:", err));
  }
})();
initPaginationPrefs();
updateAuthUI();
updateSidebarBanner();
updateSearchButtonUI();
initHideDeletedUI();
initPublishMenuUI();
updatePublishMenuUI();

function initHideDeletedUI() {
  const btn = document.getElementById("toggle-deleted");
  if (!btn) {
    return;
  }

  function updateToggleUI() {
    btn.setAttribute("aria-pressed", String(hideDeleted));
    const on = hideDeleted;
    btn.setAttribute("title", on ? "Hiding deleted content" : "Showing deleted content");
    btn.setAttribute("aria-label", on ? "Hide deleted content: ON" : "Hide deleted content: OFF");
  }

  // Set initial state each time
  updateToggleUI();

  // Bind once
  if (btn.dataset.bound === "1") {
    return;
  }
  btn.dataset.bound = "1";

  btn.addEventListener("click", async () => {
    hideDeleted = !hideDeleted;
    try {
      localStorage.setItem("hideDeleted", String(hideDeleted));
    } catch {}
    updateToggleUI();
    showSpinner();
    contentPage.style.display = "none";
    try {
      recomputeServiceCounts();
      buildServiceChips();
      buildSidebarTree();
      applyServiceFilter();
      await fetchPage();
    } finally {
      contentPage.style.display = "block";
      hideSpinner();
    }
  });
}

// ===== Publish menu (auth-gated) =====
function updatePublishMenuUI() {
  const wrap = document.getElementById("publish-menu");
  const btn = document.getElementById("publish-button");
  if (!wrap || !btn) {
    return;
  }
  wrap.style.display = isAuthenticated ? "inline-block" : "none";
  btn.setAttribute("aria-expanded", "false");
  wrap.classList.remove("open");
}

function closePublishDropdown() {
  const wrap = document.getElementById("publish-menu");
  const btn = document.getElementById("publish-button");
  const dd = document.getElementById("publish-dropdown");
  if (wrap && btn && dd) {
    wrap.classList.remove("open");
    btn.setAttribute("aria-expanded", "false");
    dd.setAttribute("aria-hidden", "true");
  }
}

function togglePublishDropdown() {
  const wrap = document.getElementById("publish-menu");
  const btn = document.getElementById("publish-button");
  const dd = document.getElementById("publish-dropdown");
  if (!wrap || !btn || !dd) {
    return;
  }
  const open = !wrap.classList.contains("open");
  if (open) {
    wrap.classList.add("open");
    btn.setAttribute("aria-expanded", "true");
    dd.setAttribute("aria-hidden", "false");
  } else {
    closePublishDropdown();
  }
}

function initPublishMenuUI() {
  const wrap = document.getElementById("publish-menu");
  const btn = document.getElementById("publish-button");
  const itemFile = document.getElementById("publish-add-file");
  const itemFolder = document.getElementById("publish-add-folder");
  const itemText = document.getElementById("publish-new-text");
  if (!wrap || !btn || !itemFile || !itemFolder || !itemText) {
    return;
  }
  if (wrap.dataset.bound === "1") {
    return;
  }
  wrap.dataset.bound = "1";
  btn.addEventListener("click", (e) => {
    e.stopPropagation();
    if (!isAuthenticated) {
      return;
    }
    togglePublishDropdown();
  });
  document.addEventListener("click", (e) => {
    const t = e.target instanceof Element ? e.target : null;
    if (t && t.closest && t.closest("#publish-menu")) {
      return;
    }
    closePublishDropdown();
  });
  itemFile.addEventListener("click", async () => {
    closePublishDropdown();
    await handlePublishAddFile();
  });
  itemFolder.addEventListener("click", async () => {
    closePublishDropdown();
    await handlePublishAddFolder();
  });
  itemText.addEventListener("click", async () => {
    closePublishDropdown();
    await openComposePage({});
  });
}

// ===== QDN Preview helpers =====

async function openPreviewPage(ctx) {
  showSection("preview");
  currentPreviewCtx = ctx;
  const titleEl = document.getElementById("preview-title");
  if (titleEl) {
    const ident = ctx.identifier || "default";
    titleEl.textContent = `${ctx.service} — ${ident} — ${ctx.name || ""}`;
  }

  // Inject a simple filepath control for multi-file services (WEBSITE/APP/etc.)
  (function () {
    const host = document.getElementById("preview-actions");
    if (!host) {
      return;
    }
    // Remove any prior controls to avoid duplicates
    const old = host.querySelector(".preview-path-controls");
    if (old) {
      try {
        host.removeChild(old);
      } catch {}
    }
    if (!isMultiFileService(ctx.service)) {
      return;
    }
    const wrap = document.createElement("div");
    wrap.className = "preview-path-controls";
    wrap.style.display = "inline-flex";
    wrap.style.gap = "6px";
    wrap.style.marginLeft = "12px";
    const label = document.createElement("label");
    label.textContent = "Path:";
    label.style.alignSelf = "center";
    label.setAttribute("for", "preview-filepath-input");
    const input = document.createElement("input");
    input.type = "text";
    input.id = "preview-filepath-input";
    input.placeholder = "index.html";
    input.style.minWidth = "220px";
    input.value = (ctx && ctx.filepath) || "";
    const go = document.createElement("button");
    go.type = "button";
    go.textContent = "Open";
    go.addEventListener("click", async () => {
      const path = input.value.trim();
      currentPreviewCtx = { ...currentPreviewCtx, filepath: path };
      const container = document.getElementById("preview-container");
      if (container) {
        container.innerHTML = "Loading preview…";
        await loadPreviewInto(container, currentPreviewCtx);
      }
    });
    input.addEventListener("keydown", async (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        go.click();
      }
    });
    wrap.appendChild(label);
    wrap.appendChild(input);
    wrap.appendChild(go);
    host.appendChild(wrap);
  })();

  // Preview header actions wiring (bind once to avoid duplicates across navigations)
  (function () {
    const previewEditBtn = document.getElementById("preview-edit");
    const previewReplaceBtn = document.getElementById("preview-replace");
    const previewDeleteBtn = document.getElementById("preview-delete");

    function hasCtx() {
      return !!(typeof currentPreviewCtx !== "undefined" && currentPreviewCtx);
    }
    function identOrDefault(x) {
      return x && x.identifier ? x.identifier : "default";
    }
    function refresh() {
      if (typeof updatePreviewActionsState === "function") {
        updatePreviewActionsState();
      }
    }

    // Bind each button at most once; handlers read currentPreviewCtx dynamically.
    if (previewEditBtn && previewEditBtn.dataset.bound !== "1") {
      previewEditBtn.dataset.bound = "1";
      previewEditBtn.addEventListener("click", async () => {
        if (!hasCtx()) {
          return;
        }
        await editContent(currentPreviewCtx.service, identOrDefault(currentPreviewCtx));
        refresh();
      });
    }
    if (previewReplaceBtn && previewReplaceBtn.dataset.bound !== "1") {
      previewReplaceBtn.dataset.bound = "1";
      previewReplaceBtn.addEventListener("click", async () => {
        if (!hasCtx()) {
          return;
        }
        await replaceContent(currentPreviewCtx.service, identOrDefault(currentPreviewCtx));
        refresh();
      });
    }
    if (previewDeleteBtn && previewDeleteBtn.dataset.bound !== "1") {
      previewDeleteBtn.dataset.bound = "1";
      previewDeleteBtn.addEventListener("click", async () => {
        if (!hasCtx()) {
          return;
        }
        await deleteContent(currentPreviewCtx.service, identOrDefault(currentPreviewCtx));
        refresh();
      });
    }
  })();
  const container = document.getElementById("preview-container");
  if (container) {
    // If a media element is already playing in the preview container, promote it
    try {
      const av = container.querySelector("video, audio");
      const shouldPromote =
        av && (av.paused === false || ((av.currentTime || 0) > 0 && av.ended === false));
      if (shouldPromote) {
        console.debug("[Q-Edit] promoting media before new preview", {
          service: av.getAttribute("data-service"),
          identifier: av.getAttribute("data-identifier"),
          name: av.getAttribute("data-name"),
        });
        promoteMedia(av, {
          service: av.getAttribute("data-service") || "",
          identifier: av.getAttribute("data-identifier") || "default",
          name: av.getAttribute("data-name") || userName,
        });
      }
    } catch {}
    container.innerHTML = "Loading preview…";
    await loadPreviewInto(container, ctx);
  }
  updatePreviewActionsState();
}

function buildQdnParams(base) {
  const p = { ...base };
  if (!p.identifier || p.identifier === "" || p.identifier === "default") {
    delete p.identifier;
  }
  return p;
}
function b64ToBytes(b64) {
  const bin = atob(b64);
  const len = bin.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = bin.charCodeAt(i);
  }
  return bytes;
}
function detectMimeFromBytes(bytes) {
  const h = bytes;
  const h0 = h[0],
    h1 = h[1],
    h2 = h[2],
    h3 = h[3],
    h4 = h[4],
    h5 = h[5],
    h6 = h[6],
    h7 = h[7],
    h8 = h[8],
    h9 = h[9],
    h10 = h[10],
    h11 = h[11];
  // Images
  if (h0 === 0xff && h1 === 0xd8 && h2 === 0xff) {
    return "image/jpeg";
  }
  if (h0 === 0x89 && h1 === 0x50 && h2 === 0x4e && h3 === 0x47) {
    return "image/png";
  }
  if (h0 === 0x47 && h1 === 0x49 && h2 === 0x46 && h3 === 0x38) {
    return "image/gif";
  }
  if (
    h0 === 0x52 &&
    h1 === 0x49 &&
    h2 === 0x46 &&
    h3 === 0x46 &&
    h8 === 0x57 &&
    h9 === 0x45 &&
    h10 === 0x42 &&
    h11 === 0x50
  ) {
    return "image/webp";
  }
  // PDF
  if (h0 === 0x25 && h1 === 0x50 && h2 === 0x44 && h3 === 0x46) {
    return "application/pdf";
  }
  // ZIP/OOXML/EPUB containers (PK\x03\x04)
  if (h0 === 0x50 && h1 === 0x4b && h2 === 0x03 && h3 === 0x04) {
    return "application/zip";
  }
  // Audio
  if (h0 === 0x49 && h1 === 0x44 && h2 === 0x33) {
    return "audio/mpeg";
  }
  if (h0 === 0xff && (h1 & 0xe0) === 0xe0) {
    return "audio/mpeg";
  }
  if (h0 === 0x4f && h1 === 0x67 && h2 === 0x67 && h3 === 0x53) {
    return "audio/ogg";
  }
  if (
    h0 === 0x52 &&
    h1 === 0x49 &&
    h2 === 0x46 &&
    h3 === 0x46 &&
    h8 === 0x57 &&
    h9 === 0x41 &&
    h10 === 0x56 &&
    h11 === 0x45
  ) {
    return "audio/wav";
  }
  // Video
  if (h0 === 0x1a && h1 === 0x45 && h2 === 0xdf && h3 === 0xa3) {
    return "video/webm";
  }
  if (
    (h4 === 0x66 && h5 === 0x74 && h6 === 0x79 && h7 === 0x70) ||
    (h0 === 0x00 &&
      h1 === 0x00 &&
      h2 === 0x00 &&
      (h3 === 0x18 || h3 === 0x20) &&
      h4 === 0x66 &&
      h5 === 0x74 &&
      h6 === 0x79 &&
      h7 === 0x70)
  ) {
    return "video/mp4";
  }
  if (h0 === 0x4f && h1 === 0x67 && h2 === 0x67 && h3 === 0x53) {
    return "video/ogg";
  }
  return null;
}
function guessMimeFromName(name, fallback) {
  const lower = (name || "").toLowerCase();
  if (lower.endsWith(".jpg") || lower.endsWith(".jpeg")) {
    return "image/jpeg";
  }
  if (lower.endsWith(".png")) {
    return "image/png";
  }
  if (lower.endsWith(".gif")) {
    return "image/gif";
  }
  if (lower.endsWith(".webp")) {
    return "image/webp";
  }
  if (lower.endsWith(".mp4") || lower.endsWith(".m4v")) {
    return "video/mp4";
  }
  if (lower.endsWith(".webm")) {
    return "video/webm";
  }
  if (lower.endsWith(".ogg") || lower.endsWith(".ogv")) {
    return "video/ogg";
  }
  if (lower.endsWith(".mp3")) {
    return "audio/mpeg";
  }
  if (lower.endsWith(".wav")) {
    return "audio/wav";
  }
  if (lower.endsWith(".m4a") || lower.endsWith(".aac")) {
    return "audio/aac";
  }
  if (lower.endsWith(".pdf")) {
    return "application/pdf";
  }
  if (
    lower.endsWith(".txt") ||
    lower.endsWith(".log") ||
    lower.endsWith(".csv") ||
    lower.endsWith(".md")
  ) {
    return lower.endsWith(".md") ? "text/markdown" : "text/plain";
  }
  if (lower.endsWith(".json")) {
    return "application/json";
  }
  if (lower.endsWith(".zip")) {
    return "application/zip";
  }
  if (lower.endsWith(".epub")) {
    return "application/epub+zip";
  }
  if (lower.endsWith(".docx")) {
    return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
  }
  if (lower.endsWith(".xlsx")) {
    return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
  }
  if (lower.endsWith(".pptx")) {
    return "application/vnd.openxmlformats-officedocument.presentationml.presentation";
  }
  if (lower.endsWith(".doc")) {
    return "application/msword";
  }
  if (lower.endsWith(".xls")) {
    return "application/vnd.ms-excel";
  }
  if (lower.endsWith(".ppt")) {
    return "application/vnd.ms-powerpoint";
  }
  if (lower.endsWith(".odt")) {
    return "application/vnd.oasis.opendocument.text";
  }
  if (lower.endsWith(".ods")) {
    return "application/vnd.oasis.opendocument.spreadsheet";
  }
  return fallback || "application/octet-stream";
}

// Heuristic: decide if bytes look like decodable UTF-8 text
function isLikelyText(bytes) {
  if (!bytes || bytes.length === 0) {
    return false;
  }
  let nonAscii = 0;
  let zeroes = 0;
  const len = Math.min(bytes.length, 4096);
  for (let i = 0; i < len; i++) {
    const b = bytes[i];
    if (b === 0x00) {
      zeroes++;
    }
    if (b < 0x09 || (b > 0x0d && b < 0x20)) {
      nonAscii++;
    }
  }
  if (zeroes > 0) {
    return false;
  } // binary
  if (nonAscii / len > 0.3) {
    return false;
  }
  try {
    const dec = new TextDecoder("utf-8", { fatal: false }).decode(bytes.slice(0, len));
    // If decoding yields lots of replacement chars, not text
    if ((dec.match(/\uFFFD/g) || []).length > 3) {
      return false;
    }
  } catch {
    return false;
  }
  return true;
}

function isMultiFileService(service) {
  const s = (service || "").toUpperCase();
  return (
    s === "WEBSITE" ||
    s === "APP" ||
    s === "FILES" ||
    s === "GIT_REPOSITORY" ||
    s === "GIF_REPOSITORY" ||
    s === "GAME" ||
    s === "DATABASE" ||
    s === "SNAPSHOT"
  );
}

function buildArbitraryUrl({ service, name, identifier, filepath }) {
  // Always include identifier; default to 'default' when empty
  const id = identifier && identifier !== "" ? identifier : "default";
  const base = `/arbitrary/${service}/${encodeURIComponent(name)}/${encodeURIComponent(id)}`;
  if (filepath && filepath !== "/") {
    return `${base}/${filepath.replace(/^\/+/, "")}`;
  }
  // No implicit index.html — let QDN route to index for APP/WEBSITE
  return base;
}

function buildQortalEmbedUrl({ service, name, identifier, filepath }) {
  const svc = String(service || "").toUpperCase();
  let url = `qortal://${svc}/${encodeURIComponent(name || "")}`;
  // Omit identifier when default/blank
  if (identifier && identifier !== "default") {
    url += `/${encodeURIComponent(identifier)}`;
  }
  if (filepath && filepath !== "/") {
    url += `/${String(filepath).replace(/^\/+/, "")}`;
  }
  return url;
}
function openImageOverlayFromDataUrl(dataUrl) {
  let overlay = document.getElementById("image-viewer-overlay");
  if (!overlay) {
    overlay = document.createElement("div");
    overlay.id = "image-viewer-overlay";
    const img = document.createElement("img");
    overlay.appendChild(img);
    const hint = document.createElement("div");
    hint.className = "close-hint";
    hint.textContent = "Click anywhere or press Esc to close";
    overlay.appendChild(hint);
    overlay.addEventListener("click", () => {
      overlay.style.display = "none";
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        overlay.style.display = "none";
      }
    });
    document.body.appendChild(overlay);
  }
  overlay.querySelector("img").src = dataUrl;
  overlay.style.display = "flex";
}

// ===== Auth & Names =====
async function accountLogin() {
  try {
    showSpinner();
    authStatus = "loading";
    updateAuthUI();
    updateSidebarBanner();
    initHideDeletedUI();
    const account = await qortalRequest({ action: "GET_USER_ACCOUNT" });
    contentPage.style.display = "none";
    document.getElementById("account-details").innerHTML = "Loading...";
    userAddress = account.address ? account.address : "Address unavailable";
    _userPublicKey = account.publicKey ? account.publicKey : "Public key unavailable";

    let names = [];
    if (userAddress && userAddress !== "Address unavailable") {
      try {
        _namesStatus = "loading";
        const res = await qortalRequest({ action: "GET_ACCOUNT_NAMES", address: userAddress });
        names = Array.isArray(res) ? res : [];
        allNames = names.map((n) => ({
          name: typeof n?.name === "string" ? n.name : "",
          owner: typeof n?.owner === "string" ? n.owner : userAddress,
        }));
        let primary = "";
        try {
          const maybePrimary = await qortalRequest({
            action: "GET_PRIMARY_NAME",
            address: userAddress,
          });
          primary = typeof maybePrimary === "string" ? maybePrimary : "";
        } catch {}
        if (primary) {
          userName = primary;
        } else if (allNames.length > 0 && allNames[0].name) {
          userName = allNames[0].name;
        } else {
          userName = "Name unavailable";
        }
        _namesStatus = "succeeded";
      } catch {
        allNames = [{ name: "", owner: userAddress }];
        userName = "Name unavailable";
        _namesStatus = "failed";
      }
    } else {
      allNames = [{ name: "", owner: userAddress }];
      userName = "Name unavailable";
      _namesStatus = "failed";
    }

    isAuthenticated = true;
    document.getElementById("info-details").innerHTML = infoDetails;
    document.getElementById("account-details").innerHTML = `${userAddress}<br>${userName}`;
    updateAuthUI();
    updateSidebarBanner();
    initHideDeletedUI();

    currentServiceFilter = "ALL";
    await loadAllResults();
    buildSidebarTree();
    await fetchPage();

    showSection("content");
    authStatus = "succeeded";
    updateAuthUI();
    updateSidebarBanner();
    initHideDeletedUI();
    hideSpinner();
  } catch (error) {
    console.error("Error fetching account details:", error);
    authStatus = "failed";
    updateAuthUI();
    updateSidebarBanner();
    initHideDeletedUI();
    document.getElementById("account-details").innerHTML =
      `Error fetching account details: ${error}`;
    hideSpinner();
  }
}

async function switchActiveName(newName) {
  if (!newName || newName === userName) {
    return;
  }
  showSpinner();
  contentPage.style.display = "none";
  userName = newName;
  currentServiceFilter = "ALL";
  currentPage = 1;
  document.getElementById("account-details").innerHTML = `${userAddress}<br>${userName}`;
  updateAuthUI();
  updateSidebarBanner();
  initHideDeletedUI();
  try {
    await loadAllResults();
    buildSidebarTree();
    await fetchPage();
  } finally {
    showSection("content");
    hideSpinner();
  }
}

function tinyThresholdFor(service) {
  // Bigger threshold for image-like services to account for overhead
  const s = (service || "").toUpperCase();
  if (s === "IMAGE" || s === "QCHAT_IMAGE" || s.includes("THUMBNAIL")) {
    return 8192;
  }
  return typeof TINY_SIZE_THRESHOLD !== "undefined" ? TINY_SIZE_THRESHOLD : 256;
}
async function markDeletedEntries(results) {
  // Initialize flag
  for (const r of results) {
    r.__isDeleted = false;
  }
  // Legacy 0-byte deletions
  for (const r of results) {
    if (isExcludedFromDeletionCheck(r.service)) {
      continue;
    }
    const sz = Number(r.size || 0);
    if (sz === 0) {
      r.__isDeleted = true;
    }
  }
  // Tiny-file check (1..4 bytes), verify bytes are only whitespace/BOM
  const tiny = results.filter((r) => {
    if (isExcludedFromDeletionCheck(r.service)) {
      return false;
    }
    if (r.__isDeleted) {
      return false;
    }
    const sizeVal = Number(r.size);
    const unknown = !Number.isFinite(sizeVal);
    const thr = tinyThresholdFor(r.service);
    return unknown || sizeVal <= thr;
  });
  for (const r of tiny) {
    try {
      const name = r.name || userName;
      const service = r.service;
      const identifier = r.identifier === undefined ? "default" : r.identifier;
      let b64 = await qortalRequest(
        buildQdnParams({
          action: "FETCH_QDN_RESOURCE",
          name,
          service,
          identifier,
          encoding: "base64",
          rebuild: false,
        })
      );
      if (isPrivateService(service)) {
        b64 = await qortalRequest({ action: "DECRYPT_DATA", encryptedData: b64 });
      }
      const bytes = b64ToBytes(b64);
      // Strip UTF-8 BOM
      let i = 0;
      if (bytes.length >= 3 && bytes[0] === 0xef && bytes[1] === 0xbb && bytes[2] === 0xbf) {
        i = 3;
      }
      let hasNonWhitespace = false;
      for (; i < bytes.length; i++) {
        // Handle UTF-8 NBSP (0xC2 0xA0) as whitespace pair
        if (bytes[i] === 0xc2 && i + 1 < bytes.length && bytes[i + 1] === 0xa0) {
          i++;
          continue;
        }
        const b = bytes[i];
        if (b === 0x00 || b === 0x09 || b === 0x0a || b === 0x0d || b === 0x20) {
          continue;
        } else {
          hasNonWhitespace = true;
          break;
        }
      }
      if (!hasNonWhitespace) {
        r.__isDeleted = true;
      }
    } catch (e) {
      // If we cannot fetch/decrypt, be conservative: do not mark deleted
      console.warn("Tiny-file check failed for", r.service, r.identifier, e);
    }
  }
  // Enforce service exclusions
  for (const r of results) {
    if (isExcludedFromDeletionCheck(r.service)) {
      r.__isDeleted = false;
    }
  }
}

async function loadAllResults() {
  // Fetch all resources for the active name, including metadata, unfiltered
  const resp = await fetch(
    `/arbitrary/resources/search?name=${encodeURIComponent(userName)}&includemetadata=true&exactmatchnames=true&mode=ALL`
  );
  if (!resp.ok) {
    throw new Error("Failed loading resources");
  }
  masterResults = await resp.json();
  // Sort newest first (created/updated)
  masterResults.sort((a, b) => (b.updated || b.created || 0) - (a.updated || a.created || 0));
  await markDeletedEntries(masterResults);
  // Build counts (respect hideDeleted)
  recomputeServiceCounts();
  // Reset selection (none selected => show all)
  selectedServices = new Set();
  clearTreeFilters();
  applyServiceFilter();
  buildServiceChips();
}

function buildServiceChips() {
  const container = document.getElementById("service-chips-container");
  if (!container) {
    return;
  }
  container.innerHTML = "";
  const services = Object.keys(serviceCounts).sort();
  services.forEach((svc) => {
    const chip = document.createElement("div");
    chip.className = "chip" + (selectedServices.has(svc) ? " selected" : "");
    chip.setAttribute("data-service", svc);
    const label = document.createElement("span");
    label.className = "label";
    label.textContent = svc;
    const count = document.createElement("span");
    count.className = "count";
    count.textContent = serviceCounts[svc];
    chip.appendChild(label);
    chip.appendChild(count);
    chip.addEventListener("click", async () => {
      // Toggle selection
      if (selectedServices.has(svc)) {
        selectedServices.delete(svc);
      } else {
        selectedServices.add(svc);
      }
      // Visual state
      chip.classList.toggle("selected");
      // Apply filter + re-render
      showSpinner();
      contentPage.style.display = "none";
      try {
        applyServiceFilter();
        currentPage = 1;
        await fetchPage();
      } finally {
        contentPage.style.display = "block";
        hideSpinner();
      }
    });
    container.appendChild(chip);
  });
}

function applyServiceFilter() {
  const base = getBaselineResults();
  // Service filter
  let tmp =
    selectedServices.size === 0
      ? base.slice()
      : base.filter((r) => selectedServices.has(r.service));
  // Identifier prefix filter (if set)
  if (currentPrefixFilter) {
    const pfx = currentPrefixFilter;
    tmp = tmp.filter((r) => {
      const id = r.identifier || "";
      return id.startsWith(pfx + "_") || id.startsWith(pfx + "-");
    });
  }
  // Exact identifier filter (if set)
  if (currentIdentifierFilter) {
    tmp = tmp.filter((r) => (r.identifier || "") === currentIdentifierFilter);
  }
  filteredResults = tmp;
  totalResults = filteredResults.length;
  totalSize = filteredResults.reduce((acc, r) => acc + (r.size || 0), 0);
}

// ===== Data fetchers =====
async function fetchPage() {
  try {
    if (!userName || userName === "Name unavailable") {
      return;
    }
    // Client-side pagination using filteredResults
    const contentDetails = document.getElementById("content-details");
    contentDetails.innerHTML = "<p>Loading...</p>";
    const start = (currentPage - 1) * itemsPerPage;
    const pageItems = filteredResults.slice(start, start + itemsPerPage);
    buildContentTable(pageItems);
  } catch (error) {
    console.error("Error fetching page:", error);
    document.getElementById("content-details").innerHTML = `<p>Error: ${error.message}</p>`;
  }
}

// ===== Table & pagination =====
function buildIdentifierCellHTML(result, identifier) {
  const svc = result.service;
  const key = selKey(svc, identifier);
  const checkbox = `<input type="checkbox" class="bulk-select" data-service="${svc}" data-identifier="${identifier}" ${selectedForDeletion.has(key) ? "checked" : ""} />`;
  const deleteIcon = `<img src="red-x.svg" class="clickable-delete action-icon" title="Delete" alt="Delete" data-service="${svc}" data-identifier="${identifier}"/>`;
  const editIcon = `<img src="file-up.png" class="clickable-edit action-icon" title="Edit" alt="Edit" data-service="${svc}" data-identifier="${identifier}"/>`;
  const embedIcon = isEmbedService(svc)
    ? `<svg class="action-icon copy-embed-icon" data-name="${userName}" data-service="${svc}" data-identifier="${identifier}" width="15" height="15" viewBox="0 0 24 24" style="margin-left:6px;">
      <circle cx="12" cy="12" r="11" fill="#ffffff"></circle>
      <path fill="#0f1a2e" d="M10.59 13.41a1 1 0 0 0 1.41 1.41l4.95-4.95a3 3 0 1 0-4.24-4.24l-2.12 2.12a1 1 0 1 0 1.41 1.41l2.12-2.12a1 1 0 1 1 1.41 1.41l-4.95 4.95zM13.41 10.59a1 1 0 0 0-1.41-1.41L7.05 14.13a3 3 0 1 0 4.24 4.24l2.12-2.12a1 1 0 1 0-1.41-1.41l-2.12 2.12a1 1 0 1 1-1.41-1.41l4.95-4.95z"/>
    </svg>`
    : "";
  return `${checkbox}${deleteIcon}${editIcon}<span class="identifier-text" data-service="${svc}" data-identifier="${identifier}" data-name="${userName}" title="Open preview">${identifier}</span>${embedIcon}`;
}

function setBulkMode(on) {
  bulkDeleteMode = !!on;
  document.body.classList.toggle("bulk-mode", bulkDeleteMode);
  updateBulkControlsUI();
}

// ===== Bulk delete UI wiring =====
function updateBulkControlsUI() {
  const btn = document.getElementById("bulk-delete-toggle");
  if (btn) {
    const count = getSelectedCount();
    if (!bulkDeleteMode) {
      btn.textContent = "Delete Files";
    } else {
      btn.textContent = count > 0 ? `Delete ${count} Files` : "Deleting Files";
    }
  }
  const selAll = document.getElementById("select-all-checkbox");
  if (selAll) {
    // Determine if all visible are checked
    const boxes = Array.from(document.querySelectorAll(".bulk-select"));
    const allChecked = boxes.length > 0 && boxes.every((cb) => cb.checked);
    selAll.checked = allChecked;
    selAll.indeterminate = boxes.some((cb) => cb.checked) && !allChecked;
  }
}

async function bulkDeleteSelected() {
  try {
    if (!userName || userName === "Name unavailable") {
      return;
    }
    const entries = Array.from(selectedForDeletion).map((k) => {
      const [svc, ident] = k.split("||");
      return { service: svc, identifier: ident === "default" ? undefined : ident };
    });
    if (entries.length === 0) {
      return;
    }
    showPublishModal("Deleting selected files…");
    // Build a tiny non-empty file to mark as deleted
    const emptyFile = new Blob(["\n"], { type: "application/octet-stream" });
    const resourceArray = entries.map((e) => ({
      name: userName,
      service: e.service,
      identifier: e.identifier || "default",
      file: emptyFile,
    }));

    const response = await qortalRequest({
      action: "PUBLISH_MULTIPLE_QDN_RESOURCES",
      resources: resourceArray,
    });
    console.log("Bulk delete response:", response);
    // Remove deleted from masterResults
    const keySet = new Set(resourceArray.map((r) => selKey(r.service, r.identifier)));
    masterResults = masterResults.filter((r) => !keySet.has(selKey(r.service, r.identifier)));
    // Recompute derived collections
    recomputeServiceCounts();
    buildSidebarTree();
    applyServiceFilter();
    selectedForDeletion.clear();
    setBulkMode(false);
    await fetchPage();
  } catch (err) {
    alert("Bulk delete failed: " + (err?.message || err));
  } finally {
    closePublishModal();
  }
}
function buildContentTable(results) {
  const contentDetailsDiv = document.getElementById("content-details");
  const contentSummaryDiv = document.getElementById("content-summary");
  if (results.length === 0) {
    contentDetailsDiv.innerHTML = "<p>No results found.</p>";
    contentSummaryDiv.innerHTML = "";
    document.getElementById("pagination-top").innerHTML = "";
    document.getElementById("pagination-bottom").innerHTML = "";
    return;
  }
  results.sort((a, b) => (b.updated || b.created) - (a.updated || a.created));
  let tableHtml = "<table>";
  tableHtml += `<tr>
      <th>Service</th>
      <th>Identifier ${bulkDeleteMode ? '<input type="checkbox" id="select-all-checkbox" title="Select all on this page"><label class="select-all-label" for="select-all-checkbox">Select All</label>' : ""}</th>
      <th>Metadata</th>
      <th>Preview</th>
      <th>Size</th>
      <th>Created / Updated</th>
    </tr>`;
  metadataArray = [];
  for (const result of results) {
    const identifier = result.identifier === undefined ? "default" : result.identifier;
    let createdString = new Date(result.created).toLocaleString();
    if (isNaN(new Date(result.created))) {
      createdString = "Unknown";
    }
    let updatedString = new Date(result.updated).toLocaleString();
    if (isNaN(new Date(result.updated))) {
      updatedString = "Never";
    }
    const sizeString = formatSize(result.size || 0);
    let metadataKeys = "";
    let metadataIndex = -1;
    if (result.metadata) {
      metadataIndex = metadataArray.length;
      metadataArray.push(result.metadata);
      metadataKeys = Object.keys(result.metadata).join(", ");
    }

    tableHtml += `<tr>
      <td>${result.service}</td>
      <td>${buildIdentifierCellHTML(result, identifier)}</td>
      <td><span class="clickable-metadata" data-metadata-index='${metadataIndex}'>${metadataKeys}</span></td>
      <td>${generatePreviewHTML(result, userName, identifier)}</td>
      <td>${sizeString}</td>
      <td>${createdString}<br>${updatedString}</td>
    </tr>`;
  }
  tableHtml += `</table>`;
  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const endItem = Math.min(startItem + itemsPerPage - 1, totalResults);
  const selectedCount = getSelectedCount();
  contentSummaryDiv.innerHTML = `<div class="summary-bar"><span>${startItem}-${endItem} of ${totalResults} results</span><span style=\"margin-left:12px;\">Total Size: ${formatSize(totalSize)}</span><span style=\"margin-left:18px;\"><button id=\"bulk-delete-toggle\">${!bulkDeleteMode ? "Delete Files" : selectedCount > 0 ? `Delete ${selectedCount} Files` : "Deleting Files"}</button>${selectedCount > 0 ? '<button id=\"clear-selected-btn\" style=\"margin-left:8px;\">Clear Selected</button>' : ""}</span></div>`;

  const paginationHTML = buildPaginationControls();
  renderIntoCompat(document.getElementById("pagination-top"), paginationHTML, "replace");
  renderIntoCompat(document.getElementById("pagination-bottom"), paginationHTML, "replace");
  /* promote media before rerender */
  const playing = contentDetailsDiv.querySelector("video, audio");
  if (playing && !playing.paused) {
    promoteMedia(playing, {
      service: playing.getAttribute("data-service") || "",
      identifier: playing.getAttribute("data-identifier") || "default",
      name: playing.getAttribute("data-name") || userName,
    });
  }
  contentDetailsDiv.innerHTML = tableHtml;

  // Wire bulk selection checkboxes
  if (bulkDeleteMode) {
    document.querySelectorAll(".bulk-select").forEach((cb) => {
      cb.addEventListener("change", (_e) => {
        const svc = cb.getAttribute("data-service");
        const ident = cb.getAttribute("data-identifier") || "default";
        const key = selKey(svc, ident);
        if (cb.checked) {
          selectedForDeletion.add(key);
        } else {
          selectedForDeletion.delete(key);
        }
        updateBulkControlsUI();
      });
    });
    const selAll = document.getElementById("select-all-checkbox");
    if (selAll) {
      selAll.addEventListener("change", () => {
        const boxes = Array.from(document.querySelectorAll(".bulk-select"));
        boxes.forEach((cb) => {
          cb.checked = selAll.checked;
          const svc = cb.getAttribute("data-service");
          const ident = cb.getAttribute("data-identifier") || "default";
          const key = selKey(svc, ident);
          if (cb.checked) {
            selectedForDeletion.add(key);
          } else {
            selectedForDeletion.delete(key);
          }
        });
        updateBulkControlsUI();
      });
    }
  }

  // Wire summary bar buttons
  const bulkBtn = document.getElementById("bulk-delete-toggle");
  if (bulkBtn) {
    bulkBtn.addEventListener("click", async () => {
      if (!bulkDeleteMode) {
        setBulkMode(true);
        await fetchPage();
        return;
      }
      const count = getSelectedCount();
      if (count === 0) {
        setBulkMode(false);
        await fetchPage();
      } else {
        await bulkDeleteSelected();
      }
    });
  }
  const clearBtn = document.getElementById("clear-selected-btn");
  if (clearBtn) {
    clearBtn.addEventListener("click", () => {
      clearSelected();
      fetchPage();
    });
  }

  // Initialize bulk UI state
  updateBulkControlsUI();

  initPreviews();
  document.querySelectorAll(".copy-embed-icon").forEach((el) => {
    el.addEventListener("click", async function () {
      const nm = this.getAttribute("data-name") || "";
      const svc = this.getAttribute("data-service") || "";
      const ident = this.getAttribute("data-identifier") || "default";
      const url = `qortal://use-embed/IMAGE?name=${encodeURIComponent(nm)}&identifier=${encodeURIComponent(ident)}&service=${encodeURIComponent(svc)}`;
      try {
        if (navigator.clipboard && navigator.clipboard.writeText) {
          await navigator.clipboard.writeText(url);
        } else {
          const ta = document.createElement("textarea");
          ta.value = url;
          document.body.appendChild(ta);
          ta.select();
          document.execCommand("copy");
          document.body.removeChild(ta);
        }

        // Remove prior toast (if any) to avoid stacking
        const prev = this.parentElement.querySelector(".copy-embed-toast");
        if (prev) {
          prev.remove();
        }
        const msg = document.createElement("span");
        msg.className = "copy-embed-toast";
        msg.textContent = "Embed link copied!";
        msg.style.marginLeft = "6px";
        msg.style.fontSize = "12px";
        msg.style.color = "#1f6feb";
        this.parentElement.appendChild(msg);
        setTimeout(() => {
          if (msg && msg.parentElement) {
            msg.parentElement.removeChild(msg);
          }
        }, 1800);
      } catch (e) {
        alert("Could not copy link: " + (e?.message || e));
      }
    });
  });

  document.querySelectorAll(".clickable-delete").forEach((el) => {
    el.addEventListener("click", function () {
      deleteContent(this.getAttribute("data-service"), this.getAttribute("data-identifier"));
    });
  });
  document.querySelectorAll(".clickable-edit").forEach((el) => {
    el.addEventListener("click", function () {
      editContent(this.getAttribute("data-service"), this.getAttribute("data-identifier"));
    });
  });
  document.querySelectorAll(".clickable-metadata").forEach((el) => {
    el.addEventListener("click", function () {
      const idx = parseInt(this.getAttribute("data-metadata-index"), 10);
      if (!isNaN(idx) && idx >= 0) {
        openMetadataDialog(metadataArray[idx]);
      } else {
        alert("No metadata available.");
      }
    });
  });
  addPaginationEventHandlers();

  document.querySelectorAll(".identifier-text").forEach((el) => {
    el.addEventListener("click", () => {
      const svc = el.getAttribute("data-service");
      const ident = el.getAttribute("data-identifier") || "default";
      const nm = el.getAttribute("data-name") || userName;
      openPreviewPage({ service: svc, identifier: ident, name: nm });
    });
  });
}

function buildPaginationControls() {
  if (window.QEditPagination && typeof window.QEditPagination.build === "function") {
    return window.QEditPagination.build({ currentPage, itemsPerPage, totalResults });
  }
  const totalPages = Math.ceil(totalResults / itemsPerPage);
  if (totalPages <= 1) {
    return "";
  }
  let html = '<nav class="pagination-controls" aria-label="Pagination">';
  // First/Prev
  if (currentPage > 1) {
    html += `<span class="pagination-link" data-page="1" aria-label="First">««</span>`;
    html += `<span class="pagination-link" data-page="${currentPage - 1}" aria-label="Previous">«</span>`;
  } else {
    html += `<span class="disabled" aria-disabled="true">««</span><span class="disabled" aria-disabled="true">«</span>`;
  }

  // Windowed pages
  const windowSize = 2;
  const pages = new Set([1, 2, totalPages - 1, totalPages]);
  for (let p = currentPage - windowSize; p <= currentPage + windowSize; p++) {
    if (p >= 1 && p <= totalPages) {
      pages.add(p);
    }
  }
  const sorted = Array.from(pages).sort((a, b) => a - b);
  let last = 0;
  for (const p of sorted) {
    if (p - last > 1) {
      html += `<span class="ellipsis" aria-hidden="true">…</span>`;
    }
    if (p === currentPage) {
      html += `<span class="current-page" aria-current="page">${p}</span>`;
    } else {
      html += `<span class="pagination-link" data-page="${p}">${p}</span>`;
    }
    last = p;
  }

  // Next/Last
  if (currentPage < totalPages) {
    html += `<span class="pagination-link" data-page="${currentPage + 1}" aria-label="Next">»</span>`;
    html += `<span class="pagination-link" data-page="${totalPages}" aria-label="Last">»»</span>`;
  } else {
    html += `<span class="disabled" aria-disabled="true">»</span><span class="disabled" aria-disabled="true">»»</span>`;
  }

  // Jump control
  html += `<span class="jump-to-page">
    <label style="margin-right:4px;">Jump:</label>
    <input type="number" class="jump-input" min="1" max="${totalPages}" value="${currentPage}" aria-label="Jump to page">
    <button type="button" class="jump-btn">Go</button>
  </span>`;

  html += "</nav>";
  return html;
}

function addPaginationEventHandlers() {
  document.querySelectorAll(".pagination-link").forEach((link) => {
    link.addEventListener("click", async function () {
      const newPage = parseInt(this.getAttribute("data-page"), 10);
      if (!isNaN(newPage)) {
        showSpinner();
        contentPage.style.display = "none";
        try {
          currentPage = newPage;
          setPageHash(currentPage);
          await fetchPage();
        } finally {
          showSection("content");
          hideSpinner();
        }
      }
    });
  });
  document.querySelectorAll(".jump-btn").forEach((btn) => {
    btn.addEventListener("click", async function () {
      const container = this.closest(".pagination-controls") || document;
      const inp = container.querySelector(".jump-input");
      if (!inp) {
        return;
      }
      const v = parseInt(inp.value, 10);
      if (!isNaN(v)) {
        const totalPages = Math.ceil(totalResults / itemsPerPage);
        const newPage = Math.min(Math.max(1, v), totalPages);
        showSpinner();
        contentPage.style.display = "none";
        try {
          currentPage = newPage;
          setPageHash(currentPage);
          await fetchPage();
        } finally {
          showSection("content");
          hideSpinner();
        }
      }
    });
  });
  document.querySelectorAll(".jump-input").forEach((inp) => {
    inp.addEventListener("keydown", async function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        const totalPages = Math.ceil(totalResults / itemsPerPage);
        const v = parseInt(this.value, 10);
        if (!isNaN(v)) {
          const newPage = Math.min(Math.max(1, v), totalPages);
          showSpinner();
          contentPage.style.display = "none";
          try {
            currentPage = newPage;
            setPageHash(currentPage);
            await fetchPage();
          } finally {
            showSection("content");
            hideSpinner();
          }
        }
      }
    });
  });
}

function formatSize(size) {
  if (size > 1024 * 1024 * 1024 * 1024) {
    return (size / (1024 * 1024 * 1024 * 1024)).toFixed(2) + " TB";
  }
  if (size > 1024 * 1024 * 1024) {
    return (size / (1024 * 1024 * 1024)).toFixed(2) + " GB";
  }
  if (size > 1024 * 1024) {
    return (size / (1024 * 1024)).toFixed(2) + " MB";
  }
  if (size > 1024) {
    return (size / 1024).toFixed(2) + " KB";
  }
  return (size || 0) + " B";
}

// ===== Preview rendering =====
function generatePreviewHTML(result, userName, identifier) {
  const safeName = (result.name || userName || "").replace(/"/g, "&quot;");
  const safeService = (result.service || "").replace(/"/g, "&quot;");
  const safeIdent = (identifier || "default").replace(/"/g, "&quot;");
  return `<div class="preview-holder" data-name="${safeName}" data-service="${safeService}" data-identifier="${safeIdent}">0% Loaded</div>`;
}

function initPreviews(root) {
  const scope = root && root.querySelectorAll ? root : document;
  const holders = scope.querySelectorAll(".preview-holder");
  holders.forEach((el) => {
    const svc = (el.getAttribute("data-service") || "").toUpperCase();
    const ident = el.getAttribute("data-identifier") || "default";
    const nm = el.getAttribute("data-name") || userName;
    loadPreviewInto(el, { service: svc, identifier: ident, name: nm });
  });
}

function isPrivateService(service) {
  const s = (service || "").toUpperCase();
  return (
    s.endsWith("_PRIVATE") ||
    [
      "QCHAT_ATTACHMENT_PRIVATE",
      "ATTACHMENT_PRIVATE",
      "FILE_PRIVATE",
      "IMAGE_PRIVATE",
      "VIDEO_PRIVATE",
      "AUDIO_PRIVATE",
      "VOICE_PRIVATE",
      "DOCUMENT_PRIVATE",
      "MAIL_PRIVATE",
      "MESSAGE_PRIVATE",
    ].includes(s)
  );
}
function isExcludedFromDeletionCheck(service) {
  const s = (service || "").toUpperCase();
  return s === "CHAIN_DATA" || s === "CHAIN_COMMENT";
}
function isEmbedService(service) {
  const s = (service || "").toUpperCase();
  return s === "IMAGE" || s === "QCHAT_IMAGE" || s.includes("THUMBNAIL");
}
function getBaseServiceKind(service) {
  const s = (service || "").toUpperCase();
  if (s.includes("IMAGE") || s.includes("THUMBNAIL")) {
    return "image";
  }
  if (s.includes("VIDEO")) {
    return "video";
  }
  if (s.includes("AUDIO") || s.includes("VOICE") || s.includes("PODCAST")) {
    return "audio";
  }
  if (
    s.includes("DOCUMENT") ||
    s.includes("BLOG") ||
    s.includes("COMMENT") ||
    s.includes("JSON") ||
    s.includes("CODE")
  ) {
    return "text";
  }
  if (s.includes("FILE") || s.includes("ATTACHMENT")) {
    return "file";
  }
  return "file";
}
async function waitForResourceReady({
  name,
  service,
  identifier,
  initialBuild = true,
  timeoutMs = 60000,
  intervalMs = 800,
  onProgress,
}) {
  const start = Date.now();
  while (true) {
    try {
      const status = await qortalRequest(
        buildQdnParams({ action: "GET_QDN_RESOURCE_STATUS", name, service, identifier })
      );
      let percent = 0;
      if (typeof status?.percentLoaded === "number") {
        percent = status.percentLoaded;
      } else if (status?.localChunkCount && status?.totalChunkCount) {
        percent = Math.floor((status.localChunkCount / status.totalChunkCount) * 100);
      }
      if (onProgress && Number.isFinite(percent)) {
        onProgress(Math.max(0, Math.min(100, Math.floor(percent))));
      }
      const ready =
        status &&
        (status.status === "READY" ||
          percent >= 100 ||
          (status.localChunkCount &&
            status.totalChunkCount &&
            status.localChunkCount >= status.totalChunkCount));
      if (ready) {
        return status;
      }
    } catch (_e) {
      /* ignore transient */
    }
    if (Date.now() - start > timeoutMs) {
      throw new Error("Resource not ready (timeout)");
    }
    await new Promise((r) => setTimeout(r, intervalMs));
  }
}

async function loadPreviewInto(container, ctx) {
  const isFullPreview = container && container.id === "preview-container";

  const set = (el) => {
    // Revoke previous blob URL if present
    const prev = container.firstElementChild;
    if (prev && prev.dataset && prev.dataset.bloburl) {
      try {
        URL.revokeObjectURL(prev.dataset.bloburl);
      } catch {}
    }
    container.innerHTML = "";
    container.appendChild(el);
    try {
      container.dataset.loading = "0";
    } catch {}
    try {
      // Heuristic: mark whether preview is showing text content for inline editing eligibility
      let isTextual = false;
      if (el && el.classList && el.classList.contains("inline-text-editor")) {
        isTextual = true;
      } else if (el && el.tagName === "PRE") {
        const ws =
          el.style.whiteSpace || (window.getComputedStyle ? getComputedStyle(el).whiteSpace : "");
        isTextual = String(ws).toLowerCase().includes("pre-wrap");
      } else if (el && el.tagName === "IFRAME") {
        isTextual = el.getAttribute("srcdoc") != null; // srcdoc implies HTML text, not PDF/file blob
      } else if (el && el.tagName === "DIV") {
        const pre = el.querySelector("pre");
        if (pre) {
          const ws =
            pre.style.whiteSpace ||
            (window.getComputedStyle ? getComputedStyle(pre).whiteSpace : "");
          isTextual = String(ws).toLowerCase().includes("pre-wrap");
        }
      }
      container.dataset.textual = isTextual ? "1" : "0";
    } catch {}
    try {
      console.debug("[Q-Edit] set(): content rendered", { tag: el.tagName, id: container.id });
    } catch {}
  };

  const looksHtml = (txt) =>
    /<(?:!doctype|html|head|body|div|p|span|img|video|audio|iframe|section|article)/i.test(txt);
  const tryParseJson = (txt) => {
    try {
      return JSON.parse(txt);
    } catch {
      return null;
    }
  };

  try {
    // Mark container as loading for progress updates; cleared when set() renders content
    try {
      container.dataset.loading = "1";
    } catch {}
    const service = ctx.service;
    const identifier = ctx.identifier;
    const name = ctx.name;
    const lower = (service || "").toLowerCase();
    const baseKind = getBaseServiceKind(service);
    const isPriv = isPrivateService(service);
    const filepath = (ctx && ctx.filepath) || "";

    const textServices = ["blog", "blog_post", "blog_comment", "document", "game", "json", "code"];
    const isText = textServices.some((t) => lower.includes(t)) || baseKind === "text";

    // Start background status polling (no build), updates percent while loading
    let stopProgress = false;
    const statusWait = waitForResourceReady({
      name,
      service,
      identifier,
      initialBuild: false,
      onProgress: (pct) => {
        try {
          if (stopProgress) {
            return;
          }
          if (container.dataset && container.dataset.loading !== "1") {
            return;
          }
          const p = Math.max(0, Math.min(100, Math.floor(pct)));
          container.textContent = `${p}% Loaded`;
          console.debug("[Q-Edit] progress", { p, service, identifier, container: container.id });
        } catch {}
      },
    }).catch(() => {});

    // Embedded WEBSITE/APP (public) — use qortal:// URL to leverage QDN routing
    const sUp = (service || "").toUpperCase();
    if (!isPriv && (sUp === "WEBSITE" || sUp === "APP")) {
      const url = buildQortalEmbedUrl({ service: sUp, name, identifier, filepath });
      const iframe = document.createElement("iframe");
      iframe.src = url;
      if (isFullPreview) {
        iframe.style.width = "100%";
        iframe.style.height = "70vh";
      } else {
        iframe.style.width = "240px";
        iframe.style.height = "160px";
      }
      set(iframe);
      stopProgress = true; // do not overwrite iframe with progress text
      // While it loads, update percent in the preview title
      if (isFullPreview) {
        const titleEl = document.getElementById("preview-title");
        const baseTitle = titleEl ? titleEl.textContent : "";
        (async () => {
          const start = Date.now();
          while (Date.now() - start < 60000) {
            try {
              const status = await qortalRequest(
                buildQdnParams({ action: "GET_QDN_RESOURCE_STATUS", name, service, identifier })
              );
              let percent = 0;
              if (typeof status?.percentLoaded === "number") {
                percent = status.percentLoaded;
              } else if (status?.localChunkCount && status?.totalChunkCount) {
                percent = Math.floor((status.localChunkCount / status.totalChunkCount) * 100);
              }
              const ready =
                status &&
                (status.status === "READY" ||
                  percent >= 100 ||
                  (status.localChunkCount &&
                    status.totalChunkCount &&
                    status.localChunkCount >= status.totalChunkCount));
              if (titleEl && Number.isFinite(percent)) {
                titleEl.textContent = `${baseTitle} — ${Math.max(0, Math.min(100, Math.floor(percent)))}% Loaded`;
              }
              if (ready) {
                break;
              }
            } catch {}
            await new Promise((r) => setTimeout(r, 800));
          }
          if (titleEl) {
            titleEl.textContent = baseTitle;
          }
        })();
      }
      return;
    }

    if (isPriv) {
      // Private: fetch base64 and decrypt
      const encB64 = await qortalRequest(
        buildQdnParams({
          action: "FETCH_QDN_RESOURCE",
          name,
          service,
          identifier,
          encoding: "base64",
          rebuild: false,
          ...(filepath ? { filepath } : {}),
        })
      );
      const decB64 = await qortalRequest({ action: "DECRYPT_DATA", encryptedData: encB64 });

      if (isText) {
        const bytes = b64ToBytes(decB64);
        const text = new TextDecoder("utf-8").decode(bytes);
        const maybeJson = tryParseJson(text.trim());
        if (maybeJson) {
          const pre = document.createElement("pre");
          if (isFullPreview) {
            pre.style.maxWidth = "100%";
            pre.style.maxHeight = "70vh";
            pre.style.overflow = "auto";
            pre.style.whiteSpace = "pre-wrap";
          } else {
            pre.style.maxWidth = "240px";
            pre.style.maxHeight = "160px";
            pre.style.overflow = "auto";
          }
          pre.textContent = JSON.stringify(maybeJson, null, 2);
          stopProgress = true;
          set(pre);
          return;
        }
        if (looksHtml(text)) {
          const iframe = document.createElement("iframe");
          iframe.setAttribute("sandbox", "");
          if (isFullPreview) {
            iframe.style.width = "100%";
            iframe.style.height = "70vh";
          } else {
            iframe.style.width = "240px";
            iframe.style.height = "160px";
          }
          iframe.srcdoc = text;
          stopProgress = true;
          set(iframe);
          return;
        }
        const pre = document.createElement("pre");
        if (isFullPreview) {
          pre.style.maxWidth = "100%";
          pre.style.maxHeight = "70vh";
          pre.style.overflow = "auto";
          pre.style.whiteSpace = "pre-wrap";
        } else {
          pre.style.maxWidth = "240px";
          pre.style.maxHeight = "160px";
          pre.style.overflow = "auto";
        }
        pre.textContent = isFullPreview ? text : text.slice(0, 5000);
        stopProgress = true;
        set(pre);
      } else {
        // Media / file
        const bytes = b64ToBytes(decB64);
        // If content looks like text despite service label, render as text
        if (isLikelyText(bytes)) {
          const text = new TextDecoder("utf-8").decode(bytes);
          const maybeJson = tryParseJson(text.trim());
          if (maybeJson) {
            const pre = document.createElement("pre");
            if (isFullPreview) {
              pre.style.maxWidth = "100%";
              pre.style.maxHeight = "70vh";
              pre.style.overflow = "auto";
              pre.style.whiteSpace = "pre-wrap";
            } else {
              pre.style.maxWidth = "240px";
              pre.style.maxHeight = "160px";
              pre.style.overflow = "auto";
            }
            pre.textContent = JSON.stringify(maybeJson, null, 2);
            stopProgress = true;
            set(pre);
            return;
          }
          if (looksHtml(text)) {
            const iframe = document.createElement("iframe");
            iframe.setAttribute("sandbox", "");
            if (isFullPreview) {
              iframe.style.width = "100%";
              iframe.style.height = "70vh";
            } else {
              iframe.style.width = "240px";
              iframe.style.height = "160px";
            }
            iframe.srcdoc = text;
            stopProgress = true;
            set(iframe);
            return;
          }
          const pre = document.createElement("pre");
          if (isFullPreview) {
            pre.style.maxWidth = "100%";
            pre.style.maxHeight = "70vh";
            pre.style.overflow = "auto";
            pre.style.whiteSpace = "pre-wrap";
          } else {
            pre.style.maxWidth = "240px";
            pre.style.maxHeight = "160px";
            pre.style.overflow = "auto";
          }
          pre.textContent = isFullPreview ? text : text.slice(0, 5000);
          stopProgress = true;
          set(pre);
          return;
        }
        const mime =
          detectMimeFromBytes(bytes) ||
          (baseKind === "image"
            ? "image/png"
            : baseKind === "video"
              ? "video/mp4"
              : baseKind === "audio"
                ? "audio/mpeg"
                : "application/octet-stream");
        const blob = new Blob([bytes], { type: mime });
        const url = URL.createObjectURL(blob);

        if (mime === "application/pdf") {
          const iframe = document.createElement("iframe");
          iframe.type = "application/pdf";
          iframe.src = url;
          iframe.dataset.bloburl = url;
          if (isFullPreview) {
            iframe.style.width = "100%";
            iframe.style.height = "70vh";
          } else {
            iframe.style.width = "240px";
            iframe.style.height = "160px";
          }
          stopProgress = true;
          set(iframe);
          return;
        }
        if (baseKind === "image") {
          const img = document.createElement("img");
          img.src = url;
          img.alt = identifier;
          img.dataset.bloburl = url;
          img.className = isFullPreview ? "preview-image full" : "preview-image";
          img.setAttribute("data-service", service);
          img.setAttribute("data-identifier", identifier);
          img.setAttribute("data-name", name);
          img.addEventListener("click", () => openImageOverlayFromDataUrl(url));
          stopProgress = true;
          set(img);
          return;
        }
        if (baseKind === "video") {
          const video = document.createElement("video");
          video.dataset.bloburl = url;
          video.controls = true;
          video.className = isFullPreview ? "preview-video full" : "preview-video";
          video.src = url;
          video.setAttribute("data-service", service);
          video.setAttribute("data-identifier", identifier);
          video.setAttribute("data-name", name);
          stopProgress = true;
          set(video);
          return;
        }
        if (baseKind === "audio") {
          const audio = document.createElement("audio");
          audio.dataset.bloburl = url;
          audio.controls = true;
          audio.className = isFullPreview ? "preview-audio full" : "preview-audio";
          audio.src = url;
          audio.setAttribute("data-service", service);
          audio.setAttribute("data-identifier", identifier);
          audio.setAttribute("data-name", name);
          stopProgress = true;
          set(audio);
          return;
        }
        // Fallback file link
        const a = document.createElement("a");
        a.textContent = "Open";
        a.href = url;
        a.target = "_blank";
        a.rel = "noopener";
        a.dataset.bloburl = url;
        stopProgress = true;
        set(a);
      }
    } else {
      // Public
      if (isText) {
        let resp;
        try {
          resp = await qortalRequest(
            buildQdnParams({
              action: "FETCH_QDN_RESOURCE",
              name,
              service,
              identifier,
              rebuild: false,
              ...(filepath ? { filepath } : {}),
            })
          );
        } catch (_e) {
          const b64 = await qortalRequest(
            buildQdnParams({
              action: "FETCH_QDN_RESOURCE",
              name,
              service,
              identifier,
              encoding: "base64",
              rebuild: false,
              ...(filepath ? { filepath } : {}),
            })
          );
          const bytes = b64ToBytes(b64);
          const dec = new TextDecoder("utf-8").decode(bytes);
          resp = dec || b64;
        }
        if (typeof resp === "string") {
          const maybeJson = tryParseJson(resp.trim());
          if (maybeJson) {
            const pre = document.createElement("pre");
            if (isFullPreview) {
              pre.style.maxWidth = "100%";
              pre.style.maxHeight = "70vh";
              pre.style.overflow = "auto";
              pre.style.whiteSpace = "pre-wrap";
            } else {
              pre.style.maxWidth = "240px";
              pre.style.maxHeight = "160px";
              pre.style.overflow = "auto";
            }
            pre.textContent = JSON.stringify(maybeJson, null, 2);
            stopProgress = true;
            set(pre);
            return;
          }
          if (looksHtml(resp)) {
            const iframe = document.createElement("iframe");
            iframe.setAttribute("sandbox", "");
            if (isFullPreview) {
              iframe.style.width = "100%";
              iframe.style.height = "70vh";
            } else {
              iframe.style.width = "240px";
              iframe.style.height = "160px";
            }
            iframe.srcdoc = resp;
            stopProgress = true;
            set(iframe);
            return;
          }
          const pre = document.createElement("pre");
          if (isFullPreview) {
            pre.style.maxWidth = "100%";
            pre.style.maxHeight = "70vh";
            pre.style.overflow = "auto";
            pre.style.whiteSpace = "pre-wrap";
          } else {
            pre.style.maxWidth = "240px";
            pre.style.maxHeight = "160px";
            pre.style.overflow = "auto";
          }
          pre.textContent = isFullPreview ? resp : resp.slice(0, 5000);
          stopProgress = true;
          set(pre);
          return;
        } else if (resp && resp.type === "Buffer" && Array.isArray(resp.data)) {
          const bytes = new Uint8Array(resp.data);
          const text = new TextDecoder("utf-8").decode(bytes);
          const maybeJson = tryParseJson(text.trim());
          if (maybeJson) {
            const pre = document.createElement("pre");
            if (isFullPreview) {
              pre.style.maxWidth = "100%";
              pre.style.maxHeight = "70vh";
              pre.style.overflow = "auto";
              pre.style.whiteSpace = "pre-wrap";
            } else {
              pre.style.maxWidth = "240px";
              pre.style.maxHeight = "160px";
              pre.style.overflow = "auto";
            }
            pre.textContent = JSON.stringify(maybeJson, null, 2);
            stopProgress = true;
            set(pre);
            return;
          }
          if (looksHtml(text)) {
            const iframe = document.createElement("iframe");
            iframe.setAttribute("sandbox", "");
            if (isFullPreview) {
              iframe.style.width = "100%";
              iframe.style.height = "70vh";
            } else {
              iframe.style.width = "240px";
              iframe.style.height = "160px";
            }
            iframe.srcdoc = text;
            stopProgress = true;
            set(iframe);
            return;
          }
          const pre = document.createElement("pre");
          if (isFullPreview) {
            pre.style.maxWidth = "100%";
            pre.style.maxHeight = "70vh";
            pre.style.overflow = "auto";
            pre.style.whiteSpace = "pre-wrap";
          } else {
            pre.style.maxWidth = "240px";
            pre.style.maxHeight = "160px";
            pre.style.overflow = "auto";
          }
          pre.textContent = isFullPreview ? text : text.slice(0, 5000);
          set(pre);
          return;
        }
      }

      // Non-text: fetch as base64 and sniff
      const b64 = await qortalRequest(
        buildQdnParams({
          action: "FETCH_QDN_RESOURCE",
          name,
          service,
          identifier,
          encoding: "base64",
          rebuild: false,
          ...(filepath ? { filepath } : {}),
        })
      );
      const bytes = b64ToBytes(b64);
      // Text-like payload under non-text service? Render as text
      if (isLikelyText(bytes)) {
        const text = new TextDecoder("utf-8").decode(bytes);
        const maybeJson = tryParseJson(text.trim());
        if (maybeJson) {
          const pre = document.createElement("pre");
          if (isFullPreview) {
            pre.style.maxWidth = "100%";
            pre.style.maxHeight = "70vh";
            pre.style.overflow = "auto";
            pre.style.whiteSpace = "pre-wrap";
          } else {
            pre.style.maxWidth = "240px";
            pre.style.maxHeight = "160px";
            pre.style.overflow = "auto";
          }
          pre.textContent = JSON.stringify(maybeJson, null, 2);
          set(pre);
          return;
        }
        if (looksHtml(text)) {
          const iframe = document.createElement("iframe");
          iframe.setAttribute("sandbox", "");
          if (isFullPreview) {
            iframe.style.width = "100%";
            iframe.style.height = "70vh";
          } else {
            iframe.style.width = "240px";
            iframe.style.height = "160px";
          }
          iframe.srcdoc = text;
          set(iframe);
          return;
        }
        const pre = document.createElement("pre");
        if (isFullPreview) {
          pre.style.maxWidth = "100%";
          pre.style.maxHeight = "70vh";
        } else {
          pre.style.maxWidth = "240px";
          pre.style.maxHeight = "160px";
        }
        pre.style.overflow = "auto";
        pre.style.whiteSpace = "pre-wrap";
        pre.textContent = isFullPreview ? text : text.slice(0, 5000);
        stopProgress = true;
        set(pre);
        return;
      }
      const mime =
        detectMimeFromBytes(bytes) || guessMimeFromName(identifier, "application/octet-stream");
      const blob = new Blob([bytes], { type: mime });
      const url = URL.createObjectURL(blob);

      if (mime === "application/pdf") {
        const iframe = document.createElement("iframe");
        iframe.type = "application/pdf";
        iframe.src = url;
        iframe.dataset.bloburl = url;
        if (isFullPreview) {
          iframe.style.width = "100%";
          iframe.style.height = "70vh";
        } else {
          iframe.style.width = "240px";
          iframe.style.height = "160px";
        }
        stopProgress = true;
        set(iframe);
        return;
      }
      if (mime.startsWith("image/")) {
        const img = document.createElement("img");
        img.src = url;
        img.alt = identifier;
        img.className = isFullPreview ? "preview-image full" : "preview-image";
        img.dataset.bloburl = url;
        img.setAttribute("data-service", service);
        img.setAttribute("data-identifier", identifier);
        img.setAttribute("data-name", name);
        img.addEventListener("click", () => openImageOverlayFromDataUrl(url));
        stopProgress = true;
        set(img);
        return;
      }
      if (mime.startsWith("video/")) {
        const video = document.createElement("video");
        video.dataset.bloburl = url;
        video.controls = true;
        video.className = isFullPreview ? "preview-video full" : "preview-video";
        video.src = url;
        video.setAttribute("data-service", service);
        video.setAttribute("data-identifier", identifier);
        video.setAttribute("data-name", name);
        stopProgress = true;
        set(video);
        return;
      }
      if (mime.startsWith("audio/")) {
        const audio = document.createElement("audio");
        audio.dataset.bloburl = url;
        audio.controls = true;
        audio.className = isFullPreview ? "preview-audio full" : "preview-audio";
        audio.src = url;
        audio.setAttribute("data-service", service);
        audio.setAttribute("data-identifier", identifier);
        audio.setAttribute("data-name", name);
        stopProgress = true;
        set(audio);
        return;
      }
      // Fallback: show a small hex/ASCII preview plus an Open link
      const wrap = document.createElement("div");
      const pre = document.createElement("pre");
      const viewLen = Math.min(bytes.length, 2048);
      let out = "";
      for (let i = 0; i < viewLen; i += 16) {
        let hex = "";
        let ascii = "";
        for (let j = 0; j < 16 && i + j < viewLen; j++) {
          const b = bytes[i + j];
          hex += b.toString(16).padStart(2, "0") + " ";
          ascii += b >= 32 && b <= 126 ? String.fromCharCode(b) : ".";
        }
        out += hex.padEnd(16 * 3, " ") + "  " + ascii + "\n";
      }
      pre.textContent = out + (bytes.length > viewLen ? "\n… (truncated)" : "");
      if (isFullPreview) {
        pre.style.maxWidth = "100%";
        pre.style.maxHeight = "70vh";
      } else {
        pre.style.maxWidth = "240px";
        pre.style.maxHeight = "160px";
      }
      pre.style.overflow = "auto";
      pre.style.whiteSpace = "pre";
      const a = document.createElement("a");
      a.textContent = "Open";
      a.href = url;
      a.target = "_blank";
      a.rel = "noopener";
      a.dataset.bloburl = url;
      a.style.display = "inline-block";
      a.style.marginTop = "6px";
      wrap.appendChild(pre);
      wrap.appendChild(a);
      stopProgress = true;
      set(wrap);
    }
  } catch (e) {
    container.textContent = "Failed to load preview: " + (e?.message || e);
    console.error("Preview failed", e);
  }
}

// ===== Delete/Edit/Metadata/Publish (from user's file, preserved) =====

async function deleteContent(service, identifier) {
  try {
    if (!userName || userName === "Name unavailable") {
      return;
    }
    showPublishModal("Please wait...");
    // Fetch existing metadata
    let existingMetadata = {};
    try {
      const metadataResponse = await fetch(
        `/arbitrary/resources/search?name=${userName}&service=${service}&identifier=${identifier}&includemetadata=true&exactmatchnames=true&mode=ALL`
      );
      if (metadataResponse.ok) {
        const metadataResults = await metadataResponse.json();
        if (metadataResults.length > 0 && metadataResults[0].metadata) {
          existingMetadata = metadataResults[0].metadata;
        }
      }
    } catch (err) {
      console.error("Error fetching existing metadata:", err);
    }
    // Use a minimal 1-byte file to avoid hub check rejecting size=0
    // A zero-byte Blob triggers the hub's `/arbitrary/check/tmp` to fail,
    // which surfaces as a misleading "Not enough space" error.
    const emptyFile = new Blob(["\n"], { type: "application/octet-stream" });
    const deleteIdent = identifier === "default" ? "" : identifier;
    // Prepare the publish parameters, including existing metadata if available
    const publishParams = {
      action: "PUBLISH_QDN_RESOURCE",
      name: userName,
      service: service,
      identifier: deleteIdent,
      file: emptyFile,
    };
    // List of metadata fields to delete
    const metadataFields = ["filename", "title", "description"];
    // Add existing metadata fields to publishParams if they exist
    for (const field of metadataFields) {
      if (existingMetadata[field]) {
        publishParams[field] = "deleted";
      }
    }
    if (existingMetadata["category"]) {
      publishParams["category"] = "UNCATEGORIZED";
    }
    if (existingMetadata["tags"]) {
      publishParams["tag1"] = "deleted";
    }
    // Proceed with publishing using publishWithFeedback
    try {
      await publishWithFeedback(publishParams);
      console.log("Content deleted successfully");
    } catch (error) {
      console.error("Error deleting content:", error);
    }
  } catch (error) {
    console.error("Error deleting content:", error);
  }
}

async function editContent(service, identifier) {
  try {
    if (!userName || userName === "Name unavailable") {
      return;
    }
    // Fetch existing metadata
    let existingMetadata = {};
    try {
      const metadataResponse = await fetch(
        `/arbitrary/resources/search?name=${userName}&service=${service}&identifier=${identifier}&includemetadata=true&exactmatchnames=true&mode=ALL`
      );
      if (metadataResponse.ok) {
        const metadataResults = await metadataResponse.json();
        if (metadataResults.length > 0 && metadataResults[0].metadata) {
          existingMetadata = metadataResults[0].metadata;
        }
      }
    } catch (err) {
      console.error("Error fetching existing metadata:", err);
    }
    const editIdent = identifier === "default" ? "" : identifier;
    // Prepare the publish parameters (for non-text flow; text flow handled inline on save)
    const publishParams = {
      action: "PUBLISH_QDN_RESOURCE",
      name: userName,
      service: service,
      identifier: editIdent,
      // 'file' will be added below after obtaining the edited or selected file
    };
    const textualInPreview = isTextDisplayedInPreview();
    if (textualInPreview) {
      // Fetch the current content and enable inline editing in the preview panel
      let contentUrl = `/arbitrary/${service}/${userName}/${identifier}`;
      let content = "";
      try {
        const contentResponse = await fetch(contentUrl);
        if (contentResponse.ok) {
          content = await contentResponse.text();
        }
      } catch (_err) {
        // ignore; we'll try to read from current preview DOM below
      }
      if (!content) {
        // Fallback: read currently displayed preview content (handles private resources)
        try {
          const container = document.getElementById("preview-container");
          const el = container && container.firstElementChild;
          if (el) {
            if (el.tagName === "PRE") {
              content = el.textContent || "";
            } else if (el.tagName === "IFRAME" && el.getAttribute("srcdoc") != null) {
              content = el.srcdoc || "";
            } else if (el.tagName === "DIV") {
              const pre = el.querySelector("pre");
              if (pre) {
                content = pre.textContent || "";
              }
            }
          }
        } catch {}
      }
      enableInlineTextEditInPreview({
        content,
        service,
        identifier,
        existingMetadata,
      });
      return; // Inline editor will manage the rest (metadata + publish or cancel)
    } else {
      // For other types, prompt the user to select a new file
      const input = document.createElement("input");
      input.type = "file";
      input.click();
      const selectedFilePromise = new Promise((resolve, reject) => {
        input.onchange = (event) => {
          const file = event.target.files[0];
          resolve(file);
        };
        input.onerror = reject;
      });
      const selectedFile = await selectedFilePromise;
      publishParams.file = selectedFile; // Add the selected file to publishParams
    }
    // Open metadata editor dialog
    let updatedMetadata = await openMetadataEditorDialog(existingMetadata);
    if (updatedMetadata === null) {
      // User cancelled
      return;
    }
    // Update 'publishParams' with 'updatedMetadata'
    const metadataFields = ["filename", "title", "description", "category"];
    for (const field of metadataFields) {
      if (updatedMetadata[field]) {
        publishParams[field] = updatedMetadata[field];
      } else {
        delete publishParams[field];
      }
    }
    // Handle tags
    if (updatedMetadata["tags"]) {
      const tagsArray = updatedMetadata["tags"]
        .split(",")
        .map((tag) => tag.trim())
        .filter((tag) => tag);
      for (let i = 1; i <= 5; i++) {
        if (tagsArray[i - 1]) {
          publishParams[`tag${i}`] = tagsArray[i - 1];
        } else {
          delete publishParams[`tag${i}`];
        }
      }
    } else {
      // Remove tags if none provided
      for (let i = 1; i <= 5; i++) {
        delete publishParams[`tag${i}`];
      }
    }
    // Proceed with publishing using publishWithFeedback
    try {
      await publishWithFeedback(publishParams);
      console.log("Content edited successfully");
      // Optionally, refresh the content display
      // fetchContent();
    } catch (error) {
      console.error("Error editing content:", error);
    }
  } catch (error) {
    console.error("Error editing content:", error);
  }
}

// Enable inline text editing inside the main preview panel for text services
function enableInlineTextEditInPreview({ content, service, identifier, existingMetadata }) {
  const container = document.getElementById("preview-container");
  if (!container) {
    return;
  }
  // If already in inline editing, just refresh content and focus
  const existing = container.querySelector(".inline-text-editor");
  if (existing) {
    const ta = existing.querySelector("textarea");
    if (ta) {
      ta.value = content || "";
      ta.focus();
    }
    return;
  }

  const wrapper = document.createElement("div");
  wrapper.className = "inline-text-editor";
  wrapper.style.display = "flex";
  wrapper.style.flexDirection = "column";
  wrapper.style.width = "100%";
  wrapper.style.height = "70vh";

  const toolbar = document.createElement("div");
  toolbar.style.display = "flex";
  toolbar.style.justifyContent = "flex-end";
  toolbar.style.gap = "8px";
  toolbar.style.marginBottom = "8px";

  const cancelBtn = document.createElement("button");
  cancelBtn.textContent = "Cancel";
  const saveBtn = document.createElement("button");
  saveBtn.textContent = "Save";
  toolbar.appendChild(cancelBtn);
  toolbar.appendChild(saveBtn);

  const textarea = document.createElement("textarea");
  textarea.style.flex = "1";
  textarea.style.width = "100%";
  textarea.style.resize = "vertical";
  textarea.style.backgroundColor = "#3d4452";
  textarea.style.color = "#c9d2d9";
  textarea.style.border = "1px solid #445063";
  textarea.style.borderRadius = "8px";
  textarea.style.padding = "10px";
  textarea.value = content || "";

  wrapper.appendChild(toolbar);
  wrapper.appendChild(textarea);
  container.replaceChildren(wrapper);
  try {
    container.dataset.textual = "1";
  } catch {}

  cancelBtn.addEventListener("click", async () => {
    // Restore the normal preview content
    container.textContent = "Loading preview…";
    try {
      await loadPreviewInto(container, currentPreviewCtx);
    } catch {}
  });

  saveBtn.addEventListener("click", async () => {
    try {
      const editedContent = textarea.value;
      // Prepare publish params
      const editIdent = identifier === "default" ? "" : identifier;
      const publishParams = {
        action: "PUBLISH_QDN_RESOURCE",
        name: userName,
        service,
        identifier: editIdent,
        file: new Blob([editedContent], { type: "text/plain" }),
      };

      // Let user edit metadata next
      const updatedMetadata = await openMetadataEditorDialog(existingMetadata || {});
      if (updatedMetadata === null) {
        // Stay in edit mode
        return;
      }
      const metadataFields = ["filename", "title", "description", "category"];
      for (const field of metadataFields) {
        if (updatedMetadata[field]) {
          publishParams[field] = updatedMetadata[field];
        } else {
          delete publishParams[field];
        }
      }
      if (updatedMetadata["tags"]) {
        const tagsArray = updatedMetadata["tags"]
          .split(",")
          .map((tag) => tag.trim())
          .filter((tag) => tag);
        for (let i = 1; i <= 5; i++) {
          if (tagsArray[i - 1]) {
            publishParams[`tag${i}`] = tagsArray[i - 1];
          } else {
            delete publishParams[`tag${i}`];
          }
        }
      } else {
        for (let i = 1; i <= 5; i++) {
          delete publishParams[`tag${i}`];
        }
      }

      // Publish and then reload preview
      await publishWithFeedback(publishParams);
      container.textContent = "Loading preview…";
      try {
        await loadPreviewInto(container, currentPreviewCtx);
      } catch {}
    } catch (e) {
      console.error("Inline edit save failed:", e);
    }
  });
}

// Replace: always use a file picker, even for text services
async function replaceContent(service, identifier) {
  try {
    if (!userName || userName === "Name unavailable") {
      return;
    }
    showPublishModal("Please wait...");
    // Fetch existing metadata
    let existingMetadata = {};
    try {
      const metadataResponse = await fetch(
        `/arbitrary/resources/search?name=${userName}&service=${service}&identifier=${identifier}&includemetadata=true&exactmatchnames=true&mode=ALL`
      );
      if (metadataResponse.ok) {
        const metadataResults = await metadataResponse.json();
        if (metadataResults.length > 0 && metadataResults[0].metadata) {
          existingMetadata = metadataResults[0].metadata;
        }
      }
    } catch (err) {
      console.error("Error fetching existing metadata:", err);
    }

    const repIdent = identifier === "default" ? "" : identifier;
    // Prepare the publish parameters
    const publishParams = {
      action: "PUBLISH_QDN_RESOURCE",
      name: userName,
      service: service,
      identifier: repIdent,
      // 'file' will be added below after user selects a file
    };

    // Always pick a file for replacement
    closePublishModal();
    const input = document.createElement("input");
    input.type = "file";
    input.click();
    const selectedFilePromise = new Promise((resolve, reject) => {
      input.onchange = (event) => {
        const file = event.target.files[0];
        resolve(file);
      };
      input.onerror = reject;
    });
    const selectedFile = await selectedFilePromise;
    publishParams.file = selectedFile;

    // Open metadata editor dialog
    let updatedMetadata = await openMetadataEditorDialog(existingMetadata);
    if (updatedMetadata === null) {
      // User cancelled
      return;
    }
    // Update 'publishParams' with 'updatedMetadata'
    const metadataFields = ["filename", "title", "description", "category"];
    for (const field of metadataFields) {
      if (updatedMetadata[field]) {
        publishParams[field] = updatedMetadata[field];
      } else {
        delete publishParams[field];
      }
    }
    // Handle tags
    if (updatedMetadata["tags"]) {
      const tagsArray = updatedMetadata["tags"]
        .split(",")
        .map((tag) => tag.trim())
        .filter((tag) => tag);
      for (let i = 1; i <= 5; i++) {
        if (tagsArray[i - 1]) {
          publishParams[`tag${i}`] = tagsArray[i - 1];
        } else {
          delete publishParams[`tag${i}`];
        }
      }
    } else {
      // Remove tags if none provided
      for (let i = 1; i <= 5; i++) {
        delete publishParams[`tag${i}`];
      }
    }

    // Proceed with publishing using publishWithFeedback
    try {
      await publishWithFeedback(publishParams);
      console.log("Content replaced successfully");
    } catch (error) {
      console.error("Error replacing content:", error);
    }
  } catch (error) {
    console.error("Error replacing content:", error);
  }
}

function openTextEditorDialog(content) {
  return new Promise((resolve) => {
    // Create the modal overlay
    const modalOverlay = document.createElement("div");
    modalOverlay.style.position = "fixed";
    modalOverlay.style.top = "0";
    modalOverlay.style.left = "0";
    modalOverlay.style.width = "100%";
    modalOverlay.style.height = "100%";
    modalOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
    modalOverlay.style.display = "flex";
    modalOverlay.style.justifyContent = "center";
    modalOverlay.style.alignItems = "center";
    modalOverlay.style.zIndex = "1000";

    // Create the modal content container
    const modalContent = document.createElement("div");
    modalContent.style.backgroundColor = "#2d3749"; // Use background color from main content
    modalContent.style.color = "#c9d2d9"; // Use text color from your CSS
    modalContent.style.padding = "20px";
    modalContent.style.borderRadius = "25px"; // Match border radius from your CSS
    modalContent.style.maxWidth = "600px";
    modalContent.style.width = "90%";
    modalContent.style.fontFamily = "'Lexend', sans-serif"; // Use the same font
    modalContent.style.lineHeight = "1.6"; // Consistent line height

    // Create the textarea for editing
    const textarea = document.createElement("textarea");
    textarea.style.width = "100%";
    textarea.style.height = "300px";
    textarea.style.backgroundColor = "#3d4452"; // Use background color from main content
    textarea.style.color = "#c9d2d9"; // Use text color from your CSS
    textarea.value = content;

    // Create the button container
    const buttonContainer = document.createElement("div");
    buttonContainer.style.textAlign = "right";
    buttonContainer.style.marginTop = "10px";

    // Create the Save and Cancel buttons
    const saveButton = document.createElement("button");
    saveButton.textContent = "Save";

    const cancelButton = document.createElement("button");
    cancelButton.textContent = "Cancel";
    cancelButton.style.marginRight = "10px";

    buttonContainer.appendChild(cancelButton);
    buttonContainer.appendChild(saveButton);

    modalContent.appendChild(textarea);
    modalContent.appendChild(buttonContainer);
    modalOverlay.appendChild(modalContent);
    document.body.appendChild(modalOverlay);

    // Event listeners for the buttons
    cancelButton.addEventListener("click", () => {
      document.body.removeChild(modalOverlay);
      closePublishModal();
      resolve(null);
    });

    saveButton.addEventListener("click", () => {
      const editedContent = textarea.value;
      document.body.removeChild(modalOverlay);
      resolve(editedContent);
    });
  });
}

function openMetadataDialog(metadata) {
  // Create the modal overlay
  const modalOverlay = document.createElement("div");
  modalOverlay.style.position = "fixed";
  modalOverlay.style.top = "0";
  modalOverlay.style.left = "0";
  modalOverlay.style.width = "100%";
  modalOverlay.style.height = "100%";
  modalOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
  modalOverlay.style.display = "flex";
  modalOverlay.style.justifyContent = "center";
  modalOverlay.style.alignItems = "center";
  modalOverlay.style.zIndex = "1000";

  // Create the modal content container
  const modalContent = document.createElement("div");
  modalContent.style.backgroundColor = "#2d3749"; // Use background color from main content
  modalContent.style.color = "#c9d2d9"; // Use text color from your CSS
  modalContent.style.padding = "20px";
  modalContent.style.borderRadius = "25px"; // Match border radius from your CSS
  modalContent.style.maxWidth = "600px";
  modalContent.style.width = "90%";
  modalContent.style.fontFamily = "'Lexend', sans-serif"; // Use the same font
  modalContent.style.lineHeight = "1.6"; // Consistent line height

  // Create the content display
  const contentDiv = document.createElement("div");
  contentDiv.style.maxHeight = "400px";
  contentDiv.style.overflowY = "auto";

  // Build the metadata display
  for (let key in metadata) {
    const keyElement = document.createElement("strong");
    keyElement.textContent = key + ": ";
    keyElement.style.color = "#ffffff"; // Make keys stand out
    const valueElement = document.createElement("span");
    valueElement.textContent = metadata[key];
    const lineBreak = document.createElement("br");
    contentDiv.appendChild(keyElement);
    contentDiv.appendChild(valueElement);
    contentDiv.appendChild(lineBreak);
  }

  // Create the Close button
  const closeButton = document.createElement("button");
  closeButton.textContent = "Close";
  closeButton.style.marginTop = "10px";

  modalContent.appendChild(contentDiv);
  modalContent.appendChild(closeButton);
  modalOverlay.appendChild(modalContent);
  document.body.appendChild(modalOverlay);

  // Event listener for the Close button
  closeButton.addEventListener("click", () => {
    document.body.removeChild(modalOverlay);
  });
}

function openMetadataEditorDialog(existingMetadata) {
  return new Promise((resolve) => {
    // Create the modal overlay
    const modalOverlay = document.createElement("div");
    modalOverlay.style.position = "fixed";
    modalOverlay.style.top = "0";
    modalOverlay.style.left = "0";
    modalOverlay.style.width = "100%";
    modalOverlay.style.height = "100%";
    modalOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
    modalOverlay.style.display = "flex";
    modalOverlay.style.justifyContent = "center";
    modalOverlay.style.alignItems = "center";
    modalOverlay.style.zIndex = "1000";

    // Create the modal content container
    const modalContent = document.createElement("div");
    modalContent.style.backgroundColor = "#2d3749";
    modalContent.style.color = "#c9d2d9";
    modalContent.style.padding = "20px";
    modalContent.style.borderRadius = "25px";
    modalContent.style.maxWidth = "600px";
    modalContent.style.width = "90%";
    modalContent.style.fontFamily = "'Lexend', sans-serif";
    modalContent.style.lineHeight = "1.6";

    // Create the form
    const form = document.createElement("form");

    const fields = ["filename", "title", "description", "category", "tags"];

    // Define the categories
    const categories = [
      { value: "", display: "" },
      { value: "ART", display: "Art and Design" },
      { value: "AUTOMOTIVE", display: "Automotive" },
      { value: "BEAUTY", display: "Beauty" },
      { value: "BOOKS", display: "Books and Reference" },
      { value: "BUSINESS", display: "Business" },
      { value: "COMMUNICATIONS", display: "Communications" },
      { value: "CRYPTOCURRENCY", display: "Cryptocurrency and Blockchain" },
      { value: "CULTURE", display: "Culture" },
      { value: "DATING", display: "Dating" },
      { value: "DESIGN", display: "Design" },
      { value: "ENTERTAINMENT", display: "Entertainment" },
      { value: "EVENTS", display: "Events" },
      { value: "FAITH", display: "Faith and Religion" },
      { value: "FASHION", display: "Fashion" },
      { value: "FINANCE", display: "Finance" },
      { value: "FOOD", display: "Food and Drink" },
      { value: "GAMING", display: "Gaming" },
      { value: "GEOGRAPHY", display: "Geography" },
      { value: "HEALTH", display: "Health" },
      { value: "HISTORY", display: "History" },
      { value: "HOME", display: "Home" },
      { value: "KNOWLEDGE", display: "Knowledge Share" },
      { value: "LANGUAGE", display: "Language" },
      { value: "LIFESTYLE", display: "Lifestyle" },
      { value: "MANUFACTURING", display: "Manufacturing" },
      { value: "MAPS", display: "Maps and Navigation" },
      { value: "MUSIC", display: "Music" },
      { value: "NEWS", display: "News" },
      { value: "OTHER", display: "Other" },
      { value: "PETS", display: "Pets" },
      { value: "PHILOSOPHY", display: "Philosophy" },
      { value: "PHOTOGRAPHY", display: "Photography" },
      { value: "POLITICS", display: "Politics" },
      { value: "PRODUCE", display: "Products and Services" },
      { value: "PRODUCTIVITY", display: "Productivity" },
      { value: "PSYCHOLOGY", display: "Psychology" },
      { value: "QORTAL", display: "Qortal" },
      { value: "SCIENCE", display: "Science" },
      { value: "SELF_CARE", display: "Self Care" },
      { value: "SELF_SUFFICIENCY", display: "Self-Sufficiency and Homesteading" },
      { value: "SHOPPING", display: "Shopping" },
      { value: "SOCIAL", display: "Social" },
      { value: "SOFTWARE", display: "Software" },
      { value: "SPIRITUALITY", display: "Spirituality" },
      { value: "SPORTS", display: "Sports" },
      { value: "STORYTELLING", display: "Storytelling" },
      { value: "TECHNOLOGY", display: "Technology" },
      { value: "TOOLS", display: "Tools" },
      { value: "TRAVEL", display: "Travel" },
      { value: "UNCATEGORIZED", display: "Uncategorized" },
      { value: "VIDEO", display: "Video" },
      { value: "WEATHER", display: "Weather" },
    ];

    fields.forEach((field) => {
      const label = document.createElement("label");
      label.textContent = field.charAt(0).toUpperCase() + field.slice(1) + ":";
      label.style.display = "block";
      label.style.marginTop = "10px";

      let input;

      if (field === "category") {
        // Create a select element for category
        input = document.createElement("select");
        input.name = field;
        input.style.width = "100%";
        input.style.padding = "5px";
        input.style.marginTop = "5px";

        // Add options to the select element
        categories.forEach((category) => {
          const option = document.createElement("option");
          option.value = category.value;
          option.textContent = category.display;
          input.appendChild(option);
        });

        // Set the selected value if it exists in existingMetadata
        if (existingMetadata[field]) {
          input.value = existingMetadata[field];
        } else {
          input.value = ""; // Default to blank line
        }
      } else {
        // Create an input element for other fields
        input = document.createElement("input");
        input.type = "text";
        input.name = field;
        input.style.width = "100%";
        input.style.padding = "5px";
        input.style.marginTop = "5px";

        if (existingMetadata[field]) {
          if (field === "tags" && Array.isArray(existingMetadata[field])) {
            input.value = existingMetadata[field].join(", ");
          } else {
            input.value = existingMetadata[field];
          }
        } else {
          input.placeholder = field.charAt(0).toUpperCase() + field.slice(1);
        }
      }

      label.appendChild(input);
      form.appendChild(label);
    });

    // Create the button container
    const buttonContainer = document.createElement("div");
    buttonContainer.style.textAlign = "right";
    buttonContainer.style.marginTop = "20px";

    // Create the Save and Cancel buttons
    const saveButton = document.createElement("button");
    saveButton.textContent = "Save";
    saveButton.type = "submit";
    saveButton.style.marginLeft = "10px";

    const cancelButton = document.createElement("button");
    cancelButton.textContent = "Cancel";
    cancelButton.type = "button";

    buttonContainer.appendChild(cancelButton);
    buttonContainer.appendChild(saveButton);
    form.appendChild(buttonContainer);

    modalContent.appendChild(form);
    modalOverlay.appendChild(modalContent);
    document.body.appendChild(modalOverlay);

    // Event listeners
    cancelButton.addEventListener("click", (event) => {
      event.preventDefault();
      document.body.removeChild(modalOverlay);
      closePublishModal();
      resolve(null);
    });

    form.addEventListener("submit", (event) => {
      event.preventDefault();
      // Collect the metadata
      const formData = new FormData(form);
      const updatedMetadata = {};
      fields.forEach((field) => {
        const value = formData.get(field);
        if (value) {
          updatedMetadata[field] = value;
        }
      });
      document.body.removeChild(modalOverlay);
      resolve(updatedMetadata);
    });
  });
}

let publishModal = null;

function showPublishModal(message) {
  if (!publishModal) {
    // Create the modal
    publishModal = document.createElement("div");
    publishModal.style.position = "fixed";
    publishModal.style.top = "0";
    publishModal.style.left = "0";
    publishModal.style.width = "100%";
    publishModal.style.height = "100%";
    publishModal.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
    publishModal.style.display = "flex";
    publishModal.style.justifyContent = "center";
    publishModal.style.alignItems = "center";
    publishModal.style.zIndex = "1000";

    // Create the modal content container
    const modalContent = document.createElement("div");
    modalContent.style.backgroundColor = "#2d3749"; // Use background color from main content
    modalContent.style.padding = "20px";
    modalContent.style.borderRadius = "5px";
    modalContent.style.maxWidth = "400px";
    modalContent.style.width = "90%";
    modalContent.style.textAlign = "center";

    // Create the message element
    const messageElement = document.createElement("p");
    messageElement.id = "publish-modal-message";
    messageElement.textContent = message;

    modalContent.appendChild(messageElement);
    publishModal.appendChild(modalContent);
    document.body.appendChild(publishModal);
  } else {
    // Update the message
    const messageElement = publishModal.querySelector("#publish-modal-message");
    messageElement.textContent = message;

    // Remove any buttons (Retry/Cancel) if they exist
    const buttons = publishModal.querySelector("#publish-modal-buttons");
    if (buttons) {
      buttons.remove();
    }
  }
  if (message === "Publish TX submitted! Confirmation needed.") {
    // Create buttons container
    const buttonsContainer = document.createElement("div");
    buttonsContainer.id = "publish-modal-buttons";
    buttonsContainer.style.marginTop = "20px";
    // Create Close button
    const closeButton = document.createElement("button");
    closeButton.textContent = "Close";
    closeButton.addEventListener("click", () => {
      closePublishModal();
    });
    buttonsContainer.appendChild(closeButton);
    // Append button to modal content
    const modalContent = publishModal.firstChild;
    modalContent.appendChild(buttonsContainer);
  }
}

function closePublishModal() {
  if (publishModal) {
    document.body.removeChild(publishModal);
    publishModal = null;
  }
}

function showPublishErrorModal(errorMessage, onRetry, onCancel) {
  if (publishModal) {
    // Update the message
    const messageElement = publishModal.querySelector("#publish-modal-message");
    messageElement.textContent = errorMessage;

    // Remove any existing buttons
    const existingButtons = publishModal.querySelector("#publish-modal-buttons");
    if (existingButtons) {
      existingButtons.remove();
    }

    // Create buttons container
    const buttonsContainer = document.createElement("div");
    buttonsContainer.id = "publish-modal-buttons";
    buttonsContainer.style.marginTop = "20px";

    // Create Retry button
    const retryButton = document.createElement("button");
    retryButton.textContent = "Retry";
    retryButton.style.marginRight = "10px";
    retryButton.addEventListener("click", () => {
      onRetry();
    });

    // Create Cancel button
    const cancelButton = document.createElement("button");
    cancelButton.textContent = "Cancel";
    cancelButton.addEventListener("click", () => {
      onCancel();
    });

    buttonsContainer.appendChild(retryButton);
    buttonsContainer.appendChild(cancelButton);

    // Append buttons to modal content
    const modalContent = publishModal.firstChild;
    modalContent.appendChild(buttonsContainer);
  }
}

async function publishWithFeedback(publishParams) {
  return new Promise(async (resolve, reject) => {
    async function attemptPublish() {
      try {
        // Show modal with "Attempting to publish, please wait..."
        showPublishModal("Attempting to publish, please wait...");
        const response = await qortalRequest(publishParams);
        // Close modal
        resolve(response);
        showPublishModal("Publish TX submitted! Confirmation needed.");
      } catch (error) {
        // Update modal to show error message and Retry/Cancel buttons
        showPublishErrorModal(
          `Publishing failed: ${error.message}`,
          () => {
            // On Retry
            attemptPublish();
          },
          () => {
            // On Cancel
            closePublishModal();
            reject(error);
          }
        );
      }
    }
    await attemptPublish();
  });
}

// ===== Publish helpers: new actions (Add file/folder/New text) =====

function guessServiceFromFilename(filename) {
  const lower = String(filename || "").toLowerCase();
  if (/(\.jpg|\.jpeg|\.png|\.gif|\.webp)$/.test(lower)) {
    return "IMAGE";
  }
  if (/(\.mp4|\.m4v|\.webm|\.ogv)$/.test(lower)) {
    return "VIDEO";
  }
  if (/(\.mp3|\.wav|\.ogg|\.m4a|\.aac)$/.test(lower)) {
    return "AUDIO";
  }
  if (/\.json$/.test(lower)) {
    return "JSON";
  }
  if (/(\.txt|\.md|\.csv|\.log)$/.test(lower)) {
    return "DOCUMENT";
  }
  if (/\.pdf$/.test(lower)) {
    return "DOCUMENT";
  }
  return "FILE";
}

function defaultIdentifierFromFileName(filename) {
  const base =
    String(filename || "")
      .split("/")
      .pop() || "";
  const i = base.lastIndexOf(".");
  return i > 0 ? base.slice(0, i) : base;
}

function safeIdentifierFromPath(path) {
  const p = String(path || "").replace(/^\.+\/?/, "");
  return p.replace(/[\\/]+/g, "_");
}

function applyMetadataToParams(target, md) {
  if (!md) {
    return;
  }
  const fields = ["filename", "title", "description", "category"];
  for (const k of fields) {
    if (md[k]) {
      target[k] = md[k];
    } else {
      delete target[k];
    }
  }
  if (md["tags"]) {
    const tagsArray = String(md["tags"])
      .split(",")
      .map((t) => t.trim())
      .filter(Boolean);
    for (let i = 1; i <= 5; i++) {
      if (tagsArray[i - 1]) {
        target[`tag${i}`] = tagsArray[i - 1];
      } else {
        delete target[`tag${i}`];
      }
    }
  } else {
    for (let i = 1; i <= 5; i++) {
      delete target[`tag${i}`];
    }
  }
}

function openPublishDetailsDialog(defaults) {
  return new Promise((resolve) => {
    const modalOverlay = document.createElement("div");
    Object.assign(modalOverlay.style, {
      position: "fixed",
      top: "0",
      left: "0",
      width: "100%",
      height: "100%",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      zIndex: "1000",
    });
    const modalContent = document.createElement("div");
    Object.assign(modalContent.style, {
      backgroundColor: "#2d3749",
      color: "#c9d2d9",
      padding: "20px",
      borderRadius: "12px",
      width: "90%",
      maxWidth: "520px",
      fontFamily: "'Lexend', sans-serif",
      lineHeight: "1.6",
    });
    const title = document.createElement("div");
    title.textContent = "Publish details";
    title.style.fontWeight = "600";
    title.style.marginBottom = "10px";

    const form = document.createElement("form");
    form.innerHTML = `
      <label style="display:block;margin-top:8px;">Service:
        <input name="service" type="text" style="width:100%;padding:6px;margin-top:4px;" placeholder="e.g. IMAGE, DOCUMENT" />
      </label>
      <label style="display:block;margin-top:8px;">Identifier (optional):
        <input name="identifier" type="text" style="width:100%;padding:6px;margin-top:4px;" placeholder="identifier or blank for default" />
      </label>
      <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px;">
        <button type="button" data-act="cancel">Cancel</button>
        <button type="submit">Next</button>
      </div>
    `;
    const svcInput = form.querySelector('input[name="service"]');
    const idInput = form.querySelector('input[name="identifier"]');
    if (svcInput) {
      svcInput.value = defaults?.service || "";
    }
    if (idInput) {
      idInput.value = defaults?.identifier || "";
    }
    form.querySelector('[data-act="cancel"]').addEventListener("click", () => {
      document.body.removeChild(modalOverlay);
      resolve(null);
    });
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const svc = String(svcInput.value || "")
        .trim()
        .toUpperCase();
      const ident = String(idInput.value || "").trim();
      document.body.removeChild(modalOverlay);
      resolve({ service: svc, identifier: ident });
    });
    modalContent.appendChild(title);
    modalContent.appendChild(form);
    modalOverlay.appendChild(modalContent);
    document.body.appendChild(modalOverlay);
  });
}

async function handlePublishAddFile() {
  try {
    if (!isAuthenticated || !userName || userName === "Name unavailable") {
      alert("Authenticate and select a name first.");
      return;
    }
    // Pick a file
    const inp = document.createElement("input");
    inp.type = "file";
    const file = await new Promise((resolve, reject) => {
      inp.onchange = (e) => {
        const f = /** @type {HTMLInputElement} */ (e.target).files?.[0] || null;
        resolve(f);
      };
      inp.onerror = reject;
      inp.click();
    });
    if (!file) {
      return;
    }
    const svcGuess = guessServiceFromFilename(file.name);
    const identGuess = defaultIdentifierFromFileName(file.name);
    const details = await openPublishDetailsDialog({ service: svcGuess, identifier: identGuess });
    if (!details) {
      return;
    }
    const md = await openMetadataEditorDialog({ filename: file.name });
    if (md === null) {
      return;
    }
    const params = {
      action: "PUBLISH_QDN_RESOURCE",
      name: userName,
      service: details.service,
      identifier: details.identifier || "",
      file,
    };
    applyMetadataToParams(params, md);
    await publishWithFeedback(params);
    // Refresh data
    showSpinner();
    try {
      await loadAllResults();
      buildSidebarTree();
      applyServiceFilter();
      await fetchPage();
    } finally {
      hideSpinner();
    }
  } catch (e) {
    alert("Publish failed: " + (e?.message || e));
  }
}

async function handlePublishAddFolder() {
  try {
    if (!isAuthenticated || !userName || userName === "Name unavailable") {
      alert("Authenticate and select a name first.");
      return;
    }
    const inp = document.createElement("input");
    inp.type = "file";
    // @ts-ignore - webkitdirectory is widely supported in Chromium-based browsers
    inp.webkitdirectory = true;
    inp.multiple = true;
    const files = await new Promise((resolve, reject) => {
      inp.onchange = (e) => {
        const list = /** @type {HTMLInputElement} */ (e.target).files;
        resolve(list ? Array.from(list) : []);
      };
      inp.onerror = reject;
      inp.click();
    });
    if (!files || files.length === 0) {
      return;
    }
    // Suggest service FILE for mixed folders
    const details = await openPublishDetailsDialog({ service: "FILE", identifier: "" });
    if (!details) {
      return;
    }
    const md = await openMetadataEditorDialog({});
    if (md === null) {
      return;
    }
    showPublishModal(`Publishing ${files.length} files…`);
    try {
      const resources = files.map((f) => {
        const rel = /** @type {any} */ (f).webkitRelativePath || f.name;
        const ident = safeIdentifierFromPath(rel);
        const r = {
          name: userName,
          service: details.service,
          identifier: ident || "default",
          file: f,
          filename: f.name,
        };
        applyMetadataToParams(r, md);
        return r;
      });
      const response = await qortalRequest({
        action: "PUBLISH_MULTIPLE_QDN_RESOURCES",
        resources,
      });
      console.log("Folder publish response:", response);
      // Reload data
      await loadAllResults();
      buildSidebarTree();
      applyServiceFilter();
      await fetchPage();
    } finally {
      closePublishModal();
    }
  } catch (e) {
    closePublishModal();
    alert("Folder publish failed: " + (e?.message || e));
  }
}

// ===== Compose (New text) page =====
let composeMetadata = {};

async function openComposePage({ service, identifier, content } = {}) {
  composeMetadata = {};
  const svcEl = document.getElementById("compose-service");
  const idEl = document.getElementById("compose-identifier");
  const txt = document.getElementById("compose-text");
  const sum = document.getElementById("compose-metadata-summary");
  if (svcEl) {
    /** @type {HTMLInputElement} */ (svcEl).value = (service || "DOCUMENT").toString();
  }
  if (idEl) {
    /** @type {HTMLInputElement} */ (idEl).value = (identifier || "").toString();
  }
  if (txt) {
    /** @type {HTMLTextAreaElement} */ (txt).value = (content || "").toString();
  }
  if (sum) {
    sum.textContent = "";
  }
  showSection("compose");
  // Wire one-time handlers
  const editBtn = document.getElementById("compose-edit-metadata");
  if (editBtn && editBtn.dataset.bound !== "1") {
    editBtn.dataset.bound = "1";
    editBtn.addEventListener("click", async () => {
      const updated = await openMetadataEditorDialog(composeMetadata || {});
      if (updated) {
        composeMetadata = updated;
        const keys = Object.keys(updated).filter(
          (k) => updated[k] && String(updated[k]).trim() !== ""
        );
        const sumEl = document.getElementById("compose-metadata-summary");
        if (sumEl) {
          sumEl.textContent = keys.length > 0 ? `${keys.length} field(s) set` : "";
        }
      }
    });
  }
  const backBtn = document.getElementById("compose-back-btn");
  if (backBtn && backBtn.dataset.bound !== "1") {
    backBtn.dataset.bound = "1";
    backBtn.addEventListener("click", async () => {
      showSection(searchModeActive ? "search" : "content");
    });
  }
  const pubBtn = document.getElementById("compose-publish");
  if (pubBtn && pubBtn.dataset.bound !== "1") {
    pubBtn.dataset.bound = "1";
    pubBtn.addEventListener("click", async () => {
      try {
        if (!isAuthenticated || !userName || userName === "Name unavailable") {
          alert("Authenticate and select a name first.");
          return;
        }
        const svc = /** @type {HTMLInputElement} */ (
          document.getElementById("compose-service")
        ).value
          .trim()
          .toUpperCase();
        const ident = /** @type {HTMLInputElement} */ (
          document.getElementById("compose-identifier")
        ).value.trim();
        const text = /** @type {HTMLTextAreaElement} */ (document.getElementById("compose-text"))
          .value;
        if (!svc) {
          alert("Enter a service (e.g. DOCUMENT, JSON)");
          return;
        }
        const params = {
          action: "PUBLISH_QDN_RESOURCE",
          name: userName,
          service: svc,
          identifier: ident || "",
          file: new Blob([text || ""], {
            type: svc === "JSON" ? "application/json" : "text/plain",
          }),
        };
        applyMetadataToParams(params, composeMetadata);
        await publishWithFeedback(params);
        // Refresh view
        showSpinner();
        try {
          await loadAllResults();
          buildSidebarTree();
          applyServiceFilter();
          await fetchPage();
        } finally {
          hideSpinner();
        }
        showSection("content");
      } catch (e) {
        alert("Publish failed: " + (e?.message || e));
      }
    });
  }
}

window.addEventListener("beforeunload", () => {
  const el = document.querySelector("#inline-viewer > *[data-bloburl]");
  if (el && el.dataset.bloburl) {
    try {
      URL.revokeObjectURL(el.dataset.bloburl);
    } catch {}
  }
});

const searchBtn = document.getElementById("search-button");
if (searchBtn) {
  searchBtn.addEventListener("click", async () => {
    if (searchModeActive) {
      // Toggle off: same behavior as sidebar "Back to My Files"
      setSearchMode(false);
      showSpinner();
      try {
        await fetchPage();
      } finally {
        hideSpinner();
      }
    } else {
      setSearchMode(true);
      const sp = document.getElementById("search-page");
      const ph = sp ? sp.querySelector(".search-placeholder") : null;
      if (ph) {
        ph.textContent = "Search is coming soon…";
      }
    }
  });
}

function updateSidebarBanner() {
  const nm = document.getElementById("sidebar-name");
  const ctxBtn = document.getElementById("sidebar-context");
  const exitBtn = document.getElementById("sidebar-exit-search");
  if (searchModeActive) {
    if (ctxBtn) {
      ctxBtn.disabled = false;
      ctxBtn.textContent = "Search Results";
    }
    if (exitBtn) {
      exitBtn.style.display = "inline-block";
    }
  } else {
    if (ctxBtn) {
      ctxBtn.disabled = true;
      ctxBtn.innerHTML =
        'My Files — <span id="sidebar-name">' + (userName || "(not authenticated)") + "</span>";
    }
    if (exitBtn) {
      exitBtn.style.display = "none";
    }
  }
  if (nm) {
    nm.textContent = userName || "(not authenticated)";
  }
}

const previewBackBtn = document.getElementById("preview-back-btn");
if (previewBackBtn) {
  previewBackBtn.addEventListener("click", () => {
    // Return to Search if we came from Search mode; otherwise back to My Files
    showSection(searchModeActive ? "search" : "content");
  });
}

// Sidebar banner button wiring
const sidebarContextBtn = document.getElementById("sidebar-context");
if (sidebarContextBtn) {
  sidebarContextBtn.addEventListener("click", () => {
    if (searchModeActive) {
      showSection("search");
    }
  });
}
const sidebarExitBtn = document.getElementById("sidebar-exit-search");
if (sidebarExitBtn) {
  sidebarExitBtn.addEventListener("click", async () => {
    setSearchMode(false);
    showSpinner();
    try {
      await fetchPage();
    } finally {
      hideSpinner();
    }
  });
}

// ===== Search UI (form + results) =====
function initSearchUI() {
  const form = document.getElementById("search-form");
  const resultsHost = document.getElementById("search-results");
  const moreWrap = document.getElementById("search-more");
  const moreBtn = document.getElementById("search-load-more");
  const resetBtn = document.getElementById("search-reset");
  const summary = document.getElementById("search-summary");
  if (!form || !resultsHost || !moreBtn || !summary) {
    return;
  }
  if (form.dataset.bound === "1") {
    // Ensure summary reflects current state when toggling back
    renderSearchResults();
    return;
  }
  form.dataset.bound = "1";

  // Restore last query
  try {
    const raw = localStorage.getItem(LS_LAST_SEARCH_KEY);
    if (raw) {
      const p = JSON.parse(raw);
      applySearchParamsToForm(form, p);
      searchState.params = p;
      searchState.limit = Number(p.limit) || 100;
    }
  } catch {}

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    await performSearch({ reset: true });
  });
  if (resetBtn) {
    resetBtn.addEventListener("click", () => {
      form.reset();
      searchState = {
        params: null,
        results: [],
        offset: 0,
        limit: 100,
        hasMore: false,
        inFlight: false,
      };
      resultsHost.innerHTML = "";
      summary.textContent = "";
      if (moreWrap) {
        moreWrap.style.display = "none";
      }
      try {
        localStorage.removeItem(LS_LAST_SEARCH_KEY);
      } catch {}
    });
  }
  moreBtn.addEventListener("click", async () => {
    await performSearch({ reset: false });
  });
}

function readSearchParamsFromForm() {
  const form = document.getElementById("search-form");
  if (!form) {
    return null;
  }
  const get = (id) => {
    const el = document.getElementById(id);
    return el ? el.value.trim() : "";
  };
  const getBool = (id) => {
    const el = document.getElementById(id);
    return !!(el && /** @type {HTMLInputElement} */ (el).checked);
  };
  const getNum = (id, d) => {
    const el = document.getElementById(id);
    const v = el ? parseInt(/** @type {HTMLSelectElement} */ (el).value, 10) : d;
    return Number.isFinite(v) && v > 0 ? v : d;
  };
  // Normalize service to uppercase as QDN expects exact case (e.g., APP)
  let service = get("search-service");
  if (service) {
    service = service.toUpperCase();
  }
  const p = {
    query: get("search-query"),
    name: get("search-name"),
    identifier: get("search-identifier"),
    service,
    prefix: getBool("search-prefix"),
    includeMetadata: getBool("search-include-metadata"),
    exactMatchNames: getBool("search-exact-names"),
    reverse: getBool("search-reverse"),
    limit: getNum("search-limit", 100),
  };
  return p;
}

function applySearchParamsToForm(form, p) {
  const setVal = (id, v) => {
    const el = /** @type {HTMLInputElement|HTMLSelectElement|null} */ (document.getElementById(id));
    if (el != null && typeof v !== "undefined") {
      el.value = String(v);
    }
  };
  const setChk = (id, v) => {
    const el = /** @type {HTMLInputElement|null} */ (document.getElementById(id));
    if (el != null) {
      el.checked = !!v;
    }
  };
  setVal("search-query", p.query || "");
  setVal("search-name", p.name || "");
  setVal("search-identifier", p.identifier || "");
  setVal("search-service", p.service || "");
  setChk("search-prefix", !!p.prefix);
  setChk("search-include-metadata", !!p.includeMetadata);
  setChk("search-exact-names", !!p.exactMatchNames);
  setChk("search-reverse", p.reverse !== false);
  setVal("search-limit", String(p.limit || 100));
}

function buildSearchUrl(params, offset) {
  const u = new URL(location.origin + "/arbitrary/resources/search");
  const add = (k, v) => {
    if (v === undefined || v === null) {
      return;
    }
    const s = String(v).trim();
    if (s.length === 0) {
      return;
    }
    u.searchParams.append(k, s);
  };
  add("query", params.query);
  add("identifier", params.identifier);
  add("name", params.name);
  add("service", params.service);
  if (params.prefix) {
    add("prefix", true);
  }
  if (params.includeMetadata) {
    add("includemetadata", true);
  }
  if (params.exactMatchNames) {
    add("exactmatchnames", true);
  }
  add("reverse", params.reverse !== false);
  add("limit", params.limit || 100);
  add("offset", offset || 0);
  // Return newest-first results by default
  add("mode", "ALL");
  return u.toString();
}

async function performSearch({ reset }) {
  if (searchState.inFlight) {
    return;
  }
  const form = document.getElementById("search-form");
  const resultsHost = document.getElementById("search-results");
  const summary = document.getElementById("search-summary");
  const moreWrap = document.getElementById("search-more");
  if (!form || !resultsHost || !summary) {
    return;
  }
  const params = readSearchParamsFromForm();
  if (!params || (!params.query && !params.identifier && !params.name && !params.service)) {
    summary.textContent = "Enter at least one field to search.";
    return;
  }
  searchState.params = params;
  searchState.limit = Number(params.limit) || 100;
  if (reset) {
    searchState.results = [];
    searchState.offset = 0;
    searchState.hasMore = false;
    resultsHost.innerHTML = "";
  }
  const url = buildSearchUrl(params, searchState.offset);
  try {
    searchState.inFlight = true;
    summary.textContent = "Searching…";
    const resp = await fetch(url);
    if (!resp.ok) {
      throw new Error("Search failed");
    }
    const items = await resp.json();
    // Normalize/sort by updated if reverse not handled
    if (!params.reverse) {
      items.sort((a, b) => (a.updated || a.created || 0) - (b.updated || b.created || 0));
    }
    searchState.results.push(...items);
    searchState.offset += items.length;
    searchState.hasMore = items.length >= searchState.limit;
    try {
      localStorage.setItem(LS_LAST_SEARCH_KEY, JSON.stringify(params));
    } catch {}
    renderSearchResults();
    if (moreWrap) {
      moreWrap.style.display = searchState.hasMore ? "block" : "none";
    }
  } catch (e) {
    summary.textContent = "Search error: " + (e?.message || e);
  } finally {
    searchState.inFlight = false;
  }
}

function renderSearchResults() {
  const resultsHost = document.getElementById("search-results");
  const summary = document.getElementById("search-summary");
  const moreWrap = document.getElementById("search-more");
  if (!resultsHost || !summary) {
    return;
  }
  const items = searchState.results || [];
  const total = items.length;
  if (total === 0) {
    resultsHost.innerHTML = "";
    summary.textContent = searchState.inFlight ? "Searching…" : "No results yet.";
    if (moreWrap) {
      moreWrap.style.display = "none";
    }
    return;
  }
  summary.textContent = `${total} result${total === 1 ? "" : "s"}${searchState.hasMore ? " (more available)" : ""}`;
  // Build table with inline previews
  let html =
    "<table><tr><th>Name</th><th>Service</th><th>Identifier</th><th>Title</th><th>Preview</th><th>Size</th><th>Updated</th><th>Open</th></tr>";
  for (const r of items) {
    const name = r.name || "";
    const svc = r.service || "";
    const ident =
      r.identifier === undefined || r.identifier === null || r.identifier === ""
        ? "default"
        : r.identifier;
    const title = r.metadata && r.metadata.title ? r.metadata.title : "";
    const size = Number(r.size || 0).toLocaleString();
    const upd = new Date(r.updated || r.created || 0);
    const updated = isNaN(upd) ? "" : upd.toLocaleString();
    const previewCell = generatePreviewHTML(r, name, ident);
    const row = `
      <tr>
        <td>${escapeHtml(name)}</td>
        <td>${escapeHtml(svc)}</td>
        <td title="${escapeHtml(ident)}">${escapeHtml(ident)}</td>
        <td title="${escapeHtml(title)}">${escapeHtml(title)}</td>
        <td>${previewCell}</td>
        <td style="text-align:right;">${size}</td>
        <td>${escapeHtml(updated)}</td>
        <td><span class="open-preview" data-name="${escapeAttr(name)}" data-service="${escapeAttr(svc)}" data-identifier="${escapeAttr(ident)}">Open</span></td>
      </tr>`;
    html += row;
  }
  html += "</table>";
  resultsHost.innerHTML = html;
  // Initialize inline preview holders within search results only
  initPreviews(resultsHost);
  // Wire up preview links
  resultsHost.querySelectorAll(".open-preview").forEach((el) => {
    el.addEventListener("click", () => {
      const nm = el.getAttribute("data-name") || "";
      const svc = el.getAttribute("data-service") || "";
      const ident = el.getAttribute("data-identifier") || "default";
      openPreviewPage({ name: nm, service: svc, identifier: ident });
    });
  });
}

function escapeHtml(s) {
  return String(s || "").replace(
    /[&<>\"]/g,
    (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]
  );
}
function escapeAttr(s) {
  return escapeHtml(s).replace(/"/g, "&quot;");
}

// ===== Global media controller =====
const mediaControls = document.getElementById("media-controls");
const mediaPlayPause = document.getElementById("media-play-pause");
const mediaStop = document.getElementById("media-stop");
const mediaTitle = document.getElementById("media-title");
const globalMediaHost = document.createElement("div");
globalMediaHost.id = "global-media-host";
globalMediaHost.style.display = "none";
document.body.appendChild(globalMediaHost);

let globalMedia = { el: null, ctx: null, blobUrl: null };

function setMediaTitle(ctx) {
  if (!mediaTitle) {
    return;
  }
  if (!ctx) {
    mediaTitle.textContent = "";
    mediaTitle.title = "";
    return;
  }
  const t = `${ctx.service || ""} — ${ctx.identifier || "default"} — ${ctx.name || ""}`.trim();
  mediaTitle.textContent = t;
  mediaTitle.title = t;
}

function showMediaControls(show) {
  if (!mediaControls) {
    return;
  }
  mediaControls.style.display = show ? "inline-flex" : "none";
  if (!show) {
    setMediaTitle(null);
  }
}

function promoteMedia(el, ctx) {
  if (!el) {
    return;
  }
  try {
    globalMediaHost.appendChild(el);
  } catch {}
  globalMedia.el = el;
  globalMedia.ctx = ctx || null;
  globalMedia.blobUrl = el.dataset && el.dataset.bloburl ? el.dataset.bloburl : null;
  setMediaTitle(ctx);
  showMediaControls(true);
}

function releaseGlobalMedia() {
  if (globalMedia.el && globalMedia.el.parentElement === globalMediaHost) {
    try {
      globalMediaHost.removeChild(globalMedia.el);
    } catch {}
  }
  globalMedia.el = null;
  globalMedia.ctx = null;
  globalMedia.blobUrl = null;
  showMediaControls(false);
}

if (mediaPlayPause) {
  mediaPlayPause.addEventListener("click", () => {
    const el = globalMedia.el;
    if (!el) {
      return;
    }
    if (el.paused) {
      el.play().catch(() => {});
    } else {
      el.pause();
    }
  });
}
if (mediaStop) {
  mediaStop.addEventListener("click", () => {
    const el = globalMedia.el;
    if (!el) {
      return;
    }
    try {
      el.pause();
      el.currentTime = 0;
    } catch {}
    if (globalMedia.blobUrl) {
      try {
        URL.revokeObjectURL(globalMedia.blobUrl);
      } catch {}
    }
    releaseGlobalMedia();
  });
}

let currentPreviewCtx = null;

function isTextDisplayedInPreview() {
  const container = document.getElementById("preview-container");
  if (!container) {
    return false;
  }
  if (container.dataset && container.dataset.textual != null) {
    return container.dataset.textual === "1";
  }
  const el = container.firstElementChild;
  if (!el) {
    return false;
  }
  if (el.classList && el.classList.contains("inline-text-editor")) {
    return true;
  }
  if (el.tagName === "IFRAME" && el.getAttribute("srcdoc") != null) {
    return true;
  }
  if (el.tagName === "PRE") {
    const ws =
      el.style.whiteSpace || (window.getComputedStyle ? getComputedStyle(el).whiteSpace : "");
    return String(ws).toLowerCase().includes("pre-wrap");
  }
  const pre = container.querySelector(":scope > div pre");
  if (pre) {
    const ws =
      pre.style.whiteSpace || (window.getComputedStyle ? getComputedStyle(pre).whiteSpace : "");
    return String(ws).toLowerCase().includes("pre-wrap");
  }
  return false;
}

function updatePreviewActionsState() {
  const editBtn = document.getElementById("preview-edit");
  const replaceBtn = document.getElementById("preview-replace");
  const deleteBtn = document.getElementById("preview-delete");
  if (!editBtn || !replaceBtn || !deleteBtn) {
    return;
  }
  const textual = isTextDisplayedInPreview();
  // Update button tooltips to reflect behavior; labels remain stable
  editBtn.title = textual ? "Edit inline" : "Edit (choose file)";
  replaceBtn.title = "Replace (choose file)";
  // Ownership: show actions only if previewing an item published by the current selected name
  const isOwner = !!(
    currentPreviewCtx &&
    currentPreviewCtx.name &&
    userName &&
    currentPreviewCtx.name === userName
  );
  [editBtn, replaceBtn, deleteBtn].forEach((btn) => {
    btn.style.display = isOwner ? "inline-block" : "none";
    btn.disabled = !isOwner;
  });
}