<template>
  <div class="route-stages space-y-4">
    <div 
      v-for="(stage, index) in stages" 
      :key="stage.uuid"
      class="stage-item p-6 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
    >
      <!-- Верхняя строка: номер + название + локация -->
      <div class="flex items-center space-x-6 mb-6">
        <!-- Номер этапа -->
        <div class="flex-shrink-0 w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
          {{ index + 1 }}
        </div>
        
        <!-- Название и локация -->
        <div class="flex-1 flex items-start justify-between">
          <h3 class="text-xl font-semibold text-gray-900">{{ stage.name }}</h3>
          <div class="text-right text-sm text-gray-500">
            <div v-if="stage.stageType === 'transport'">
              {{ stage.sourceLocationName }} → {{ stage.destinationLocationName }}
            </div>
            <div v-else>
              {{ stage.locationName }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- Новая строка: компании на всю ширину -->
      <div v-if="getStageCompanies(stage).length" class="mb-4">
        <div class="flex flex-wrap gap-4">
          <div 
            v-for="company in getStageCompanies(stage)" 
            :key="company.uuid"
            class="flex flex-col items-center bg-white rounded-lg p-4 shadow-sm border min-w-32"
          >
            <!-- Логотип компании -->
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold mb-2">
              {{ getCompanyInitials(company.name) }}
            </div>
            
            <!-- Название и рейтинг -->
            <div class="text-center">
              <p class="text-sm font-medium text-gray-900 mb-1">{{ company.name }}</p>
              <div class="flex items-center justify-center space-x-1">
                <span class="text-yellow-400 text-xs">★</span>
                <span class="text-xs text-gray-600">{{ getTrustRating(company) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Статистика этапа -->
      <div v-if="stage.trips?.length" class="text-left">
        <div class="inline-flex items-center bg-blue-50 rounded-lg px-4 py-2">
          <span class="text-sm font-medium text-blue-600">{{ stage.trips.length }} рейсов</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  stages: {
    type: Array,
    default: () => []
  }
})

const getStageIcon = (stage) => {
  if (stage.stageType === 'service') return 'Услуга'
  
  switch (stage.transportType) {
    case 'auto': return 'Авто'
    case 'sea': return 'Море'
    case 'rail': return 'ЖД'
    case 'air': return 'Авиа'
    default: return 'Авто'
  }
}


const getStageCompanies = (stage) => {
  const companies = []
  
  if (stage.selectedCompany) {
    companies.push(stage.selectedCompany)
  }
  
  const uniqueCompanies = new Set()
  stage.trips?.forEach(trip => {
    if (trip.company && !uniqueCompanies.has(trip.company.uuid)) {
      uniqueCompanies.add(trip.company.uuid)
      companies.push(trip.company)
    }
  })
  
  return companies
}

const getCompanyInitials = (name) => {
  if (!name) return '??'
  
  const words = name.split(' ')
  if (words.length >= 2) {
    return (words[0][0] + words[1][0]).toUpperCase()
  }
  return name.substring(0, 2).toUpperCase()
}

const getTrustRating = (company) => {
  const ratings = {
    'Kenya Coffee Logistics Ltd': 4.8,
    'Kenya Highland Transport': 4.6,
    'Mombasa Express Cargo': 4.4,
    'East Africa Shipping Lines': 4.7,
    'ООО "Грузовичок"': 4.5,
    'ИП Автобаза №1': 4.3,
    'ООО "ЖДТранс"': 4.6,
    'Kenya Ports Authority': 4.9
  }
  
  return ratings[company.name] || 4.2
}
</script>

<style scoped>
.route-stages {
  @apply w-full;
}

.stage-item {
  @apply transition-all duration-200;
}
</style>