document.addEventListener("DOMContentLoaded", () => {
  const dropzones = document.querySelectorAll("[data-import-dropzone]");
  const uploadButtons = document.querySelectorAll(
    "[data-import-upload-trigger]"
  );
  const resetButtons = document.querySelectorAll("[data-import-reset]");
  const feedbackEl = document.querySelector("#import-upload-feedback");

  function showFeedback(message, type = "info") {
    if (!feedbackEl) return;
    feedbackEl.textContent = message;
    feedbackEl.classList.remove("hidden", "success", "error", "info");
    feedbackEl.classList.add(type);
  }

  function hideFeedback() {
    if (!feedbackEl) return;
    feedbackEl.textContent = "";
    feedbackEl.classList.add("hidden");
  }

  dropzones.forEach((zone) => {
    const input = zone.querySelector("input[type='file']");
    const uploadButton = zone
      .closest("[data-import-upload]")
      .querySelector("[data-import-upload-trigger]");
    const resetButton = zone
      .closest("[data-import-upload]")
      .querySelector("[data-import-reset]");

    function enableUpload() {
      if (uploadButton) {
        uploadButton.disabled = false;
      }
      if (resetButton) {
        resetButton.hidden = false;
      }
    }

    function disableUpload() {
      if (uploadButton) {
        uploadButton.disabled = true;
      }
      if (resetButton) {
        resetButton.hidden = true;
      }
    }

    zone.addEventListener("dragover", (event) => {
      event.preventDefault();
      zone.classList.add("dragover");
    });

    zone.addEventListener("dragleave", () => {
      zone.classList.remove("dragover");
    });

    zone.addEventListener("drop", (event) => {
      event.preventDefault();
      zone.classList.remove("dragover");
      if (!event.dataTransfer?.files?.length) {
        return;
      }
      input.files = event.dataTransfer.files;
      enableUpload();
      hideFeedback();
    });

    input.addEventListener("change", () => {
      if (input.files?.length) {
        enableUpload();
        hideFeedback();
      } else {
        disableUpload();
      }
    });

    resetButton?.addEventListener("click", () => {
      input.value = "";
      disableUpload();
      hideFeedback();
    });

    uploadButton?.addEventListener("click", () => {
      if (!input.files?.length) {
        showFeedback(
          "Please select a CSV or XLSX file before uploading.",
          "error"
        );
        return;
      }

      showFeedback("Uploading…", "info");
      uploadButton.disabled = true;
      uploadButton.classList.add("loading");

      // Actual upload logic handled separately (e.g., fetch).
    });
  });
});