<template>
  <div class="welcome-content">
    <!-- 顶部欢迎文案 -->
    <div class="welcome-header">
      <h1 class="welcome-title">欢迎来到美乐爱觉</h1>
      <p class="welcome-subtitle">开启您的学习之旅</p>
    </div>

    <!-- 功能入口区域 - 轨道布局 -->
    <div class="entry-orbit">
      <div class="orbit-center">
        <!-- 中心装饰元素（可选） -->
        <div class="orbit-decoration"></div>
      </div>

      <!-- 3个功能入口 - 轨道布局 -->
      <div class="orbit-entries">
        <WelcomeEntryItem
          v-for="entry in entries"
          :key="entry.id"
          :entry="entry"
          class="orbit-entry"
          :class="`orbit-entry-${entry.priority}`"
          @click="handleEntryClick"
        />
      </div>
    </div>

    <!-- 底部开始按钮 -->
    <div class="welcome-actions">
      <van-button
        type="primary"
        size="large"
        round
        block
        @click="handleStart"
      >
        开始体验
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { welcomeEntries } from '@/config/welcomeEntries'
import WelcomeEntryItem from './WelcomeEntryItem.vue'

const router = useRouter()
const entries = ref(welcomeEntries)

const handleEntryClick = (entry) => {
  if (entry.isExternal) {
    // 外部链接：获取用户ID并拼接
    const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}')
    const userId = currentUser.id || currentUser.user_id || ''
    const url = entry.externalUrl + userId
    window.open(url, '_blank')
  } else {
    // 内部路由跳转
    router.push(entry.route)
  }
}

const handleStart = () => {
  // 跳转到首页
  router.push('/')
}
</script>

<style lang="less" scoped>
.welcome-content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 2rem 3rem;
  z-index: 1;
}

.welcome-header {
  text-align: center;
  margin-top: 4rem;

  .welcome-title {
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.75rem;
    animation: fadeInDown 1s ease;
  }

  .welcome-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    animation: fadeInDown 1s ease 0.2s both;
  }
}

.entry-orbit {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  margin: 2rem 0;

  .orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(10px);
    animation: pulse 3s ease-in-out infinite;

    .orbit-decoration {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      animation: rotate 20s linear infinite;
    }
  }

  .orbit-entries {
    position: relative;
    width: 100%;
    height: 100%;

    .orbit-entry {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: float 3s ease-in-out infinite;

      &.orbit-entry-1 {
        // 课程中心 - 顶部
        top: 0;
        left: 50%;
        animation-delay: 0s;
      }

      &.orbit-entry-2 {
        // 活动中心 - 右下
        top: 75%;
        left: 85%;
        animation-delay: 0.5s;
      }

      &.orbit-entry-3 {
        // 个人中心 - 左下
        top: 75%;
        left: 15%;
        animation-delay: 1s;
      }
    }
  }
}

.welcome-actions {
  width: 100%;
  max-width: 20rem;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease 0.4s both;

  :deep(.van-button) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    height: 3rem;
    font-size: 1.1rem;
    font-weight: 500;
  }
}

// 动画定义
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

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

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>