webapp/app/components/catalog/InfoPanel.vue

<template>
  <MapPanel>
    <template #header>
      <div class="flex items-center justify-between mb-2">
        <div class="flex items-center gap-2">
          <span class="badge badge-sm" :style="{ backgroundColor: badgeColor }">
            {{ badgeLabel }}
          </span>
          <h3 class="font-semibold text-base text-base-content">{{ entityName }}</h3>
        </div>
        <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>
    </template>

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

    <!-- Content -->
    <div v-else-if="entity" class="flex flex-col gap-4">
      <!-- Entity details card -->
      <div class="mb-2">
        <HubCard v-if="entityType === 'hub'" :hub="entity" />
        <SupplierCard v-else-if="entityType === 'supplier'" :supplier="entity" />
        <OfferCard v-else-if="entityType === 'offer'" :offer="entity" compact />
      </div>

      <!-- Tabs for related objects -->
      <div role="tablist" class="tabs tabs-boxed bg-white/10">
        <a
          v-for="tab in availableTabs"
          :key="tab.id"
          role="tab"
          class="tab"
          :class="{ 'tab-active': currentTab === tab.id }"
          @click="currentTab = tab.id"
        >
          {{ tab.label }}
          <span v-if="tab.count" class="ml-1 opacity-70">({{ tab.count }})</span>
        </a>
      </div>

      <!-- Tab content -->
      <div class="flex flex-col gap-2 min-h-[200px]">
        <!-- Products tab -->
        <div v-if="currentTab === 'products'">
          <div v-if="relatedProducts.length === 0" class="text-center py-8 text-white/60">
            <Icon name="lucide:package" size="32" class="mb-2 opacity-50" />
            <p>{{ $t('catalog.info.noProducts') }}</p>
          </div>
          <div v-else class="flex flex-col gap-2">
            <ProductCard
              v-for="product in relatedProducts"
              :key="product.uuid"
              :product="product"
              selectable
              compact
              @select="onProductSelect(product)"
            />
          </div>
        </div>

        <!-- Hubs tab -->
        <div v-if="currentTab === 'hubs'">
          <div v-if="relatedHubs.length === 0" class="text-center py-8 text-white/60">
            <Icon name="lucide:warehouse" size="32" class="mb-2 opacity-50" />
            <p>{{ $t('catalog.info.noHubs') }}</p>
          </div>
          <div v-else class="flex flex-col gap-2">
            <HubCard
              v-for="hub in relatedHubs"
              :key="hub.uuid"
              :hub="hub"
              selectable
              @select="onHubSelect(hub)"
            />
          </div>
        </div>

        <!-- Suppliers tab -->
        <div v-if="currentTab === 'suppliers'">
          <div v-if="relatedSuppliers.length === 0" class="text-center py-8 text-white/60">
            <Icon name="lucide:factory" size="32" class="mb-2 opacity-50" />
            <p>{{ $t('catalog.info.noSuppliers') }}</p>
          </div>
          <div v-else class="flex flex-col gap-2">
            <SupplierCard
              v-for="supplier in relatedSuppliers"
              :key="supplier.uuid"
              :supplier="supplier"
              selectable
              @select="onSupplierSelect(supplier)"
            />
          </div>
        </div>

        <!-- Offers tab -->
        <div v-if="currentTab === 'offers'">
          <div v-if="!selectedProduct" class="text-center py-8 text-white/60">
            <Icon name="lucide:info" size="32" class="mb-2 opacity-50" />
            <p>{{ $t('catalog.info.selectProductFirst') }}</p>
          </div>
          <div v-else-if="relatedOffers.length === 0" class="text-center py-8 text-white/60">
            <Icon name="lucide:shopping-bag" size="32" class="mb-2 opacity-50" />
            <p>{{ $t('catalog.info.noOffers') }}</p>
          </div>
          <div v-else class="flex flex-col gap-2">
            <OfferCard
              v-for="offer in relatedOffers"
              :key="offer.uuid"
              :offer="offer"
              selectable
              compact
              @select="onOfferSelect(offer)"
            />
          </div>
        </div>
      </div>

      <!-- Add to filter button -->
      <button class="btn btn-primary btn-sm mt-2" @click="emit('add-to-filter')">
        <Icon name="lucide:filter-plus" size="16" />
        {{ $t('catalog.info.addToFilter') }}
      </button>
    </div>
  </MapPanel>
