const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('pages/LandingPage.vue'),
        meta: { requiresAuth: false } // Keep home accessible, but don't show in nav
      },
      {
        path: '/login',
        name: 'login',
        component: () => import('pages/LoginPage.vue'),
        meta: {
          requiresAuth: false,
          navGroup: 'noAuth', // Show only when logged out
          icon: 'login',
          title: 'Login',
          caption: 'Access your account'
        }
      },
      {
        path: '/register',
        name: 'register',
        component: () => import('pages/RegisterPage.vue'),
        meta: {
          requiresAuth: false,
          navGroup: 'noAuth', // Show only when logged out
          icon: 'person_add',
          title: 'Register',
          caption: 'Create an account'
        }
      },
      // Add a new route specifically for managing passkeys when logged in
      {
        path: '/passkeys',
        name: 'passkeys',
        component: () => import('pages/PasskeyManagementPage.vue'), // Assuming this page exists or will be created
        meta: {
          requiresAuth: true,
          icon: 'key',
          title: 'Passkeys',
          caption: 'Manage your passkeys'
        }
      },
      {
        path: 'forms',
        name: 'formList',
        component: () => import('pages/FormListPage.vue'),
        meta: {
          requiresAuth: true,
          navGroup: 'auth', // Show only when logged in
          icon: 'list_alt',
          title: 'Forms',
          caption: 'View existing forms'
        }
      },
      { path: 'forms/new', name: 'formCreate', component: () => import('pages/FormCreatePage.vue'), meta: { requiresAuth: true } }, // Not in nav
      { path: 'forms/:id/edit', name: 'formEdit', component: () => import('pages/FormEditPage.vue'), props: true, meta: { requiresAuth: true } }, // Not in nav
      { path: 'forms/:id/fill', name: 'formFill', component: () => import('pages/FormFillPage.vue'), props: true, meta: { requiresAuth: true } }, // Not in nav
      { path: 'forms/:id/responses', name: 'formResponses', component: () => import('pages/FormResponsesPage.vue'), props: true, meta: { requiresAuth: true } }, // Not in nav
      {
        path: 'mantis-summaries',
        name: 'mantisSummaries',
        component: () => import('pages/MantisSummariesPage.vue'),
        meta: {
          requiresAuth: true,
          navGroup: 'auth', // Show only when logged in
          icon: 'summarize',
          title: 'Mantis Summaries',
          caption: 'View daily summaries'
        }
      },
      {
        path: 'settings',
        name: 'settings',
        component: () => import('pages/SettingsPage.vue'),
        meta: {
          requiresAuth: true,
          navGroup: 'auth', // Show only when logged in
          icon: 'settings',
          title: 'Settings',
          caption: 'Manage application settings'
        }
      },
      {
        path: 'user-preferences',
        name: 'userPreferences',
        component: () => import('pages/UserPreferencesPage.vue'),
        meta: {
          requiresAuth: true
        }
      }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
];

export default routes;
