<template>
  <SideBar
    :items="filteredNavItems"
    v-model:drawer="drawer"
    :rail="rail"
    @toggle-rail="rail = !rail"
  />

  <v-main app>
    <slot />
  </v-main>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useLocalStorage } from "@vueuse/core";
import SideBar from "../components/layout/SideBar.vue";
// Ensure this path matches your store location
import { useNavItemsStore } from '~/stores/navItems1'; 
import { useAuth } from "~/composables/useAuth";

definePageMeta({
  middleware: ['auth', 'checkPageAccess']
})

// State for controlling the sidebar
const drawer = ref(true);
const rail = ref(true);

const navItemsStore = useNavItemsStore();
const { user, checkAuth } = useAuth();

// Navigation will be filtered via navItemsStore using the new hakAkses system

const filteredNavItems = computed(() => navItemsStore.filteredNavItems);

onMounted(async () => {
  await checkAuth();
  if (user.value) {
    await navItemsStore.refreshNavItems();
  }
});

// Watch for user changes to refresh navItems
watch(() => user.value, async (newUser) => {
  if (newUser) {
    await navItemsStore.refreshNavItems();
  } else {
    // Optionally reset navItems when logged out
    navItemsStore.filteredNavItems = [];
  }
}, { deep: true });
</script>

<style scoped>
/* Global styles for layout */
</style>