<%# functions used to show lightbox of screenshot when thumbnail is clicked on %>
<script>
  const lightbox = document.getElementsByClassName('screenshot-lightbox')[0];
  const lightboxHeader = document.getElementsByClassName('lightbox-header')[0];
  const lightboxTitle = document.querySelector('.lightbox-header h5');
  const lightboxContent = document.getElementsByClassName('lightbox-content')[0];
  const lightboxImg = document.getElementById('lightbox-image');

  // Handle dynamically inserted custom-flow screenshots (about scan modal content is rendered later)
  document.addEventListener(
    'error',
    event => {
      const target = event.target;
      if (target && target.classList && target.classList.contains('custom-flow-screenshot')) {
        target.onerror = null;
        target.remove();
      }
    },
    true,
  );

  document.addEventListener('click', event => {
    const screenshot = event.target.closest('.custom-flow-screenshot');
    if (!screenshot) return;

    event.preventDefault();

    const container = screenshot.closest('.custom-flow-screenshot-container');
    const link = container ? container.querySelector('.display-url-container a') : null;

    const pageTitle = link?.textContent?.trim() || screenshot.getAttribute('alt') || 'Screenshot';
    const pageUrl = link?.href || '';

    openLightbox(screenshot.src, pageTitle, pageUrl);
  });

  lightbox.addEventListener('click', event => {
    if (
      event.target === lightbox ||
      event.target === lightboxHeader ||
      event.target === lightboxTitle
    ) {
      closeLightbox();
    }
  });

  const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
  let offcanvasItem = null;
  if (offcanvasElem) {
    offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
    offcanvasItem._config.keyboard = false; // Disable default keyboard handling
  }

  const pagesScannedModalElem = document.getElementById('pagesScannedModal');
  let pagesScannedModalItem = null;
  if (pagesScannedModalElem) {
    pagesScannedModalItem = new bootstrap.Modal(pagesScannedModalElem);
    pagesScannedModalItem._config.keyboard = false;
  }

  // Use capture phase so lightbox handles Escape before Bootstrap modal/offcanvas handlers.
  document.addEventListener(
    'keydown',
    event => {
      if (event.key !== 'Escape') return;

      if (lightbox.style.display === 'block') {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        closeLightbox();
        return;
      }

      if (offcanvasItem && offcanvasItem._isShown) {
        offcanvasItem.hide();
      }

      if (pagesScannedModalItem && pagesScannedModalItem._isShown) {
        pagesScannedModalItem.hide();
      }
    },
    true,
  );

  function openLightbox(imgSrc, pageTitle, pageUrl) {
    lightbox.style.display = 'block';

    lightboxImg.src = imgSrc;
    lightboxImg.alt = `Screenshot of ${pageUrl}`;

    lightboxTitle.textContent = pageTitle;
  };

  function closeLightbox() {
    lightbox.style.display = 'none';
  };
</script>
