<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="bg-white p-4 shadow-lg border-b border-gray-300">
        <div class="flex items-center gap-4 p-4 border-gray-100">
            <div class="w-16 h-16 border rounded-full border-gray-200 bg-gray-200 overflow-hidden">
                <img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
            </div>

            <div>
                <h3 class="text-xl font-medium">{{ userInfo.username }}</h3>
                <div class="text-gray-500">用户编号: {{ userInfo.id }}</div>
                <div class="text-gray-500">账户余额: {{ (userInfo.balance / 100).toFixed(2) }}</div>
            </div>
        </div>
    </div>


    <div class="menus space-y-4 mt-4 px-4 hidden">
        <div v-for="(group, groupIndex) in menuGroups" :key="groupIndex" class="bg-white rounded-lg overflow-hidden">
            <div class="px-4 py-2 text-sm text-gray-500">{{ 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 hover:bg-gray-50 active:bg-gray-100 cursor-pointer">
                    <component :is="item.icon" class="mr-3 text-xl text-gray-600" />
                    <span class="flex-1">{{ item.label }}</span>
                    <span class="text-gray-400">›</span>
                </div>
            </div>
        </div>
    </div>
</template>
