---
// Image Lightbox Component
---

<div id="lightbox" class="fixed inset-0 z-[200] hidden bg-black/90 backdrop-blur-sm">
  <div class="flex items-center justify-center min-h-screen p-4">
    <button 
      id="lightbox-close" 
      class="absolute top-4 right-4 w-10 h-10 rounded-full bg-[var(--header-bg)] text-[var(--text-secondary)] hover:text-[var(--primary)] transition-colors flex items-center justify-center"
    >
      <i class="fas fa-times text-lg"></i>
    </button>
    
    <button 
      id="lightbox-prev"
      class="absolute left-4 w-10 h-10 rounded-full bg-[var(--header-bg)] text-[var(--text-secondary)] hover:text-[var(--primary)] transition-colors flex items-center justify-center"
    >
      <i class="fas fa-chevron-left"></i>
    </button>
    
    <img 
      id="lightbox-image" 
      src="" 
      alt="" 
      class="max-w-full max-h-[85vh] object-contain rounded-lg"
    />
    
    <button 
      id="lightbox-next"
      class="absolute right-4 w-10 h-10 rounded-full bg-[var(--header-bg)] text-[var(--text-secondary)] hover:text-[var(--primary)] transition-colors flex items-center justify-center"
    >
      <i class="fas fa-chevron-right"></i>
    </button>
  </div>
</div>

<script is:inline>
  (function() {
    const lightbox = document.getElementById('lightbox');
    const lightboxImage = document.getElementById('lightbox-image');
    const lightboxClose = document.getElementById('lightbox-close');
    const lightboxPrev = document.getElementById('lightbox-prev');
    const lightboxNext = document.getElementById('lightbox-next');
    
    if (!lightbox || !lightboxImage) return;

    let images = [];
    let currentIndex = 0;

    // Initialize lightbox for all article images
    function initLightbox() {
      const content = document.querySelector('[data-article-slug]');
      if (!content) return;

      images = Array.from(content.querySelectorAll('.article-content img, [data-lightbox-image="true"]'));
      
      images.forEach((img, index) => {
        img.style.cursor = 'zoom-in';
        img.addEventListener('click', () => openLightbox(index));
      });

      // Update navigation visibility
      updateNavVisibility();
    }

    function openLightbox(index) {
      currentIndex = index;
      updateImage();
      lightbox.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
      updateNavVisibility();
    }

    function closeLightbox() {
      lightbox.classList.add('hidden');
      document.body.style.overflow = '';
    }

    function updateImage() {
      if (images[currentIndex]) {
        lightboxImage.src = images[currentIndex].src;
        lightboxImage.alt = images[currentIndex].alt || '';
      }
    }

    function updateNavVisibility() {
      if (lightboxPrev) {
        lightboxPrev.style.display = images.length > 1 ? 'flex' : 'none';
      }
      if (lightboxNext) {
        lightboxNext.style.display = images.length > 1 ? 'flex' : 'none';
      }
    }

    function showPrev() {
      currentIndex = (currentIndex - 1 + images.length) % images.length;
      updateImage();
    }

    function showNext() {
      currentIndex = (currentIndex + 1) % images.length;
      updateImage();
    }

    // Event listeners
    if (lightboxClose) {
      lightboxClose.addEventListener('click', closeLightbox);
    }

    if (lightboxPrev) {
      lightboxPrev.addEventListener('click', showPrev);
    }

    if (lightboxNext) {
      lightboxNext.addEventListener('click', showNext);
    }

    // Close on backdrop click
    lightbox.addEventListener('click', (e) => {
      if (e.target === lightbox) {
        closeLightbox();
      }
    });

    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
      if (lightbox.classList.contains('hidden')) return;
      
      if (e.key === 'Escape') closeLightbox();
      if (e.key === 'ArrowLeft' && images.length > 1) showPrev();
      if (e.key === 'ArrowRight' && images.length > 1) showNext();
    });

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initLightbox);
    } else {
      initLightbox();
    }
  })();
</script>
