<template>
  <view class="main-page">
    <!-- 星空背景 -->
    <view class="stars-container">
      <view
        v-for="star in stars"
        :key="star.id"
        class="star"
        :style="{
          left: star.left + '%',
          top: star.top + '%',
          width: star.size + 'px',
          height: star.size + 'px',
          '--opacity': star.opacity,
          '--x': star.xMove + 'px',
          '--y': star.yMove + 'px',
          '--duration': star.duration + 's',
          '--delay': star.delay + 's'
        }"
      ></view>
    </view>

    <view class="bg-decoration">
      <view class="aurora-top"></view>
      <view class="aurora-bottom"></view>
    </view>

    <view class="header" :style="{ paddingTop: safeAreaTop + 20 + 'px' }">
      <view class="header-left">
        <view class="logo-box">
          <image class="logo" src="/static/logo.svg" mode="aspectFit" />
        </view>
        <view class="brand">
          <text class="brand-title font-serif">人生 OS</text>
          <text class="brand-subtitle">LIFE HARMONY v3.1</text>
        </view>
      </view>
      <view class="header-right" @click="goToProfile">
        <view class="avatar-box">
          <image class="avatar" :src="userAvatar" mode="aspectFill" />
        </view>
      </view>
    </view>

    <scroll-view class="page-content" scroll-y>
      <view v-if="activeTab === 'record'" class="tab-page">
        <RecordView></RecordView>
      </view>

      <view v-if="activeTab === 'script'" class="tab-page">
        <ScriptView></ScriptView>
      </view>

      <view v-if="activeTab === 'path'" class="tab-page">
        <PathView></PathView>
      </view>
    </scroll-view>

    <!-- 全局音乐播放器 -->
    <MusicPlayer ref="musicPlayer" />

    <view class="bottom-nav" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <view
        class="nav-item"
        :class="{ active: activeTab === 'record' }"
        @click="switchTab('record')"
      >
        <text class="nav-icon">📖</text>
        <text class="nav-label">回溯过去</text>
      </view>
      <view
        class="nav-item"
        :class="{ active: activeTab === 'script' }"
        @click="switchTab('script')"
      >
        <text class="nav-icon">✨</text>
        <text class="nav-label">创造未来</text>
      </view>
      <view
        class="nav-item"
        :class="{ active: activeTab === 'path' }"
        @click="switchTab('path')"
      >
        <text class="nav-icon">🗺️</text>
        <text class="nav-label">路径实现</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useAppStore } from '../../stores/app.js'
import RecordView from './RecordView.vue'
import ScriptView from './ScriptView.vue'
import PathView from './PathView.vue'
import MusicPlayer from '../../components/MusicPlayer.vue'

const store = useAppStore()
const activeTab = ref('record')
const musicPlayer = ref(null)

const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)

// 星空背景数据
const stars = ref([])

const initStars = () => {
  stars.value = []
  for (let i = 0; i < 60; i++) {
    stars.value.push({
      id: i,
      size: Math.random() * 3 + 1,
      left: Math.random() * 100,
      top: Math.random() * 100,
      opacity: 0.2 + Math.random() * 0.5,
      xMove: (Math.random() - 0.5) * 100,
      yMove: (Math.random() - 0.5) * 100,
      duration: 15 + Math.random() * 20,
      delay: Math.random() * -20
    })
  }
}

onMounted(() => {
  // 使用新的推荐 API 替代已弃用的 getSystemInfoSync
  const windowInfo = uni.getWindowInfo()
  safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
  safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0

  store.initialize()
  uni.$on('switchTab', switchTab)

  initStars()
})

const userAvatar = computed(() => {
  const nickname = store.userProfile?.nickname || 'user'
  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${nickname}&backgroundColor=A855F7`
})

const switchTab = (tab) => {
  activeTab.value = tab
}

onUnmounted(() => {
  uni.$off('switchTab', switchTab)
})

const goToProfile = () => {
  uni.navigateTo({ url: '/pages/profile/index' })
}
</script>

<style scoped>
.main-page {
  height: 100vh;
  background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 星空背景 */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: var(--opacity);
  animation: float-star var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes float-star {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--opacity);
  }
  50% {
    transform: translate(var(--x), var(--y)) scale(1.5);
    opacity: 1;
  }
}

.bg-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.aurora-top {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 60%;
  background: rgba(168, 85, 247, 0.08);
  filter: blur(120rpx);
  border-radius: 50%;
}

.aurora-bottom {
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 100%;
  height: 50%;
  background: rgba(139, 92, 246, 0.05);
  filter: blur(100rpx);
  border-radius: 50%;
}

.header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  padding-top: calc(24rpx + constant(safe-area-inset-top));
  padding-top: calc(24rpx + env(safe-area-inset-top));
  background: rgba(15, 7, 26, 0.6);
  backdrop-filter: blur(20rpx);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.logo-box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo {
  width: 64rpx;
  height: 64rpx;
}

.brand-title {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 6rpx;
}

.brand-subtitle {
  display: block;
  font-size: 16rpx;
  color: rgba(168, 85, 247, 0.6);
  letter-spacing: 4rpx;
}

.avatar-box {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
}

.page-content {
  flex: 1;
  position: relative;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 0;
}

.tab-page {
  padding: 32rpx;
  padding-bottom: calc(180rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(15, 7, 26, 0.95);
  backdrop-filter: blur(40rpx);
  -webkit-backdrop-filter: blur(40rpx);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  padding: 16rpx 32rpx;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  min-width: 160rpx;
}

.nav-item.active {
  color: #C084FC;
  transform: translateY(-8rpx);
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}

.nav-icon {
  font-size: 40rpx;
}

.nav-label {
  font-size: 18rpx;
  font-weight: 600;
  letter-spacing: 4rpx;
  text-transform: uppercase;
}

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
