<script setup>
const props = defineProps({
  images: {
    type: Array,
    validate: (value) => Array.isArray(value) && value.every((img) => img.src),
  },
});

const {
  carouselRef,
  current,
  next,
  prev,
  canNext,
  canPrev,
  ariaStatus,
  lastElementFullyVisible,
} = useCarousel(computed(() => props.images.length));
</script>

<template>
  <section class="relative" aria-label="Inline image gallery">
    <ol
      ref="carouselRef"
      class="flex gap-4 overflow-x-auto px-4 py-2 scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden select-none"
      role="listbox"
      tabindex="0"
    >
      <li
        v-for="(img, i) in props.images"
        :key="i"
        :data-idx="i"
        role="option"
        :aria-selected="i === current"
        class="snap-start shrink-0 w-[85%] sm:w-[65%] md:w-[55%] lg:w-[40%]"
      >
        <figure class="overflow-hidden rounded-iq-roundness">
          <img
            :src="img.src"
            :alt="img.alt || ''"
            loading="lazy"
            class="h-[60vh] w-full object-cover lg:h-[40vh]"
            draggable="false"
          />
        </figure>
      </li>
    </ol>

    <!-- arrows -->
    <div class="mt-3 flex items-center justify-between">
      <button
        type="button"
        class="inline-flex items-center justify-center disabled:opacity-40 text-3xl md:text-5xl text-iq-primary active:scale-95 hover:scale-105 cursor-pointer"
        aria-label="Previous"
        :disabled="!canPrev"
        @click="prev"
      >
        <Icon name="material-symbols:arrow-circle-left-rounded" />
      </button>

      <button
        type="button"
        class="inline-flex items-center justify-center disabled:opacity-40 text-3xl md:text-5xl text-iq-primary active:scale-95 hover:scale-105 cursor-pointer"
        aria-label="Next"
        :disabled="!canNext"
        @click="next"
      >
        <Icon name="material-symbols:arrow-circle-right-rounded" />
      </button>
    </div>

    <!-- SR status -->
    <p class="sr-only" aria-live="polite">
      {{ ariaStatus }}
    </p>
  </section>
</template>

// composables/useCarousel.js
import { useSwipe, useIntersectionObserver } from '@vueuse/core'

export function useCarousel(itemsLength) {
    const slideSelector = '[data-idx]'
    const swipeThreshold = 30
    const ioThreshold = [0, 0.01]
    const behavior = 'smooth'

    const carouselRef = ref(null)
    const current = ref(0)
    const lastElementFullyVisible = ref(false)
    const canPrev = computed(() => current.value > 0)
    const canNext = computed(() => !lastElementFullyVisible.value)
    const ariaStatus = computed(() => `Slide ${current.value + 1} of ${itemsLength.value}`)

    let cleanupFns = []



    function goTo(i, scrollBehavior = behavior) {
        const root = carouselRef.value
        if (!root || itemsLength.value <= 0) return
        const targetIndex = i
        const el = root.querySelector(`[data-idx="${targetIndex}"]`)
        el?.scrollIntoView({ behavior: scrollBehavior, inline: 'start', block: 'nearest' })
    }

    function next() {
        goTo(current.value + 1)
    }
    function prev() {
        goTo(current.value - 1)
    }

    // Swipe: decide direction on release
    useSwipe(carouselRef, {
        onSwipeEnd(_, dir, dist) {
            if (Math.abs(dist.x) < swipeThreshold) return goTo(current.value)
            if (dir === 'left') return next()
            if (dir === 'right') return prev()
        },
    })

    // Initialize IntersectionObservers per slide, scoped to the scroller
    async function initObservers() {
        // clear any previous observers
        cleanup()

        await nextTick()
        const root = carouselRef.value
        if (!root) return

        const slides = Array.from(root.querySelectorAll(slideSelector))
        const visible = new Array(slides.length).fill(false)

        slides.forEach((el, idx) => {
            const { stop } = useIntersectionObserver(
                el,
                ([entry]) => {
                    // mark visibility for this slide
                    visible[idx] = entry.isIntersecting && entry.intersectionRatio > 0

                    // pick the smallest visible index
                    for (let i = 0; i < visible.length; i++) {
                        if (visible[i]) {
                            current.value = i
                            break
                        }
                    }
                },
                {
                    root,
                    threshold: ioThreshold,
                }
            )
            cleanupFns.push(stop)


        })


        lastElementFullyVisible.value = false
        const lastEl = slides[slides.length - 1]
        if (lastEl) {
            const { stop } = useIntersectionObserver(
                lastEl,
                ([entry]) => {
                    // true when last slide is at least X% in view
                    lastElementFullyVisible.value = entry.isIntersecting && entry.intersectionRatio >= 1
                },
                { root, threshold: 1 } // minimal, no fancy arrays needed
            )
            cleanupFns.push(stop)
        }
    }

    function cleanup() {
        cleanupFns.forEach(fn => fn())
        cleanupFns = []
        lastElementFullyVisible.value = false
    }

    onMounted(initObservers)
    onBeforeUnmount(cleanup)

    // Re-init when number of items changes or container ref becomes available
    watch([itemsLength, carouselRef], initObservers, { flush: 'post' })

    return {
        // state
        current,
        carouselRef,

        // actions
        goTo,
        next,
        prev,

        // derived
        canPrev,
        canNext,
        ariaStatus,
        lastElementFullyVisible
    }
}