<template>
    <view class="profile-page">
        <!-- User Profile Section -->
        <view class="user-profile-section">
            <image :src="userInfo.avatar_url || defaultAvatar" class="user-avatar" mode="aspectFill" />
            <text class="user-name">{{ userInfo.nickname }}</text>
            <text class="user-phone">{{ userInfo.phone }}</text>
            <nut-button class="edit-profile-btn" @click="onEditProfile">
                编辑资料
            </nut-button>

            <!-- Stats Row -->
            <view class="stats-row">
                <view class="stat-item">
                    <text class="stat-number">{{ userInfo.favorite_count }}</text>
                    <text class="stat-label">关注</text>
                </view>
                <view class="stat-item" @click="onOrderManagement">
                    <text class="stat-number">{{ userInfo.order_count }}</text>
                    <text class="stat-label">订单</text>
                </view>
                <view class="stat-item">
                    <text class="stat-number">{{ userInfo.follower_count }}</text>
                    <text class="stat-label">被关注</text>
                </view>
            </view>
        </view>

        <!-- Quick Actions -->
        <view class="quick-actions">
            <view class="action-item" @click="onMyFavorites">
                <Heart size="22" color="#6b7280" />
                <text class="action-text">我的关注</text>
            </view>
            <view class="action-item" @click="onOrderManagement">
                <Clock size="22" color="#6b7280" />
                <text class="action-text">我的订单</text>
            </view>
        </view>

        <!-- Menu Items -->
        <view class="menu-section">
            <view class="menu-item" @click="onMessages">
                <Notice size="20" color="#6b7280" />
                <text class="menu-text">我的消息</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onMyCar">
                <Cart size="20" color="#6b7280" />
                <text class="menu-text">我卖的车</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onMyAuthCar">
                <StarN size="20" color="#6b7280" />
                <text class="menu-text">我的认证</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onCollectionSettings">
                <Scan size="20" color="#6b7280" />
                <text class="menu-text">收款设置</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onFeedback">
                <Message size="20" color="#6b7280" />
                <text class="menu-text">意见反馈</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onHelpCenter">
                <Tips size="20" color="#6b7280" />
                <text class="menu-text">帮助中心</text>
                <Right size="18" color="#9ca3af" />
            </view>

        </view>

        <!-- 自定义TabBar -->
        <TabBar />

        <!-- 隐私政策同意弹框 -->
        <PrivacyAgreementModal
            v-model:visible="showPrivacyModal"
            @confirm="onPrivacyConfirm"
            @cancel="onPrivacyCancel"
        />
    </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { Heart, Clock, Notice, Cart, Message, Tips, Right, StarN, Scan } from '@nutui/icons-vue-taro'
import Taro, { useDidShow } from '@tarojs/taro'
import TabBar from '@/components/TabBar.vue'
import PrivacyAgreementModal from '@/components/PrivacyAgreementModal.vue'
import { useUserStore } from '@/stores/user'

// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

// 用户状态管理
const userStore = useUserStore()

// 用户信息计算属性
const userInfo = computed(() => userStore.userInfo)

// 隐私政策弹框状态
const showPrivacyModal = ref(false)
// 隐私政策弹框触发来源（'editProfile' 或 'collectionSettings'）
const privacyModalSource = ref('editProfile')

useDidShow(async () => {
    await userStore.fetchUserInfo()
})

/**
 * 编辑个人资料
 */
const onEditProfile = async () => {
    // 检查用户是否已完善资料
    const hasCompleteProfile = userStore.hasCompleteProfile

    if (hasCompleteProfile) {
        // 已完善资料，直接进入编辑页面
        Taro.navigateTo({
            url: '/pages/editProfile/index'
        })
    } else {
        // 未完善资料，显示隐私政策同意弹框
        privacyModalSource.value = 'editProfile'
        showPrivacyModal.value = true
    }
}

/**
 * 隐私政策确认
 */
const onPrivacyConfirm = () => {
    // 根据触发来源跳转到不同页面
    if (privacyModalSource.value === 'editProfile') {
        // 从编辑资料触发，跳转到编辑资料页面
        Taro.navigateTo({
            url: '/pages/editProfile/index'
        })
    } else if (privacyModalSource.value === 'collectionSettings') {
        // 从收款设置触发，跳转到收款设置页面
        Taro.navigateTo({
            url: '/pages/collectionSettings/index'
        })
    }
}

