<template>
  <Stack gap="6">
    <Section variant="plain" paddingY="md">
      <PageHeader :title="t('catalogSuppliersSection.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="4">
        <NuxtLink :to="localePath('/catalog/suppliers/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
          <ClientOnly>
            <MapboxGlobe
              map-id="suppliers-map"
              :locations="itemsWithCoords"
              :height="192"
            />
          </ClientOnly>
        </NuxtLink>

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

        <Grid :cols="1" :md="2" :lg="3" :gap="4">
          <SupplierCard
            v-for="supplier in items"
            :key="supplier.uuid || supplier.teamUuid"
            :supplier="supplier"
          />
        </Grid>

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

        <Stack v-if="total === 0" align="center" gap="2">
          <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
        </Stack>
      </Stack>
    </Section>
  </Stack>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const { t } = useI18n()
const localePath = useLocalePath()

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

await init()

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