<template>
  <view class="path-view">
    <text class="page-title">实现路径</text>
    
    <view v-if="!selectedScript" class="empty-state glass-card">
      <text class="empty-icon">🗺️</text>
      <text class="empty-text">先生成剧本，方能洞察路径。</text>
      <button class="btn-secondary empty-btn" @click="goToScript">去生成剧本</button>
    </view>
    
    <view v-else-if="!currentPath" class="empty-state glass-card">
      <text class="empty-icon">🎯</text>
      <text class="empty-text">等待开启人生导航...</text>
    </view>
    
    <view v-else class="path-content">
      <view class="target-card glass-card-gold">
        <text class="target-label">目标：{{ currentPath.title }}</text>
        <text class="target-summary">{{ (currentPath.description || currentPath.summary || currentPath.content || '').slice(0, 80) }}...</text>
      </view>
      
      <view class="timeline">
        <view class="timeline-line"></view>
        
        <view
          v-for="(step, index) in currentPath.steps"
          :key="index"
          class="timeline-item"
        >
          <view class="timeline-node" :class="step.done ? 'completed' : 'pending'"></view>
          
          <view class="step-card glass-card" :class="{ done: step.done }">
            <text class="step-phase">节点 {{ index + 1 }}</text>
            <text class="step-task">{{ step.task }}</text>
            <text class="step-desc">{{ step.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import { useAppStore } from '../../stores/app.js'
import * as lifePathService from '../../services/lifePath.js'

const store = useAppStore()

const pathData = ref(null)

const selectedScript = computed(() => {
  return store.scripts.find(s => s.isSelected)
})

const currentPath = computed(() => {
  if (pathData.value) return pathData.value
  if (store.currentPath) return store.currentPath
  return null
})

const loadPath = async (scriptId) => {
  if (!scriptId) return
  try {
    const res = await lifePathService.getPathByScriptId(scriptId)
    pathData.value = res.data || null
    store.setCurrentPath(pathData.value)
  } catch (error) {
    pathData.value = null
  }
}

const goToScript = () => {
  uni.$emit('switchTab', 'script')
}

watch(selectedScript, (val) => {
  if (val?.id) {
    loadPath(val.id)
  } else {
    pathData.value = null
  }
})

onMounted(() => {
  if (selectedScript.value?.id) {
    loadPath(selectedScript.value.id)
  }
})
</script>

<style scoped>
.path-view {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  min-height: 100%;
}

.page-title {
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8rpx;
  letter-spacing: 4rpx;
}

.empty-state {
  padding: 120rpx 64rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rpx;
}

.empty-icon {
  font-size: 80rpx;
  opacity: 0.3;
}

.empty-text {
  font-size: 24rpx;
  color: rgba(192, 132, 252, 0.5);
  font-style: italic;
  text-align: center;
  line-height: 1.6;
}

.empty-btn {
  font-size: 22rpx;
  padding: 18rpx 36rpx;
}

.path-content {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.target-card {
  padding: 40rpx;
  margin-bottom: 16rpx;
  /* 金色玻璃态 + 左侧紫色边框 */
  border-left: 4rpx solid #C084FC;
  box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.05),
              0 4rpx 16rpx rgba(168, 85, 247, 0.1);
}

.target-label {
  display: block;
  font-size: 18rpx;
  color: #C084FC;
  font-weight: 600;
  letter-spacing: 4rpx;
  text-transform: uppercase;
  margin-bottom: 16rpx;
}

.target-summary {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.timeline {
  position: relative;
  padding-left: 60rpx;
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.timeline-line {
  position: absolute;
  left: 30rpx;
  top: 30rpx;
  bottom: 30rpx;
  width: 4rpx;
  background: linear-gradient(180deg,
    rgba(168, 85, 247, 0.4) 0%,
    rgba(168, 85, 247, 0.2) 50%,
    rgba(168, 85, 247, 0.05) 100%
  );
  border-radius: 4rpx;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.timeline-item {
  position: relative;
}

.timeline-node {
  position: absolute;
  left: -46rpx;
  top: 24rpx;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%);
  border: 4rpx solid #C084FC;
  /* 原型标准：节点发光 */
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4),
              inset 0 0 10rpx rgba(255, 255, 255, 0.2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-node.completed {
  animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4),
                inset 0 0 10rpx rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.6),
                inset 0 0 15rpx rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
  }
}

.timeline-node.pending {
  background: #0F071A;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.1);
}

.step-card {
  padding: 32rpx;
  opacity: 0.6;
}

.step-card.done {
  opacity: 1;
  border-color: rgba(192, 132, 252, 0.3);
}

.step-phase {
  display: block;
  font-size: 18rpx;
  color: #C084FC;
  font-weight: 600;
  letter-spacing: 4rpx;
  margin-bottom: 12rpx;
}

.step-task {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 12rpx;
}

.step-desc {
  display: block;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}
</style>
