webapp/app/components/page/CatalogPage.vue

<template>
  <div class="flex flex-col flex-1 min-h-0 relative">
    <!-- Loading state -->
    <div v-if="loading" class="absolute inset-0 z-50 flex items-center justify-center bg-base-100/80">
      <Card padding="lg">
        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ $t('catalogLanding.states.loading') }}</Text>
        </Stack>
      </Card>
    </div>

    <!-- Fullscreen Map -->
    <div class="absolute inset-0">
      <ClientOnly>
        <CatalogMap
          ref="mapRef"
          :map-id="mapId"
          :items="useServerClustering ? [] : itemsWithCoords"
          :clustered-points="useServerClustering ? clusteredNodes : []"
          :use-server-clustering="useServerClustering"
          :point-color="pointColor"
          :hovered-item-id="hoveredId"
          :hovered-item="hoveredItem"
          @select-item="onMapSelect"
          @bounds-change="onBoundsChange"
        />
      </ClientOnly>
    </div>

    <!-- Mode tabs (top left overlay) -->
    <div class="absolute top-4 left-4 z-20">
      <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg">
        <button
          class="tab"
          :class="{ 'tab-active': catalogMode === 'explore' }"
          @click="setCatalogMode('explore')"
        >
          <Icon name="lucide:compass" size="16" class="mr-1" />
          {{ $t('catalog.modes.explore') }}
        </button>
        <button
          class="tab"
          :class="{ 'tab-active': catalogMode === 'quote' }"
          @click="setCatalogMode('quote')"
        >
          <Icon name="lucide:search" size="16" class="mr-1" />
          {{ $t('catalog.modes.quote') }}
        </button>
      </div>
    </div>

    <!-- Left overlay panel -->
    <div
      class="absolute top-20 left-4 bottom-4 z-10 w-80 max-w-[calc(100vw-2rem)] hidden lg:block"
    >
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
        <!-- Explore mode panel -->
        <template v-if="catalogMode === 'explore'">
          <slot name="explore-panel">
            <ExplorePanel
              :selected-item="selectedMapItem"
              @close-selected="selectedMapItem = null"
              @view-details="onViewDetails"
            />
          </slot>
        </template>

        <!-- Quote mode panel -->
        <template v-else>
          <slot name="quote-panel" />
        </template>
      </div>
    </div>

    <!-- Mobile bottom sheet (simplified) -->
    <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
      <!-- Mobile mode toggle -->
      <div class="flex justify-center mb-2">
        <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg tabs-sm">
          <button
            class="tab"
            :class="{ 'tab-active': catalogMode === 'explore' }"
            @click="setCatalogMode('explore')"
          >
            {{ $t('catalog.modes.explore') }}
          </button>
          <button
            class="tab"
            :class="{ 'tab-active': catalogMode === 'quote' }"
            @click="setCatalogMode('quote')"
          >
            {{ $t('catalog.modes.quote') }}
          </button>
        </div>
      </div>

      <!-- Mobile panel (collapsible) -->
      <div
        class="bg-white/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
        :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
      >
        <!-- Drag handle -->
        <div
          class="flex justify-center py-2 cursor-pointer"
          @click="mobilePanelExpanded = !mobilePanelExpanded"
        >
          <div class="w-10 h-1 bg-base-300 rounded-full" />
        </div>

        <div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">
          <!-- Explore mode panel -->
          <template v-if="catalogMode === 'explore'">
            <slot name="explore-panel">
              <ExplorePanel
                :selected-item="selectedMapItem"
                @close-selected="selectedMapItem = null"
                @view-details="onViewDetails"
              />
            </slot>
          </template>

          <!-- Quote mode panel -->
          <template v-else>
            <slot name="quote-panel" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

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

const { mapViewMode, catalogMode, setCatalogMode } = useCatalogSearch()

interface MapItem {
  uuid: string
  latitude?: number | null
  longitude?: number | null
  name?: string
  country?: string
  [key: string]: any
}

const props = withDefaults(defineProps<{
  loading?: boolean
  useServerClustering?: boolean
  clusterNodeType?: string
  mapId?: string
  pointColor?: string
  hoveredId?: string
  items?: MapItem[]
}>(), {
  loading: false,
  useServerClustering: true,
  clusterNodeType: 'offer',
  mapId: 'catalog-map',
  pointColor: '#f97316',
  items: () => []
})

const emit = defineEmits<{
  'select': [item: MapItem]
  'bounds-change': [bounds: MapBounds]
  'update:hoveredId': [uuid: string | undefined]
}>()

// Server-side clustering
const nodeTypeRef = computed(() => props.clusterNodeType)
const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, nodeTypeRef)

// Map refs
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)

// Selected item from map click
const selectedMapItem = ref<MapItem | null>(null)

// Mobile panel state
const mobilePanelExpanded = ref(false)

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

// Filter items with valid coordinates for map (client-side mode only)
const itemsWithCoords = computed(() =>
  props.items.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
  }))
)

const onBoundsChange = (bounds: MapBounds) => {
  emit('bounds-change', bounds)
  if (props.useServerClustering) {
    fetchClusters(bounds)
  }
}

// Handle selection from map
const onMapSelect = (uuid: string) => {
  const item = props.items.find(i => i.uuid === uuid)
  if (item) {
    selectedMapItem.value = item
    emit('select', item)
  } else if (props.useServerClustering) {
    // For server clustering, item might not be in props.items
    // Create minimal item with just uuid
    selectedMapItem.value = { uuid }
    emit('select', { uuid })
  }
}

const onViewDetails = (item: MapItem) => {
  emit('select', item)
}

// Expose flyTo for external use
const flyTo = (lat: number, lng: number, zoom = 8) => {
  mapRef.value?.flyTo(lat, lng, zoom)
}

defineExpose({ flyTo })
</script>