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

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

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

    // 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: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
    { path: '/calendar', component: () => import('@/pages/Calendar.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: ['staff', 'admin'] },
      children: [
        { path: 'applications', component: () => import('@/pages/ManageApplications.vue') },
        { path: 'application/:id', component: () => import('@/pages/Application.vue') },
        { path: 'rankChange', component: () => import('@/pages/RankChange.vue') },
        { path: 'applications/:id', component: () => import('@/pages/Application.vue') },
        { path: 'transfer', component: () => import('@/pages/ManageTransfers.vue') },
        { path: 'loa', component: () => import('@/pages/ManageLOA.vue') },
        { path: 'roles', 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;