document.addEventListener('DOMContentLoaded', function () {
  const overlay = document.getElementById('lightbox-overlay');
  const mediaContainer = document.getElementById('lightbox-media');
  const overlayCaption = document.getElementById('lightbox-caption');

  function openLightboxWithImg(src, alt, figureNumber, captionText) {
    mediaContainer.innerHTML = '';
    const img = document.createElement('img');
    img.src = src;
    img.alt = alt;
    mediaContainer.appendChild(img);
    setCaption(figureNumber, captionText);
    overlay.classList.add('active');
  }

  function openLightboxWithSvg(svgEl, figureNumber, captionText) {
    mediaContainer.innerHTML = '';
    const svgClone = svgEl.cloneNode(true);
    mediaContainer.appendChild(svgClone);
    setCaption(figureNumber, captionText);
    overlay.classList.add('active');
  }

  function setCaption(figureNumber, captionText) {
    overlayCaption.innerHTML = captionText
      ? '<span class="fig-number" data-num="' + figureNumber + '"></span> ' + captionText
      : '';
  }

  document.querySelectorAll('.entry-content img').forEach(function (img, index) {
    const figureNumber = index + 1;
    const originalSrc = img.src;
    const originalAlt = img.alt;
    const captionEl = img.nextElementSibling;
    const captionText = (captionEl && captionEl.tagName === 'EM') ? captionEl.textContent : '';

    img.addEventListener('click', function () {
      openLightboxWithImg(originalSrc, originalAlt, figureNumber, captionText);
    });
  });

  document.addEventListener('svg-injected', function (e) {
    const svgEl = e.detail.svgEl;
    svgEl.style.cursor = 'zoom-in';
    svgEl.addEventListener('click', function () {
      openLightboxWithSvg(svgEl, e.detail.figureNumber, e.detail.captionText);
    });
  });

  overlay.addEventListener('click', function () {
    overlay.classList.remove('active');
    mediaContainer.innerHTML = '';
    overlayCaption.innerHTML = '';
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      overlay.classList.remove('active');
      mediaContainer.innerHTML = '';
      overlayCaption.innerHTML = '';
    }
  });
});