/**
 * @file useNavItems.ts
 * @description ศูนย์รวมจัดการเมนูนำทาง (Navigation Items) เพื่อให้ใช้ข้อมูลชุดเดียวกันทั้งเว็บ
 * (เช่น เมนูด้านข้าง, เมนูบนมือถือ, และเมนูโปรไฟล์ผู้ใช้)
 */

export interface NavItem {
  to: string           // ลิงก์ปลายทาง
  labelKey: string     // คีย์ภาษาสำหรับ i18n
  icon: string         // ไอคอนจาก Material Icons
  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
  }
}