document.addEventListener('DOMContentLoaded', function () {
  const imageInput = document.getElementById('image-input');
  const imagePreview = document.getElementById('image-preview');
  const uploadArea = document.getElementById('image-upload-area');

  imageInput.addEventListener('change', function (e) {
    updatePreview();
  });

  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ['dragenter', 'dragover'].forEach(eventName => {
    uploadArea.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, unhighlight, false);
  });

  function highlight() {
    uploadArea.style.borderColor = '#007bff';
    uploadArea.style.background = '#f8f9fa';
  }

  function unhighlight() {
    uploadArea.style.borderColor = '#ccc';
    uploadArea.style.background = '';
  }

  uploadArea.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    imageInput.files = files;
    updatePreview();
  }

  function updatePreview() {
    imagePreview.innerHTML = '';
    const files = imageInput.files;

    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      if (!file.type.match('image.*')) continue;

      const reader = new FileReader();

      reader.onload = function (e) {
        const previewItem = document.createElement('div');
        previewItem.className = 'preview-item';

        const img = document.createElement('img');
        img.src = e.target.result;

        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-image';
        removeBtn.innerHTML = '×';
        removeBtn.onclick = function () {
          previewItem.remove();
          const dt = new DataTransfer();
          const inputFiles = imageInput.files;

          for (let j = 0; j < inputFiles.length; j++) {
            if (j !== i) {
              dt.items.add(inputFiles[j]);
            }
          }

          imageInput.files = dt.files;
        };

        previewItem.appendChild(img);
        previewItem.appendChild(removeBtn);
        imagePreview.appendChild(previewItem);
      };

      reader.readAsDataURL(file);
    }
  }
});