<template>
  <view class="page">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image v-if="userStore.userInfo?.avatar" :src="userStore.userInfo.avatar" class="avatar" mode="aspectFill" />
        <view v-else class="avatar-placeholder">
          <text class="avatar-text">👤</text>
        </view>
        <view class="user-text">
          <text class="nickname">{{ userStore.userInfo?.nickname || '未登录' }}</text>
          <view class="member-badge" :class="memberClass">
            <text class="member-text">{{ memberText }}</text>
          </view>
        </view>
      </view>

      <!-- 使用统计 -->
      <view class="stats-row" v-if="userStore.memberStatus">
        <view class="stat-item">
          <text class="stat-value">{{ userStore.memberStatus.quota.dailyRemaining }}</text>
          <text class="stat-label">今日剩余次数</text>
        </view>
        <view class="stat-divider" />
        <view class="stat-item">
          <text class="stat-value">{{ userStore.memberStatus.quota.wordLimit === 0 ? '∞' : userStore.memberStatus.quota.wordLimit }}</text>
          <text class="stat-label">单次字数上限</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="menu-section">
      <view class="menu-item" @click="goMember">
        <text class="menu-icon">👑</text>
        <text class="menu-text">会员中心</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goHistory">
        <text class="menu-icon">📜</text>
        <text class="menu-text">历史记录</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="showAbout">
        <text class="menu-icon">ℹ️</text>
        <text class="menu-text">关于我们</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="showFeedback">
        <text class="menu-icon">💬</text>
        <text class="menu-text">意见反馈</text>
        <text class="menu-arrow">›</text>
      </view>
    </view>

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

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

const userStore = useUserStore();

// 计算属性
const memberClass = computed(() => {
  const level = userStore.memberStatus?.level || 0;
  return `level-${level}`;
});

const memberText = computed(() => {
  return userStore.memberStatus?.levelName || '免费用户';
});

// 页面显示
onShow(() => {
  if (userStore.isLoggedIn) {
    userStore.fetchMemberStatus();
  }
});

// 跳转会员页
function goMember() {
  uni.navigateTo({ url: '/pages/member/index' });
}

// 跳转历史页
function goHistory() {
  uni.switchTab({ url: '/pages/history/index' });
}

// 关于我们
function showAbout() {
  uni.showModal({
    title: '关于AI有声书',
    content: 'AI有声书是一款智能文本转语音工具，帮助您轻松制作高质量音频内容。\n\n版本: 1.0.0',
    showCancel: false,
  });
}

// 意见反馈
function showFeedback() {
  uni.showModal({
    title: '意见反馈',
    content: '如有问题或建议，请联系客服：\n邮箱：support@example.com',
    showCancel: false,
  });
}

// 退出登录
function handleLogout() {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout();
        uni.showToast({ title: '已退出登录', icon: 'success' });
        // 关闭所有页面，打开登录页
        uni.reLaunch({ url: '/pages/login/index' });
      }
    },
  });
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f9fafb;
  padding-bottom: 120rpx;
}

.user-card {
  margin: 32rpx;
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(79, 70, 229, 0.3);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-placeholder {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-text {
  font-size: 48rpx;
}

.user-text {
  margin-left: 24rpx;
}

.nickname {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.member-badge {
  display: inline-block;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.2);
}

.member-badge.level-1 {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.member-badge.level-2 {
  background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%);
}

.member-text {
  font-size: 22rpx;
  color: #ffffff;
}

.stats-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  padding: 24rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #ffffff;
}

.stat-label {
  display: block;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4rpx;
}

.stat-divider {
  width: 2rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
}

.menu-section {
  margin: 32rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f3f4f6;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: 24rpx;
}

.menu-text {
  flex: 1;
  font-size: 30rpx;
  color: #1f2937;
}

.menu-arrow {
  font-size: 32rpx;
  color: #9ca3af;
}

.logout-section {
  margin: 48rpx 32rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  border-radius: 16rpx;
  border: 2rpx solid #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-btn::after {
  border: none;
}

.logout-btn text {
  font-size: 30rpx;
  color: #ef4444;
}
</style>