<script setup>
import { ref, onMounted } from 'vue';
import { useAuthStore } from '../stores/auth';
import AppMenuItem from './AppMenuItem.vue';

const authStore = useAuthStore();

// Core-Menü (immer vorhanden)
const coreMenu = [
    {
        label: 'Home',
        items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
    },
    {
        label: 'CRM',
        items: [
            { label: 'Kontakte', icon: 'pi pi-fw pi-users', to: '/contacts' },
            { label: 'Projekte', icon: 'pi pi-fw pi-briefcase', to: '/projects' },
            { label: 'Tätigkeiten', icon: 'pi pi-fw pi-list-check', to: '/project-tasks' }
        ]
    }
];

// Administration-Menü (immer vorhanden)
const adminMenu = {
    label: 'Administration',
    visible: () => authStore.isAdmin,
    items: [
        { label: 'Projekt-Status', icon: 'pi pi-fw pi-tag', to: '/project-statuses' },
        { label: 'Benutzerverwaltung', icon: 'pi pi-fw pi-user-edit', to: '/users' },
        { label: 'Rollenverwaltung', icon: 'pi pi-fw pi-shield', to: '/roles' },
        { label: 'Einstellungen', icon: 'pi pi-fw pi-cog', to: '/settings' }
    ]
};

// Dynamisches Menü (wird geladen)
const model = ref([...coreMenu]);

// Plugin-Menüs laden
const loadPluginMenus = async () => {
    try {
        const response = await fetch('/api/plugin-menu/grouped');
        const data = await response.json();

        if (data.success && data.data) {
            // Plugin-Menüs als eigene Gruppen hinzufügen
            Object.entries(data.data).forEach(([groupLabel, items]) => {
                // Konvertiere zu PrimeVue Menü-Format
                const menuGroup = {
                    label: groupLabel,
                    items: items.map(item => ({
                        label: item.label,
                        icon: item.icon ? `pi pi-fw ${item.icon}` : 'pi pi-fw pi-circle',
                        to: item.to,
                        ...(item.items && { items: item.items }),
                        // Wenn Permission definiert, prüfen
                        ...(item.permission && {
                            visible: () => authStore.hasPermission(item.permission)
                        })
                    }))
                };

                model.value.push(menuGroup);
            });
        }

        // Administration-Menü am Ende hinzufügen
        model.value.push(adminMenu);

    } catch (error) {
        console.error('Fehler beim Laden der Plugin-Menüs:', error);
        // Fallback: Nur Core + Admin Menü
        model.value = [...coreMenu, adminMenu];
    }
};

// Beim Mount laden
onMounted(() => {
    loadPluginMenus();
});
</script>

<template>
    <ul class="layout-menu">
        <template v-for="(item, i) in model" :key="item">
            <app-menu-item v-if="!item.separator && (!item.visible || item.visible())" :item="item" :index="i"></app-menu-item>
            <li v-if="item.separator" class="menu-separator"></li>
        </template>
    </ul>
</template>

<style lang="scss" scoped></style>
