<template>
  <ScreenLayout :show-back-btn="false">
    <div class="page-status">
      <!-- 导航状态 -->
      <div class="nav-container">
        <div class="nav-header">
          <h1>导航中</h1>
          <p>目的地：{{ targetName }}</p>
        </div>

        <!-- 机器人动画 -->
        <div class="robot-animation">
          <div class="robot-icon" :class="{ moving: isMoving }">
            <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="40" cy="28" r="16" fill="currentColor" />
              <rect x="20" y="48" width="40" height="24" rx="8" fill="currentColor" />
              <circle cx="32" cy="24" r="3" fill="white" class="eye-left" />
              <circle cx="48" cy="24" r="3" fill="white" class="eye-right" />
              <rect x="60" y="56" width="16" height="4" rx="2" fill="currentColor" class="wheel" />
              <rect x="4" y="56" width="16" height="4" rx="2" fill="currentColor" class="wheel" />
            </svg>
          </div>

          <div class="path-line">
            <div class="path-progress" :style="{ width: progress + '%' }"></div>
          </div>

          <div class="target-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10" />
              <circle cx="12" cy="12" r="6" />
              <circle cx="12" cy="12" r="2" />
            </svg>
          </div>
        </div>

        <!-- 状态消息 -->
        <div class="status-message" :class="statusClass">
          <span class="message-text">{{ statusMessage }}</span>
        </div>

        <!-- 进度 -->
        <div class="progress-info">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: progress + '%' }"></div>
          </div>
          <span class="progress-text">{{ progress }}%</span>
        </div>

        <!-- 取消按钮 -->
        <button class="btn-cancel" @click="handleCancel">
          取消导航
        </button>
      </div>
    </div>
  </ScreenLayout>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useNavigationStore } from '@/stores/navigation'
import { useScreenStore } from '@/stores/screen'
import ScreenLayout from '@/layouts/ScreenLayout.vue'

const router = useRouter()
const navigationStore = useNavigationStore()
const screenStore = useScreenStore()

const progress = ref(0)
const isMoving = ref(true)

const targetName = computed(() => navigationStore.navigationStatus.targetName || '未知地点')

const statusMessage = computed(() => {
  const p = progress.value
  if (p === 0) return '正在规划路线...'
  if (p < 30) return '开始带路，请跟我来'
  if (p < 60) return '前方直行'
  if (p < 90) return '即将到达'
  if (p === 100) return '已到达目的地'
  return '导航中'
})

const statusClass = computed(() => {
  if (progress.value === 100) return 'status-arrived'
  if (progress.value >= 90) return 'status-near'
  return 'status-moving'
})

let timer = null

const startNavigation = () => {
  timer = setInterval(() => {
    if (progress.value < 100) {
      progress.value += Math.random() * 5 + 2
      if (progress.value >= 100) {
        progress.value = 100
        isMoving.value = false
        clearInterval(timer)
        // 到达后延迟返回
        setTimeout(() => {
          screenStore.showAlert({
            type: 'success',
            message: `已到达${targetName.value}`,
            duration: 3000
          })
          setTimeout(() => {
            handleFinish()
          }, 3000)
        }, 1000)
      }
    }
  }, 500)
}

const handleCancel = async () => {
  if (timer) clearInterval(timer)
  try {
    await navigationStore.cancelNavigation()
    router.push('/navigation')
  } catch {
    router.push('/navigation')
  }
}

const handleFinish = () => {
  navigationStore.clearNavigation()
  router.push('/idle')
}

onMounted(() => {
  if (!navigationStore.currentTask) {
    router.push('/navigation')
    return
  }
  startNavigation()
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.page-status {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9f8ff 0%, #dff8f5 50%, #f7fbff 100%);
}

.nav-container {
  width: 100%;
  max-width: 600px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.nav-header {
  text-align: center;
}

.nav-header h1 {
  font-size: 36px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.nav-header p {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0;
}

.robot-animation {
  position: relative;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.robot-icon {
  width: 80px;
  height: 80px;
  color: var(--primary);
  z-index: 2;
  transition: transform 0.5s ease;
}

.robot-icon.moving {
  animation: walkBounce 0.5s ease-in-out infinite;
}

.robot-icon svg {
  width: 100%;
  height: 100%;
}

.robot-icon .eye-left,
.robot-icon .eye-right {
  animation: blink 3s ease-in-out infinite;
}

@keyframes walkBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-2deg); }
  75% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.path-line {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.path-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.target-icon {
  position: absolute;
  right: 8%;
  width: 32px;
  height: 32px;
  color: var(--success);
}

.target-icon svg {
  width: 100%;
  height: 100%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.status-message {
  padding: 16px 32px;
  background: var(--bg-card);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

.message-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
}

.status-arrived .message-text {
  color: var(--success);
}

.status-near .message-text {
  color: var(--primary);
}

.progress-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-bar {
  flex: 1;
  height: 12px;
  background: var(--border-light);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  min-width: 50px;
  text-align: right;
}

.btn-cancel {
  padding: 16px 48px;
  font-size: 18px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-cancel:hover {
  border-color: var(--danger);
  color: var(--danger);
}
</style>
