let imageModalOverlay = null;

function openImageModal(imageSrc, imageAlt) {
  // Create modal overlay
  imageModalOverlay = document.createElement('div');
  imageModalOverlay.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4';
  imageModalOverlay.style.cursor = 'zoom-out';
  
  // Create image container
  const imageContainer = document.createElement('div');
  imageContainer.className = 'relative max-w-full max-h-full';
  
  // Create enlarged image
  const enlargedImage = document.createElement('img');
  enlargedImage.src = imageSrc;
  enlargedImage.alt = imageAlt;
  enlargedImage.className = 'max-w-full max-h-full object-contain rounded-lg shadow-2xl';
  
  // Create close button
  const closeButton = document.createElement('button');
  closeButton.innerHTML = '<i class="fas fa-times"></i>';
  closeButton.className = 'absolute -top-4 -right-4 bg-white text-gray-800 w-10 h-10 rounded-full shadow-lg hover:bg-gray-100 transition-colors duration-200 flex items-center justify-center text-xl';
  closeButton.onclick = closeImageModal;
  
  // Add zoom indicator
  const zoomIndicator = document.createElement('div');
  zoomIndicator.innerHTML = '<i class="fas fa-search-minus mr-2"></i>Натисніть, щоб закрити';
  zoomIndicator.className = 'absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm';
  
  imageContainer.appendChild(enlargedImage);
  imageContainer.appendChild(closeButton);
  imageContainer.appendChild(zoomIndicator);
  imageModalOverlay.appendChild(imageContainer);
  
  // Close on overlay click
  imageModalOverlay.addEventListener('click', function(e) {
    if (e.target === imageModalOverlay) {
      closeImageModal();
    }
  });
  
  // Close on ESC key
  document.addEventListener('keydown', handleEscKey);
  
  document.body.appendChild(imageModalOverlay);
  document.body.style.overflow = 'hidden';
}

function closeImageModal() {
  if (imageModalOverlay) {
    document.body.removeChild(imageModalOverlay);
    imageModalOverlay = null;
    document.body.style.overflow = '';
    document.removeEventListener('keydown', handleEscKey);
  }
}

function handleEscKey(e) {
  if (e.key === 'Escape') {
    closeImageModal();
  }
}

function handleImageClick(e) {
  const imageSrc = e.target.src;
  const imageAlt = e.target.alt;
  openImageModal(imageSrc, imageAlt);
}

function init() {
  // Add zoom functionality to the price list image
  const priceImage = document.querySelector('[data-media*="прейскурант"]');
  if (priceImage) {
    priceImage.style.cursor = 'zoom-in';
    priceImage.addEventListener('click', handleImageClick);
    
    // Add hover effect to indicate it's clickable
    priceImage.addEventListener('mouseenter', function() {
      this.style.transform = 'scale(1.02)';
      this.style.transition = 'transform 0.2s ease';
    });
    
    priceImage.addEventListener('mouseleave', function() {
      this.style.transform = 'scale(1)';
    });
  }
}

function teardown() {
  // Remove event listeners
  const priceImage = document.querySelector('[data-media*="прейскурант"]');
  if (priceImage) {
    priceImage.removeEventListener('click', handleImageClick);
    priceImage.style.cursor = '';
    priceImage.style.transform = '';
    priceImage.removeEventListener('mouseenter', function() {});
    priceImage.removeEventListener('mouseleave', function() {});
  }
  
  // Close modal if open
  if (imageModalOverlay) {
    closeImageModal();
  }
  
  document.removeEventListener('keydown', handleEscKey);
}

export { init, teardown };