<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-white dark:bg-[#1e293b] border-r border-slate-200 dark:border-slate-700">
    
    <!-- Branding / Logo Area -->
    <div class="px-6 py-8 flex items-center gap-3 cursor-pointer group" @click="handleNavigate('/dashboard')">
      <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
        E
      </div>
      <div class="flex flex-col">
        <span class="font-black text-lg leading-none tracking-tight text-slate-900 dark:text-white">E-Learning</span>
        <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
      </div>
    </div>
    
    <!-- Navigation Items -->
    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3">
      <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">{{ item.label }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

    <!-- Sidebar Bottom: Logout & Version -->
    <div class="p-4 border-t border-slate-100 dark:border-slate-700/50">
       <q-btn
          flat
          rounded
          class="w-full text-slate-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/10 transition-all font-bold"
          no-caps
          @click="() => useAuth().logout()"
        >
          <q-icon name="logout" size="20px" class="mr-3" />
          {{ t('auth.logout') }}
        </q-btn>

        <div class="mt-4 px-4 text-center">
            <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Version 0.1.0 (Alpha)</p>
        </div>
    </div>
  </div>
</template>

<style>
/* Active State styling for Sidebar items */
.sidebar-item--active {
  background: rgb(239 246 255) !important; /* blue-50 */
  color: rgb(29 78 216) !important;       /* blue-700 */
}

.sidebar-item--active .q-icon {
  color: rgb(37 99 235) !important;       /* blue-600 */
}

/* Vertical indicator for active item */
.sidebar-item--active::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 15%;
  height: 70%;
  width: 4px;
  background: #2563eb;
  border-radius: 0 4px 4px 0;
}

/* Dark Mode Active State */
.dark .sidebar-item--active {
  background: rgba(37, 99, 235, 0.15) !important;
  color: rgb(147 197 253) !important;     /* blue-300 */
}

.dark .sidebar-item--active .q-icon {
  color: rgb(96 165 250) !important;      /* blue-400 */
}

.dark .sidebar-item--active::after {
  background: #60a5fa;
}
</style>
