---
import { siteConfig } from '../config';
---

<!-- Image Gallery Manager Component -->
<!-- This component handles image gallery initialization and management -->

<script>
  // Declare global function for Swup compatibility
  declare global {
    interface Window {
      initializeImageGalleries: () => void;
      lightboxInstance: any;
    }
  }

  function initializeImageGalleries() {
    const contentElement = document.querySelector('.prose');
    if (!contentElement) {
      return;
    }
    const paragraphs = contentElement.querySelectorAll('p');

    // Find all paragraphs with images (single or multiple)
    const imageParagraphs: { paragraph: Element; index: number; imageCount: number }[] = [];
    paragraphs.forEach((para, index) => {
      const images = Array.from(para.querySelectorAll('img'));
      // Filter out linked images (images inside <a> tags)
      const nonLinkedImages = images.filter(img => !img.closest('a'));
      if (nonLinkedImages.length > 0) {
        imageParagraphs.push({ paragraph: para, index: index, imageCount: nonLinkedImages.length });
      }
    });

    // Process each image paragraph
    imageParagraphs.forEach((paraInfo) => {
      const { paragraph, imageCount } = paraInfo;

      // Process paragraphs with 1 or more images
      if (imageCount >= 1) {

        // Create gallery container
        const galleryContainer = document.createElement('div');

        if (imageCount === 1) {
          galleryContainer.className = 'image-grid image-grid-1 my-2';
        } else if (imageCount === 2) {
          galleryContainer.className = 'image-grid image-grid-2 my-8';
        } else if (imageCount === 3) {
          galleryContainer.className = 'image-grid image-grid-3 my-8';
        } else if (imageCount >= 4) {
          galleryContainer.className = 'image-grid image-grid-4 my-8';
        }

        // Get all non-linked images from this paragraph
        const allImages = Array.from(paragraph.querySelectorAll('img'));
        // Filter out linked images AND manually-sized (Obsidian) images
        const images = allImages.filter(img => !img.closest('a') && !img.classList.contains('obsidian-sized'));

        // Skip processing if all images were manually sized
        if (images.length === 0) {
          return;
        }

        // Caption rule: only the very next line (same paragraph in HTML) = caption. Next paragraph (blank line in MD) = body.
        // ONLY for single images - grids don't have captions
        let captionContent: Node[] = [];  // same-paragraph text = caption (centered)
        let nextParagraphBody: Element | null = null;  // next <p> = had blank line in MD = normal body, move into container
        if (imageCount === 1) {
          const sameParagraphContent = Array.from(paragraph.childNodes).filter(node => {
            if (node.nodeType === Node.ELEMENT_NODE) {
              const el = node as Element;
              return el.tagName !== 'IMG' && el.tagName !== 'PICTURE';
            }
            if (node.nodeType === Node.TEXT_NODE) {
              return (node.textContent || '').trim() !== '';
            }
            return true;
          });
          if (sameParagraphContent.length > 0) {
            captionContent = sameParagraphContent;
          } else {
            const nextP = paragraph.nextElementSibling;
            if (nextP && nextP.tagName === 'P' && !nextP.querySelector('h1, h2, h3, h4, h5, h6')) {
              const text = (nextP.textContent || '').trim();
              if (text !== '') {
                nextParagraphBody = nextP;
              }
            }
          }
        }

        // Add each image to gallery
        images.forEach((img, imgIndex) => {
          const imageItem = document.createElement('div');
          imageItem.className = 'image-item';

          const button = document.createElement('button');
          button.className = 'image-button w-full h-full group cursor-pointer';
          button.setAttribute('data-lightbox', 'gallery');
          button.setAttribute('aria-label', `View ${img.alt} in full size`);

          // Add click event listener to open lightbox
          button.addEventListener('click', () => {
            // Dispatch custom event to open lightbox
            window.dispatchEvent(new CustomEvent('openLightbox', {
              detail: { index: imgIndex, button: button }
            }));
          });

          const imgClone = img.cloneNode(true) as HTMLImageElement;
          imgClone.className = 'w-full h-full object-cover rounded-lg transition-all duration-300 group-hover:shadow-lg group-hover:scale-[1.02]';
          imgClone.loading = 'lazy';
          imgClone.setAttribute('data-lightbox', 'gallery');

          const overlay = document.createElement('div');
          overlay.className = 'absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300 rounded-lg flex items-center justify-center';

          const zoomIcon = document.createElement('div');
          zoomIcon.className = 'w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300';
          zoomIcon.innerHTML = `
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
            </svg>
          `;

          overlay.appendChild(zoomIcon);
          button.appendChild(imgClone);
          button.appendChild(overlay);
          imageItem.appendChild(button);
          galleryContainer.appendChild(imageItem);
        });

        // Create a container for the gallery and any non-image content
        const container = document.createElement('div');
        container.className = 'image-container';
        container.appendChild(galleryContainer);

        const appendContent = (parent: Element, nodes: Node[]) => {
          nodes.forEach(node => {
            if (node.nodeType === Node.TEXT_NODE && (!node.textContent || !node.textContent.trim())) return;
            if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName === 'BR') return;
            parent.appendChild(node.cloneNode(true));
          });
        };
        if (captionContent.length > 0) {
          const captionContainer = document.createElement('div');
          captionContainer.className = 'image-caption-container';
          appendContent(captionContainer, captionContent);
          container.appendChild(captionContainer);
        }
        if (nextParagraphBody) {
          const bodyP = document.createElement('p');
          appendContent(bodyP, Array.from(nextParagraphBody.childNodes));
          container.appendChild(bodyP);
        }

        paragraph.parentNode?.replaceChild(container, paragraph);
        if (nextParagraphBody?.parentNode) {
          nextParagraphBody.parentNode.removeChild(nextParagraphBody);
        }
      }
    });
  }

  // Initialize on page load
  document.addEventListener('DOMContentLoaded', initializeImageGalleries);

  // Make function available globally for Swup
  window['initializeImageGalleries'] = initializeImageGalleries;
</script>