<template>
  <div class="flex items-center w-full py-2">
    <!-- Start node -->
    <div class="flex flex-col items-center shrink-0">
      <div class="w-3 h-3 rounded-full bg-primary border-2 border-primary"></div>
      <Text v-if="startName" size="xs" tone="muted" class="mt-1 max-w-16 truncate text-center">{{ startName }}</Text>
    </div>

    <!-- Stages (line + transport icon + distance -> node) -->
    <template v-for="(stage, i) in stages" :key="i">
      <!-- Line segment with transport icon and distance -->
      <div class="flex-1 flex flex-col items-center mx-1 min-w-12">
        <!-- Line with icon in the middle -->
        <div class="flex items-center w-full">
          <div class="h-0.5 bg-primary/60 flex-1"></div>
          <span class="px-1.5 text-sm" :title="getTransportName(stage.transportType)">
            {{ getTransportIcon(stage.transportType) }}
          </span>
          <div class="h-0.5 bg-primary/60 flex-1"></div>
        </div>
        <!-- Distance label -->
        <Text size="xs" tone="muted" class="mt-0.5 whitespace-nowrap">
          {{ formatDistance(stage.distanceKm) }} км
        </Text>
      </div>

      <!-- Intermediate/End node -->
      <div class="flex flex-col items-center shrink-0">
        <div
          class="rounded-full border-2"
          :class="i === stages.length - 1 ? 'w-3 h-3 bg-success border-success' : 'w-2.5 h-2.5 bg-base-100 border-primary'"
        ></div>
        <Text v-if="i === stages.length - 1 && endName" size="xs" tone="muted" class="mt-1 max-w-16 truncate text-center">
          {{ endName }}
        </Text>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
export interface RouteStage {
  transportType?: string | null
  distanceKm?: number | null
}

defineProps<{
  stages: RouteStage[]
  startName?: string
  endName?: string
}>()

const getTransportIcon = (type?: string | null) => {
  switch (type) {
    case 'rail':
      return '🚂'
    case 'sea':
      return '🚢'
    case 'road':
    case 'auto':
    default:
      return '🚛'
  }
}

const getTransportName = (type?: string | null) => {
  switch (type) {
    case 'rail':
      return 'Ж/Д'
    case 'sea':
      return 'Море'
    case 'road':
    case 'auto':
    default:
      return 'Авто'
  }
}

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