<template>
  <div class="main-layout">
    <router-view />
    <TranslateFab />
    <TrainFab />
    <nav class="nav-bottom">
      <router-link to="/" class="nav-item">
        <span class="nav-icon">📊</span>
        首页
      </router-link>
      <router-link to="/words" class="nav-item">
        <span class="nav-icon">📈</span>
        记忆曲线
      </router-link>
      <router-link to="/coach" class="nav-item">
        <span class="nav-icon">💬</span>
        对话
      </router-link>
      <router-link to="/settings" class="nav-item">
        <span class="nav-icon">⚙️</span>
        设置
      </router-link>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import TrainFab from '../components/TrainFab.vue'
import TranslateFab from '../components/TranslateFab.vue'
import { useTranslateFab } from '../composables/useTranslateFab'

const route = useRoute()
const router = useRouter()
const { openFab } = useTranslateFab()

watch(
  () => route.path,
  (path) => {
    if (path === '/translate') {
      openFab()
      router.replace('/')
    }
  },
  { immediate: true }
)
</script>
