webapp/app/components/catalog/SelectionPanel.vue

<template>
  <MapPanel>
    <template #header>
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-semibold text-base text-base-content">{{ title }}</h3>
        <button class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content" @click="emit('close')">
          <Icon name="lucide:x" size="16" />
        </button>
      </div>
      <input
        v-model="searchQuery"
        type="text"
        :placeholder="searchPlaceholder"
        class="input input-sm w-full bg-white/50 border-base-300/50 text-base-content placeholder:text-base-content/50"
      />
    </template>

    <!-- Content -->
    <div v-if="loading" class="flex items-center justify-center py-8">
      <span class="loading loading-spinner loading-md" />
    </div>

    <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-white/60">
      <Icon name="lucide:search-x" size="32" class="mb-2" />
      <p>{{ $t('catalog.empty.noResults') }}</p>
    </div>

    <div v-else class="flex flex-col gap-2">
      <!-- Products -->
      <template v-if="selectMode === 'product'">
        <div
          v-for="(item, index) in filteredItems"
          :key="item.uuid ?? index"
          @mouseenter="emit('hover', item.uuid ?? null)"
          @mouseleave="emit('hover', null)"
        >
          <ProductCard
            :product="item"
            selectable
            compact
            :is-selected="selectedId === item.uuid"
            @select="onSelect(item)"
          />
        </div>
      </template>

      <!-- Hubs -->
      <template v-else-if="selectMode === 'hub'">
        <div
          v-for="(item, index) in filteredItems"
          :key="item.uuid ?? index"
          @mouseenter="emit('hover', item.uuid ?? null)"
          @mouseleave="emit('hover', null)"
        >
          <HubCard
            :hub="item"
            selectable
            :is-selected="selectedId === item.uuid"
            @select="onSelect(item)"
          />
        </div>
      </template>

      <!-- Suppliers -->
      <template v-else-if="selectMode === 'supplier'">
        <div
          v-for="(item, index) in filteredItems"
          :key="item.uuid ?? index"
          @mouseenter="emit('hover', item.uuid ?? null)"
          @mouseleave="emit('hover', null)"
        >
          <SupplierCard
            :supplier="item"
            selectable
            :is-selected="selectedId === item.uuid"
            @select="onSelect(item)"
          />
        </div>
      </template>

      <!-- Infinite scroll sentinel -->
      <div
        v-if="hasMore && !searchQuery"
        ref="loadMoreSentinel"
        class="flex items-center justify-center py-4"
      >
        <span v-if="loadingMore" class="loading loading-spinner loading-sm text-white/60" />
      </div>
    </div>
  </MapPanel>
</template>

<script setup lang="ts">
import type { SelectMode } from '~/composables/useCatalogSearch'

interface Item {
  uuid?: string | null
  name?: string | null
  [key: string]: any
}

const props = defineProps<{
  selectMode: SelectMode
  products?: Item[]
  hubs?: Item[]
  suppliers?: Item[]
  selectedId?: string
  loading?: boolean
  loadingMore?: boolean
  hasMore?: boolean
}>()

const emit = defineEmits<{
  'select': [type: string, item: Item]
  'close': []
  'load-more': []
  'hover': [uuid: string | null]
}>()

const { t } = useI18n()

const searchQuery = ref('')
const loadMoreSentinel = ref<HTMLElement | null>(null)

// Infinite scroll using IntersectionObserver
let observer: IntersectionObserver | null = null

onMounted(() => {
  observer = new IntersectionObserver(
    (entries) => {
      const entry = entries[0]
      if (entry?.isIntersecting && props.hasMore && !props.loadingMore && !searchQuery.value) {
        emit('load-more')
      }
    },
    { threshold: 0.1 }
  )
})

watch(loadMoreSentinel, (el) => {
  if (el && observer) {
    observer.observe(el)
  }
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
    observer = null
  }
})

const title = computed(() => {
  switch (props.selectMode) {
    case 'product': return t('catalog.headers.selectProduct')
    case 'hub': return t('catalog.headers.selectHub')
    case 'supplier': return t('catalog.headers.selectSupplier')
    default: return ''
  }
})

const searchPlaceholder = computed(() => {
  switch (props.selectMode) {
    case 'product': return t('catalog.search.searchProducts')
    case 'hub': return t('catalog.search.searchHubs')
    case 'supplier': return t('catalog.search.searchSuppliers')
    default: return t('catalog.search.placeholder')
  }
})

const items = computed(() => {
  switch (props.selectMode) {
    case 'product': return props.products || []
    case 'hub': return props.hubs || []
    case 'supplier': return props.suppliers || []
    default: return []
  }
})

const filteredItems = computed(() => {
  if (!searchQuery.value.trim()) return items.value

  const query = searchQuery.value.toLowerCase()
  return items.value.filter(item =>
    item.name?.toLowerCase().includes(query) ||
    item.country?.toLowerCase().includes(query)
  )
})

const onSelect = (item: Item) => {
  if (props.selectMode && item.uuid) {
    emit('select', props.selectMode, item)
  }
}
</script>