<template>
  <div id="app-container">
    <header>
      <nav>
        <div class="nav-left">
          <router-link to="/">首页</router-link>
          <router-link :to="{ name: 'GroupList' }">兴趣小组</router-link>
          <router-link :to="{ name: 'UserList' }">用户列表</router-link>
          <router-link :to="{ name: 'Recommendations' }">为你推荐</router-link>
        </div>
        
        <div class="nav-right">
          <template v-if="authStore.isAuthenticated">
            <span v-if="authStore.currentUser" class="welcome-message">
              欢迎, {{ authStore.currentUser.nickname || authStore.currentUser.email }}
            </span>
            <router-link :to="{ name: 'UserProfile' }" class="nav-item">我的资料</router-link>
            <button @click="handleLogout" class="nav-button">退出登录</button>
          </template>
          <template v-else>
            <router-link to="/login" class="nav-item">登录</router-link>
            <router-link :to="{ name: 'UserRegister' }" class="nav-item">注册</router-link>
          </template>
        </div>
      </nav>
    </header>
    <main>
      <router-view :key="$route.fullPath" />
    </main>
    <footer>
      <p>© 2025 同趣U</p>
    </footer>
  </div>
</template>

<script setup>
// import { onMounted } from 'vue'; // onMounted不再需要立即调用tryAutoLogin
import { useAuthStore } from './store/auth';
import { useRouter } from 'vue-router';

const authStore = useAuthStore();
const router = useRouter();

const handleLogout = () => {
  authStore.logout();
  // authStore.logout 内部会尝试跳转，这里可以不重复跳转，
  // 但为确保，或者如果logout不包含跳转逻辑，则需要router.push
  // router.push('/login').catch(()=>{}); 
};

// tryAutoLogin 的逻辑移到了路由守卫 (router.beforeEach) 中，
// 或者可以在 Pinia store 初始化时或应用创建时更早地触发。
// App.vue的onMounted中不再主动调用，以避免与路由守卫的逻辑冲突或重复。
// onMounted(() => {
//   authStore.tryAutoLogin(); 
// });
</script>

<style scoped>
/* 样式与之前 App.vue 的版本保持一致 */
#app-container { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: flex; flex-direction: column; min-height: 100vh; }
header { width: 100%; background-color: #fff; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #e9ecef; }
nav { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; height: 60px; box-sizing: border-box; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 10px; }
nav a, nav .nav-button { font-weight: 500; color: #495057; text-decoration: none; padding: 8px 12px; border-radius: 5px; transition: color 0.2s, background-color 0.2s; margin: 0; }
nav .nav-button { background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; }
nav a:hover, nav .nav-button:hover { color: #007bff; background-color: #f0f2f5; }
nav a.router-link-exact-active { color: #007bff; background-color: #e7f3ff; }
.welcome-message { font-size: 0.9em; color: #6c757d; padding-right: 10px; }
main { flex-grow: 1; padding: 25px 20px; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
footer { width: 100%; padding: 25px 0; font-size: 0.9em; color: #6c757d; background-color: #f8f9fa; border-top: 1px solid #e9ecef; }
nav > .nav-left > *:not(:last-child)::after,
nav > .nav-right > *:not(:last-child)::after { /* content: "|"; margin-left: 10px; color: #ced4da; */ }
</style>