<script setup lang="ts">
const {
  countryGroups,
  loading,
  loadingProducts,
  currentProducts,
  fetchCategories,
  selectCountry,
} = usePodProducts();
const { countries: configuredCountries, categories: configuredCategories, loadFilters } = useProductCenter();
const selectedCountryId = shallowRef<string>();

async function initialize(): Promise<void> {
  await Promise.all([fetchCategories(), loadFilters()]);
  const firstCountry = configuredCountries.value[0];
  if (firstCountry) switchCountry(firstCountry);
}

function switchCountry(country: { id: string; name: string }): void {
  selectedCountryId.value = country.id;
  const index = countryGroups.value.findIndex(
    (group) => group.name === country.name || group.name.includes(country.name),
  );
  if (index >= 0) selectCountry(index);
}

function categoryLink(categoryName: string) {
  const categoryId = findCategoryIdForPodName(categoryName, configuredCategories.value);
  return {
    path: '/product-center',
    query: {
      countryId: selectedCountryId.value,
      ...(categoryId ? { categoryId } : {}),
    },
  };
}

onMounted(() => void initialize());
</script>

<template>
  <section class="pod-section w-full flex flex-col items-center p-6 lg:p-10 bg-inkreach-homepage-2">
    <div class="pod-content w-full max-w-7xl flex flex-col gap-8 lg:gap-10">
      <div class="text-[48px] font-extrabold 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="country-grid grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 pb-2">
          <button
            v-for="country in configuredCountries"
            :key="country.id"
            type="button"
            class="country-button px-4 py-2 rounded-lg transition-colors whitespace-nowrap"
            :class="selectedCountryId === country.id ? 'bg-primary text-white' : 'bg-white text-gray-600 hover:text-primary'"
            @click="switchCountry(country)"
          >
            <span class="country-flag">
              <img v-if="country.icon" :src="country.icon" :alt="country.name" />
            </span>
            <span>{{ country.name }}</span>
          </button>
        </div>

        <div class="product-stage 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">
            <NuxtLink
              v-for="product in currentProducts"
              :key="product.id"
              :to="categoryLink(product.name)"
              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>
            </NuxtLink>
          </div>
        </div>

        <div class="more-products w-full flex justify-center py-6 lg:py-10">
          <NuxtLink
            to="/product-center"
            class="more-products-link text-primary text-base lg:text-lg font-medium hover:underline underline-offset-4"
          >
            更多产品
          </NuxtLink>
        </div>
      </template>
    </div>
  </section>
</template>

<style scoped>
.country-button { display: grid; grid-template-columns: 22px auto; align-items: center; justify-content: center; column-gap: 8px; min-height: 40px; }
.country-flag { display: grid; place-items: center; width: 22px; height: 16px; }
.country-flag img { display: block; width: 22px; height: 16px; border-radius: 2px; object-fit: cover; }
.more-products { margin-top: auto; }
@media (min-width: 1024px) {
  .pod-section { height: 1007px; padding-top: 54px; }
  .pod-content { height: 100%; }
  .product-stage { flex: 1; min-height: 0; align-items: flex-start; }
}
</style>
