import { useUserStore } from '@/stores/user'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // PUBLIC
    { path: '/join', component: () => import('@/pages/Join.vue') },
    { path: '/applications', component: () => import('@/pages/MyApplications.vue'), meta: { requiresAuth: true } },
    { path: '/applications/:id', component: () => import('@/pages/MyApplications.vue'), meta: { requiresAuth: true } },

    // AUTH REQUIRED
    { path: '/', component: () => import('@/pages/Homepage.vue') },

    // MEMBER ROUTES
    { path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
    { path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
    { path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true } },


    { path: '/calendar', component: () => import('@/pages/Calendar.vue') },
    { path: '/calendar/event/:id', component: () => import('@/pages/Calendar.vue') },

    // disabled in favor of linking 
    // { path: '/documents', component: () => import('@/pages/Documentation.vue'), meta: { requiresAuth: true, memberOnly: true }, },

    { path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
    { path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
    { path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },

    // ADMIN / STAFF ROUTES
    {
      path: '/administration',
      meta: { requiresAuth: true, memberOnly: true, roles: ['17th Administrator', '17th HQ', '17th Command'] },
      children: [
        { path: 'applications', component: () => import('@/pages/ManageApplications.vue') },
        { path: 'applications/:id', component: () => import('@/pages/ManageApplications.vue') },
        { path: 'rankChange', component: () => import('@/pages/RankChange.vue') },
        { path: 'applications/:id', component: () => import('@/pages/Application.vue') },
        { path: 'loa', component: () => import('@/pages/ManageLOA.vue') },
        { path: 'roles', component: () => import('@/pages/ManageRoles.vue') },
        { path: 'roles/:id', component: () => import('@/pages/ManageRoles.vue') }
      ]
    },

    // UNAUTHORIZED PAGE
    { path: '/unauthorized', component: () => import('@/pages/Unauthorized.vue') }
  ]
})

const addr = import.meta.env.VITE_APIHOST;


router.beforeEach(async (to) => {
  const user = useUserStore()

  // Make sure user state is loaded before checking
  if (!user.loaded) {
    await user.loadUser();
  }

  // Not logged in
  if (to.meta.requiresAuth && !user.isLoggedIn) {
    // Redirect back to original page after login
    const redirectUrl = encodeURIComponent(window.location.origin + to.fullPath)
    window.location.href = `${addr}/login?redirect=${redirectUrl}`
    return false // Prevent Vue Router from continuing
  }


  // Must be a member
  if (to.meta.memberOnly && user.state !== 'member') {
    return '/unauthorized'
  }

  // Must have specific role
  if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
    return '/unauthorized'
  }
})

export default router;