<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { RouterView } from 'vue-router'
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
import LoginModal from './components/LoginModal.vue'
import AnnouncementModal from './components/AnnouncementModal.vue' 

// --- 主题切换逻辑 ---
const isDark = ref(false)

// 执行切换操作
const applyTheme = (dark) => {
  isDark.value = dark
  if (dark) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}

// 按钮点击事件
const toggleTheme = () => {
  applyTheme(!isDark.value)
}

// --- 回到顶部逻辑 ---
const showBackTop = ref(false)

const handleScroll = () => {
  showBackTop.value = window.scrollY > 200
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 初始化：根据时间判断 (19:00 - 06:00为暗色)
onMounted(() => {
  const hour = new Date().getHours()
  const isNight = hour >= 19 || hour < 6
  applyTheme(isNight)
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <AppHeader />
  <!-- 路由出口 -->
  <RouterView />
  <AppFooter />
  <LoginModal />
  <AnnouncementModal />

  <!-- 全局主题切换按钮 -->
  <div class="theme-switch-btn" @click="toggleTheme" :title="isDark ? '切换到亮色' : '切换到暗色'">
    <i v-if="isDark" class="fa-solid fa-moon"></i>
    <i v-else class="fa-solid fa-sun"></i>
  </div>

  <!-- 全局回到顶部按钮 -->
  <Transition name="fade">
    <div 
      v-show="showBackTop" 
      class="back-to-top" 
      @click="scrollToTop"
      title="回到顶部"
    >
      <i class="fa-solid fa-arrow-up"></i>
    </div>
  </Transition>
</template>

<style>
/* 引入修改后的main.css */
@import './assets/main.css';

/* 切换按钮样式 */
.theme-switch-btn {
  position: fixed;
  bottom: 100px; /* 位于返回顶部按钮上方 */
  right: 40px;
  width: 50px;
  height: 50px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

.theme-switch-btn:hover {
  transform: rotate(15deg) scale(1.1);
  border-color: var(--primary);
  color: var(--primary);
}

/* 回到顶部按钮样式 */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

.back-to-top:hover {
  transform: translateY(-5px);
  background-color: var(--primary-dark);
  box-shadow: 0 15px 20px -3px rgba(37, 99, 235, 0.4);
}

/* Vue 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

@media (max-width: 768px) {
  .theme-switch-btn {
    right: 20px;
    bottom: 80px;
    width: 45px;
    height: 45px;
  }
  
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
}
</style>