<script setup>
import { storeToRefs } from 'pinia'
import { computed, onBeforeMount, ref, watch } from 'vue'
import { openCustomerService } from '@/composables/useCustomerService'
import { useAgentStore } from '@/stores/agentStore'
import { useDialogStore } from '@/stores/dialogStore'
import { useUserStore } from '@/stores/userStore'
import headShot from '/static/images/head_shot.webp'

definePage({ layout: 'home' })

const agentStore = useAgentStore()
const userStore = useUserStore()
const dialogStore = useDialogStore()
const { isAgent, level, ExpiryTime } = storeToRefs(agentStore)
const { userAvatar, isLoggedIn, mobile } = storeToRefs(userStore)
const isWeChat = ref(false)

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

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

const levelGradient = computed(() => ({
  border: {
    'normal': '',
    '': '',
    'VIP': '',
    'SVIP': '',
  }[level.value],

  badge: {
    'normal': 'bg-gradient-to-r from-gray-500 to-gray-600',
    '': 'bg-gradient-to-r from-gray-500 to-gray-600',
    '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-gray-600',
    '': 'text-gray-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/history-query' })
}
function toPromote() {
  uni.navigateTo({ url: '/pages/promote' })
}
function toInvitation() {
  uni.navigateTo({ url: '/pages/invitation' })
}
function toUserAgreement() {
  uni.navigateTo({ url: '/pages/user-agreement' })
}

function toPrivacyPolicy() {
  uni.navigateTo({ url: '/pages/privacy-policy' })
}

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

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

  // 重置状态
  userStore.resetUser()
  agentStore.resetAgent()

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

function goCancelAccountPage() {
  if (!mobile.value) {
    uni.showToast({ title: '请先绑定手机号', icon: 'none' })
    return
  }
  uni.navigateTo({ url: '/pages/cancel-account' })
}

function toService() {
  openCustomerService()
}

function toVipConfig() {
  uni.navigateTo({ url: '/pages/agent-vip-config' })
}

function toVipRenewal() {
  uni.navigateTo({ url: '/pages/agent-vip-apply' })
}

function formatExpiryTime(expiryTimeStr) {
  if (!expiryTimeStr)
    return '未知'
  // 假设expiryTimeStr格式是 "YYYY-MM-DD HH:MM:SS"
  // 只返回日期部分 "YYYY-MM-DD"
  return expiryTimeStr.split(' ')[0]
}

/** 与 bdrp-mini `/static/image/shot_*.png` 一致，资源放在 `src/static/image/` */
function getDefaultAvatar() {
  if (!isAgent.value)
    return headShot

  const normalizedLevel = String(level.value || '').toUpperCase()
  switch (normalizedLevel) {
    case 'NORMAL':
    case 'normal':
    case '':
      return '/static/image/shot_nonal.png'
    case 'VIP':
      return '/static/image/shot_vip.png'
    case 'SVIP':
      return '/static/image/shot_svip.png'
    default:
      return headShot
  }
}

/** 用户头像 URL（store 已 resolve）；默认图为本地资源，加载失败时回退到 headShot */
const avatarDisplay = ref(headShot)

function syncAvatarDisplay() {
  avatarDisplay.value = userAvatar.value || getDefaultAvatar()
}

watch([userAvatar, isAgent, level], syncAvatarDisplay, { immediate: true })

function onAvatarError() {
  avatarDisplay.value = headShot
}

function showBindPhoneDialog() {
  dialogStore.openBindPhone()
}

onBeforeMount(() => {
  // 获取存储的用户和代理信息
  const userInfo = uni.getStorageSync('userInfo')
  if (userInfo) {
    try {
      const parsedUserInfo = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo
      userStore.updateUserInfo(parsedUserInfo)
    }
    catch (e) {
      console.error('解析用户信息失败', e)
    }
  }

  const agentInfo = uni.getStorageSync('agentInfo')
  if (agentInfo) {
    try {
      const parsedAgentInfo = typeof agentInfo === 'string' ? JSON.parse(agentInfo) : agentInfo
      agentStore.updateAgentInfo(parsedAgentInfo)
    }
    catch (e) {
      console.error('解析代理信息失败', e)
    }
  }
})
</script>

<template>
  <view class="box-border min-h-screen">
    <view class="flex flex-col p-4 space-y-6">
      <!-- 用户信息卡片 -->
      <view
        class="group profile-section relative flex items-center gap-4 rounded-xl bg-white p-6 transition-all hover:shadow-xl"
        @click="!isLoggedIn ? redirectToLogin() : null">
        <view class="relative">
          <!-- 头像容器添加overflow-hidden解决边框问题 -->
          <view class="overflow-hidden rounded-full p-0.5" :class="levelGradient.border">
            <image :src="avatarDisplay" mode="aspectFill" alt="User Avatar"
              class="h-24 w-24 border-4 border-white rounded-full" @error="onAvatarError" />
          </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 text-white font-bold shadow-sm"
              :class="levelGradient.badge">
              {{ levelNames[level] }}
            </view>
          </view>
        </view>
        <view class="space-y-1">
          <view class="text-2xl text-gray-800 font-bold">
            {{
              !isLoggedIn
                ? "点击登录"
                : mobile
                  ? maskName(mobile)
                  : isWeChat
                    ? "微信用户"
                    : "未绑定手机号"
            }}
          </view>
          <!-- 手机号绑定提示 -->
          <template v-if="isLoggedIn && !mobile">
            <view class="cursor-pointer text-sm text-blue-500 hover:underline" @click.stop="showBindPhoneDialog">
              点击绑定手机号码
            </view>
          </template>
          <view v-if="isAgent" class="text-sm font-medium" :class="levelGradient.text">
            🎖️ {{ levelText[level] }}
          </view>
        </view>
      </view>
      <VipBanner v-if="isAgent && (level === 'normal' || level === '')" />
      <!-- 功能菜单 -->
      <view>
        <view class="overflow-hidden rounded-xl bg-white shadow-sm">
          <template v-if="isAgent && ['VIP', 'SVIP'].includes(level)">
            <view
              class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-purple-50"
              @click="toVipConfig">
              <view class="flex items-center gap-3">
                <image src="/static/images/me/dlbgpz.png" class="h-6 w-6" alt="代理报告配置" />
                <text class="text-purple-700 font-medium">
                  代理报告配置
                </text>
              </view>
              <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
            </view>
            <view
              class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-amber-50"
              @click="toVipRenewal">
              <view class="flex items-center gap-3">
                <image src="/static/images/me/xfhy.png" class="h-6 w-6" alt="代理会员" />
                <view class="flex flex-col items-start">
                  <text class="text-amber-700 font-medium">
                    续费代理会员
                  </text>
                  <text class="text-xs text-gray-500">
                    有效期至 {{ formatExpiryTime(ExpiryTime) }}
                  </text>
                </view>
              </view>
              <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
            </view>
          </template>
          <view
            class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-blue-50"
            @click="toPromote">
            <view class="flex items-center gap-3">
              <image src="/static/images/index/tgbg.png" class="h-6 w-6" alt="推广报告" />
              <text class="text-gray-700 font-medium">
                推广报告
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view
            class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-blue-50"
            @click="toInvitation">
            <view class="flex items-center gap-3">
              <image src="/static/images/index/yqhy.png" class="h-6 w-6" alt="邀请下级" />
              <text class="text-gray-700 font-medium">
                邀请下级
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view
            class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-blue-50"
            @click="toHistory">
            <view class="flex items-center gap-3">
              <image src="/static/images/index/wdbg.png" class="h-6 w-6" alt="我的报告" />
              <text class="text-gray-700 font-medium">
                我的报告
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view
            class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-blue-50"
            @click="toUserAgreement">
            <view class="flex items-center gap-3">
              <image src="/static/images/me/yhxy.png" class="h-6 w-6" alt="用户协议" />
              <text class="text-gray-700 font-medium">
                用户协议
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view
            class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-blue-50"
            @click="toPrivacyPolicy">
            <view class="flex items-center gap-3">
              <image src="/static/images/me/yszc.png" class="h-6 w-6" alt="隐私政策" />
              <text class="text-gray-700 font-medium">
                隐私政策
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view class="w-full flex items-center justify-between px-6 py-4 transition-colors hover:bg-blue-50"
            @click="toService">
            <view class="flex items-center gap-3">
              <image src="/static/images/me/lxkf.png" class="h-6 w-6" alt="联系客服" />
              <text class="text-gray-700 font-medium">
                联系客服
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view v-if="isLoggedIn && mobile"
            class="w-full flex items-center justify-between border-b border-gray-100 px-6 py-4 transition-colors hover:bg-red-50"
            @click="goCancelAccountPage">
            <view class="flex items-center gap-3">
              <image src="/static/images/me/cancelAccount.svg" class="h-6 w-6" alt="注销账号" />
              <text class="text-gray-700 font-medium">
                注销账号
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
          <view v-if="isLoggedIn && !isWeChat"
            class="w-full flex items-center justify-between px-6 py-4 transition-colors hover:bg-red-50"
            @click="handleLogout">
            <view class="flex items-center gap-3">
              <image src="/static/images/me/tcdl.png" class="h-6 w-6" alt="退出登录" />
              <text class="text-gray-700 font-medium">
                退出登录
              </text>
            </view>
            <image src="/static/images/me/right.png" class="h-4 w-4" alt="右箭头" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped></style>
