<template>
  <v-navigation-drawer
    class="sidebar-navigation"
    v-model="drawer"
    app
  >
    <v-list>
      <v-list-item
        v-for="(item, index) in filteredMenuItems"
        :key="index"
        :to="{ path: item.path }"
        exact
        class="menu-item"
      >
        <template v-slot:prepend>
          <v-icon>{{ item.icon }}</v-icon>
        </template>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth'; // Importa a store de autenticação

const drawer = ref(true);
const router = useRouter();
const authStore = useAuthStore();

// Debug: Verificar se a store está sendo carregada corretamente
console.log('Auth Store:', authStore);
console.log('Função getPermissionsByRole:', authStore.getPermissionsByRole);

// Obtém as permissões do usuário para "Dashboard"
const dashboardPermissions = authStore.getPermissionsByRole('Dashboard') || [];
console.log('Permissões do Dashboard:', dashboardPermissions); // Log para verificar as permissões

// Itens do menu
const menuItems = [
    { title: 'Home', path: '/dashboard/home', icon: 'mdi mdi-home-circle', requiredPermission: 'read' },
    { title: 'Dashboard', path: '/dashboard', icon: 'mdi mdi-view-dashboard', requiredPermission: 'read' },
    { title: 'Perfil', path: '/dashboard/profile', icon: 'mdi-account', requiredPermission: 'read' },
    { title: 'Configurações', path: '/dashboard/settings', icon: 'mdi-cog', requiredPermission: 'write' },
    { title: 'Usuários', path: '/dashboard/users', icon: 'mdi-account-multiple-outline', requiredPermission: 'write' },
    { title: 'Train', path: '/dashboard/train', icon: 'mdi mdi-thought-bubble', requiredPermission: 'write' },
];

// Filtra os itens de menu com base nas permissões do usuário
const filteredMenuItems = computed(() => {
  const filteredItems = menuItems.filter(item => dashboardPermissions.includes(item.requiredPermission));
  console.log('Itens do Menu Filtrados:', filteredItems); // Log para verificar os itens filtrados
  return filteredItems.length > 0 ? filteredItems : menuItems; // Exibir todos temporariamente se vazio
});
</script>

<style scoped>
/* Estilo para o menu lateral */
.sidebar-navigation {
  background: linear-gradient(145deg, #1a237e 0%, #0d47a1 100%);
  border-right: none;
}

/* Estilo para os itens de menu */
.v-list-item {
  color: white;
  transition: all 0.3s ease;
  border-radius: 15px;
  margin: 8px 16px;
  padding: 10px 16px;
  font-weight: 500;
}

.v-list-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #4cc9f0;
  margin-left: 25px;
  margin-right: 16px;
}

/* Estilo para o item de menu ativo */
.v-list-item--active {
  background-color: #4cc9f0 !important;
  color: white !important;
  margin-left: 25px;
  margin-right: 25px;
}

/* Estilo para os ícones */
.v-list-item .v-icon {
  margin-right: 16px;
}

/* Estilo para o botão de recolher (se adicionado futuramente) */
.v-btn {
  background: linear-gradient(145deg, #2196f3 0%, #1565c0 100%);
  color: white;
}

/* Estilo para o avatar (se adicionado futuramente) */
.gradient-avatar {
  background: linear-gradient(145deg, #2196f3 0%, #1565c0 100%);
}

.profile-section {
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  padding: 16px;
  margin-top: auto;
}

.profile-section:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>