<template>
  <div class="timeline-container">
    <ClientOnly>
      <Timeline
        :groups="timelineGroups"
        :items="timelineItems"
        :viewportMin="viewportMin"
        :viewportMax="viewportMax"
        :minViewportDuration="1000 * 60 * 60 * 24 * 3"
        :maxViewportDuration="1000 * 60 * 60 * 24 * 14"
        :defaultViewportDuration="1000 * 60 * 60 * 24 * 7"
        class="h-96"
        @item-click="onTripClick"
        @item-hover="onTripHover"
      />
      
      <template #fallback>
        <div class="h-96 w-full bg-gray-100 rounded-lg flex items-center justify-center">
          <p class="text-gray-500">Загрузка timeline...</p>
        </div>
      </template>
    </ClientOnly>
    
    <!-- Легенда -->
    <div class="mt-4 bg-gray-50 rounded-lg p-4">
      <h4 class="font-medium text-sm text-gray-900 mb-3">Этапы доставки</h4>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
        <div class="flex items-center space-x-2">
          <div class="w-4 h-4 bg-blue-500 rounded"></div>
          <span>Автоперевозка</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-4 h-4 bg-purple-500 rounded"></div>
          <span>Морская перевозка</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-4 h-4 bg-orange-500 rounded"></div>
          <span>Ж/д перевозка</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-4 h-4 bg-green-500 rounded"></div>
          <span>Услуги</span>
        </div>
      </div>
    </div>

    <!-- Модальное окно с деталями рейса -->
    <div v-if="showTripModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click="closeTripModal">
      <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4" @click.stop>
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-semibold">Детали рейса</h3>
          <button @click="closeTripModal" class="text-gray-400 hover:text-gray-600">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
        
        <div v-if="selectedTrip" class="space-y-3">
          <div>
            <h4 class="font-medium text-base">{{ selectedTrip.trip.name }}</h4>
            <p class="text-sm text-gray-600">{{ selectedTrip.stage.name }}</p>
          </div>
          
          <div v-if="selectedTrip.trip.company" class="bg-gray-50 rounded p-3">
            <h5 class="font-medium text-sm mb-1">Компания</h5>
            <p class="text-sm">{{ selectedTrip.trip.company.name }}</p>
            <p v-if="selectedTrip.trip.company.taxId" class="text-xs text-gray-500">ИНН: {{ selectedTrip.trip.company.taxId }}</p>
          </div>
          
          <div class="bg-blue-50 rounded p-3">
            <h5 class="font-medium text-sm mb-2">Даты</h5>
            <div class="space-y-1 text-sm">
              <div v-if="selectedTrip.trip.plannedLoadingDate">
                <span class="text-gray-600">План. погрузка:</span>
                {{ formatDisplayDate(selectedTrip.trip.plannedLoadingDate) }}
              </div>
              <div v-if="selectedTrip.trip.actualLoadingDate">
                <span class="text-gray-600">Факт. погрузка:</span>
                <span class="text-green-600 font-medium">{{ formatDisplayDate(selectedTrip.trip.actualLoadingDate) }}</span>
              </div>
              <div v-if="selectedTrip.trip.plannedUnloadingDate">
                <span class="text-gray-600">План. выгрузка:</span>
                {{ formatDisplayDate(selectedTrip.trip.plannedUnloadingDate) }}
              </div>
              <div v-if="selectedTrip.trip.actualUnloadingDate">
                <span class="text-gray-600">Факт. выгрузка:</span>
                <span class="text-green-600 font-medium">{{ formatDisplayDate(selectedTrip.trip.actualUnloadingDate) }}</span>
              </div>
            </div>
          </div>
          
          <div v-if="selectedTrip.trip.plannedWeight || selectedTrip.trip.weightAtLoading || selectedTrip.trip.weightAtUnloading" class="bg-orange-50 rounded p-3">
            <h5 class="font-medium text-sm mb-2">Вес</h5>
            <div class="space-y-1 text-sm">
              <div v-if="selectedTrip.trip.plannedWeight">
                <span class="text-gray-600">Плановый:</span> {{ selectedTrip.trip.plannedWeight }} т
              </div>
              <div v-if="selectedTrip.trip.weightAtLoading">
                <span class="text-gray-600">При погрузке:</span> {{ selectedTrip.trip.weightAtLoading }} т
              </div>
              <div v-if="selectedTrip.trip.weightAtUnloading">
                <span class="text-gray-600">При выгрузке:</span> {{ selectedTrip.trip.weightAtUnloading }} т
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Timeline } from 'vue-timeline-chart'
import 'vue-timeline-chart/style.css'

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

// Группы этапов для timeline (только этапы с рейсами)
const timelineGroups = computed(() => {
  return props.stages
    .filter(stage => stage.trips && stage.trips.length > 0)
    .map(stage => ({
      id: stage.uuid,
      label: stage.name
    }))
})

