<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
});

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

<template>
  <section class="relative" aria-label="Testimonials slider">
    <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="(item, i) in props.items"
        :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%]"
      >
        <slot :item="item" :index="i">
          <!-- Default -->
          <figure
            class="border border-gray-200 rounded-lg p-4 h-full bg-iq-primary"
          >
            <img
              :src="item.author.image"
              :alt="`Photo of ${item.author.name}`"
              class="size-16 md:size-20 rounded-full object-cover mb-2 shrink-0"
            />

            <figcaption class="text-lg md:text-xl font-medium text-gray-800 shrink-0">
              {{ item.author.name }}
            </figcaption>

            <div
              class="flex items-center gap-1 mb-2 shrink-0"
              :title="`${item.rating}/5`"
              aria-label="Rating"
            >
              <span
                v-for="n in 5"
                :key="n"
                class="text-base md:text-xl"
                :class="n <= item.rating ? 'text-amber-400' : 'text-gray-300'"
                aria-hidden="true"
                >★</span
              >
            </div>

            <blockquote class="text-gray-700 leading-relaxed text-pretty line-clamp-5">
              “{{ item.text }}”
            </blockquote>
          </figure>
        </slot>
      </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">
      Slide {{ current + 1 }} of {{ props.items.length }}
    </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
    }
}