<?php
declare(strict_types=1);

/**
 * /includes/lightbox.php
 * Єдиний Lightbox для всіх сторінок:
 * - Працює з <a class="js-lightbox" href="..." data-gallery="...">
 * - Для кожної галереї бере всі посилання всередині контейнера, який має data-gallery-images="ID"
 *
 * Вимога в HTML:
 * 1) Контейнер галереї: <div data-gallery-images="p123"> ... <a class="js-lightbox" data-gallery="p123" href="...">
 * 2) Раз на сторінку потрібна розмітка модалки (overlay) з id:
 *    lbOverlay, lbBackdrop, lbClose, lbPrev, lbNext, lbImg, lbCounter
 */

?>

<style>
/* ===== Lightbox (global) ===== */
html.lb-lock{ overflow:hidden; }
.lb-overlay{ position:fixed; inset:0; z-index:2200; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.78); }
.lb-content{ position:relative; width:min(94vw, 1100px); height:min(90vh, 820px); margin:5vh auto; display:flex; align-items:center; justify-content:center; }
.lb-img{ max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 18px 55px rgba(0,0,0,.45); background:#111; }
.lb-close{ position:absolute; top:-14px; right:-14px; width:42px; height:42px; border:0; border-radius:999px; background:rgba(255,255,255,.92); font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0; border-radius:999px; background:rgba(255,255,255,.88); font-size:34px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lb-prev{ left:-18px; }
.lb-next{ right:-18px; }
.lb-counter{ position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); color:#fff; font-size:13px; background:rgba(0,0,0,.35); padding:4px 10px; border-radius:999px; }
@media (max-width: 576px){
  .lb-content{ width:96vw; height:88vh; margin:6vh auto; }
  .lb-prev{ left:6px; }
  .lb-next{ right:6px; }
  .lb-close{ top:8px; right:8px; }
  .lb-counter{ bottom:10px; }
}
</style>

<script>
(function(){
  const overlay  = document.getElementById('lbOverlay');
  const backdrop = document.getElementById('lbBackdrop');
  const closeBtn = document.getElementById('lbClose');
  const prevBtn  = document.getElementById('lbPrev');
  const nextBtn  = document.getElementById('lbNext');
  const imgEl    = document.getElementById('lbImg');
  const counter  = document.getElementById('lbCounter');

  const lbReady = !!(overlay && backdrop && closeBtn && prevBtn && nextBtn && imgEl && counter);
  if (!lbReady) return;

  let items = [];
  let index = 0;

  function buildList(galleryId){
    const wrap = document.querySelector('[data-gallery-images="' + galleryId + '"]');
    if (!wrap) return [];
    const links = Array.from(wrap.querySelectorAll('a.js-lightbox[href][data-gallery="' + galleryId + '"]'));
    return links.map(a => a.getAttribute('href')).filter(Boolean);
  }

  function setNavState(){
    const n = items.length;
    prevBtn.style.display = (n > 1) ? 'flex' : 'none';
    nextBtn.style.display = (n > 1) ? 'flex' : 'none';

    if (n > 1) {
      counter.textContent = (index + 1) + ' / ' + n;
      counter.style.display = 'block';
    } else {
      counter.style.display = 'none';
    }
  }

  function showAt(i){
    if (!items.length) return;
    const n = items.length;
    index = (i + n) % n;
    imgEl.src = items[index];
    setNavState();
  }

  function open(galleryId, src){
    items = buildList(galleryId);
    if (!items.length) items = [src];
    const found = items.indexOf(src);
    index = (found >= 0) ? found : 0;

    overlay.style.display = 'block';
    overlay.classList.add('open');
    overlay.setAttribute('aria-hidden', 'false');
    document.documentElement.classList.add('lb-lock');

    showAt(index);
  }

  function close(){
    overlay.classList.remove('open');
    overlay.setAttribute('aria-hidden', 'true');
    document.documentElement.classList.remove('lb-lock');
    imgEl.src = '';
    items = [];
    index = 0;
    overlay.style.display = 'none';
  }

  function prev(){ if (items.length) showAt(index - 1); }
  function next(){ if (items.length) showAt(index + 1); }

  document.addEventListener('click', (e) => {
    const a = e.target.closest('a.js-lightbox[href][data-gallery]');
    if (!a) return;

    const src = a.getAttribute('href');
    const galleryId = a.getAttribute('data-gallery');
    if (!src || !galleryId) return;

    e.preventDefault();
    open(galleryId, src);
  });

  closeBtn.addEventListener('click', close);
  backdrop.addEventListener('click', close);
  prevBtn.addEventListener('click', prev);
  nextBtn.addEventListener('click', next);

  document.addEventListener('keydown', (e) => {
    if (!overlay.classList.contains('open')) return;
    if (e.key === 'Escape') return close();
    if (e.key === 'ArrowLeft') return prev();
    if (e.key === 'ArrowRight') return next();
  });

  imgEl.addEventListener('click', () => { if (items.length > 1) next(); });
})();
</script>