<template>
  <div class="flex flex-col h-[calc(100vh-200px)]">
    <!-- Header -->
    <div class="py-4">
      <PageHeader :title="t('catalogHubsSection.header.title')" />
    </div>

    <!-- Loading state -->
    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
      <Card padding="lg">
        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
        </Stack>
      </Card>
    </div>

    <!-- Split Layout -->
    <div v-else class="flex-1 flex gap-4 min-h-0">
      <!-- Left side: Filters + Cards (scrollable) -->
      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
        <Stack gap="4">
          <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>
            <Stack gap="3">
              <HubCard
                v-for="hub in country.hubs"
                :key="hub.uuid"
                :hub="hub"
              />
            </Stack>
          </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>
      </div>

      <!-- Right side: Map (sticky, hidden on mobile) -->
      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
        <ClientOnly>
          <MapboxGlobe
            map-id="hubs-map"
            :locations="itemsWithCoords"
            class="h-full w-full"
          />
        </ClientOnly>
      </div>
    </div>
  </div>
</template>

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

const { t } = useI18n()

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

await init()

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