import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomeView,
      meta: {
        title: 'Daily Notification Test',
        requiresAuth: false
      }
    },
    {
      path: '/schedule',
      name: 'Schedule',
      component: (): Promise<typeof import('../views/ScheduleView.vue')> => import('../views/ScheduleView.vue'),
      meta: {
        title: 'Schedule Notification',
        requiresAuth: false
      }
    },
    {
      path: '/notifications',
      name: 'Notifications',
      component: (): Promise<typeof import('../views/NotificationsView.vue')> => import('../views/NotificationsView.vue'),
      meta: {
        title: 'Notification Management',
        requiresAuth: false
      }
    },
    {
      path: '/status',
      name: 'Status',
      component: (): Promise<typeof import('../views/StatusView.vue')> => import('../views/StatusView.vue'),
      meta: {
        title: 'System Status',
        requiresAuth: false
      }
    },
    {
      path: '/user-zero',
      name: 'UserZero',
      component: (): Promise<typeof import('../views/UserZeroView.vue')> => import('../views/UserZeroView.vue'),
      meta: {
        title: 'User Zero Testing',
        requiresAuth: false
      }
    },
    {
      path: '/history',
      name: 'History',
      component: (): Promise<typeof import('../views/HistoryView.vue')> => import('../views/HistoryView.vue'),
      meta: {
        title: 'Notification History',
        requiresAuth: false
      }
    },
    {
      path: '/logs',
      name: 'Logs',
      component: (): Promise<typeof import('../views/LogsView.vue')> => import('../views/LogsView.vue'),
      meta: {
        title: 'System Logs',
        requiresAuth: false
      }
    },
    {
      path: '/settings',
      name: 'Settings',
      component: (): Promise<typeof import('../views/SettingsView.vue')> => import('../views/SettingsView.vue'),
      meta: {
        title: 'Settings',
        requiresAuth: false
      }
    },
    {
      path: '/about',
      name: 'About',
      component: (): Promise<typeof import('../views/AboutView.vue')> => import('../views/AboutView.vue'),
      meta: {
        title: 'About',
        requiresAuth: false
      }
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      component: (): Promise<typeof import('../views/NotFoundView.vue')> => import('../views/NotFoundView.vue'),
      meta: {
        title: 'Page Not Found',
        requiresAuth: false
      }
    }
  ],
})

// Global navigation guards
router.beforeEach((to, from, next) => {
  // Set page title
  if (to.meta?.title) {
    document.title = `${to.meta.title} - Daily Notification Test`
  }
  
  // Add loading state
   
  console.log(`🔄 Navigating from ${String(from.name) || 'unknown'} to ${String(to.name) || 'unknown'}`)
  
  next()
})

router.afterEach((to) => {
  // Clear any previous errors on successful navigation
   
  console.log(`✅ Navigation completed: ${String(to.name) || 'unknown'}`)
})

export default router