webapp/app/pages/catalog/hubs/index.vue

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

  <template v-else>
    <Stack gap="3">
      <div
        v-for="item in displayItems"
        :key="item.uuid"
        :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedHubId }"
        @click="onSelectHub(item)"
        @mouseenter="hoveredHubId = item.uuid"
        @mouseleave="hoveredHubId = undefined"
      >
        <template v-for="country in getCountryForHub(item)" :key="country.name">
          <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
        </template>
        <HubCard :hub="item" />
      </div>
    </Stack>

    <PaginationLoadMore
      v-if="displayItems.length > 0"
      :shown="displayItems.length"
      :total="total"
      :can-load-more="canLoadMore"
      :loading="isLoadingMore"
      hide-counter
      @load-more="loadMore"
      class="mt-4"
    />

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

<script setup lang="ts">
import { h, defineComponent } from 'vue'
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'

definePageMeta({
  layout: 'catalog'
})

const { t } = useI18n()

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

// Selected/hovered hub for map highlighting
const selectedHubId = ref<string>()
const hoveredHubId = ref<string>()

// Search bar
const searchQuery = ref('')

// Server-side clustering
const useServerClustering = true
const { clusteredNodes, fetchClusters } = useClusteredNodes()

// Search with map checkbox
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)

const onBoundsChange = (bounds: MapBounds) => {
  currentBounds.value = bounds
  if (useServerClustering) {
    fetchClusters(bounds)
  }
}

// Filter items with valid coordinates for map
const itemsWithCoords = computed(() =>
  items.value.filter(item =>
    item.latitude != null &&
    item.longitude != null &&
    !isNaN(Number(item.latitude)) &&
    !isNaN(Number(item.longitude))
  ).map(item => ({
    uuid: item.uuid,
    name: item.name || '',
    latitude: Number(item.latitude),
    longitude: Number(item.longitude),
    country: item.country
  }))
)

// Filtered items when searchWithMap is enabled
const displayItems = computed(() => {
  if (!searchWithMap.value || !currentBounds.value) return items.value
  return items.value.filter(item => {
    if (item.latitude == null || item.longitude == null) return false
    const { west, east, north, south } = currentBounds.value!
    const lng = Number(item.longitude)
    const lat = Number(item.latitude)
    return lng >= west && lng <= east && lat >= south && lat <= north
  })
})

// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
  if (!hoveredHubId.value) return null
  const item = items.value.find(i => i.uuid === hoveredHubId.value)
  if (!item?.latitude || !item?.longitude) return null
  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
})

// Active filter badges (non-default filters shown as badges)
const activeFilterBadges = computed(() => {
  const badges: { id: string; label: string }[] = []
  if (selectedFilter.value !== 'all') {
    const filter = filters.value.find(f => f.id === selectedFilter.value)
    if (filter) badges.push({ id: `transport:${filter.id}`, label: filter.label })
  }
  if (selectedCountry.value !== 'all') {
    const filter = countryFilters.value.find(f => f.id === selectedCountry.value)
    if (filter) badges.push({ id: `country:${filter.id}`, label: filter.label })
  }
  return badges
})

// Remove filter badge
const onRemoveFilter = (id: string) => {
  if (id.startsWith('transport:')) {
    selectedFilter.value = 'all'
  } else if (id.startsWith('country:')) {
    selectedCountry.value = 'all'
  }
}

// Search handler (for future use)
const onSearch = () => {
  // TODO: Implement search by hub name
}

const onSelectHub = (hub: any) => {
  selectedHubId.value = hub.uuid
}

// Handle selection from map
const onMapSelect = (uuid: string) => {
  const hub = items.value.find(i => i.uuid === uuid)
  if (hub) {
    selectedHubId.value = uuid
  }
}

// Helper to get country for hub
const getCountryForHub = (hub: any) => {
  return itemsByCountry.value.filter(c => c.hubs.some(h => h.uuid === hub.uuid))
}

// Check if this hub is first in its country group
const isFirstInCountry = (hub: any) => {
  for (const country of itemsByCountry.value) {
    if (country.hubs[0]?.uuid === hub.uuid) return true
  }
  return false
}

// Filter component for the layout
const HubsFilterComponent = defineComponent({
  setup() {
    return () => h('div', { class: 'p-2 space-y-3' }, [
      // Transport filter
      h('div', {}, [
        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogHubsSection.filters.transport')),
        h('ul', { class: 'menu menu-compact' },
          filters.value.map(filter =>
            h('li', { key: filter.id },
              h('a', {
                class: selectedFilter.value === filter.id ? 'active' : '',
                onClick: () => { selectedFilter.value = filter.id }
              }, filter.label)
            )
          )
        )
      ]),
      // Divider
      h('div', { class: 'divider my-0' }),
      // Country filter
      h('div', {}, [
        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogHubsSection.filters.country')),
        h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
          countryFilters.value.map(filter =>
            h('li', { key: filter.id },
              h('a', {
                class: selectedCountry.value === filter.id ? 'active' : '',
                onClick: () => { selectedCountry.value = filter.id }
              }, filter.label)
            )
          )
        )
      ])
    ])
  }
})

// Provide data to layout
provideCatalogLayout({
  searchQuery,
  activeFilters: activeFilterBadges,
  displayedCount: computed(() => displayItems.value.length),
  totalCount: computed(() => total.value),
  onSearch,
  onRemoveFilter,
  filterComponent: HubsFilterComponent,
  mapItems: itemsWithCoords,
  mapId: 'hubs-map',
  pointColor: '#10b981',
  hoveredItemId: hoveredHubId,
  hoveredItem,
  onMapSelect,
  onBoundsChange,
  searchWithMap,
  useServerClustering,
  clusteredNodes
})

await init()

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