<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useSceneStore } from '../store/scene'
import { useCollectionStore } from '../store/collection'

const router = useRouter()
const sceneStore = useSceneStore()
const collectionStore = useCollectionStore()

// 当前路由路径
const currentRoute = computed(() => router.currentRoute.value.path)

// 是否在首页显示底部导航
const showHomeNav = computed(() => {
  return currentRoute.value === '/'
})

// 是否显示场景导航
const showSceneNav = computed(() => {
  const sceneRoutes = ['/qianmen', '/chongwen', '/wangfujing', '/longfusi', '/dongzhimen']
  return sceneRoutes.includes(currentRoute.value)
})

// 福印收集进度
const collectionProgress = computed(() => {
  return collectionStore.getCollectionProgress
})

// 跳转到AI春联生成页面
const goToAISpring = () => {
  router.push('/ai-spring')
}

// 跳转到抽奖页面
const goToLottery = () => {
  uni.uni.showToast({title: '抽奖功能开发中...', duration: 2000})
  // router.push('/lottery')
}

// 跳转到福印收集页面
const goToCollection = () => {
  uni.uni.showToast({title: '福印收集功能开发中...', duration: 2000})
  // router.push('/collection')
}

// 返回首页
const goToHome = () => {
  router.push('/')
}
</script>

<template>
  <footer class="common-footer" v-if="showHomeNav">
    <div class="footer-nav">
      <div class="nav-item" @click="goToAISpring">
        <div class="nav-icon">📝</div>
        <div class="nav-text">AI春联</div>
      </div>
      <div class="nav-item" @click="goToLottery">
        <div class="nav-icon">🎁</div>
        <div class="nav-text">抽奖</div>
      </div>
      <div class="nav-item" @click="goToCollection">
        <div class="nav-icon">🏮</div>
        <div class="nav-text">福印</div>
        <div class="progress-badge" v-if="collectionProgress > 0">
          {{ collectionProgress }}%
        </div>
      </div>
    </div>
  </footer>
  
  <!-- 场景页面底部按钮 -->
  <div class="scene-footer" v-if="showSceneNav">
    <div class="scene-nav">
      <Button type="primary" block @click="goToHome">
        返回首页
      </Button>
    </div>
  </div>
</template>

<style scoped>
.common-footer {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.88rem;
  padding: 0 0.2rem;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.nav-icon {
  font-size: 0.4rem;
  margin-bottom: 0.05rem;
}

.nav-text {
  font-size: 0.2rem;
  color: #666;
}

.nav-item:active {
  opacity: 0.7;
}

.progress-badge {
  position: absolute;
  top: 0.1rem;
  right: 0.2rem;
  background-color: #ff6b35;
  color: #fff;
  font-size: 0.16rem;
  padding: 0.02rem 0.08rem;
  border-radius: 0.1rem;
  min-width: 0.3rem;
  text-align: center;
}

/* 场景页面底部按钮 */
.scene-footer {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem;
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #eee;
  z-index: 100;
}

.scene-nav {
  width: 100%;
}

/* 适配安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .common-footer {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(0.88rem + env(safe-area-inset-bottom));
  }
  
  .scene-footer {
    padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
  }
}
</style>