<script setup lang="ts">
import { AIconArrowCircleDown, AIconGlobe, AIconId, AIconArrowSideUp } from '#components'
import { PAGES } from '#adata-ui/shared/constans/pages'
import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'

const { myLayer } = useAppConfig()
const { t, locale } = useI18n()
const colorMode = useColorMode()
const computedColorMode = computed(() => colorMode.value)

const items = computed(()=>{
  return [
    {
      title: 'header.products.galleryCards.unload.title',
      subtitle: 'header.products.galleryCards.unload.subtitle',
      to: buildLocalizedUrl(locale, myLayer.pkUrl, PAGES.pk.unload),
      image: '/header/unload.webp',
      icon: AIconArrowCircleDown,
    },
    {
      title: 'header.products.galleryCards.compliance.title',
      subtitle: 'header.products.galleryCards.compliance.subtitle',
      to: buildLocalizedUrl(locale, myLayer.complianceUrl, PAGES.compliance.l),
      image: '/header/compliance.webp',
      icon: AIconId,
    },
    {
      title: 'header.products.galleryCards.ved.title',
      subtitle: 'header.products.galleryCards.ved.subtitle',
      to: buildLocalizedUrl(locale, myLayer.tnvedUrl),
      image: '/header/ved.webp',
      icon: AIconGlobe,
    },
  ]
})

const currentIndex = ref(0)
const transitionName = ref('slide-left')
let timeoutId: ReturnType<typeof setTimeout> | null = null
const isHovered = ref(false)

const intervalDuration = 3000
let startTime = 0
let remaining = intervalDuration

const clearTimer = () => {
  if (timeoutId) {
    clearTimeout(timeoutId)
    timeoutId = null
  }
}

const startTimer = () => {
  clearTimer()
  startTime = Date.now()
  timeoutId = setTimeout(() => {
    nextImage()
  }, remaining)
}

const pauseTimer = () => {
  if (timeoutId) {
    clearTimer()
    const elapsed = Date.now() - startTime
    remaining = Math.max(remaining - elapsed, 0)
  }
}

const resumeTimer = () => {
  startTime = Date.now()
  timeoutId = setTimeout(() => {
    nextImage()
  }, remaining)
}

const resetTimer = () => {
  remaining = intervalDuration
  startTimer()
}

const nextImage = () => {
  transitionName.value = 'slide-left'
  currentIndex.value = (currentIndex.value + 1) % items.value.length
  remaining = intervalDuration
  startTimer()
}

const setCurrentIndex = (index: number) => {
  transitionName.value = index < currentIndex.value ? 'slide-right' : 'slide-left'
  currentIndex.value = index
  resetTimer()
  pauseTimer()
}

const handleMouseOver = () => {
  isHovered.value = true
  pauseTimer()
}

const handleMouseOut = () => {
  isHovered.value = false
  resumeTimer()
}

onMounted(() => startTimer())
onUnmounted(() => clearTimer())
</script>

<template>
  <div
    class="overflow-hidden relative w-[320px] h-[480px] rounded-2xl"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  >
    <transition :name="transitionName">
      <div
        :key="currentIndex"
        class="relative h-full"
      >
        <img
          :src="items[currentIndex].image"
          class="size-full object-cover rounded-2xl"
        />
        <nuxt-link-locale :to="items[currentIndex].to">
          <div class="absolute bottom-0 rounded-2xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
            <div class="flex flex-col gap-2">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-lg">
                    <component
                      :is="items[currentIndex].icon"
                      class="size-6"
                    />
                  </div>
                  <p class="normal-case text-white dark:text-gray-900 font-semibold text-xl">
                    {{ t(items[currentIndex].title) }}
                  </p>
                </div>
                <a-icon-arrow-side-up
                  class="icon-link size-6 text-white dark:text-gray-900"
                  :class="{ 'visible': isHovered }"
                />
              </div>
              <p class="normal-case text-white font-semibold dark:text-gray-900">
                {{ t(items[currentIndex].subtitle) }}
              </p>
            </div>
          </div>
        </nuxt-link-locale>
      </div>
    </transition>
    <div class="absolute xl:bottom-4 w-full">
      <div class="flex justify-center items-center gap-6">
        <div
          v-for="(item, index) in items"
          :key="index"
          class="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2"
          :class="{ 'w-[52px]': currentIndex === index }"
          @click="setCurrentIndex(index)"
        >
          <div
            v-if="currentIndex === index"
            class="absolute inset-0 bg-white dark:bg-gray-900 progress-bar"
            :style="{ animationPlayState: isHovered ? 'paused' : 'running' }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.progress-bar {
  animation: progress 3s linear forwards;
}

@keyframes progress {
  0% { width: 0; }
  100% { width: 100%; }
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.icon-link {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.icon-link.visible {
  opacity: 1;
}

.content-wrapper {
  overflow: hidden;
  will-change: max-height, opacity;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.content-wrapper.visible {
  max-height: 300px;
  opacity: 1;
}
</style>
