<template>
  <view class="profile-page">
    <view class="bg-decoration">
      <view class="aurora-top"></view>
      <view class="aurora-bottom"></view>
    </view>
    
    <scroll-view class="content" scroll-y :style="{ paddingTop: safeAreaTop + 20 + 'px', paddingBottom: safeAreaBottom + 20 + 'px' }">
      <view class="user-card">
        <view class="avatar-box">
          <image class="avatar" :src="userAvatar" mode="aspectFill" />
          <view class="verified-badge">✓</view>
        </view>
        
        <view class="user-info">
          <text class="nickname font-serif">{{ userProfile.nickname || '未同步系统' }}</text>
          <text class="user-tags">{{ userTags }}</text>
        </view>
      </view>
      
      <view class="stats-row">
        <view class="stat-card glass-card">
          <text class="stat-label">觉醒深度</text>
          <text class="stat-value">Lv.4</text>
        </view>
        <view class="stat-card glass-card">
          <text class="stat-label">星历契合</text>
          <text class="stat-value">98%</text>
        </view>
      </view>
      
      <view class="menu-list">
        <view class="menu-item glass-card" @click="editProfile">
          <view class="menu-left">
            <text class="menu-icon">👤</text>
            <text class="menu-title">个人档案设置</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>
        
        <view class="menu-item glass-card">
          <view class="menu-left">
            <text class="menu-icon">🔄</text>
            <text class="menu-title">多账号切换</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>
        
        <view class="menu-item glass-card">
          <view class="menu-left">
            <text class="menu-icon">📧</text>
            <text class="menu-title">与开发者对话</text>
          </view>
          <text class="menu-arrow">↗</text>
        </view>
      </view>
      
      <button class="logout-btn" @click="handleLogout">
        TERMINATE LIFE HARMONY
      </button>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useAppStore } from '../../stores/app.js'

const store = useAppStore()

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

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
  safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
})

const userProfile = computed(() => store.userProfile || {})

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

const userTags = computed(() => {
  const { mbti, zodiac, profession } = userProfile.value
  const tags = [mbti || 'QUESTER', zodiac || 'STAR', profession || '星民']
  return tags.join(' · ')
})

const editProfile = () => {
  uni.navigateTo({ url: '/pages/onboarding/index?edit=1' })
}

const handleLogout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        await store.logout()
        uni.reLaunch({ url: '/pages/login/index' })
      }
    }
  })
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
  position: relative;
}

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

.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%;
}

.content {
  position: relative;
  z-index: 1;
  padding: 40rpx;
  padding-top: calc(60rpx + constant(safe-area-inset-top));
  padding-top: calc(60rpx + env(safe-area-inset-top));
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 0;
  margin-bottom: 32rpx;
}

.avatar-box {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(168, 85, 247, 0.3);
  padding: 8rpx;
  margin-bottom: 32rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.1);
}

.verified-badge {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 40rpx;
  height: 40rpx;
  background: #9333EA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: white;
  border: 4rpx solid #0F071A;
}

.user-info {
  text-align: center;
}

.nickname {
  display: block;
  font-size: 40rpx;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 16rpx;
  letter-spacing: 4rpx;
}

.user-tags {
  display: block;
  font-size: 18rpx;
  color: rgba(168, 85, 247, 0.6);
  letter-spacing: 4rpx;
  text-transform: uppercase;
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  margin-bottom: 48rpx;
}

.stat-card {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.stat-label {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 4rpx;
  text-transform: uppercase;
}

.stat-value {
  font-size: 36rpx;
  font-weight: 300;
  color: rgba(243, 232, 255, 0.9);
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 64rpx;
}

.menu-item {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.menu-icon {
  font-size: 32rpx;
}

.menu-title {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.menu-arrow {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.3);
}

.logout-btn {
  width: 100%;
  padding: 32rpx;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  color: rgba(255, 255, 255, 0.3);
  font-size: 20rpx;
  letter-spacing: 6rpx;
  text-transform: uppercase;
}

.logout-btn:active {
  color: rgba(168, 85, 247, 0.5);
  border-color: rgba(168, 85, 247, 0.2);
}
</style>