// Элементы timeline (поездки)
const timelineItems = computed(() => {
  const items = []
  
  props.stages.forEach(stage => {
    stage.trips?.forEach(trip => {
      // Приоритет дат: actualLoadingDate > plannedLoadingDate > текущая дата
      const startDate = trip.actualLoadingDate || trip.plannedLoadingDate || new Date().toISOString()
      
      // Приоритет дат: actualUnloadingDate > plannedUnloadingDate > дата + 1 день
      const endDate = trip.actualUnloadingDate || 
                     trip.plannedUnloadingDate || 
                     new Date(new Date(startDate).getTime() + 24 * 60 * 60 * 1000).toISOString()
      
      const startTime = new Date(startDate).getTime()
      const endTime = new Date(endDate).getTime()
      
      // Форматируем даты для тултипа
      const formatDate = (dateStr) => {
        if (!dateStr) return 'Не указано'
        return new Date(dateStr).toLocaleDateString('ru-RU', {
          day: '2-digit',
          month: '2-digit', 
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        })
      }

      items.push({
        group: stage.uuid,
        type: 'range',
        start: startTime,
        end: endTime,
        label: trip.name,
        tooltip: `
          <div class="p-3">
            <h4 class="font-semibold text-sm mb-2">${trip.name}</h4>
            <div class="text-xs space-y-1">
              <div><strong>Этап:</strong> ${stage.name}</div>
              ${trip.company?.name ? `<div><strong>Компания:</strong> ${trip.company.name}</div>` : ''}
              <div><strong>План. погрузка:</strong> ${formatDate(trip.plannedLoadingDate)}</div>
              <div><strong>План. выгрузка:</strong> ${formatDate(trip.plannedUnloadingDate)}</div>
              ${trip.actualLoadingDate ? `<div><strong>Факт. погрузка:</strong> ${formatDate(trip.actualLoadingDate)}</div>` : ''}
              ${trip.actualUnloadingDate ? `<div><strong>Факт. выгрузка:</strong> ${formatDate(trip.actualUnloadingDate)}</div>` : ''}
              ${trip.plannedWeight ? `<div><strong>Плановый вес:</strong> ${trip.plannedWeight} т</div>` : ''}
            </div>
          </div>
        `,
        data: {
          trip: trip,
          stage: stage
        },
        cssVariables: {
          '--item-background': getStageColor(stage)
        }
      })
    })
  })
  
  return items
})

// Динамические временные рамки на основе данных
const viewportMin = computed(() => {
  if (timelineItems.value.length === 0) {
    return new Date().getTime() - (30 * 24 * 60 * 60 * 1000) // Месяц назад
  }
  
  const minTime = Math.min(...timelineItems.value.map(item => item.start))
  return minTime - (3 * 24 * 60 * 60 * 1000) // 3 дня до самой ранней даты
})

const viewportMax = computed(() => {
  if (timelineItems.value.length === 0) {
    return new Date().getTime() + (60 * 24 * 60 * 60 * 1000) // Два месяца вперед
  }
  
  const maxTime = Math.max(...timelineItems.value.map(item => item.end))
  return maxTime + (3 * 24 * 60 * 60 * 1000) // 3 дня после самой поздней даты
})


// Реактивные данные для модального окна
const selectedTrip = ref(null)
const showTripModal = ref(false)

// Обработчики событий Timeline
const onTripClick = (event) => {
  if (event && event.data) {
    selectedTrip.value = event.data
    showTripModal.value = true
  }
}

const onTripHover = (event) => {
  // Тултип обрабатывается автоматически через tooltip поле
  console.log('Trip hovered:', event?.data?.trip?.name)
}

const closeTripModal = () => {
  showTripModal.value = false
  selectedTrip.value = null
}

// Форматирование даты для отображения в модальном окне
const formatDisplayDate = (dateStr) => {
  if (!dateStr) return 'Не указано'
  return new Date(dateStr).toLocaleDateString('ru-RU', {
    day: '2-digit',
    month: '2-digit', 
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getStageColor = (stage) => {
  const colors = {
    auto: '#3b82f6',     // blue
    sea: '#8b5cf6',      // purple
    rail: '#f97316',     // orange
    air: '#06b6d4',      // cyan
    service: '#10b981'   // green
  }
  
  return colors[stage.transportType] || colors.service
}
</script>

<style scoped>
.timeline-container {
  @apply w-full;
}

/* Кастомные CSS переменные для цветов */
:global(.timeline) {
  --color-1: #3b82f6;  /* blue */
  --color-2: #8b5cf6;  /* purple */
  --color-3: #f97316;  /* orange */
  --color-4: #10b981;  /* green */
}
</style>