<template>
    <div class="box-border min-h-screen from-blue-50 to-white bg-gradient-to-b">
        <div class="flex flex-col p-4 space-y-6">
            <!-- 用户信息卡片 -->
            <div 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">
                <div class="relative">
                    <!-- 头像容器添加overflow-hidden解决边框问题 -->
                    <div class="overflow-hidden rounded-full p-0.5" :class="levelGradient.border">
                        <img :src="userAvatar || headShot" alt="User Avatar"
                            class="h-24 w-24 rounded-full border-4 border-white">
                    </div>

                    <!-- 代理标识 -->
                    <div v-if="isAgent" class="absolute -bottom-2 -right-2">
                        <div 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] }}
                        </div>
                    </div>
                </div>
                <div class="space-y-1">
                    <h2 class="text-2xl font-bold text-gray-800">
                        {{ isWeChat ? '微信用户' : isLoggedIn ? maskName(userName) : '点击登录' }}
                    </h2>
                    <p v-if="isAgent" class="text-sm font-medium" :class="levelGradient.text">
                        🎖️ {{ levelText[level] }}
                    </p>
                </div>
            </div>
            <VipBanner v-if="isAgent && level === 'normal'" />
            <!-- 功能菜单 -->
            <div 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 v-if="!isWeChat" class="feature-item hover:bg-red-50 text-red-600" @click="handleLogout">
                    ⏏️ 退出登录
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
const router = useRouter()
import headShot from "@/assets/images/head_shot.webp"
import { useAgentStore } from '@/stores/agentStore'
import { useUserStore } from '@/stores/userStore'
const agentStore = useAgentStore()
const userStore = useUserStore()
const { isAgent, level } = storeToRefs(agentStore)
const { userName, userAvatar, isLoggedIn } = storeToRefs(userStore)
const { isWeChat } = useEnv()
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]
}))
const maskName = computed(() => {
    return (name) => {
        return name.substring(0, 3) + "****" + name.substring(7);
    }
})
function toHistory() {
    router.push(`/historyQuery`)
}

function toUserAgreement() {
    router.push(`/userAgreement`)
}

function redirectToLogin() {
    router.push(`/login`)
}

function handleLogout() {
    localStorage.removeItem('token')
    localStorage.removeItem('refreshAfter')
    localStorage.removeItem('accessExpire')
    location.reload()
}

function toService() {
    // window.location.href = '/service' // 跳转到客服页面
    window.location.href = 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9' // 跳转到客服页面
}


onBeforeMount(() => {
    // const token = localStorage.getItem('token') // 使用 localStorage 获取 token
    // if (token) {
    //     fetchUserInfo()
    //     agentStore.fetchAgentStatus()
    // }
})
const toVipConfig = () => {
    router.push({ name: "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>div:first-child {
    transition: all 0.3s ease;
}


.feature-item {
    transition:
        transform 0.2s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
    @apply flex w-full items-center shadow space-x-3 rounded-xl bg-white px-6 py-4 text-left text-gray-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-md focus:outline-none;
}

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

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