<template>
  <div class="relative">
    <div
      v-if="posts.length > 0"
      class="min-h-[1696.380px] md:min-h-[558.5px] 2xl:min-h-[682.234px]"
    >
      <ClientOnly>
        <swiper-container ref="swiperRef" :key="dir" :dir="dir" :init="false">
          <swiper-slide v-for="post in posts" :key="post.id">
            <div
              class="bg-surface-background border-surface-border mx-auto flex w-full flex-col gap-4 rounded-[2rem] border p-4 lg:flex-row xl:max-w-[1190px]"
            >
              <!-- Left Column - 3 images in layout -->
              <div class="flex flex-1 flex-col gap-y-4">
                <!-- Main large image -->
                <div class="relative aspect-[16/9] overflow-hidden rounded-2xl">
                  <!-- Blurred background fill -->
                  <NuxtImg
                    :src="post.image1"
                    alt=""
                    aria-hidden="true"
                    :width="1280"
                    :height="760"
                    preset="default"
                    class="absolute inset-0 h-full w-full scale-105 object-cover opacity-40 blur-md"
                  />
                  <!-- Foreground image -->
                  <NuxtImg
                    :src="post.image1"
                    :alt="post.imageAlt1"
                    :width="1280"
                    :height="760"
                    preset="default"
                    class="absolute inset-0 h-full w-full object-contain"
                  />
                </div>

                <!-- Bottom row - two smaller images -->
                <div class="flex flex-col gap-4 md:flex-row">
                  <div
                    class="relative aspect-[16/9] w-full overflow-hidden rounded-2xl"
                  >
                    <!-- Blurred background fill -->
                    <NuxtImg
                      :src="post.image2"
                      alt=""
                      aria-hidden="true"
                      :width="1280"
                      :height="760"
                      preset="default"
                      class="absolute inset-0 h-full w-full scale-105 object-cover opacity-40 blur-md"
                    />
                    <!-- Foreground image -->
                    <NuxtImg
                      :src="post.image2"
                      :alt="post.imageAlt2"
                      :width="1280"
                      :height="760"
                      preset="default"
                      class="absolute inset-0 h-full w-full object-contain"
                    />
                  </div>
                  <div
                    class="relative aspect-[16/9] w-full overflow-hidden rounded-2xl lg:[aspect-ratio:auto] lg:h-full"
                  >
                    <!-- Blurred background fill -->
                    <NuxtImg
                      :src="post.image3"
                      alt=""
                      aria-hidden="true"
                      :width="1280"
                      :height="760"
                      preset="default"
                      class="absolute inset-0 h-full w-full scale-105 object-cover opacity-40 blur-md"
                    />
                    <!-- Foreground image -->
                    <NuxtImg
                      :src="post.image3"
                      :alt="post.imageAlt3"
                      :width="1280"
                      :height="760"
                      preset="default"
                      class="absolute inset-0 h-full w-full object-contain"
                    />
                  </div>
                </div>
              </div>

              <!-- Right Column - Vertical image -->
              <div
                class="relative aspect-[8/9] w-full overflow-hidden rounded-2xl lg:shrink-0 lg:basis-1/3"
              >
                <!-- Blurred background fill -->
                <NuxtImg
                  :src="post.imageVertical"
                  alt=""
                  aria-hidden="true"
                  :width="720"
                  :height="1280"
                  preset="default"
                  class="absolute inset-0 h-full w-full scale-105 object-cover opacity-40 blur-md"
                />
                <!-- Foreground image -->
                <NuxtImg
                  :src="post.imageVertical"
                  :alt="post.imageVerticalAlt"
                  :width="720"
                  :height="1280"
                  preset="default"
                  class="absolute inset-0 h-full w-full object-contain"
                />
              </div>
            </div>
          </swiper-slide>
        </swiper-container>
      </ClientOnly>
    </div>

    <!-- Navigation Controls -->
    <div class="mt-6 flex items-center justify-center gap-6">
      <button
        :aria-label="$t('ariaLabels.prevBtn')"
        class="prev-button-latest-models bg-surface-background border-surface-border rounded-ws-rounded flex-shrink-0 cursor-pointer border p-3"
        @click="swiper.prev()"
      >
        <SvgGradientFullArrowRight class="ltr:scale-x-[-1] rtl:scale-x-[1]" />
      </button>

      <!-- Custom Pagination Dots -->
      <div class="custom-pagination-container">
        <div
          v-for="(post, index) in posts"
          :key="`pagination-${post.id}`"
          class="pagination-dot"
          :class="{ active: currentSlide === index }"
          @click="goToSlide(index)"
        />
      </div>

      <button
        :aria-label="$t('ariaLabels.nextBtn')"
        class="next-button-latest-models bg-surface-background border-surface-border rounded-ws-rounded flex-shrink-0 cursor-pointer border p-3"
        @click="swiper.next()"
      >
        <SvgGradientFullArrowLeft class="ltr:scale-x-[-1] rtl:scale-x-[1]" />
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Post } from "~/types/Marketing";
const { posts, isPending: _isPending } = defineProps<{
  posts: Post[];
  isPending: boolean;
}>();
const swiperRef = ref(null);
const currentSlide = ref(0);

const { locale } = useI18n();
const dir = computed(() => (locale.value === "ar" ? "rtl" : "ltr"));

const swiper = useSwiper(swiperRef, {
  slidesPerView: 1,
  spaceBetween: 20,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  keyboard: {
    enabled: true,
  },
  loop: true,
  centeredSlides: false,
  grabCursor: true,
  effect: "slide",
  speed: 600,
  on: {
    slideChange: (swiper) => {
      currentSlide.value = swiper.realIndex;
    },
  },
});

const goToSlide = (index: number) => {
  if (swiper.instance.value) {
    swiper.instance.value.slideToLoop(index);
  }
};
</script>

<style scoped>
swiper-slide {
  height: 100%;
  display: flex;
  align-items: stretch;
}

swiper-container {
  width: 100%;
  height: auto;
}

.card {
  height: 100%;
}

.custom-pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

/* Responsive pagination dots */
@media (max-width: 640px) {
  .custom-pagination-container {
    gap: 0.25rem;
    max-width: 300px;
  }

  .pagination-dot {
    width: 18px;
    height: 5px;
  }
}

@media (max-width: 480px) {
  .custom-pagination-container {
    gap: 0.5rem;
    max-width: 250px;
  }

  .pagination-dot {
    width: 16px;
    height: 4px;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .pagination-dot {
    width: 24px;
    height: 6px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .pagination-dot {
    width: 28px;
    height: 7px;
  }
}

.pagination-dot {
  width: 32px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--surface-background);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--surface-border);
}

.pagination-dot:hover {
  transform: scale(1.1);
}

.pagination-dot.active {
  background-color: var(--foreground);
  transform: scale(1.02);
}

.dark .pagination-dot {
  background-color: rgba(75, 85, 99, 0.5);
}

.dark .pagination-dot.active {
  background-color: var(--foreground);
}

/* Smooth transitions for the entire card */
.bg-surface-background {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Ensure images maintain aspect ratio and fill containers properly */
.rounded-2xl img {
  border-radius: 1rem;
}

/* Loading state for images */
.nuxt-img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Dark mode loading */
.dark .nuxt-img {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}
</style>
