import {
  LayoutDashboardIcon,
  ShieldPlus,
  UsersRoundIcon,
  KeyRoundIcon,
  MessageSquareIcon,
  SettingsIcon,
  UserIcon,
  CommandIcon,
  BracesIcon,
} from 'lucide-vue-next'

export const routes = [
  { path: '/', name: 'Home',component: () => import('@/views/Home.vue') },
  { path: '/404', name: '404',component: () => import('@/views/404.vue') },

  { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') },
  { path: '/signup', name: 'Signup', component: () => import('@/views/Signup.vue') },

  { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/views/404.vue')}, // Catch all 404
  { path: '/dashboard', name: 'Dashboard', component: ()=>import('@/views/DashBoard.vue'), meta: { requiresAuth: true, title: 'Dashboard', showInSidebar: false },redirect: '/dashboard/overview', children:[
    { path: 'overview', name: 'Overview', component: ()=>import('@/views/dashboard/Overview.vue'),meta: {  title: 'Overview', icon: LayoutDashboardIcon, showInSidebar: true } },
    { path: 'tokens', name: 'Tokens', component: ()=>import('@/views/dashboard/Tokens.vue'),meta: {  title: 'Tokens', icon: BracesIcon, showInSidebar: true } },
    { path: 'manager', name: 'Manager',meta: {  title: 'Manager', icon: CommandIcon, showInSidebar: true, open: true, badge: 'Admin' }, redirect: '/dashboard/manager/users',children:[
      { path: 'users', name: 'User', component: ()=>import('@/views/dashboard/User.vue'),meta: {  title: 'Users', icon: UsersRoundIcon, showInSidebar: true } },
      { path: 'users/new', name: 'UserNew', component: ()=>import('@/views/dashboard/UserNew.vue'),meta: {  title: 'UserNew', icon: UsersRoundIcon, showInSidebar: false } },
      { path: 'users/view', name: 'UserView', component: ()=>import('@/views/dashboard/UserView.vue'),meta: {  title: 'UserView', icon: UsersRoundIcon, showInSidebar: false } },
      { path: 'keys', name: 'ApiKey', component: ()=>import('@/views/dashboard/Keys.vue') ,meta: {  title: 'ApiKeys', icon: KeyRoundIcon, showInSidebar: true } },
      { path: 'keys/view', name: 'ApiKeyView', component: ()=>import('@/views/dashboard/KeyView.vue') ,meta: {  title: 'ApiKeyView', icon: KeyRoundIcon, showInSidebar: false } },
    ] },
    { path: 'settings', name: 'Settings', meta: {  title: 'Settings', icon: SettingsIcon, showInSidebar: true, open: false } , redirect: '/dashboard/settings/profile',children:[
      { path: 'profile', name: 'Profile', component: ()=>import('@/views/dashboard/Profile.vue'),meta: {  title: 'Profile', icon: UserIcon, showInSidebar: true } },
    ]},
  ]},
];

export function generateMenuItemsFromRoutes(routes, userRole, parentPath = '') {
  const menuItems = [];

  for (const route of routes) {
    if (route.meta && route.meta.title && route.meta.showInSidebar) {
      const fullPath = parentPath + '/' + route.path.replace(/^\//, '');
      const menuItem = {
        label: route.meta.title,
        to: fullPath,
        icon: route.meta.icon,
      };

      if (route.children && route.children.length > 0) {
        if (route.name === 'Manager' && userRole < 10) {
          continue;
        }
        menuItem.type = 'submenu';
        menuItem.open = route.meta.open !== undefined ? route.meta.open : false;
        menuItem.badge = route.meta.badge;
        menuItem.children = generateMenuItemsFromRoutes(route.children, userRole, fullPath);
      } else {
        menuItem.type = 'link';
      }

      if (route.name === 'Overview') {
        menuItems.push(menuItem);
        menuItems.push({ type: 'title', label: 'Apps' });
        continue
      }

      menuItems.push(menuItem);
    } else if (route.path === '/dashboard' && route.children) {
      
      menuItems.push(...generateMenuItemsFromRoutes(route.children, userRole, '/dashboard'));
    }
  }

  return menuItems;
}