<template>
  <v-navigation-drawer
    v-model="drawer"
    permanent
    class="custom-drawer"
  >
    <v-list nav dense>
      <v-list-item-title class="app-title">Admin</v-list-item-title>
      <v-list-subheader class="app-sub">Sistema de Ponto</v-list-subheader>

      <v-divider class="my-2" />

      <v-list-item
        v-for="(item, index) in menuItems"
        :key="index"
        :to="item.path"
        exact
        active-class="active-item"
      >
        <template #prepend>
          <v-icon class="mr-3" size="20">{{ item.icon }}</v-icon>
        </template>
        <v-list-item-title class="menu-text">{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>


<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth' 

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

// Testando se as permissões estão carregando corretamente
const dashboardPermissions = authStore.getPermissionsByRole('Admin')
console.log("Permissões do usuário:", dashboardPermissions)

// Itens do menu sem filtragem para testar se aparece
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: 'Admin', path: '/dashboard/profile', icon: 'mdi-account', requiredPermission: 'read' },
    { title: 'Colaboradores', path: '/dashboard/colaboradores', icon: 'mdi-account-multiple-outline', requiredPermission: 'write' },
    //{ title: 'Câmera', path: '/dashboard/agentlist', icon: 'mdi mdi-cctv', requiredPermission: 'write' },
    //{ title: 'Train', path: '/dashboard/train', icon: 'mdi mdi-thought-bubble', requiredPermission: 'write' },
    { title: 'Escalas', path: '/dashboard/shifts', icon: 'mdi mdi-sitemap', requiredPermission: 'write' },
    { title: 'Feriados', path: '/dashboard/feriados', icon: 'mdi mdi-calendar-blank', requiredPermission: 'write' },
    //{ title: 'Empresas', path: '/dashboard/empresas', icon: 'mdi mdi-domain', requiredPermission: 'write' },
    { title: 'Configurações', path: '/dashboard/settings', icon: 'mdi-cog', requiredPermission: 'write' }
]

// Função para alternar o drawer
const toggleDrawer = () => {
    drawer.value = !drawer.value
}
</script>

<style scoped>
.custom-drawer {
  background-color: #fff;
  border-right: 1px solid #eaecef;
  padding-top: 24px;
  width: 240px;
}

.app-title {
  font-weight: 700;
  font-size: 18px;
  padding-left: 10px;
  color: #1e293b;
}

.app-sub {
  font-size: 13px;
  padding-left: 10px;
  margin-bottom: 8px;
  color: #64748b;
}

.menu-text {
  font-size: 14px;
  color: #1e293b;
}

.v-list-item {
  border-radius: 8px;
  margin: 4px 12px;
  padding-left: 8px;
  transition: 0.2s;
}

.v-list-item:hover {
  background-color: #f3f4f6;
}

.active-item {
  background-color: #e0f2fe !important;
  color: #1e3a8a !important;
  font-weight: 600;
}
</style>


