<template>
  <div id="app">
    <router-view />
    <!-- 底部导航栏 -->
    <nav class="bottom-nav" v-if="showNav">
      <button
        class="nav-item"
        :class="{ active: currentRoute === '/' || currentRoute === '/avatar/manage' }"
        @click="navigateTo('/avatar/manage')"
      >
        <span class="nav-icon">🤖</span>
        <span class="nav-label">我的分身</span>
      </button>
      <button
        class="nav-item"
        :class="{ active: currentRoute === '/authorization' }"
        @click="navigateTo('/authorization')"
      >
        <span class="nav-icon">🔑</span>
        <span class="nav-label">授权管理</span>
      </button>
      <button
        class="nav-item"
        :class="{ active: currentRoute === '/token/charge' }"
        @click="navigateTo('/token/charge')"
      >
        <span class="nav-icon">💰</span>
        <span class="nav-label">Token</span>
      </button>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const currentRoute = ref<string>(route.path)
const showNav = ref<boolean>(true)

// 监听路由变化
watch(() => route.path, (newPath) => {
  currentRoute.value = newPath
  // 首页（创建引导）与编辑页隐藏底部导航
  showNav.value = newPath !== '/' && !newPath.startsWith('/avatar/edit')
})

// 导航
const navigateTo = (path: string) => {
  router.push(path)
}

onMounted(() => {
  currentRoute.value = route.path
  showNav.value = route.path !== '/' && !route.path.startsWith('/avatar/edit')
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100%;
  min-height: 100vh;
  background: #F8F9FA;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: white;
  border-top: 1px solid #EDEEF1;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.nav-icon {
  font-size: 20px;
}

.nav-label {
  font-size: 11px;
  color: #9398AE;
  font-weight: 500;
}

.nav-item.active .nav-label {
  color: #F97316;
}

.nav-item.active .nav-icon {
  filter: none;
}
</style>
