<template>
  <div class="timeline-panel">
    <div class="sidebar-header">
      <span>📋 行程时间线</span>
      <small v-if="store.mode === 'edit'">拖拽排序 · 点击编辑</small>
      <small v-else>点击节点查看详情</small>
    </div>

    <div class="timeline-list" ref="timelineList">
      <div
        v-for="(point, idx) in store.points"
        :key="point.id"
        class="timeline-item"
        :class="{ active: idx === store.currentStep, completed: idx < store.currentStep, 'no-drag': idx === 0 || idx === store.points.length - 1 }"
        :data-idx="idx"
        @click="handleClick(idx)"
      >
        <div class="tl-line">
          <div class="tl-dot" :class="getDotClass(idx)"></div>
          <div v-if="idx < store.points.length - 1" class="tl-connector" :class="{ passed: idx < store.currentStep }"></div>
        </div>
        <div class="tl-content">
          <div class="tl-day">{{ point.day }}</div>
          <div class="tl-name">{{ point.icon }} {{ point.name }}</div>
          <div class="tl-meta" v-if="point.km && point.km !== '返程'">
            <span>{{ point.km }}</span>
            <span v-if="point.driveTime"> · {{ point.driveTime }}</span>
          </div>
        </div>
        <div v-if="store.mode === 'edit' && idx > 0 && idx < store.points.length - 1" class="tl-actions">
          <span class="drag-handle" title="拖拽排序">⋮⋮</span>
          <button class="action-btn" @click.stop="toggleReplace(idx)" title="替换">🔄</button>
          <button class="action-btn delete-btn" @click.stop="handleDelete(idx)" title="删除">✖</button>
        </div>
      </div>
    </div>

    <div class="nav-controls" v-if="store.mode === 'preview'">
      <button class="nav-btn prev" :disabled="store.currentStep <= 0" @click="handlePrev">← 上一站</button>
      <button class="nav-btn next" :disabled="store.currentStep >= store.points.length - 1" @click="handleNext">下一站 →</button>
    </div>

    <div class="stats-footer">
      <div class="stat-item">
        <span class="stat-label">总里程</span>
        <span class="stat-value">{{ store.totalKm }}km</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">驾驶</span>
        <span class="stat-value">{{ store.totalDriveTime }}h</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">天数</span>
        <span class="stat-value">{{ store.travelDays }}天</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useItineraryStore } from '../stores/itinerary'
import Sortable from 'sortablejs'

const store = useItineraryStore()
const emit = defineEmits(['replace', 'animate', 'prevStep', 'nextStep'])
const timelineList = ref(null)
let sortableInstance = null

const getDotClass = (idx) => {
  if (idx === 0) return 'start'
  if (idx === store.points.length - 1) return 'end'
  if (idx === store.currentStep) return 'active'
  if (idx < store.currentStep) return 'passed'
  return ''
}

const handleClick = (idx) => {
  const prevStep = store.currentStep
  store.setCurrentStep(idx)
  if (store.mode === 'preview') emit('animate', idx, prevStep)
}

const handleDelete = (idx) => {
  if (confirm(`确认删除「${store.points[idx].name}」？`)) store.deletePoint(idx)
}

const handlePrev = () => { emit('prevStep') }
const handleNext = () => { emit('nextStep') }

const toggleReplace = (idx) => {
  store.selectedForReplace = idx
  store.showReplacementPanel = !store.showReplacementPanel
}

const initSortable = () => {
  if (!timelineList.value) return
  if (sortableInstance) { sortableInstance.destroy(); sortableInstance = null }
  if (store.mode !== 'edit') return
  
  sortableInstance = Sortable.create(timelineList.value, {
    animation: 150,
    handle: '.drag-handle',
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
    dragClass: 'sortable-drag',
    filter: '.no-drag',
    onEnd: (evt) => {
      if (evt.oldIndex === evt.newIndex) return
      store.reorderPoints(evt.oldIndex, evt.newIndex)
    }
  })
}

onMounted(() => { nextTick(() => initSortable()) })

// Re-init when mode changes or points change
import { watch } from 'vue'
watch(() => store.mode, () => { nextTick(() => initSortable()) })
watch(() => store.points.length, () => { nextTick(() => initSortable()) })
</script>

<style scoped>
.timeline-panel { display: flex; flex-direction: column; height: 100%; background: #1b4332; color: #fff; }
.sidebar-header { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 4px; }
.sidebar-header span { font-size: 16px; font-weight: 600; }
.sidebar-header small { color: rgba(255,255,255,0.6); font-size: 12px; }
.timeline-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.timeline-item { display: flex; align-items: flex-start; padding: 8px 16px; cursor: pointer; transition: all 0.2s; position: relative; }
.timeline-item:hover { background: rgba(255,255,255,0.05); }
.timeline-item.active { background: rgba(244,162,97,0.15); }
.timeline-item.completed .tl-content { opacity: 0.7; }
.tl-line { position: relative; width: 20px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: #52796f; border: 2px solid rgba(255,255,255,0.3); transition: all 0.3s; z-index: 2; }
.tl-dot.start { background: #2a9d8f; border-color: #2a9d8f; }
.tl-dot.end { background: #e76f51; border-color: #e76f51; }
.tl-dot.active { background: #f4a261; border-color: #f4a261; transform: scale(1.3); }
.tl-dot.passed { background: #2a9d8f; border-color: #2a9d8f; }
.tl-connector { width: 2px; height: 40px; background: #52796f; margin-top: 2px; transition: all 0.3s; }
.tl-connector.passed { background: #2a9d8f; }
.tl-content { flex: 1; min-width: 0; }
.tl-day { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.tl-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-item.active .tl-name { color: #f4a261; }
.tl-meta { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.tl-actions { display: flex; gap: 4px; margin-left: 8px; flex-shrink: 0; }
.drag-handle { color: rgba(255,255,255,0.4); cursor: grab; font-size: 12px; user-select: none; padding: 0 4px; }
.drag-handle:active { cursor: grabbing; }
.action-btn { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 12px; transition: all 0.2s; }
.action-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.delete-btn:hover { color: #e76f51; }
.nav-controls { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.nav-btn { flex: 1; padding: 10px 12px; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.2s; color: #fff; }
.nav-btn.prev { background: #40916c; }
.nav-btn.next { background: #f4a261; color: #1b4332; }
.nav-btn:hover:not(:disabled) { transform: translateY(-1px); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stats-footer { display: flex; border-top: 1px solid rgba(255,255,255,0.1); padding: 12px 16px; gap: 12px; }
.stat-item { flex: 1; text-align: center; }
.stat-label { display: block; font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.stat-value { display: block; font-size: 14px; font-weight: 600; color: #f4a261; margin-top: 2px; }

/* Sortable styles */
:deep(.sortable-ghost) { opacity: 0.4; background: rgba(244,162,97,0.2) !important; }
:deep(.sortable-chosen) { background: rgba(244,162,97,0.3) !important; }
:deep(.sortable-drag) { opacity: 0.8; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
</style>
