<template>
  <Stack gap="6">
    <Section variant="plain" paddingY="md">
      <PageHeader :title="t('catalogHubsSection.header.title')" />
    </Section>

    <Section v-if="isLoading" variant="plain" paddingY="md">
      <Card padding="lg">
        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
        </Stack>
      </Card>
    </Section>

    <Section v-else variant="plain" paddingY="md">
      <Stack gap="6">
        <NuxtLink :to="localePath('/catalog/hubs/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
          <ClientOnly>
            <MapboxGlobe
              map-id="hubs-map"
              :locations="itemsWithCoords"
              :height="192"
            />
          </ClientOnly>
        </NuxtLink>

        <CatalogFilters :filters="filters" v-model="selectedFilter" />

        <div v-for="country in itemsByCountry" :key="country.name" class="space-y-3">
          <Text weight="semibold">{{ country.name }}</Text>
          <Grid :cols="1" :md="2" :lg="3" :gap="4">
            <HubCard
              v-for="hub in country.hubs"
              :key="hub.uuid"
              :hub="hub"
            />
          </Grid>
        </div>

        <PaginationLoadMore
          :shown="items.length"
          :total="total"
          :can-load-more="canLoadMore"
          :loading="isLoadingMore"
          @load-more="loadMore"
        />

        <Stack v-if="items.length === 0" align="center" gap="2">
          <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
        </Stack>
      </Stack>
    </Section>
  </Stack>
</template>

<script setup lang="ts">
const { t } = useI18n()
const localePath = useLocalePath()

const {
  items,
  total,
  selectedFilter,
  filters,
  isLoading,
  isLoadingMore,
  itemsWithCoords,
  itemsByCountry,
  canLoadMore,
  loadMore,
  init
} = useCatalogHubs()

await init()

useHead(() => ({
  title: t('catalogHubsSection.header.title')
}))
</script>
