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

<template>
  <div>
    <!-- List content -->
    <div v-if="isLoading || productsLoading" 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 === selectedOfferId }"
          @click="onSelectOffer(item)"
          @mouseenter="hoveredOfferId = item.uuid"
          @mouseleave="hoveredOfferId = undefined"
        >
          <OfferCard :offer="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('catalogOffersSection.empty.no_offers') }}</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()

// Products for filter
const {
  items: products,
  isLoading: productsLoading,
  init: initProducts
} = useCatalogProducts()

// Offers
const {
  items,
  total,
  selectedProductUuid,
  isLoading,
  isLoadingMore,
  canLoadMore,
  loadMore,
  init: initOffers,
  setProductUuid
} = useCatalogOffers()

// Selected/hovered offer for map highlighting
const selectedOfferId = ref<string>()
const hoveredOfferId = ref<string>()

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

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

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

// Map items with correct coordinate field names
const itemsWithCoords = computed(() =>
  items.value.filter(item =>
    item.locationLatitude != null &&
    item.locationLongitude != null &&
    !isNaN(Number(item.locationLatitude)) &&
    !isNaN(Number(item.locationLongitude))
  ).map(item => ({
    uuid: item.uuid,
    name: item.productName || '',
    latitude: Number(item.locationLatitude),
    longitude: Number(item.locationLongitude)
  }))
)

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

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

// Product filter options
const productFilters = computed(() => {
  const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
  const productOptions = products.value.map(p => ({
    id: p.uuid,
    label: p.name
  }))
  return [...all, ...productOptions]
})

// Active filter badges
const activeFilterBadges = computed(() => {
  const badges: { id: string; label: string }[] = []
  if (selectedProductUuid.value) {
    const product = products.value.find(p => p.uuid === selectedProductUuid.value)
    if (product) badges.push({ id: `product:${product.uuid}`, label: product.name })
  }
  return badges
})

// Remove filter badge
const onRemoveFilter = (id: string) => {
  if (id.startsWith('product:')) {
    setProductUuid(null)
  }
}

// Handle product filter change
const onProductFilterChange = (value: string) => {
  setProductUuid(value === 'all' ? null : value)
}

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

const onSelectOffer = (offer: any) => {
  selectedOfferId.value = offer.uuid
}

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

// Filter component for the layout
const OffersFilterComponent = defineComponent({
  setup() {
    return () => h('div', { class: 'p-2 space-y-3' }, [
      h('div', {}, [
        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogOffersSection.filters.product')),
        h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
          productFilters.value.map(filter =>
            h('li', { key: filter.id },
              h('a', {
                class: (selectedProductUuid.value === filter.id || (!selectedProductUuid.value && filter.id === 'all')) ? 'active' : '',
                onClick: () => onProductFilterChange(filter.id)
              }, filter.label)
            )
          )
        )
      ])
    ])
  }
})

// Provide data to layout
provideCatalogLayout({
  searchQuery,
  activeFilters: activeFilterBadges,
  displayedCount: computed(() => displayItems.value.length),
  totalCount: computed(() => total.value),
  onSearch,
  onRemoveFilter,
  filterComponent: OffersFilterComponent,
  mapItems: itemsWithCoords,
  mapId: 'offers-map',
  pointColor: '#f59e0b',
  hoveredItemId: hoveredOfferId,
  hoveredItem,
  onMapSelect,
  onBoundsChange,
  searchWithMap
})

// Initialize
await Promise.all([initProducts(), initOffers()])

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