{# Mapping conveniences over rules the server enforces anyway. #}
<script>
  (function () {
    /* Source positions the user has picked out of the palette. The order a
       batch lands in is the palette's order, not the click order, so this only
       has to record membership. */
    const selectedSources = new Set();
    let selectionAnchor = "";

    function chips(workbench) {
      return Array.from(workbench.querySelectorAll("[data-source-chip]"));
    }

    function targets(workbench) {
      return Array.from(workbench.querySelectorAll("[data-map-target]"));
    }

    function sourceSelect(row) {
      return row.querySelector("[data-source-select]");
    }

    function selectedInSourceOrder(workbench) {
      return chips(workbench)
        .map((chip) => chip.dataset.sourcePosition)
        .filter((position) => selectedSources.has(position));
    }

    /* Redraws everything derived from the selects: no state lives anywhere but
       in the selects themselves and the selection set, so any change can just
       call this. */
    function sync(workbench) {
      if (!workbench) return;
      const rows = targets(workbench);
      const selects = rows.map(sourceSelect);

      // Which destination took each source, so the palette can say where a
      // column went and no source can be taken twice.
      const takenBy = new Map();
      rows.forEach((row, index) => {
        if (selects[index].value) takenBy.set(selects[index].value, row.dataset.destinationName);
      });
      for (const select of selects) {
        for (const option of select.options) {
          option.disabled = option.value !== "" && option.value !== select.value && takenBy.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;
      });

      const sourceChips = chips(workbench);
      const order = selectedInSourceOrder(workbench);
      sourceChips.forEach((chip) => {
        const position = chip.dataset.sourcePosition;
        const destination = takenBy.get(position);
        const selected = selectedSources.has(position);
        chip.classList.toggle("is-mapped", Boolean(destination));
        chip.classList.toggle("is-selected", selected);
        chip.setAttribute("aria-pressed", String(selected));
        chip.querySelector("[data-source-target]").textContent = destination ? "→ " + destination : "";
        // The number a selected chip carries is the position it will land in
        // when the batch is placed.
        chip.querySelector("[data-chip-order]").textContent = selected
          ? String(order.indexOf(position) + 1)
          : "";
      });

      workbench.classList.toggle("has-selection", selectedSources.size > 0);
      const count = workbench.querySelector("[data-selection-count]");
      if (count) count.textContent = selectedSources.size + " / " + sourceChips.length;

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

    function flash(row) {
      row.classList.add("just-mapped");
      setTimeout(function () { row.classList.remove("just-mapped"); }, 320);
    }

    function clearSelection(workbench) {
      selectedSources.clear();
      selectionAnchor = "";
      sync(workbench);
    }

    function choose(chip, event) {
      const workbench = chip.closest("[data-mapping-workbench]");
      const position = chip.dataset.sourcePosition;
      if (event.shiftKey && selectionAnchor) {
        const sourceChips = chips(workbench);
        const start = sourceChips.findIndex((item) => item.dataset.sourcePosition === selectionAnchor);
        const end = sourceChips.indexOf(chip);
        if (!event.ctrlKey && !event.metaKey) selectedSources.clear();
        sourceChips.slice(Math.min(start, end), Math.max(start, end) + 1)
          .forEach((item) => selectedSources.add(item.dataset.sourcePosition));
      } else if (event.ctrlKey || event.metaKey) {
        if (selectedSources.has(position)) selectedSources.delete(position);
        else selectedSources.add(position);
        selectionAnchor = position;
      } else {
        selectedSources.clear();
        selectedSources.add(position);
        selectionAnchor = position;
      }
      sync(workbench);
    }

    /* The batch move: `positions` fill consecutive destinations starting at
       `firstRow`. A source can only be in one place, so wherever it sat before
       is cleared first. */
    function assign(workbench, positions, firstRow) {
      if (!positions.length || !firstRow) return;
      const rows = targets(workbench);
      const start = rows.indexOf(firstRow);
      const usable = positions.slice(0, rows.length - start);
      workbench.querySelectorAll("[data-source-select]").forEach((select) => {
        if (usable.includes(select.value)) select.value = "";
      });
      usable.forEach((position, offset) => {
        const row = rows[start + offset];
        sourceSelect(row).value = position;
        flash(row);
      });
      clearSelection(workbench);
    }

    /* The fast path for a file already written in the table's column order:
       first column to first row, and so on. It replaces the whole mapping
       rather than filling the gaps, so what it leaves is exactly what it says. */
    function mapInOrder(workbench) {
      const positions = chips(workbench).map((chip) => chip.dataset.sourcePosition);
      targets(workbench).forEach((row, index) => {
        const position = positions[index] ?? "";
        sourceSelect(row).value = position;
        if (position) flash(row);
      });
      clearSelection(workbench);
    }

    function clearMappings(workbench) {
      workbench.querySelectorAll("[data-source-select]").forEach((select) => { select.value = ""; });
      clearSelection(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 inOrder = event.target.closest("[data-map-in-order]");
      if (inOrder) { mapInOrder(inOrder.closest("[data-mapping-workbench]")); return; }
      const clearAll = event.target.closest("[data-clear-all-mappings]");
      if (clearAll) { clearMappings(clearAll.closest("[data-mapping-workbench]")); return; }
      const all = event.target.closest("[data-select-all-sources]");
      if (all) {
        const workbench = all.closest("[data-mapping-workbench]");
        chips(workbench).forEach((chip) => selectedSources.add(chip.dataset.sourcePosition));
        sync(workbench);
        return;
      }
      const clearSelected = event.target.closest("[data-clear-source-selection]");
      if (clearSelected) { clearSelection(clearSelected.closest("[data-mapping-workbench]")); return; }
      const chip = event.target.closest("[data-source-chip]");
      if (chip) { choose(chip, event); return; }
      const clear = event.target.closest("[data-clear-mapping]");
      if (clear) {
        sourceSelect(clear.closest("[data-map-target]")).value = "";
        sync(clear.closest("[data-mapping-workbench]"));
        return;
      }
      // Anywhere else on a destination row places the current selection there,
      // except on the row's own select, which is the one-at-a-time control.
      const row = event.target.closest("[data-map-target]");
      if (row && selectedSources.size && !event.target.closest("label")) {
        const workbench = row.closest("[data-mapping-workbench]");
        assign(workbench, selectedInSourceOrder(workbench), row);
      }
    });
    document.addEventListener("dragstart", function (event) {
      const chip = event.target.closest("[data-source-chip]");
      if (!chip) return;
      // Dragging an unselected chip is a one-column move, and does not carry a
      // selection the user made elsewhere along with it.
      if (!selectedSources.has(chip.dataset.sourcePosition)) {
        selectedSources.clear();
        selectedSources.add(chip.dataset.sourcePosition);
      }
      const workbench = chip.closest("[data-mapping-workbench]");
      event.dataTransfer.setData("text/plain", selectedInSourceOrder(workbench).join(","));
      event.dataTransfer.effectAllowed = "move";
      chip.classList.add("is-dragging");
      sync(workbench);
    });
    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").split(",").filter(Boolean), 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) {
      selectedSources.clear();
      selectionAnchor = "";
      sync(event.detail.target.querySelector?.("[data-mapping-workbench]"));
    });
    sync(document.querySelector("[data-mapping-workbench]"));
  })();
</script>