(() => {
  const dropzones = document.querySelectorAll('[data-dropzone]');
  dropzones.forEach((dropzone) => {
    const input = dropzone.querySelector('input[type="file"]');
    const fileLabel = dropzone.querySelector('[data-file-name]');
    if (!input || !fileLabel) return;

    const updateName = (file) => {
      if (!file) {
        fileLabel.textContent = 'Belum ada file dipilih';
        return;
      }
      fileLabel.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
    };

    input.addEventListener('change', (event) => {
      updateName(event.target.files[0]);
    });

    ['dragenter', 'dragover'].forEach((eventName) => {
      dropzone.addEventListener(eventName, (event) => {
        event.preventDefault();
        dropzone.classList.add('is-dragover');
      });
    });

    ['dragleave', 'drop'].forEach((eventName) => {
      dropzone.addEventListener(eventName, () => {
        dropzone.classList.remove('is-dragover');
      });
    });

    dropzone.addEventListener('drop', (event) => {
      event.preventDefault();
      if (!event.dataTransfer.files.length) return;
      input.files = event.dataTransfer.files;
      updateName(event.dataTransfer.files[0]);
    });
  });
})();