<template>
  <view class="safe-area-top box-border min-h-screen">
    <view class="flex flex-col p-4 space-y-6">
      <!-- 用户信息卡片 -->
      <view
        class="profile-section group relative flex items-center gap-4 rounded-xl bg-white p-6 shadow-lg transition-all hover:shadow-xl"
        @click="!isLoggedIn ? redirectToLogin() : null">
        <view class="relative">
          <!-- 头像容器添加overflow-hidden解决边框问题 -->
          <view class="flex items-center justify-center overflow-hidden rounded-full p-0.5"
            :class="levelGradient.border">
            <image :src="userAvatar || headShot" alt="User Avatar" class="h-24 w-24 rounded-full border-4 border-white">
            </image>
          </view>

          <!-- 代理标识 -->
          <view v-if="isAgent" class="absolute -bottom-2 -right-2">
            <view class="flex items-center justify-center rounded-full px-3 py-1 text-xs font-bold text-white shadow-sm"
              :class="levelGradient.badge">
              {{ levelNames[level] }}
            </view>
          </view>
        </view>
        <view class="space-y-1">
          <view class="text-2xl font-bold text-gray-800">
            {{ isLoggedIn ? maskName(userName) : '点击登录' }}
          </view>
          <view v-if="isAgent" class="text-sm font-medium" :class="levelGradient.text">
            🎖️ {{ levelText[level] }}
          </view>
        </view>
      </view>
      <VipBanner v-if="isAgent && level === 'normal'" />
      <!-- 功能菜单 -->
      <view class="features-section space-y-3">
        <template v-if="isAgent && ['VIP', 'SVIP'].includes(level)">
          <button
            class="feature-item bg-gradient-to-r from-purple-200/80 to-pink-200/80 hover:from-purple-300/80 hover:to-pink-300/80 text-purple-700"
            @click="toVipConfig">
            ⚙️ 代理报告配置
          </button>
        </template>

        <button class="feature-item hover:bg-blue-50" @click="toHistory">
          📃 我的报告
        </button>
        <button class="feature-item hover:bg-blue-50" @click="toUserAgreement">
          📜 用户协议
        </button>
        <button class="feature-item hover:bg-blue-50" @click="toService">
          💬 联系客服
        </button>
        <button class="feature-item hover:bg-red-50 text-red-600" @click="handleLogout">
          ⏏️ 退出登录
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onBeforeMount } from 'vue'
import headShot from "@/static/image/head_shot.webp"

// 用户数据
const userName = ref('')
const userAvatar = ref('')
const isLoggedIn = ref(false)

// 代理数据
const isAgent = ref(false)
const level = ref('normal')


// 检查平台环境
onBeforeMount(() => {
  // 从缓存获取用户信息
  const token = uni.getStorageSync('token')
  if (token) {
    isLoggedIn.value = true
    // 从缓存获取用户信息
    const userInfo = uni.getStorageSync('userInfo')
    console.log("userInfo", userInfo)
    if (userInfo) {
      userName.value = userInfo.nickName || '用户'
      userAvatar.value = userInfo.avatar || ''
    }

    // 从缓存获取代理信息
    const agentInfo = uni.getStorageSync('agentInfo')
    if (agentInfo?.isAgent) {
      isAgent.value = agentInfo.isAgent
      level.value = agentInfo.level || 'normal'
    }
  }
})

const levelNames = {
  normal: '普通代理',
  VIP: 'VIP代理',
  SVIP: 'SVIP代理'
}

const levelText = {
  normal: '基础代理特权',
  VIP: '高级代理特权',
  SVIP: '尊享代理特权'
}

const levelGradient = computed(() => ({
  border: {
    'normal': 'bg-green-300',
    'VIP': 'bg-gradient-to-r from-yellow-400 to-amber-500',
    'SVIP': 'bg-gradient-to-r from-purple-400 to-pink-400 shadow-[0_0_15px_rgba(163,51,200,0.2)]'
  }[level.value],

  badge: {
    'normal': 'bg-green-500',
    'VIP': 'bg-gradient-to-r from-yellow-500 to-amber-600',
    'SVIP': 'bg-gradient-to-r from-purple-500 to-pink-500'
  }[level.value],

  text: {
    'normal': 'text-green-600',
    'VIP': 'text-amber-600',
    'SVIP': 'text-purple-600'
  }[level.value]
}))

function maskName(name) {
  if (!name || name.length < 11) return name
  return name.substring(0, 3) + "****" + name.substring(7)
}

function toHistory() {
  uni.navigateTo({
    url: '/pages/queryHistory'
  })
}

function toUserAgreement() {
  uni.navigateTo({
    url: '/pages/agreement?type=user'
  })
}

function redirectToLogin() {
  uni.navigateTo({
    url: '/pages/login'
  })
}

function handleLogout() {
  uni.removeStorageSync('token')
  uni.removeStorageSync('refreshAfter')
  uni.removeStorageSync('accessExpire')
  uni.removeStorageSync('userInfo')
  uni.removeStorageSync('agentInfo')

  // 重置状态
  isLoggedIn.value = false
  userName.value = ''
  userAvatar.value = ''
  isAgent.value = false
  level.value = 'normal'

  uni.reLaunch({
    url: '/pages/index'
  })
}

function toService() {
  // #ifdef APP-PLUS
  plus.runtime.openURL('https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9')
  // #endif

  // #ifdef H5
  window.location.href = 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9'
  // #endif

  // #ifdef MP
  uni.setClipboardData({
    data: 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9',
    success: function () {
      uni.showToast({
        title: '客服链接已复制，请在浏览器中打开',
        icon: 'none'
      })
    }
  })
  // #endif
}

function toVipConfig() {
  uni.navigateTo({
    url: '/pages/agentVipConfig'
  })
}
</script>

<style scoped>
.profile-section {
  background: linear-gradient(135deg, #ffffff 50%, rgba(236, 253, 245, 0.3));
  border: 1px solid rgba(209, 213, 219, 0.2);
}

.profile-section .relative>view:first-child {
  transition: all 0.3s ease;
}

.feature-item {
  transition:
    transform 0.2s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  width: 100%;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-right: 0.75rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  padding: 1rem 1.5rem;
  text-align: left;
  color: #4b5563;
  transition-property: all;
  transition-duration: 300ms;
}

.feature-item:active {
  transform: scale(1.02);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.border-gradient-to-r {
  border-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)) 1;
}

.shadow-glow {
  box-shadow: 0 0 8px rgba(163, 51, 200, 0.2);
}
</style>

<route lang="json">{
  "layout": "home"
}</route>
