<script lang="ts" setup>
import {
  // useBranchesQuery,
  useCountriesQuery,
  useServicesQuery,
  useSocialIconsQuery,
} from "~/queries/contact";
import { useGlobalTestimonialsQuery } from "~/queries/testimonials";

const { state: testimonials } = useGlobalTestimonialsQuery();
const { branches, isLoading } = useBranches();

// const { data: branches } = useBranchesQuery();
const { data: socialIcons } = useSocialIconsQuery();
const { data: countries } = useCountriesQuery();
const { data: services } = useServicesQuery();
const currentPage = ref(1);
const pageSize = 9;

const totalPages = computed(() => {
  if (!testimonials.value.data) return 1;
  return Math.ceil(testimonials.value.data.length / pageSize);
});

const paginatedTestimonials = computed(() => {
  if (!testimonials.value.data) return [];
  const start = (currentPage.value - 1) * pageSize;
  return testimonials.value.data.slice(start, start + pageSize);
});

function goToPage(page: number) {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
  const testimonialsSection = document.getElementById("testimonials-section");
  testimonialsSection?.scrollIntoView({ behavior: "smooth" });
};



const playingId = ref<number | null>(null);
const cardResetTokens = ref<Record<string, number>>({});

const incResetToken = (id: number) => {
  const key = String(id);
  cardResetTokens.value[key] = (cardResetTokens.value[key] || 0) + 1;
};

const handlePlay = (id: number) => {
  if (playingId.value !== null && playingId.value !== id) {
    incResetToken(playingId.value);
  }
  playingId.value = id;

};

const handlePause = (id: number) => {
  if (playingId.value === id) {
    playingId.value = null;
  }
};
</script>

<template>
  <section id="testimonials-section" class="bg-gradient-odd py-section">
    <div class="container mx-auto px-4">
      <div
        v-if="testimonials.status === 'pending'"
        class="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3"
      >
        <SkeletonsTestimonialCardSkeleton v-for="i in 6" :key="i" />
      </div>

      <div
        v-else-if="
          testimonials.status === 'error' || testimonials.data.length === 0
        "
        class="container mx-auto flex items-center justify-center"
      >
        <EmptyState />
      </div>

      <div v-else class="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
        <TestimonialsCard
          v-for="testimonial in paginatedTestimonials"
          :id="testimonial.id"
          :key="testimonial.id"
          :full-name="testimonial.full_name"
          :job-position="testimonial.job_position"
          :image="testimonial.image"
          :audio-url="testimonial.audio_url"
          :video-url="testimonial.video_url"
          :comment="testimonial.comment"
          :video-reset-token="cardResetTokens[String(testimonial.id)] || 0"
          :audio-reset-token="cardResetTokens[String(testimonial.id)] || 0"
          @play="handlePlay(testimonial.id)"
          @pause="handlePause(testimonial.id)"
        />
      </div>

      <!-- Pagination Controls -->
      <div
        v-if="totalPages > 1"
        class="mt-8 flex items-center justify-center gap-2"
      >
        <button
          class="mx-2 cursor-pointer"
          :disabled="currentPage === 1"
          @click="goToPage(currentPage - 1)"
        >
          <SvgArrowRightIcon class="h-5 w-5" />
        </button>

        <Button
          v-for="page in totalPages"
          :key="page"
          class="cursor-pointer rounded px-3 py-1"
          :variant="page === currentPage ? 'wsGradient' : 'link'"
          size="icon"
          @click="goToPage(page)"
        >
          {{ page }}
        </Button>

        <button
          class="mx-2 cursor-pointer"
          :disabled="currentPage === totalPages"
          @click="goToPage(currentPage + 1)"
        >
          <SvgArrowLeftIcon class="h-5 w-5" />
        </button>
      </div>

      <Spacer />
      <div>
      <SkeletonsContactSkeleton
      v-if="isLoading || !socialIcons || !countries || !services"
    />

      <Contact
        v-else
        :social-icons="socialIcons"
        :branches="branches"
        :countries="countries"
        :services="services"
        :form-title="$t('contactSection.title')"
      />
    </div>
    </div>
  </section>
</template>
