(() => {
  const manualForm = document.querySelector("#manual-import-form");
  const pastedText = document.getElementById("id_pasted_text");
  const byteCounter = document.getElementById("manual-import-byte-count");
  const copyButton = document.getElementById("copy-bookmarklet");
  const bookmarkletCode = document.getElementById("manual-bookmarklet-code");
  const bookmarkletLink = document.getElementById("manual-bookmarklet");
  if (!manualForm || !pastedText || !byteCounter || !copyButton || !bookmarkletLink) {
    return;
  }

  const maxBytes = Number(manualForm.dataset.pasteLimit || "0");

  const encodeUriForBytes = (value) => new TextEncoder().encode(value).length;
  const updateCount = () => {
    const used = encodeUriForBytes(pastedText.value || "");
    const remaining = Math.max(0, maxBytes - used);
    byteCounter.textContent = `${remaining}`;
    byteCounter.setAttribute("title", `${used} bytes gebruikt`);
  };

  pastedText.addEventListener("input", updateCount, { passive: true });
  updateCount();

  const endpoint = bookmarkletLink.dataset.manualImportEndpoint || "";
  const quotedEndpoint = endpoint.replace(/'/g, "\\'");
  const code = `javascript:(function(){var u=encodeURIComponent(window.location.href);window.open('${quotedEndpoint}?source_url='+u,'_blank');})();`;
  bookmarkletCode.value = code;
  bookmarkletLink.setAttribute("href", code);

  copyButton.addEventListener("click", async () => {
    try {
      await navigator.clipboard.writeText(code);
      copyButton.textContent = "Gekopieerd";
    } catch {
      copyButton.textContent = "Kopieer niet ondersteund";
    }
    setTimeout(() => {
      copyButton.textContent = "Bookmarklet kopiëren";
    }, 2000);
  });
})();