// Simple global lightbox functionality
function openSimpleLightbox(imageSrc, imageAlt) {
  // Remove existing lightbox if present
  const existing = document.getElementById('simple-lightbox');
  if (existing) {
    existing.remove();
  }

  // Create lightbox HTML
  const lightboxHTML = `
    <div id="simple-lightbox" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: pointer;">
      <div style="position: relative; max-width: 95%; max-height: 95%; display: flex; align-items: center; justify-content: center;">
        <button onclick="closeSimpleLightbox()" style="position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 30px; cursor: pointer; z-index: 10000;">×</button>
        <img src="${imageSrc}" alt="${imageAlt}" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 0 30px rgba(255,255,255,0.1);">
      </div>
    </div>
  `;

  // Add to body
  document.body.insertAdjacentHTML('beforeend', lightboxHTML);
  
  // Prevent body scroll
  document.body.style.overflow = 'hidden';
  
  // Close on background click
  const lightbox = document.getElementById('simple-lightbox');
  lightbox.addEventListener('click', function(e) {
    if (e.target === lightbox) {
      closeSimpleLightbox();
    }
  });
  
  // Close on Escape key
  function handleEscape(e) {
    if (e.key === 'Escape') {
      closeSimpleLightbox();
      document.removeEventListener('keydown', handleEscape);
    }
  }
  document.addEventListener('keydown', handleEscape);
}

function closeSimpleLightbox() {
  const lightbox = document.getElementById('simple-lightbox');
  if (lightbox) {
    lightbox.remove();
  }
  document.body.style.overflow = '';
}

// Make functions globally available
window.openSimpleLightbox = openSimpleLightbox;
window.closeSimpleLightbox = closeSimpleLightbox;

// Export for the system
export function init() {
  // Functions are already global, nothing needed here
}

export function teardown() {
  // Clean up if needed
  const lightbox = document.getElementById('simple-lightbox');
  if (lightbox) {
    lightbox.remove();
  }
  document.body.style.overflow = '';
}