// Drag and drop
const dropZone = document.getElementById("dropZone");
const fileInput = document.getElementById("fileInput");
const dropContent = document.getElementById("dropContent");
const previewContainer = document.getElementById("previewContainer");
const previewImage = document.getElementById("previewImage");

if (dropZone) {
  ["dragenter", "dragover"].forEach((evt) =>
    dropZone.addEventListener(evt, (e) => {
      e.preventDefault();
      dropZone.classList.add("drag-over");
    }),
  );
  ["dragleave", "drop"].forEach((evt) =>
    dropZone.addEventListener(evt, (e) => {
      e.preventDefault();
      dropZone.classList.remove("drag-over");
    }),
  );
  dropZone.addEventListener("drop", (e) => {
    const files = e.dataTransfer.files;
    if (files.length) {
      fileInput.files = files;
      showPreview(files[0]);
    }
  });
  fileInput.addEventListener("change", () => {
    if (fileInput.files.length) showPreview(fileInput.files[0]);
  });
}

function showPreview(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    previewImage.src = e.target.result;
    dropContent.style.display = "none";
    previewContainer.style.display = "block";
  };
  reader.readAsDataURL(file);
}

function removePreview(e) {
  e.preventDefault();
  e.stopPropagation();
  fileInput.value = "";
  previewContainer.style.display = "none";
  dropContent.style.display = "block";
}

// Loading animation
function startLoading() {
  document.getElementById("spinner").style.display = "block";
  document.getElementById("loadingBar").style.display = "block";
  const progress = document.getElementById("loadingProgress");
  progress.style.width = "0%";
  let i = 0;
  const interval = setInterval(() => {
    if (i >= 100) clearInterval(interval);
    progress.style.width = i + "%";
    i += 10;
  }, 100);
}

function resetApp() {
  const resultDiv = document.getElementById("resultContainer");
  if (resultDiv) resultDiv.style.display = "none";
  const form = document.querySelector("form");
  if (form) form.reset();
  document.getElementById("spinner").style.display = "none";
  document.getElementById("loadingBar").style.display = "none";
  document.getElementById("loadingProgress").style.width = "0%";
  if (previewContainer) previewContainer.style.display = "none";
  if (dropContent) dropContent.style.display = "block";
}