<script setup lang="ts">
const {
  countryGroups,
  activeCountryIdx,
  loading,
  loadingProducts,
  countryPage,
  visibleCountries,
  canPrevCountry,
  canNextCountry,
  currentProducts,
  fetchCategories,
  selectCountry,
} = usePodProducts();

onMounted(() => {
  fetchCategories();
});
</script>

<template>
  <section class="w-full flex flex-col items-center p-6 lg:p-10 bg-inkreach-homepage-2">
    <div class="w-full max-w-7xl flex flex-col gap-8 lg:gap-10">
      <div class="text-2xl md:text-4xl lg:text-5xl text-center">全球POD货盘</div>

      <div v-if="loading" class="flex justify-center py-8">
        <i class="fa-solid fa-spinner fa-spin text-3xl text-primary"></i>
      </div>

      <template v-else>
        <div class="flex items-center justify-center gap-4 lg:gap-10 overflow-x-auto pb-2">
          <button
            v-if="canPrevCountry"
            @click="countryPage--"
            class="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-full border border-gray-300 text-gray-400 hover:border-primary hover:text-primary transition-colors"
          >
            <i class="fa-solid fa-chevron-left text-xs"></i>
          </button>
          <button
            v-for="country in visibleCountries"
            :key="country.id"
            @click="selectCountry(countryGroups.indexOf(country))"
            class="px-4 lg:px-6 py-2 rounded-lg text-base lg:text-xl transition-colors whitespace-nowrap"
            :class="activeCountryIdx === countryGroups.indexOf(country)
              ? 'bg-primary text-white'
              : 'bg-white text-gray-500 hover:text-gray-700'"
          >
            {{ country.name }}
          </button>
          <button
            v-if="canNextCountry"
            @click="countryPage++"
            class="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-full border border-gray-300 text-gray-400 hover:border-primary hover:text-primary transition-colors"
          >
            <i class="fa-solid fa-chevron-right text-xs"></i>
          </button>
        </div>

        <div class="flex justify-center items-center min-h-[200px]">
          <div v-if="loadingProducts" class="flex justify-center py-8">
            <i class="fa-solid fa-spinner fa-spin text-2xl text-primary"></i>
          </div>
          <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-5 w-full">
            <div
              v-for="product in currentProducts"
              :key="product.id"
              class="bg-white rounded-lg overflow-hidden"
            >
              <div class="h-[14.25rem] flex items-center justify-center">
                <img
                  v-if="product.image"
                  :src="product.image"
                  :alt="product.name"
                  class="max-w-full max-h-full"
                  loading="lazy"
                />
                <div v-else class="flex items-center justify-center text-gray-300">
                  <i class="fa-solid fa-image text-4xl"></i>
                </div>
              </div>
              <div class="w-full text-xs lg:text-sm h-8 lg:h-10 flex justify-center items-center px-1 truncate">
                <div class="truncate">{{ product.name }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="w-full flex justify-center py-6 lg:py-10">
          <NuxtLink
            to="/product-center"
            class="inline-flex items-center gap-2 px-6 lg:px-8 py-2.5 lg:py-3 rounded-lg border-2 border-primary text-primary text-base lg:text-lg font-medium bg-white hover:bg-primary hover:text-white hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5"
          >
            更多产品
            <i class="fa-solid fa-arrow-right text-xs"></i>
          </NuxtLink>
        </div>
      </template>
    </div>
  </section>
</template>
