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

const { t } = useI18n()

const navItems = computed(() => [
  {
    to: "/dashboard",
    label: t('sidebar.overview'),
    icon: "dashboard", // Using Material Icons names where possible or SVG paths
    isSvg: false
  },
  {
    to: "/dashboard/my-courses",
    label: t('sidebar.myCourses'),
    icon: "school",
    isSvg: false
  },
  {
    to: "/browse/discovery",
    label: t('sidebar.browseCourses'),
    icon: "explore",
    isSvg: false
  },
  {
    to: "/dashboard/announcements",
    label: t('sidebar.announcements'),
    icon: "campaign",
    isSvg: false
  },
  {
    to: "/dashboard/profile",
    label: t('sidebar.profile'),
    icon: "person",
    isSvg: false
  },
]);

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

<template>
  <div class="flex flex-col h-full bg-transparent">
    <!-- Branding Area (Optional if not in Header) -->
    
    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow">

      
      <q-item 
        v-for="item in navItems" 
        :key="item.to" 
        clickable 
        v-ripple
        @click="handleNavigate(item.to)"
        class="rounded-r-full mr-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
        :class="{ 'q-router-link--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
      >
        <q-item-section avatar>
          <q-icon :name="item.icon" />
        </q-item-section>
        
        <q-item-section>
          <q-item-label>{{ item.label }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

    <!-- Footer / Version -->
    <div class="mt-auto p-4 text-xs text-center opacity-50 pb-8">
      <p>e-Learning v0.1.0</p>
      <p>&copy; 2026</p>
    </div>
  </div>
</template>

<style>
/* Light Mode Active State */
.q-item.q-router-link--active {
  background: rgb(239 246 255); /* blue-50 */
  color: rgb(29 78 216);       /* blue-700 */
  font-weight: 700;
}

/* Dark Mode Active State */
.dark .q-item.q-router-link--active {
  background: rgba(255, 255, 255, 0.1);
  color: rgb(147 197 253);     /* blue-300 */
}
</style>
