{#
  Mapping conveniences over rules the server enforces anyway.

  Everything is delegated from `document`, because each step swaps the whole
  block: a listener bound to a select would be thrown away with it.
#}
<script>
  (function () {
    let selectedSource = "";

    function sync(workbench) {
      if (!workbench) return;
      const rows = Array.from(workbench.querySelectorAll("[data-map-target]"));
      const selects = rows.map((row) => row.querySelector("[data-source-select]"));
      const taken = new Set(selects.map((select) => select.value).filter(Boolean));
      for (const select of selects) {
        for (const option of select.options) {
          option.disabled = option.value !== "" && option.value !== select.value && taken.has(option.value);
        }
      }

      rows.forEach((row, index) => {
        const option = selects[index].selectedOptions[0];
        row.classList.toggle("is-mapped", Boolean(selects[index].value));
        row.querySelector("[data-example-cell]").textContent = option?.dataset.example ?? "";
        row.querySelector("[data-clear-mapping]").disabled = !selects[index].value;
      });
      workbench.querySelectorAll("[data-source-chip]").forEach((chip) => {
        chip.classList.toggle("is-mapped", taken.has(chip.dataset.sourcePosition));
        chip.classList.toggle("is-selected", chip.dataset.sourcePosition === selectedSource);
      });

      const summary = document.querySelector("[data-mapping-summary]");
      if (summary) {
        const mapped = taken.size;
        summary.querySelector("[data-mapped-count]").textContent = mapped;
        summary.querySelector("[data-attention-count]").textContent = rows.length - mapped;
      }
    }

    function assign(workbench, position, row) {
      if (!position || !row) return;
      workbench.querySelectorAll("[data-source-select]").forEach((select) => {
        if (select.value === position) select.value = "";
      });
      row.querySelector("[data-source-select]").value = position;
      selectedSource = "";
      row.classList.add("just-mapped");
      setTimeout(function () { row.classList.remove("just-mapped"); }, 320);
      sync(workbench);
    }

    document.addEventListener("change", function (event) {
      if (event.target.matches("[data-source-select]")) {
        sync(event.target.closest("[data-mapping-workbench]"));
      }
    });
    document.addEventListener("click", function (event) {
      const chip = event.target.closest("[data-source-chip]");
      if (chip) {
        selectedSource = selectedSource === chip.dataset.sourcePosition ? "" : chip.dataset.sourcePosition;
        sync(chip.closest("[data-mapping-workbench]"));
        return;
      }
      const clear = event.target.closest("[data-clear-mapping]");
      if (clear) {
        clear.closest("[data-map-target]").querySelector("[data-source-select]").value = "";
        sync(clear.closest("[data-mapping-workbench]"));
        return;
      }
      const row = event.target.closest("[data-map-target]");
      if (row && selectedSource && !event.target.closest("select")) {
        assign(row.closest("[data-mapping-workbench]"), selectedSource, row);
      }
    });
    document.addEventListener("dragstart", function (event) {
      const chip = event.target.closest("[data-source-chip]");
      if (!chip) return;
      event.dataTransfer.setData("text/plain", chip.dataset.sourcePosition);
      event.dataTransfer.effectAllowed = "move";
      chip.classList.add("is-dragging");
    });
    document.addEventListener("dragover", function (event) {
      const row = event.target.closest("[data-map-target]");
      if (!row) return;
      event.preventDefault();
      row.classList.add("drop-ready");
      event.dataTransfer.dropEffect = "move";
    });
    document.addEventListener("dragleave", function (event) {
      const row = event.target.closest("[data-map-target]");
      if (row && !row.contains(event.relatedTarget)) row.classList.remove("drop-ready");
    });
    document.addEventListener("drop", function (event) {
      const row = event.target.closest("[data-map-target]");
      if (!row) return;
      event.preventDefault();
      row.classList.remove("drop-ready");
      assign(row.closest("[data-mapping-workbench]"), event.dataTransfer.getData("text/plain"), row);
    });
    document.addEventListener("dragend", function (event) {
      event.target.closest("[data-source-chip]")?.classList.remove("is-dragging");
      document.querySelectorAll("[data-map-target].drop-ready").forEach((row) => row.classList.remove("drop-ready"));
    });
    document.body.addEventListener("htmx:afterSwap", function (event) {
      selectedSource = "";
      sync(event.detail.target.querySelector?.("[data-mapping-workbench]"));
    });
    sync(document.querySelector("[data-mapping-workbench]"));
  })();
</script>