<template>
  <div class="auth-layout min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-20 animate-pulse-slow"></div>
      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-pink-400 to-yellow-500 rounded-full opacity-20 animate-bounce-gentle"></div>
    </div>
    
    <!-- 主要内容 -->
    <div class="relative w-full max-w-md">
      <!-- Logo和标题 -->
      <div class="text-center mb-8">
        <div class="flex justify-center mb-4">
          <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
            <el-icon size="32" class="text-white">
              <Sunny />
            </el-icon>
          </div>
        </div>
        <h1 class="text-3xl font-bold text-gray-900 mb-2">情绪博物馆</h1>
        <p class="text-gray-600">记录情绪，分享心情的温暖空间</p>
      </div>
      
      <!-- 认证表单容器 -->
      <div class="bg-white rounded-2xl shadow-xl p-8 backdrop-blur-sm bg-opacity-95">
        <router-view />
      </div>
      
      <!-- 底部链接 -->
      <div class="text-center mt-6 space-y-2">
        <div class="flex justify-center space-x-4 text-sm text-gray-600">
          <a href="#" class="hover:text-blue-600 transition-colors">帮助中心</a>
          <span>·</span>
          <a href="#" class="hover:text-blue-600 transition-colors">隐私政策</a>
          <span>·</span>
          <a href="#" class="hover:text-blue-600 transition-colors">服务条款</a>
        </div>
        <p class="text-xs text-gray-500">
          © 2024 情绪博物馆. All rights reserved.
        </p>
      </div>
    </div>
    
    <!-- 主题切换按钮 -->
    <div class="absolute top-4 right-4">
      <el-button circle @click="toggleTheme" class="bg-white bg-opacity-80 backdrop-blur-sm">
        <el-icon>
          <Sunny v-if="!isDarkTheme" />
          <Moon v-else />
        </el-icon>
      </el-button>
    </div>
    
    <!-- 语言切换按钮 -->
    <div class="absolute top-4 left-4">
      <el-dropdown @command="handleLanguageChange">
        <el-button circle class="bg-white bg-opacity-80 backdrop-blur-sm">
          <el-icon><Globe /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="zh-CN">中文</el-dropdown-item>
            <el-dropdown-item command="en-US">English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Sunny, Moon, Globe } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

// 计算属性
const isDarkTheme = computed(() => appStore.isDarkTheme)

// 方法
const toggleTheme = () => {
  appStore.toggleTheme()
}

const handleLanguageChange = (language: string) => {
  appStore.setLanguage(language)
}
</script>

<style scoped>
.auth-layout {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes bounce-gentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

.animate-bounce-gentle {
  animation: bounce-gentle 6s ease-in-out infinite;
}
</style>
