<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 使用路由信息来高亮当前 Tab，而不是从父组件传递状态
const route = useRoute()
const router = useRouter()

const currentTab = computed(() => route.name)

const goTab = (name) => {
  if (route.name === name) return
  router.push({ name })
}

const openAdd = () => {
  router.push({ name: 'add' })
}
</script>

<template>
  <div
    class="absolute bottom-6 left-4 right-4 h-[72px] bg-white/90 backdrop-blur-md rounded-[24px] shadow-2xl shadow-stone-200/50 flex items-center justify-between px-2 z-20 border border-white/50"
  >
    <button
      class="flex-1 flex flex-col items-center gap-1 transition group"
      @click="goTab('home')"
    >
      <div
        class="p-2 rounded-xl transition-all duration-300"
        :class="currentTab === 'home' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
      >
        <i class="text-2xl" :class="currentTab === 'home' ? 'ph-fill ph-house' : 'ph ph-house'" />
      </div>
    </button>

    <button
      class="flex-1 flex flex-col items-center gap-1 transition group"
      @click="goTab('list')"
    >
      <div
        class="p-2 rounded-xl transition-all duration-300"
        :class="currentTab === 'list' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
      >
        <i class="text-2xl" :class="currentTab === 'list' ? 'ph-fill ph-scroll' : 'ph ph-scroll'" />
      </div>
    </button>

    <!-- 中间主操作按钮：跳转到新增记录路由 -->
    <div class="relative -top-6">
      <button
        class="w-16 h-16 bg-gradient-warm rounded-[22px] flex items-center justify-center text-white shadow-xl shadow-orange-300/60 hover:scale-105 active:scale-95 transition-all duration-300 border-[6px] border-[#fffaf8]"
        @click="openAdd"
      >
        <i class="ph-bold ph-plus text-2xl" />
      </button>
    </div>

    <button
      class="flex-1 flex flex-col items-center gap-1 transition group"
      @click="goTab('analysis')"
    >
      <div
        class="p-2 rounded-xl transition-all duration-300"
        :class="currentTab === 'analysis' ? 'text-purple-600 bg-purple-50' : 'text-stone-400 bg-transparent'"
      >
        <i
          class="text-2xl"
          :class="currentTab === 'analysis' ? 'ph-fill ph-chat-teardrop-text' : 'ph ph-chat-teardrop-text'"
        />
      </div>
    </button>

    <button
      class="flex-1 flex flex-col items-center gap-1 transition group"
      @click="goTab('settings')"
    >
      <div
        class="p-2 rounded-xl transition-all duration-300"
        :class="currentTab === 'settings' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
      >
        <i class="text-2xl" :class="currentTab === 'settings' ? 'ph-fill ph-gear' : 'ph ph-gear'" />
      </div>
    </button>
  </div>
</template>
