<template>
  <Card padding="md" interactive @click="$emit('select')">
    <!-- Header: Location + Price -->
    <div class="flex items-start justify-between mb-3">
      <div>
        <Text weight="semibold">{{ supplierDisplay }}</Text>
        <Text tone="muted" size="sm">
          {{ t('catalogOfferCard.labels.origin_label') }}: {{ originDisplay }}
        </Text>
        <Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
      </div>
      <Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
        {{ priceDisplay }}
      </Text>
    </div>

    <!-- Supplier info -->
    <SupplierInfoBlock v-if="kycProfileUuid" :kyc-profile-uuid="kycProfileUuid" class="mb-3" />

    <!-- Route stepper -->
    <RouteStepper
      v-if="stages.length > 0"
      :stages="stages"
      :start-name="startName"
      :end-name="endName"
    />
  </Card>
</template>

<script setup lang="ts">
import type { RouteStage } from './RouteStepper.vue'

const props = withDefaults(defineProps<{
  locationName?: string
  supplierName?: string
  productName?: string
  pricePerUnit?: number | null
  currency?: string | null
  unit?: string | null
  stages?: RouteStage[]
  startName?: string
  endName?: string
  kycProfileUuid?: string | null
}>(), {
  stages: () => []
})

defineEmits<{
  select: []
}>()

const { t } = useI18n()

const supplierDisplay = computed(() => {
  return props.supplierName || t('catalogOfferCard.labels.supplier_unknown')
})

const originDisplay = computed(() => {
  return props.locationName || t('catalogOfferCard.labels.origin_unknown')
})

const priceDisplay = computed(() => {
  if (!props.pricePerUnit) return null
  const currSymbol = getCurrencySymbol(props.currency)
  const unitName = getUnitName(props.unit)
  const formattedPrice = props.pricePerUnit.toLocaleString()
  return `${currSymbol}${formattedPrice}/${unitName}`
})

const getCurrencySymbol = (currency?: string | null) => {
  switch (currency?.toUpperCase()) {
    case 'USD': return '$'
    case 'EUR': return '€'
    case 'RUB': return '₽'
    case 'CNY': return '¥'
    default: return '$'
  }
}

const getUnitName = (unit?: string | null) => {
  switch (unit?.toLowerCase()) {
    case 'т':
    case 'ton':
    case 'tonne':
      return 'тонна'
    case 'кг':
    case 'kg':
      return 'кг'
    default:
      return 'тонна'
  }
}
</script>
