<script lang="ts" setup>
import type { Project } from "~/types/projects";

const props = defineProps<{
  projects: Project[];
}>();

const currentIndex = ref(0);
const autoPlay = ref(true);
const autoPlayInterval = ref(3000);
let intervalId: NodeJS.Timeout | null = null;

const visibleCount = 7;
const centerPosition = Math.ceil(visibleCount / 2);

const visibleProjects = computed(() => {
  const total = props.projects.length;
  const ordered: Project[] = [];

  for (let i = 0; i < visibleCount; i++) {
    const index =
      (currentIndex.value + i - Math.floor(visibleCount / 2) + total) % total;
    ordered.push(props.projects[index]);
  }

  return ordered;
});

const getCurrentProject = () => props.projects[currentIndex.value];

const goToPrevious = () => {
  currentIndex.value =
    (currentIndex.value - 1 + props.projects.length) % props.projects.length;
};

const goToNext = () => {
  currentIndex.value = (currentIndex.value + 1) % props.projects.length;
};

const startAutoPlay = () => {
  if (autoPlay.value && !intervalId) {
    intervalId = setInterval(goToNext, autoPlayInterval.value);
  }
};

const stopAutoPlay = () => {
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

onMounted(() => {
  startAutoPlay();
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) stopAutoPlay();
    else startAutoPlay();
  });
});

onBeforeUnmount(stopAutoPlay);
</script>

<template>
  <div
    v-if="props.projects && props.projects.length >= 7"
    dir="rtl"
    class="gallery-wrapper"
  >
    <h3 class="project-title">
      {{ getCurrentProject()?.title }}
    </h3>
    <div class="gallery">
      <div
        class="gallery-container"
        @mouseenter="stopAutoPlay"
        @mouseleave="startAutoPlay"
      >
        <div
          v-for="(project, pos) in visibleProjects"
          :key="project.id"
          :class="['gallery-item', `gallery-item-${pos + 1}`]"
        >
          <div class="image-wrapper">
            <NuxtImg
              :src="project.slider"
              :alt="project.title"
              :width="275"
              :height="572"
              class="gallery-image"
            />
            <div
              class="inactive-overlay"
              :class="{
                'inactive-overlay-visible': pos + 1 !== centerPosition,
              }"
            />
          </div>
        </div>

        <div class="gallery-controls">
          <button
            :aria-label="$t('ariaLabels.prevBtn')"
            class="gallery-controls-button"
            @click="goToPrevious"
          >
            <SvgGradientArrowRightIcon class="h-5 w-5" />
          </button>
          <button
            :aria-label="$t('ariaLabels.nextBtn')"
            class="gallery-controls-button"
            @click="goToNext"
          >
            <SvgGradientArrowLeftIcon class="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>

    <div v-if="getCurrentProject()" class="project-description">
      <p class="line-clamp-2">{{ getCurrentProject()?.short_description }}</p>
      <NuxtLinkLocale
        class="ws-gradient-border mx-auto w-fit px-4 py-2"
        :to="`/our-projects/${getCurrentProject()?.slug}`"
      >
        {{ $t("projectsHighlight.know-more-button") }}
      </NuxtLinkLocale>
    </div>
  </div>

  <div v-else-if="props.projects && props.projects.length < 7">
    <EmptyState
      size="100%"
      :custom-message="$t('projectsCarousel.notEnoughMobileProjects')"
    />
  </div>
</template>

<style scoped>
.gallery-wrapper {
  width: 100%;
  min-height: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery {
  width: 100%;
  display: flex;
  justify-content: center;
}

.gallery-container {
  height: 575px;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.gallery-item {
  position: absolute;
  width: 275px;
  height: 572px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  z-index: 0;
  text-align: center;
}

.gallery-item-1 {
  transform: translateX(-215%) scale(0.7);
  z-index: 1;
}
.gallery-item-2 {
  transform: translateX(-150%) scale(0.8);
  z-index: 2;
}
.gallery-item-3 {
  transform: translateX(-78%) scale(0.9);
  z-index: 3;
}
.gallery-item-4 {
  transform: translateX(0%) scale(1);
  z-index: 4;
}
.gallery-item-5 {
  transform: translateX(78%) scale(0.9);
  z-index: 3;
}
.gallery-item-6 {
  transform: translateX(150%) scale(0.8);
  z-index: 2;
}
.gallery-item-7 {
  transform: translateX(215%) scale(0.7);
  z-index: 1;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-background);
  border-radius: inherit;
  z-index: -1;
}
.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.inactive-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.inactive-overlay-visible {
  opacity: 1;
}

.gallery-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding-inline: 12px;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
}

.gallery-controls button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.gallery-controls button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.gallery-controls button:active {
  transform: scale(0.95);
}

.project-title {
  width: 100%;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  z-index: 10;
  display: block;
  margin-bottom: 20px;
}

.project-description {
  width: 720px;
  max-width: 100%;
  margin-top: 40px;
  text-align: center;
  z-index: 10;
  opacity: 0.9;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

@media (max-width: 1536px) {
  .gallery-item-1,
  .gallery-item-7 {
    display: none;
  }
}

@media (max-width: 1024px) {
  .gallery-item-1,
  .gallery-item-2,
  .gallery-item-6,
  .gallery-item-7 {
    display: none;
  }
  .gallery-item-3 {
    transform: translateX(-75%) scale(0.9);
  }
  .gallery-item-4 {
    transform: translateX(0%) scale(1);
  }
  .gallery-item-5 {
    transform: translateX(75%) scale(0.9);
  }
  .gallery-controls {
    padding: 0 10px;
  }
}
</style>
