const carouselTrack = document.querySelector('.gallery__track');
const prevArrow = document.querySelector('.gallery__arrow--prev');
const nextArrow = document.querySelector('.gallery__arrow--next');
const dotsContainer = document.querySelector('.gallery__dots');

if (carouselTrack) {
  const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
  const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
  let itemsPerPage = getItemsPerPage();
  let pageCount = Math.ceil(items.length / itemsPerPage);
  let activePage = 0;
  var dots = [];

  function buildDots() {
    if (!dotsContainer) return;
    dotsContainer.innerHTML = '';
    dots = [];
    for (var i = 0; i < pageCount; i++) {
      var dot = document.createElement('button');
      dot.type = 'button';
      dot.className = 'gallery__dot' + (i === activePage ? ' gallery__dot--active' : '');
      dot.setAttribute('role', 'tab');
      dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
      dot.setAttribute('aria-label', 'Seite ' + (i + 1) + ' von ' + pageCount);
      dot.dataset.page = i;
      dot.addEventListener('click', function() {
        goToPage(parseInt(this.dataset.page));
      });
      dotsContainer.appendChild(dot);
      dots.push(dot);
    }
  }

  function updateDots() {
    dots.forEach(function(dot, i) {
      dot.classList.toggle('gallery__dot--active', i === activePage);
      dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
    });
  }

  function updateTrack() {
    var gap = parseFloat(getComputedStyle(carouselTrack).gap) || 20;
    var itemWidth = items[0].getBoundingClientRect().width;
    var offset = activePage * (itemWidth + gap) * itemsPerPage;
    carouselTrack.style.transform = 'translateX(-' + offset + 'px)';
    carouselTrack.style.transition = 'transform 0.4s ease';
    updateDots();
  }

  function goToPage(page) {
    activePage = page;
    updateTrack();
  }

  function showNext() {
    activePage = (activePage + 1) % pageCount;
    updateTrack();
  }

  function showPrev() {
    activePage = (activePage - 1 + pageCount) % pageCount;
    updateTrack();
  }

  buildDots();

  if (nextArrow) nextArrow.addEventListener('click', showNext);
  if (prevArrow) prevArrow.addEventListener('click', showPrev);

  document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowRight') showNext();
    if (event.key === 'ArrowLeft') showPrev();
  });

  window.addEventListener('resize', function() {
    var newPerPage = getItemsPerPage();
    if (newPerPage !== itemsPerPage) {
      itemsPerPage = newPerPage;
      pageCount = Math.ceil(items.length / itemsPerPage);
      activePage = 0;
    }
    buildDots();
    updateTrack();
  });
}