---
import { Icon } from "astro-icon/components";

export interface Props {
  slides: Array<{
    id: number;
    desktopImage: string;
    mobileImage: string;
    url?: string;
  }>;
}

const { slides } = Astro.props;
---

{
  slides.length > 0 && (
    <section class="relative w-full aspect-[1/1] md:aspect-[1920/700] overflow-hidden bg-black">
  {slides.map((slide, i) => {
    const content = (
      <picture>
        <source media="(max-width: 767px)" srcset={slide.mobileImage} />
        <source media="(min-width: 768px)" srcset={slide.desktopImage} />
        <img
          src={slide.desktopImage}
          alt=""
          class="w-full h-full object-contain"
          loading={i === 0 ? "eager" : "lazy"}
        />
      </picture>
    );

    return (
      <div
        id={`banner-slide-${i}`}
        class="absolute inset-x-0 bottom-0 top-16 md:top-20 transition-opacity duration-700"
        class:list={{ "opacity-0": i !== 0 }}
      >
        {slide.url ? (
          <a href={slide.url} class="block w-full h-full">
            {content}
          </a>
        ) : (
          content
        )}
      </div>
    );
  })}

  <button
    id="banner-prev"
    class="absolute left-4 top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full transition-colors cursor-pointer"
    aria-label="Previous slide"
  >
    <Icon name="material-symbols:chevron-left" class="text-2xl" />
  </button>

  <button
    id="banner-next"
    class="absolute right-4 top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full transition-colors cursor-pointer"
    aria-label="Next slide"
  >
    <Icon name="material-symbols:chevron-right" class="text-2xl" />
  </button>

  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 md:hidden flex gap-3">
    {slides.map((_, i) => (
      <button
        class="banner-dot w-3 h-3 rounded-full transition-colors cursor-pointer"
        class:list={{ "bg-primary": i === 0, "bg-white/50": i !== 0 }}
        data-index={i}
        aria-label={`Go to slide ${i + 1}`}
      />
    ))}
  </div>
</section>
  )
}

<script>
  (() => {
    const slides = document.querySelectorAll('[id^="banner-slide-"]');
    const prevBtn = document.getElementById("banner-prev");
    const nextBtn = document.getElementById("banner-next");
    const dots = document.querySelectorAll(".banner-dot");
    const container = slides[0]?.parentElement;
    let current = 0;
    let interval;

    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("opacity-0", i !== index);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle("bg-primary", i === index);
        dot.classList.toggle("bg-white/50", i !== index);
      });
      current = index;
    }

    function next() {
      showSlide((current + 1) % slides.length);
    }

    function prev() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startAutoplay() {
      stopAutoplay();
      interval = setInterval(next, 5000);
    }

    function stopAutoplay() {
      clearInterval(interval);
    }

    if (nextBtn) nextBtn.addEventListener("click", next);
    if (prevBtn) prevBtn.addEventListener("click", prev);

    dots.forEach((dot) => {
      dot.addEventListener("click", () => {
        showSlide(parseInt(dot.dataset.index));
        startAutoplay();
      });
    });

    if (container) {
      container.addEventListener("mouseenter", stopAutoplay);
      container.addEventListener("mouseleave", startAutoplay);

      let touchStartX = 0, touchStartY = 0;

      container.addEventListener("touchstart", (e) => {
        touchStartX = e.changedTouches[0].screenX;
        touchStartY = e.changedTouches[0].screenY;
        stopAutoplay();
      }, { passive: true });

      container.addEventListener("touchend", (e) => {
        const diffX = e.changedTouches[0].screenX - touchStartX;
        const diffY = e.changedTouches[0].screenY - touchStartY;

        if (Math.abs(diffX) > 50 && Math.abs(diffX) > Math.abs(diffY)) {
          if (diffX > 0) prev();
          else next();
          startAutoplay();
        } else {
          startAutoplay();
        }
      }, { passive: true });
    }

    startAutoplay();
  })();
</script>