<script setup lang="ts">
import emblaCarouselVue from 'embla-carousel-vue';
import { ref, onMounted } from 'vue';

const [emblaRef, emblaApi] = emblaCarouselVue({
  loop: false,
  align: 'center',
  containScroll: 'trimSnaps',
  startIndex: 1,
  dragFree: false,
});

const selectedIndex = ref(1);
const handlesVisible = ref(true);
let fadeTimer: ReturnType<typeof setTimeout> | null = null;

const resetFade = () => {
  handlesVisible.value = true;
  if (fadeTimer) clearTimeout(fadeTimer);
  fadeTimer = setTimeout(() => {
    handlesVisible.value = false;
  }, 3000);
};

const emitPositionChange = (pos: number) => {
  document.dispatchEvent(new CustomEvent('swipe-position-change', { detail: { pos } }));
};

onMounted(() => {
  if (!emblaApi.value) return;
  emblaApi.value.on('select', () => {
    if (!emblaApi.value) return;
    selectedIndex.value = emblaApi.value.selectedScrollSnap();
    sessionStorage.setItem('pc-position', String(selectedIndex.value));
    emitPositionChange(selectedIndex.value);
    resetFade();
  });
  const saved = sessionStorage.getItem('pc-position');
  if (saved !== null) {
    const idx = Number(saved);
    if (!Number.isNaN(idx)) emblaApi.value.scrollTo(idx, false);
  }
  // Ecoute les clics de la MobileTabBar
  document.addEventListener('mobile-tab-scroll', (e: Event) => {
    const detail = (e as CustomEvent<{ pos: number }>).detail;
    if (detail && typeof detail.pos === 'number') {
      emblaApi.value?.scrollTo(detail.pos);
    }
  });
  resetFade();
});

const scrollTo = (idx: number) => {
  emblaApi.value?.scrollTo(idx);
  resetFade();
};
</script>

<template>
  <div class="relative h-full" @pointerdown="resetFade" @touchstart="resetFade">
    <div ref="emblaRef" class="embla h-full overflow-hidden">
      <div class="embla__container flex h-full">
        <div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
          <slot name="left" />
        </div>
        <div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
          <slot name="center" />
        </div>
        <div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
          <slot name="right" />
        </div>
      </div>
    </div>

    <button
      v-if="selectedIndex !== 0"
      type="button"
      :class="[
        'absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
        handlesVisible ? 'opacity-100' : 'opacity-0',
      ]"
      aria-label="Panneau gauche"
      @click="scrollTo(selectedIndex - 1)"
    >
      &larr;
    </button>
    <button
      v-if="selectedIndex !== 2"
      type="button"
      :class="[
        'absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
        handlesVisible ? 'opacity-100' : 'opacity-0',
      ]"
      aria-label="Panneau droit"
      @click="scrollTo(selectedIndex + 1)"
    >
      &rarr;
    </button>

    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
      <button
        v-for="i in 3"
        :key="i"
        type="button"
        :class="[
          'w-2 h-2 rounded-full transition-colors',
          selectedIndex === i - 1 ? 'bg-neutral-900' : 'bg-neutral-400',
        ]"
        :aria-label="`Position ${i}`"
        @click="scrollTo(i - 1)"
      />
    </div>
  </div>
</template>
