<template>
  <view class="profile">
    <view class="user-card" v-if="userStore.isLoggedIn">
      <view class="avatar">
        <text class="avatar-text">{{ (userStore.profile?.nickname || '?')[0] }}</text>
      </view>
      <view class="user-info">
        <text class="nickname">{{ userStore.profile?.nickname || '用户' }}</text>
        <text class="member" v-if="userStore.profile?.memberPlan !== 'FREE'">{{ userStore.profile?.memberPlan }} 会员</text>
        <text class="member free" v-else>免费用户</text>
      </view>
    </view>
    <view class="user-card" v-else>
      <view class="login-prompt" @tap="goLogin">
        <text class="login-text">点击登录 / 注册</text>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" @tap="goLearning">
        <text class="menu-icon">📚</text>
        <text class="menu-text">学习进度</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @tap="goFavorites">
        <text class="menu-icon">⭐</text>
        <text class="menu-text">我的收藏</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @tap="goMembership">
        <text class="menu-icon">💎</text>
        <text class="menu-text">会员中心</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @tap="goDashboard">
        <text class="menu-icon">📊</text>
        <text class="menu-text">数据看板</text>
        <text class="menu-arrow">></text>
      </view>
    </view>

    <button class="btn-logout" v-if="userStore.isLoggedIn" @tap="handleLogout">退出登录</button>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '../../store/user'

const userStore = useUserStore()

onShow(() => {
  if (userStore.isLoggedIn && !userStore.profile) {
    userStore.fetchProfile()
  }
})

const goLogin = () => uni.navigateTo({ url: '/pages/login/index' })
const goLearning = () => uni.navigateTo({ url: '/pages/learning-progress/index' })
const goFavorites = () => uni.navigateTo({ url: '/pages/favorites/index' })
const goMembership = () => uni.navigateTo({ url: '/pages/membership/index' })
const goDashboard = () => {
  if (!userStore.isLoggedIn) { goLogin(); return }
  uni.navigateTo({ url: '/pages/profile/index?tab=dashboard' })
}

function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定退出登录？',
    success: (res) => {
      if (res.confirm) userStore.logout()
    },
  })
}
</script>

<style scoped>
.profile { padding: 30rpx; }
.user-card {
  background: linear-gradient(135deg, var(--brand), #6c5ce7);
  border-radius: 20rpx; padding: 40rpx; display: flex; align-items: center; margin-bottom: 30rpx;
}
.avatar {
  width: 100rpx; height: 100rpx; border-radius: 50%; background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; margin-right: 24rpx;
}
.avatar-text { font-size: 40rpx; color: var(--card); font-weight: bold; }
.user-info { flex: 1; }
.nickname { font-size: 32rpx; font-weight: bold; color: var(--card); display: block; }
.member { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: inline-block; background: rgba(255,255,255,0.15); padding: 4rpx 16rpx; border-radius: 20rpx; }
.member.free { background: transparent; }
.login-prompt { padding: 40rpx; text-align: center; }
.login-text { font-size: 32rpx; color: var(--card); }
.menu-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
.menu-item {
  display: flex; align-items: center; padding: 28rpx 30rpx;
  border-bottom: 1rpx solid var(--muted);
}
.menu-item:last-child { border-bottom: none; }
.menu-icon { font-size: 32rpx; margin-right: 20rpx; }
.menu-text { flex: 1; font-size: 28rpx; }
.menu-arrow { font-size: 28rpx; color: var(--muted-foreground); }
.btn-logout {
  background: var(--card); color: #ff4d4f; border-radius: 12rpx; padding: 24rpx;
  font-size: 28rpx; text-align: center; margin-top: 40rpx; border: 1rpx solid #ff4d4f;
}
</style>
