<template>
  <div class="timeline">
    <div 
      v-for="(stage, index) in stages" 
      :key="stage.uuid"
      class="timeline-item relative"
    >
      <!-- Timeline connector -->
      <div 
        v-if="index < stages.length - 1"
        class="absolute left-4 top-8 w-0.5 h-16 bg-gray-300"
        :class="{ 'bg-green-500': isStageCompleted(stage) }"
      ></div>
      
      <!-- Stage content -->
      <div class="flex items-start space-x-4 pb-8">
        <!-- Stage icon -->
        <div 
          class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold"
          :class="getStageIconClass(stage)"
        >
          {{ getStageIcon(stage) }}
        </div>
        
        <!-- Stage details -->
        <div class="flex-1 min-w-0">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">{{ stage.name }}</h3>
            <span 
              :class="getStageStatusClass(stage)"
              class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
            >
              {{ getStageStatusText(stage) }}
            </span>
          </div>
          
          <!-- Stage info -->
          <div class="mt-2 space-y-2">
            <!-- Location info -->
            <div class="text-sm text-gray-600">
              <span v-if="stage.stageType === 'transport'">
                <i class="fas fa-route mr-1"></i>
                {{ stage.sourceLocationName }} → {{ stage.destinationLocationName }}
              </span>
              <span v-else>
                <i class="fas fa-map-marker-alt mr-1"></i>
                {{ stage.locationName }}
              </span>
            </div>
            
            <!-- Company info -->
            <div v-if="stage.selectedCompany" class="text-sm text-gray-600">
              <i class="fas fa-building mr-1"></i>
              {{ stage.selectedCompany.name }} ({{ stage.selectedCompany.countryCode }})
            </div>
            
            <!-- Transport type -->
            <div v-if="stage.stageType === 'transport'" class="text-sm text-gray-600">
              <i class="fas fa-truck mr-1"></i>
              {{ getTransportTypeText(stage.transportType) }}
            </div>
            
            <!-- Trips progress -->
            <div v-if="stage.trips?.length > 0" class="mt-3">
              <div class="flex items-center justify-between text-sm text-gray-600 mb-1">
                <span>Рейсы:</span>
                <span>{{ getCompletedTrips(stage) }}/{{ stage.trips.length }}</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div 
                  class="bg-blue-600 h-2 rounded-full transition-all duration-300"
                  :style="{ width: `${getTripProgress(stage)}%` }"
                ></div>
              </div>
              
              <!-- Company breakdown -->
              <div class="mt-2 text-xs text-gray-500">
                <div v-for="companyGroup in getCompanyGroups(stage.trips)" :key="companyGroup.name">
                  {{ companyGroup.name }}: {{ companyGroup.completed }}/{{ companyGroup.total }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

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

const getStageIcon = (stage) => {
  if (stage.stageType === 'service') return 'C'
  
  switch (stage.transportType) {
    case 'auto': return 'A'
    case 'sea': return 'M'
    case 'rail': return 'Ж'
    case 'air': return 'В'
    default: return 'A'
  }
}

const getStageIconClass = (stage) => {
  const baseClass = 'border-2'
  
  if (isStageCompleted(stage)) {
    return `${baseClass} bg-green-100 border-green-500 text-green-600`
  } else if (stage.status === 'in_progress') {
    return `${baseClass} bg-blue-100 border-blue-500 text-blue-600`
  } else {
    return `${baseClass} bg-gray-100 border-gray-300 text-gray-500`
  }
}

const getStageStatusClass = (stage) => {
  const classes = {
    pending: 'bg-gray-100 text-gray-800',
    in_progress: 'bg-blue-100 text-blue-800',
    completed: 'bg-green-100 text-green-800',
    cancelled: 'bg-red-100 text-red-800'
  }
  return classes[stage.status] || 'bg-gray-100 text-gray-800'
}

const getStageStatusText = (stage) => {
  const texts = {
    pending: 'Ожидает',
    in_progress: 'В работе',
    completed: 'Завершен',
    cancelled: 'Отменен'
  }
  return texts[stage.status] || stage.status
}

const getTransportTypeText = (transportType) => {
  const texts = {
    auto: 'Автоперевозка',
    rail: 'Ж/д перевозка',
    sea: 'Морская перевозка',
    air: 'Авиаперевозка'
  }
  return texts[transportType] || transportType
}

const isStageCompleted = (stage) => {
  return stage.status === 'completed'
}

const getCompletedTrips = (stage) => {
  if (!stage.trips?.length) return 0
  return stage.trips.filter(trip => trip.status === 'completed').length
}

const getTripProgress = (stage) => {
  if (!stage.trips?.length) return 0
  const completed = getCompletedTrips(stage)
  return (completed / stage.trips.length) * 100
}

const getCompanyGroups = (trips) => {
  const groups = {}
  
  trips.forEach(trip => {
    const companyName = trip.company?.name || 'Unknown'
    if (!groups[companyName]) {
      groups[companyName] = { name: companyName, total: 0, completed: 0 }
    }
    groups[companyName].total++
    if (trip.status === 'completed') {
      groups[companyName].completed++
    }
  })
  
  return Object.values(groups)
}
</script>

<style scoped>
.timeline {
  @apply space-y-0;
}

.timeline-item {
  @apply relative;
}
</style>