<script setup lang="ts">
/**
 * @file AppSidebar.vue
 * @description Sidebar navigation for the authenticated dashboard.
 * Uses Quasar QList for structure.
 */

const { sidebarItems } = useNavItems()
const { t } = useI18n()
const navItems = sidebarItems


const handleNavigate = (path: string) => {
  if (import.meta.client) {
    window.location.href = path
  }
}
</script>

<template>
  <div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
    

    <!-- Navigation Items -->
    <q-list padding class="text-slate-600 dark:text-slate-400 flex-grow px-3 pt-6">
      <q-item 
        v-for="item in navItems" 
        :key="item.to" 
        clickable 
        v-ripple
        @click="handleNavigate(item.to)"
        class="rounded-xl mb-1 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
        :class="{ 'sidebar-item--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
      >
        <q-item-section avatar>
          <q-icon :name="item.icon" size="22px" />
        </q-item-section>
        
        <q-item-section>
          <q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

  </div>
</template>

<style scoped>
.sidebar-item--active {
  background: #eff6ff !important; /* blue-50 */
  color: #1d4ed8 !important;       /* blue-700 */
  position: relative;
}

.sidebar-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background: #2563eb;
  border-radius: 0 4px 4px 0;
}

/* Dark Mode Active State Enhancement */
.dark .sidebar-item--active {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #60a5fa !important;     /* blue-400 */
}

.dark .sidebar-item--active .q-icon {
  color: #60a5fa !important;      /* blue-400 */
}

.dark .sidebar-item--active::before {
  background: #3b82f6;
}
</style>
