/**
 * @file useNavItems.ts
 * @description Single Source of Truth for navigation items used across the app (Sidebar, Mobile Nav, User Menu).
 */

export interface NavItem {
  to: string
  labelKey: string
  icon: string
  showOn: ('sidebar' | 'mobile' | 'userMenu')[]
  roles?: string[]
}

export const useNavItems = () => {
  const allNavItems: NavItem[] = [
    {
      to: '/dashboard',
      labelKey: 'sidebar.overview',
      icon: 'dashboard',
      showOn: ['sidebar', 'mobile', 'userMenu']
    },
    {
      to: '/browse',
      labelKey: 'sidebar.onlineCourses',
      icon: 'video_library',
      showOn: ['mobile']
    },
    {
      to: '/browse/discovery',
      labelKey: 'sidebar.recommendedCourses',
      icon: 'auto_awesome',
      showOn: ['mobile']
    },
    {
      to: '/browse/discovery',
      labelKey: 'sidebar.browseCourses',
      icon: 'explore',
      showOn: ['sidebar', 'mobile', 'userMenu']
    },
    {
      to: '/dashboard/my-courses',
      labelKey: 'sidebar.myCourses',
      icon: 'school',
      showOn: ['sidebar', 'mobile', 'userMenu']
    },
    {
      to: '/dashboard/announcements',
      labelKey: 'sidebar.announcements',
      icon: 'campaign',
      showOn: ['mobile']
    },
    {
      to: '/dashboard/profile',
      labelKey: 'sidebar.profile',
      icon: 'person',
      showOn: [] // Was ['sidebar']
    },
    {
        to: '/dashboard/profile',
        labelKey: 'userMenu.settings',
        icon: 'settings',
        showOn: ['userMenu']
    }
  ]

  const sidebarItems = computed(() => allNavItems.filter(item => item.showOn.includes('sidebar')))
  const mobileItems = computed(() => allNavItems.filter(item => item.showOn.includes('mobile')))
  const userMenuItems = computed(() => allNavItems.filter(item => item.showOn.includes('userMenu')))

  return {
    allNavItems,
    sidebarItems,
    mobileItems,
    userMenuItems
  }
}