webapp/app/pages/catalog/suppliers/[id].vue

<template>
  <Stack gap="0">
    <!-- Loading -->
    <Section v-if="isLoading" variant="plain" paddingY="lg">
      <Stack align="center" justify="center" gap="4">
        <Spinner />
        <Text tone="muted">{{ t('catalogSupplier.states.loading') }}</Text>
      </Stack>
    </Section>

    <!-- Error / Not Found -->
    <Section v-else-if="!supplier" variant="plain" paddingY="lg">
      <Card padding="lg">
        <Stack align="center" gap="4">
          <IconCircle tone="primary">
            <Icon name="lucide:building-2" size="24" />
          </IconCircle>
          <Heading :level="2">{{ t('catalogSupplier.not_found.title') }}</Heading>
          <Text tone="muted">{{ t('catalogSupplier.not_found.subtitle') }}</Text>
          <Button @click="navigateTo(localePath('/catalog'))">
            {{ t('catalogSupplier.actions.back_to_catalog') }}
          </Button>
        </Stack>
      </Card>
    </Section>

    <template v-else>
      <!-- Map Hero -->
      <MapHero
        :title="supplier.name"
        :location="supplierLocation"
        :badges="supplierBadges"
        :initial-zoom="3"
      />

      <!-- Offers Section -->
      <Section v-if="offers.length > 0" variant="plain" paddingY="md">
        <Stack gap="4">
          <Heading :level="2">{{ t('catalogSupplier.sections.offers.title') }}</Heading>
          <Grid :cols="1" :md="2" :lg="3" :gap="4">
            <OfferCard
              v-for="offer in offers"
              :key="offer.uuid"
              :offer="offer"
            />
          </Grid>
        </Stack>
      </Section>

      <!-- Products Section -->
      <Section v-if="uniqueProducts.length > 0" variant="plain" paddingY="md">
        <Stack gap="4">
          <Heading :level="2">{{ t('catalogSupplier.sections.products.title') }}</Heading>
          <Stack direction="row" gap="2" wrap>
            <NuxtLink
              v-for="product in uniqueProducts"
              :key="product.uuid"
              :to="localePath(`/catalog/products/${product.uuid}`)"
            >
              <Pill variant="primary" class="hover:bg-primary hover:text-white transition-colors cursor-pointer">
                {{ product.name }}
              </Pill>
            </NuxtLink>
          </Stack>
        </Stack>
      </Section>

      <!-- Locations Map Section -->
      <Section v-if="uniqueLocations.length > 0" variant="plain" paddingY="md">
        <Stack gap="4">
          <Heading :level="2">{{ t('catalogSupplier.sections.locations.title') }}</Heading>
          <div class="h-64 rounded-lg overflow-hidden border border-base-300 bg-base-100">
            <ClientOnly>
              <MapboxGlobe
                :key="`supplier-locations-${supplierId}`"
                :map-id="`supplier-locations-${supplierId}`"
                :locations="mapLocations"
                :height="256"
                :initial-zoom="3"
              />
            </ClientOnly>
          </div>
          <Stack direction="row" gap="2" wrap>
            <NuxtLink
              v-for="location in uniqueLocations"
              :key="location.uuid"
              :to="localePath(`/catalog/hubs/${location.uuid}`)"
            >
              <Pill variant="outline" class="hover:bg-base-200 transition-colors cursor-pointer">
                <Icon name="lucide:map-pin" size="14" />
                {{ location.name }}
              </Pill>
            </NuxtLink>
          </Stack>
        </Stack>
      </Section>

    </template>
  </Stack>
</template>

<script setup lang="ts">
import {
  GetSupplierProfileDocument,
  GetSupplierOffersDocument,
  GetSupplierProfilesDocument,
  GetOffersDocument,
} from '~/composables/graphql/public/exchange-generated'

definePageMeta({
  layout: 'topnav'
})

const route = useRoute()
const localePath = useLocalePath()
const { t } = useI18n()

const isLoading = ref(true)
const supplier = ref<any>(null)
const offers = ref<any[]>([])

const supplierId = computed(() => route.params.id as string)

