<template>
  <CatalogPage
    :items="displayItems"
    :map-items="itemsWithCoords"
    :loading="isLoading"
    with-map
    map-id="suppliers-map"
    point-color="#3b82f6"
    :total-count="total"
  >
    <template #searchBar="{ displayedCount, totalCount }">
      <CatalogSearchBar
        v-model:search-query="searchQuery"
        :active-filters="[]"
        :displayed-count="displayedCount"
        :total-count="totalCount"
        @search="onSearch"
      />
    </template>

    <template #header>
      <Text v-if="!isLoading" tone="muted">Выберите поставщика</Text>
    </template>

    <template #card="{ item }">
      <SupplierCard :supplier="item" />
    </template>

    <template #pagination>
      <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"
      />
    </template>

    <template #empty>
      <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
    </template>
  </CatalogPage>
</template>

<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'

definePageMeta({
  layout: 'topnav'
})

const { t } = useI18n()

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

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

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

// 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 || item.teamUuid,
    name: item.name || '',
    latitude: Number(item.latitude),
    longitude: Number(item.longitude)
  }))
)

// 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
  })
})

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

await init()

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