<template>
  <div 
    class="trip-badge group cursor-pointer"
    :class="getTripStatusClass(trip)"
    @click="$emit('click', trip)"
  >
    <!-- Основная информация -->
    <div class="flex items-center space-x-2">
      <span class="font-medium text-xs">{{ trip.name }}</span>
      <span class="text-xs opacity-75">{{ trip.plannedWeight }}т</span>
    </div>
    
    <!-- Время -->
    <div class="text-xs opacity-75 mt-1">
      {{ formatTime(trip.plannedLoadingDate) }} - {{ formatTime(trip.plannedUnloadingDate) }}
    </div>
    
    <!-- Статус выполнения -->
    <div class="flex items-center mt-1">
      <div class="w-full bg-black bg-opacity-20 rounded-full h-1">
        <div 
          class="bg-white rounded-full h-1 transition-all duration-300"
          :style="{ width: `${getTripProgress(trip)}%` }"
        ></div>
      </div>
    </div>
    
    <!-- Tooltip на hover -->
    <div class="trip-tooltip hidden group-hover:block absolute z-10 bg-gray-900 text-white p-3 rounded-lg shadow-lg min-w-64 -translate-y-full -translate-x-1/2 left-1/2">
      <div class="font-semibold">{{ trip.name }}</div>
      <div class="text-sm mt-1">{{ trip.company?.name }}</div>
      
      <div class="mt-2 space-y-1 text-xs">
        <div>Планируемый вес: {{ trip.plannedWeight }}т</div>
        <div v-if="trip.weightAtLoading">Вес при погрузке: {{ trip.weightAtLoading }}т</div>
        <div v-if="trip.weightAtUnloading">Вес при выгрузке: {{ trip.weightAtUnloading }}т</div>
      </div>
      
      <div class="mt-2 space-y-1 text-xs">
        <div v-if="trip.plannedLoadingDate">
          📅 План. погрузка: {{ formatDateTime(trip.plannedLoadingDate) }}
        </div>
        <div v-if="trip.actualLoadingDate">
          ✅ Факт. погрузка: {{ formatDateTime(trip.actualLoadingDate) }}
        </div>
        <div v-if="trip.plannedUnloadingDate">
          📅 План. выгрузка: {{ formatDateTime(trip.plannedUnloadingDate) }}
        </div>
        <div v-if="trip.actualUnloadingDate">
          ✅ Факт. выгрузка: {{ formatDateTime(trip.actualUnloadingDate) }}
        </div>
      </div>
      
      <!-- Стрелка tooltip -->
      <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  trip: {
    type: Object,
    required: true
  }
})

defineEmits(['click'])

const getTripStatusClass = (trip) => {
  const baseClass = "relative inline-flex px-3 py-2 rounded-lg text-white text-sm min-w-20 text-center"
  
  // Определяем статус по датам
  const now = new Date()
  const plannedStart = trip.plannedLoadingDate ? new Date(trip.plannedLoadingDate) : null
  const actualEnd = trip.actualUnloadingDate ? new Date(trip.actualUnloadingDate) : null
  const plannedEnd = trip.plannedUnloadingDate ? new Date(trip.plannedUnloadingDate) : null
  
  if (actualEnd) {
    // Завершен
    return `${baseClass} bg-green-600 hover:bg-green-700`
  } else if (plannedStart && now >= plannedStart) {
    // В процессе
    return `${baseClass} bg-blue-600 hover:bg-blue-700`
  } else {
    // Запланирован
    return `${baseClass} bg-gray-600 hover:bg-gray-700`
  }
}

const getTripProgress = (trip) => {
  const plannedStart = trip.plannedLoadingDate ? new Date(trip.plannedLoadingDate) : null
  const plannedEnd = trip.plannedUnloadingDate ? new Date(trip.plannedUnloadingDate) : null
  const actualEnd = trip.actualUnloadingDate ? new Date(trip.actualUnloadingDate) : null
  
  if (!plannedStart || !plannedEnd) return 0
  
  if (actualEnd) return 100
  
  const now = new Date()
  if (now < plannedStart) return 0
  if (now > plannedEnd) return 90 // Просрочен но не завершен
  
  const total = plannedEnd - plannedStart
  const current = now - plannedStart
  
  return Math.min((current / total) * 100, 90)
}

const formatTime = (dateStr) => {
  if (!dateStr) return '--:--'
  const date = new Date(dateStr)
  return date.toLocaleTimeString('ru-RU', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

const formatDateTime = (dateStr) => {
  if (!dateStr) return 'Не указано'
  const date = new Date(dateStr)
  return date.toLocaleString('ru-RU', {
    day: 'numeric',
    month: 'short',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.trip-badge {
  @apply transition-all duration-200;
}

.trip-tooltip {
  @apply pointer-events-none;
}

.group:hover .trip-tooltip {
  @apply pointer-events-auto;
}
</style>