document.addEventListener('DOMContentLoaded', function () {
  // Get elements
  const filesContainer = document.getElementById('files-container');
  const globalDropzone = document.getElementById('global-dropzone');

  if (!filesContainer || !globalDropzone) return;

  // Track if we're dragging items from within the app
  let internalDrag = false;

  // Handle drag start on files/folders
  filesContainer.addEventListener('dragstart', function (e) {
    const item = e.target.closest('.file-item, .folder-item');
    if (item) {
      // Set data for drag operation
      e.dataTransfer.setData('text/plain', JSON.stringify({
        id: item.dataset.id,
        type: item.classList.contains('folder-item') ? 'folder' : 'file',
        name: item.querySelector('.item-name').textContent
      }));

      // Mark as internal drag
      internalDrag = true;

      // Add dragging class for styling
      item.classList.add('dragging');
    }
  });

  // Handle drag end
  filesContainer.addEventListener('dragend', function (e) {
    const item = e.target.closest('.file-item, .folder-item');
    if (item) {
      item.classList.remove('dragging');
      internalDrag = false;
    }
  });

  // Handle drag enter on folders
  filesContainer.addEventListener('dragenter', function (e) {
    const folderItem = e.target.closest('.folder-item');
    if (folderItem && internalDrag) {
      folderItem.classList.add('drag-over');
    }
  });

  // Handle drag leave on folders
  filesContainer.addEventListener('dragleave', function (e) {
    const folderItem = e.target.closest('.folder-item');
    if (folderItem) {
      folderItem.classList.remove('drag-over');
    }
  });

  // Handle drag over (prevent default to allow drop)
  filesContainer.addEventListener('dragover', function (e) {
    e.preventDefault();
    // If dragging from within app, don't show global dropzone
    if (internalDrag) {
      globalDropzone.classList.remove('active');
    }
  });

  // Handle drop on folders
  filesContainer.addEventListener('drop', function (e) {
    e.preventDefault();

    const folderItem = e.target.closest('.folder-item');
    if (folderItem && internalDrag) {
      folderItem.classList.remove('drag-over');

      try {
        const dragData = JSON.parse(e.dataTransfer.getData('text/plain'));
        const sourceId = dragData.id;
        const sourceType = dragData.type;
        const targetId = folderItem.dataset.id;

        // Make AJAX call to move item
        moveItem(sourceId, sourceType, targetId);
      } catch (err) {
        console.error('Error processing drop:', err);
      }
    }
  });

  // Function to move item via AJAX
  function moveItem(sourceId, sourceType, targetFolderId) {
    fetch('/files/move', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify({
        item_id: sourceId,
        item_type: sourceType,
        target_folder_id: targetFolderId
      })
    })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // Refresh the page or update the UI
          window.location.reload();
        } else {
          alert('Error: ' + data.error);
        }
      })
      .catch(error => {
        console.error('Error moving item:', error);
        alert('Failed to move item. Please try again.');
      });
  }

  // Global window drag events - only show dropzone for external files
  window.addEventListener('dragover', function (e) {
    e.preventDefault();
    // Only show global dropzone if not dragging internally
    if (!internalDrag) {
      globalDropzone.classList.add('active');
    }
  });

  window.addEventListener('dragleave', function (e) {
    // Check if mouse left the window
    if (e.clientX <= 0 || e.clientY <= 0 ||
      e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
      globalDropzone.classList.remove('active');
    }
  });

  window.addEventListener('drop', function (e) {
    e.preventDefault();
    globalDropzone.classList.remove('active');
  });
});