// Supplier location for map - use supplier's own coordinates
const supplierLocation = computed(() => {
  if (supplier.value?.latitude && supplier.value?.longitude) {
    return {
      uuid: supplier.value.uuid,
      name: supplier.value.name,
      latitude: supplier.value.latitude,
      longitude: supplier.value.longitude,
      country: supplier.value.country,
      countryCode: supplier.value.countryCode
    }
  }
  // Fallback to first offer location if supplier has no coordinates
  const firstOffer = offers.value.find(o => o.locationLatitude && o.locationLongitude)
  if (firstOffer) {
    return {
      uuid: firstOffer.locationUuid,
      name: firstOffer.locationName,
      latitude: firstOffer.locationLatitude,
      longitude: firstOffer.locationLongitude,
      country: firstOffer.locationCountry,
      countryCode: firstOffer.locationCountryCode
    }
  }
  return null
})

// Badges for MapHero
const supplierBadges = computed(() => {
  const badges: Array<{ icon?: string; text: string }> = []
  if (supplier.value?.country) {
    badges.push({ icon: 'lucide:globe', text: supplier.value.country })
  }
  if (supplier.value?.isVerified) {
    badges.push({ icon: 'lucide:check-circle', text: t('catalogSupplier.badges.verified') })
  }
  if (offers.value.length > 0) {
    badges.push({ icon: 'lucide:package', text: t('catalogSupplier.badges.offers', { count: offers.value.length }) })
  }
  return badges
})

// Unique products from offers
const uniqueProducts = computed(() => {
  const products = new Map<string, { uuid: string; name: string }>()
  offers.value.forEach(offer => {
    offer.lines?.forEach((line: any) => {
      if (line?.productUuid && line?.productName) {
        products.set(line.productUuid, { uuid: line.productUuid, name: line.productName })
      }
    })
  })
  return Array.from(products.values())
})

// Unique locations from offers
const uniqueLocations = computed(() => {
  const locations = new Map<string, { uuid: string; name: string; latitude: number; longitude: number; country?: string | null; countryCode?: string | null }>()
  offers.value.forEach(offer => {
    if (offer.locationUuid && offer.locationName && offer.locationLatitude && offer.locationLongitude) {
      locations.set(offer.locationUuid, {
        uuid: offer.locationUuid,
        name: offer.locationName,
        latitude: offer.locationLatitude,
        longitude: offer.locationLongitude,
        country: offer.locationCountry,
        countryCode: offer.locationCountryCode
      })
    }
  })
  return Array.from(locations.values())
})

// Locations for the map
const mapLocations = computed(() => {
  return uniqueLocations.value.map(loc => ({
    uuid: loc.uuid,
    name: loc.name,
    latitude: loc.latitude,
    longitude: loc.longitude,
    country: ''
  }))
})

try {
  const { data: supplierData } = await useServerQuery('catalog-supplier-detail', GetSupplierProfileDocument, { uuid: supplierId.value }, 'public', 'exchange')
  supplier.value = supplierData.value?.getSupplierProfile || null

  if (!supplier.value) {
    const { data: suppliersList } = await useServerQuery('catalog-suppliers-fallback', GetSupplierProfilesDocument, {}, 'public', 'exchange')
    supplier.value = (suppliersList.value?.getSupplierProfiles || []).find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
  }

  const teamIds = [
    supplier.value?.teamUuid,
    supplier.value?.uuid,
    supplierId.value
  ].filter(Boolean)

  if (teamIds.length) {
    const primaryId = teamIds[0] as string
    const { data: offersData } = await useServerQuery('catalog-supplier-offers', GetSupplierOffersDocument, { teamUuid: primaryId }, 'public', 'exchange')
    offers.value = offersData.value?.getOffers || []

    if (!offers.value.length) {
      const { data: allOffersData } = await useServerQuery('catalog-supplier-offers-fallback', GetOffersDocument, {}, 'public', 'exchange')
      const ids = new Set(teamIds)
      offers.value = (allOffersData.value?.getOffers || []).filter((o: any) => o?.teamUuid && ids.has(o.teamUuid))
    }
  }
} catch (error) {
  console.error('Error loading supplier:', error)
} finally {
  isLoading.value = false
}

// SEO
useHead(() => ({
  title: supplier.value?.name
    ? t('catalogSupplier.meta.title_with_name', { name: supplier.value.name })
    : t('catalogSupplier.meta.title'),
  meta: [
    {
      name: 'description',
      content: supplier.value?.description
        || (supplier.value?.name
          ? t('catalogSupplier.meta.description_with_name', { name: supplier.value.name })
          : t('catalogSupplier.meta.description'))
    }
  ]
}))
</script>