/**
 * 隐私政策取消
 */
const onPrivacyCancel = () => {
    // 用户取消，不做任何操作
}

/**
 * 我的关注
 */
const onMyFavorites = async () => {
    // const hasPermission = await checkPermission(PERMISSION_TYPES.BASIC_INFO)
    // if (hasPermission) {
    // }
    Taro.navigateTo({
        url: '/pages/myFavorites/index'
    })
}

/**
 * 订单管理
 */
const onOrderManagement = async () => {
    // const hasPermission = await checkPermission(PERMISSION_TYPES.ORDER_MANAGEMENT)
    // if (hasPermission) {
    // }
    Taro.navigateTo({
        url: '/pages/myOrders/index'
    })
}

/**
 * 我的消息
 */
const onMessages = async () => {
    // const hasPermission = await checkPermission(PERMISSION_TYPES.MESSAGE)
    // if (hasPermission) {
    // }
    Taro.navigateTo({
        url: '/pages/messages/index'
    })
}

/**
 * 我卖的车
 */
const onMyCar = () => {
    Taro.navigateTo({
        url: '/pages/myCar/index'
    })
}

/**
 * 帮助中心
 */
const onHelpCenter = () => {
    Taro.navigateTo({
        url: '/pages/helpCenter/index'
    })
}

/**
 * 意见反馈
 */
const onFeedback = () => {
    Taro.navigateTo({
        url: '/pages/feedBackList/index'
    })
}

/**
 * 收款设置
 */
const onCollectionSettings = async () => {
    // 检查用户是否已完善收款信息
    const hasCompleteCollectionInfo = userStore.hasCompleteCollectionInfo

    if (hasCompleteCollectionInfo) {
        // 已完善收款信息，直接进入收款设置页面
        Taro.navigateTo({
            url: '/pages/collectionSettings/index'
        })
    } else {
        // 未完善收款信息，显示隐私政策同意弹框
        privacyModalSource.value = 'collectionSettings'
        showPrivacyModal.value = true
    }
}

/**
 * 我的认证车
 */
const onMyAuthCar = () => {
    Taro.navigateTo({
        url: '/pages/myAuthCar/index'
    })
}
</script>

<style lang="less">
.profile-page {
    min-height: 100vh;
    background-color: #f8fafc;
    padding-bottom: 240rpx;
}

.header {
    background: #fb923c;
    padding: 64rpx 0 32rpx;
    position: relative;

    .header-content {
        padding: 0 48rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
            font-size: 40rpx;
            font-weight: 700;
            color: white;
        }
    }
}

.user-profile-section {
    background: white;
    padding: 64rpx 48rpx;
    margin-bottom: 32rpx;
    text-align: center;

    .user-avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        margin-bottom: 32rpx;
    }

    .user-name {
        font-size: 40rpx;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8rpx;
        display: block;
    }

    .user-phone {
        font-size: 28rpx;
        color: #64748b;
        margin-bottom: 40rpx;
        display: block;
    }

    .edit-profile-btn {
        background-color: #f1f5f9;
        color: #475569;
        border: none;
        border-radius: 40rpx;
        padding: 16rpx 48rpx;
        font-size: 28rpx;
        margin-bottom: 48rpx;
    }

    .stats-row {
        display: flex;
        justify-content: space-around;

        .stat-item {
            text-align: center;

            .stat-number {
                font-size: 36rpx;
                font-weight: 600;
                color: #1e293b;
                display: block;
                margin-bottom: 8rpx;
            }

            .stat-label {
                font-size: 24rpx;
                color: #64748b;
            }
        }
    }
}

.quick-actions {
    background: white;
    padding: 40rpx 48rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: space-around;

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

        .action-text {
            font-size: 24rpx;
            color: #64748b;
        }
    }
}

.menu-section {
    background: white;

    .menu-item {
        display: flex;
        align-items: center;
        padding: 32rpx 48rpx;
        border-bottom: 1px solid #f1f5f9;
        gap: 32rpx;

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

        .menu-text {
            flex: 1;
            font-size: 32rpx;
            color: #1e293b;
        }
    }
}
</style>