<template>
  <Card padding="md" interactive @click="$emit('select')">
    <!-- Header: Source + Price -->
    <div class="flex items-start justify-between mb-2">
      <div>
        <Text weight="semibold">{{ sourceName }}</Text>
        <Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
      </div>
      <div class="text-right">
        <Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
          {{ priceDisplay }}
        </Text>
        <Text tone="muted" size="sm">{{ formatDistance(totalDistance) }} км</Text>
      </div>
    </div>

    <!-- Route stepper -->
    <RouteStepper v-if="stages.length > 0" :stages="stages" />
  </Card>
</template>

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

const props = withDefaults(defineProps<{
  sourceName: string
  productName?: string
  pricePerUnit?: number | null
  currency?: string | null
  unit?: string | null
  totalDistance: number
  stages?: RouteStage[]
}>(), {
  stages: () => []
})

defineEmits<{
  select: []
}>()

const priceDisplay = computed(() => {
  if (!props.pricePerUnit) return null
  const curr = props.currency || 'USD'
  const u = props.unit || 'т'
  return `${props.pricePerUnit} ${curr}/${u}`
})

const formatDistance = (km?: number | null) => {
  if (!km) return '0'
  return Math.round(km).toLocaleString()
}
</script>