</template>

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

const props = defineProps<{
  entityType: InfoEntityType
  entityId: string
  entity: any
  relatedProducts?: any[]
  relatedHubs?: any[]
  relatedSuppliers?: any[]
  relatedOffers?: any[]
  selectedProduct?: string | null
  loading?: boolean
}>()

const emit = defineEmits<{
  'close': []
  'add-to-filter': []
  'open-info': [type: InfoEntityType, uuid: string]
  'select-product': [uuid: string]
}>()

const { t } = useI18n()
const { entityColors } = useCatalogSearch()

// Current active tab
const currentTab = ref<string>('products')

// Entity name
const entityName = computed(() => {
  return props.entity?.name || props.entityId.slice(0, 8) + '...'
})

// Badge color and label
const badgeColor = computed(() => {
  if (props.entityType === 'hub') return entityColors.hub
  if (props.entityType === 'supplier') return entityColors.supplier
  if (props.entityType === 'offer') return entityColors.offer
  return '#666'
})

const badgeLabel = computed(() => {
  if (props.entityType === 'hub') return t('catalog.entities.hub')
  if (props.entityType === 'supplier') return t('catalog.entities.supplier')
  if (props.entityType === 'offer') return t('catalog.entities.offer')
  return ''
})

// Available tabs based on entity type and data
const availableTabs = computed(() => {
  const tabs: Array<{ id: string; label: string; count?: number }> = []

  if (props.entityType === 'hub') {
    tabs.push({
      id: 'products',
      label: t('catalog.tabs.products'),
      count: props.relatedProducts?.length || 0
    })
    tabs.push({
      id: 'offers',
      label: t('catalog.tabs.offers'),
      count: props.relatedOffers?.length || 0
    })
    tabs.push({
      id: 'suppliers',
      label: t('catalog.tabs.suppliers'),
      count: props.relatedSuppliers?.length || 0
    })
  } else if (props.entityType === 'supplier') {
    tabs.push({
      id: 'products',
      label: t('catalog.tabs.products'),
      count: props.relatedProducts?.length || 0
    })
    tabs.push({
      id: 'offers',
      label: t('catalog.tabs.offers'),
      count: props.relatedOffers?.length || 0
    })
    tabs.push({
      id: 'hubs',
      label: t('catalog.tabs.hubs'),
      count: props.relatedHubs?.length || 0
    })
  } else if (props.entityType === 'offer') {
    if (props.relatedProducts && props.relatedProducts.length > 0) {
      tabs.push({
        id: 'products',
        label: t('catalog.tabs.product')
      })
    }
    tabs.push({
      id: 'hubs',
      label: t('catalog.tabs.hubs'),
      count: props.relatedHubs?.length || 0
    })
    if (props.relatedSuppliers && props.relatedSuppliers.length > 0) {
      tabs.push({
        id: 'suppliers',
        label: t('catalog.tabs.supplier')
      })
    }
  }

  return tabs
})

// Set default active tab when entity type changes
watch(
  () => props.entityType,
  () => {
    if (availableTabs.value.length > 0) {
      currentTab.value = availableTabs.value[0].id
    }
  },
  { immediate: true }
)

// Handlers for selecting related items
const onProductSelect = (product: any) => {
  if (product.uuid) {
    emit('select-product', product.uuid)
  }
}

const onHubSelect = (hub: any) => {
  if (hub.uuid) {
    emit('open-info', 'hub', hub.uuid)
  }
}

const onSupplierSelect = (supplier: any) => {
  if (supplier.uuid) {
    emit('open-info', 'supplier', supplier.uuid)
  }
}

const onOfferSelect = (offer: any) => {
  if (offer.uuid) {
    emit('open-info', 'offer', offer.uuid)
  }
}
</script>