<script setup>
import { useAuthStore } from '@/stores/auth';
import Button from 'primevue/button';
import Menubar from 'primevue/menubar';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const authStore = useAuthStore();
const navItems = ref([
    {
        label: '仪表盘',
        icon: 'pi pi-home',
        command: () => router.push('/')
    },
    {
        label: '媒体',
        icon: 'pi pi-image',
        command: () => router.push('/medias')
    },
    {
        label: '曲谱',
        icon: 'pi pi-file',
        command: () => router.push('/posts')
    },
    {
        label: '用户',
        icon: 'pi pi-users',
        command: () => router.push('/users')
    },
    {
        label: '订单',
        icon: 'pi pi-shopping-cart',
        command: () => router.push('/orders')
    },
    {
        label: '设置',
        icon: 'pi pi-cog',
        command: () => router.push('/settings')
    }
]);

const handleLogout = () => {
    authStore.logout();
    router.push('/login');
};
</script>

<template>
    <div v-if="!authStore.isAuthenticated">
        <router-view />
    </div>

    <div v-else class="flex flex-col min-h-screen">
        <header class="sticky top-0 z-50 shadow-md">
            <Menubar :model="navItems" class="!rounded-none">
                <template #start>
                    <div class="flex items-center pr-4">
                        <h2 class="m-0 text-2xl text-primary font-semibold">Panel</h2>
                    </div>
                </template>
                <template #end>
                    <Button label="Logout" icon="pi pi-power-off" severity="secondary" text @click="handleLogout" />
                </template>
            </Menubar>
        </header>

        <main class="flex-1 p-6 bg-surface-ground">
            <router-view />
        </main>
    </div>
</template>
