<template>
  <view class="user-page page-container">
    <!-- 用户信息卡片 -->
    <view class="user-card cyber-card">
      <image :src="user.avatar" class="user-avatar" />
      <view class="user-info">
        <text class="user-name">{{ user.nickname }}</text>
        <view class="vip-badge">
          <text class="vip-icon">👑</text>
          <text class="vip-text">{{ user.vipName }}</text>
        </view>
      </view>
      <view class="setting-btn" @click="goSetting">
        <text class="setting-icon">⚙️</text>
      </view>
    </view>

    <!-- 资产信息 -->
    <view class="assets-card cyber-card">
      <view class="asset-item" @click="goWallet">
        <text class="asset-value neon-text">{{ user.balance }}</text>
        <text class="asset-label">余额</text>
      </view>
      <view class="asset-divider"></view>
      <view class="asset-item" @click="goPoints">
        <text class="asset-value neon-text">{{ user.points }}</text>
        <text class="asset-label">积分</text>
      </view>
      <view class="asset-divider"></view>
      <view class="asset-item" @click="goCoupons">
        <text class="asset-value neon-text">{{ userStats.couponCount }}</text>
        <text class="asset-label">优惠券</text>
      </view>
    </view>

    <!-- 订单统计 -->
    <view class="order-stats cyber-card">
      <view class="stats-header">
        <text class="stats-title">我的订单</text>
        <text class="stats-more" @click="goAllOrders">全部 ></text>
      </view>

      <view class="stats-grid">
        <view class="stat-item" @click="goOrders(0)">
          <text class="stat-icon">💳</text>
          <text class="stat-name">待支付</text>
          <view v-if="userStats.orderCount.waitPay > 0" class="stat-badge">
            {{ userStats.orderCount.waitPay }}
          </view>
        </view>

        <view class="stat-item" @click="goOrders(1)">
          <text class="stat-icon">👀</text>
          <text class="stat-name">待接单</text>
          <view v-if="userStats.orderCount.waitAccept > 0" class="stat-badge">
            {{ userStats.orderCount.waitAccept }}
          </view>
        </view>

        <view class="stat-item" @click="goOrders(3)">
          <text class="stat-icon">🎮</text>
          <text class="stat-name">进行中</text>
          <view v-if="userStats.orderCount.inProgress > 0" class="stat-badge">
            {{ userStats.orderCount.inProgress }}
          </view>
        </view>

        <view class="stat-item" @click="goOrders(4)">
          <text class="stat-icon">⭐</text>
          <text class="stat-name">待确认</text>
          <view v-if="userStats.orderCount.waitConfirm > 0" class="stat-badge">
            {{ userStats.orderCount.waitConfirm }}
          </view>
        </view>

        <view class="stat-item" @click="goOrders(5)">
          <text class="stat-icon">✨</text>
          <text class="stat-name">已完成</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-card cyber-card">
      <view class="menu-item" @click="goFavorites">
        <text class="menu-icon">❤️</text>
        <text class="menu-name">我的收藏</text>
        <text class="menu-extra">{{ userStats.favoriteCount }}</text>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @click="goMessages">
        <text class="menu-icon">💬</text>
        <text class="menu-name">消息中心</text>
        <view v-if="userStats.messageCount > 0" class="menu-badge">
          {{ userStats.messageCount }}
        </view>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @click="goHelp">
        <text class="menu-icon">❓</text>
        <text class="menu-name">帮助中心</text>
        <text class="menu-arrow">→</text>
      </view>

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

    <!-- 底部装饰 -->
    <view class="bottom-decoration">
      <view class="decoration-line"></view>
      <text class="decoration-text">// GAME SERVICE v1.0.0 //</text>
      <view class="decoration-line"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { currentUser, userStats } from '../../mock'

const user = ref(currentUser)

const goSetting = () => {
  uni.showToast({ title: '设置', icon: 'none' })
}

const goWallet = () => {
  uni.showToast({ title: '我的余额', icon: 'none' })
}

const goPoints = () => {
  uni.showToast({ title: '我的积分', icon: 'none' })
}

const goCoupons = () => {
  uni.showToast({ title: '优惠券', icon: 'none' })
}

const goAllOrders = () => {
  uni.switchTab({
    url: '/pages/order/list'
  })
}

const goOrders = (status) => {
  uni.navigateTo({
    url: `/pages/order/list?status=${status}`
  })
}

const goFavorites = () => {
  uni.showToast({ title: '我的收藏', icon: 'none' })
}

const goMessages = () => {
  uni.showToast({ title: '消息中心', icon: 'none' })
}

const goHelp = () => {
  uni.showToast({ title: '帮助中心', icon: 'none' })
}

const goAbout = () => {
  uni.showToast({ title: '关于我们', icon: 'none' })
}
</script>

<style lang="scss" scoped>
.user-page {
  padding: 24rpx;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 28rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 24rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 3px solid rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 8rpx;
  padding: 6rpx 20rpx;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.2) 100%);
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 20rpx;
  align-self: flex-start;
}

.vip-icon {
  font-size: 24rpx;
}

.vip-text {
  font-size: 22rpx;
  color: #ffd700;
  font-weight: bold;
}

.setting-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 25, 50, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 50%;

  &:active {
    transform: scale(0.95);
  }
}

.setting-icon {
  font-size: 36rpx;
}

.assets-card {
  display: flex;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.asset-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;

  &:active {
    opacity: 0.7;
  }
}

.asset-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #00ffff;
}

.asset-label {
  font-size: 24rpx;
  color: #7a7e9d;
}

.asset-divider {
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 255, 255, 0.3) 50%,
    transparent 100%
  );
}

.order-stats {
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.stats-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
}

.stats-more {
  font-size: 26rpx;
  color: #00ffff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24rpx;
}

.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;

  &:active {
    opacity: 0.7;
  }
}

.stat-icon {
  font-size: 48rpx;
}

.stat-name {
  font-size: 24rpx;
  color: #a0a4c4;
}

.stat-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  padding: 0 8rpx;
  background: #ff3366;
  border-radius: 16rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
}

.menu-card {
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);

  &:last-child {
    border-bottom: none;
  }

  &:active {
    opacity: 0.7;
  }
}

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

.menu-name {
  flex: 1;
  font-size: 28rpx;
  color: #ffffff;
}

.menu-extra {
  font-size: 24rpx;
  color: #7a7e9d;
  margin-right: 16rpx;
}

.menu-badge {
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  padding: 0 8rpx;
  background: #ff3366;
  border-radius: 16rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
  margin-right: 16rpx;
}

.menu-arrow {
  font-size: 32rpx;
  color: #7a7e9d;
}

.bottom-decoration {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-top: 60rpx;
  padding: 40rpx 0;
  opacity: 0.5;
}

.decoration-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(122, 126, 157, 0.3) 50%,
    transparent 100%
  );
}

.decoration-text {
  font-size: 20rpx;
  color: #7a7e9d;
  letter-spacing: 2rpx;
  font-family: monospace;
}
</style>
