<script setup>
import { userApi } from "@/api/userApi";
import { onMounted, ref } from "vue";
import { BsBox2Fill, BsGearFill, BsPersonFill, BsPinMapFill } from "vue-icons-plus/bs";

const userInfo = ref({});

onMounted(async () => {
    try {
        const { data } = await userApi.profile();
        userInfo.value = data;
        console.log("User profile:", userInfo.value);
    } catch (error) {
        console.error("Failed to fetch user profile:", error);
    }
});

const menuGroups = [
    {
        title: "账号与信息",
        items: [{ label: "个人资料", icon: BsPersonFill, link: "/profile/edit" }],
    },
    {
        title: "订单与服务",
        items: [
            { label: "我的订单", icon: BsBox2Fill, link: "/orders" },
            { label: "我的地址", icon: BsPinMapFill, link: "/address" },
        ],
    },
    {
        title: "设置",
        items: [{ label: "系统设置", icon: BsGearFill, link: "/settings" }],
    },
];
</script>

<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 用户信息卡片 -->
        <div class="bg-white shadow-sm">
            <div class="max-w-2xl mx-auto">
                <div class="flex items-center gap-4 p-6">
                    <div class="w-20 h-20 rounded-full border-2 border-white shadow-lg overflow-hidden bg-gray-100">
                        <img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
                    </div>

                    <div class="space-y-1">
                        <h3 class="text-xl font-semibold text-gray-800">
                            {{ userInfo.username }}
                        </h3>
                        <div class="text-gray-500 text-sm">
                            用户编号: {{ userInfo.id }}
                        </div>
                        <div class="text-primary-600 font-medium">
                            账户余额: ¥{{ (userInfo.balance / 100).toFixed(2) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 菜单列表 -->
        <div class="max-w-2xl mx-auto px-4 py-6 space-y-4 hidden">
            <div v-for="(group, groupIndex) in menuGroups" :key="groupIndex"
                class="bg-white rounded-xl overflow-hidden shadow-sm">
                <div class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-50">
                    {{ group.title }}
                </div>
                <div class="divide-y divide-gray-100">
                    <div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="flex items-center px-4 py-3.5 hover:bg-gray-50 active:bg-gray-100
                               cursor-pointer transition-colors duration-150">
                        <component :is="item.icon" class="mr-3 text-xl text-gray-500" />
                        <span class="flex-1 text-gray-700">{{ item.label }}</span>
                        <span class="text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 5l7 7-7 7" />
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
