import UserAccountLayout from '@/pages/UserAccountLayout.vue'
import LoginPage from '@/pages/LoginPage.vue'
import ProfilePage from '@/pages/ProfilePage.vue'
import { useAuthStore } from '@/stores/auth-store'
import { createRouter, createWebHistory, type RouteLocationNormalized } from 'vue-router'
import UserHomePage from '@/pages/UserHomePage.vue'
import ProfilesPage from '@/pages/ProfilesPage.vue'
import { useProfileStore } from '@/stores/profile-store'
import AccountPage from '@/pages/AccountPage.vue'
import EditAccountPage from '@/pages/forms/EditAccountPage.vue'
import MyUserPage from '@/pages/MyUserPage.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: async () => LoginPage,
      meta: { title: 'Login' },
    },
    {
      path: '/',
      component: async () => UserAccountLayout,
      beforeEnter: onlyAuthenticated,
      children: [
        {
          path: '',
          component: async () => UserHomePage,
          meta: { title: 'Home' },
          beforeEnter: profileSelected,
        },
        {
          path: 'me',
          component: async () => MyUserPage,
          meta: { title: 'My User' },
        },
        {
          path: 'profiles',
          component: async () => ProfilesPage,
          meta: { title: 'Profiles' },
        },
        {
          path: 'profiles/:name',
          beforeEnter: profileSelected,
          children: [
            {
              path: '',
              component: async () => ProfilePage,
              meta: { title: (to: RouteLocationNormalized) => 'Profile ' + to.params.name },
            },
            {
              path: 'accounts/:id',
              component: async () => AccountPage,
              meta: { title: 'Account' },
            },
            {
              path: 'accounts/:id/edit',
              component: async () => EditAccountPage,
              meta: { title: 'Edit Account' },
            },
            {
              path: 'add-account',
              component: async () => EditAccountPage,
              meta: { title: 'Add Account' },
            },
          ],
        },
      ],
    },
  ],
})

router.beforeEach((to, _, next) => {
  if (to.meta.title !== undefined && typeof to.meta.title === 'string') {
    document.title = 'Finnow - ' + to.meta.title
  } else if (to.meta.title !== undefined && typeof to.meta.title === 'function') {
    document.title = 'Finnow - ' + to.meta.title(to)
  } else {
    document.title = 'Finnow'
  }
  if (import.meta.env.DEV) {
    document.title = '[DEV]' + document.title
  }
  next()
})

function onlyAuthenticated(to: RouteLocationNormalized) {
  const authStore = useAuthStore()
  if (authStore.state) return true
  if (to.path === '/') return '/login'
  return '/login?next=' + encodeURIComponent(to.path)
}

function profileSelected() {
  const profileStore = useProfileStore()
  if (profileStore.state) return true
  return '/profiles' // Send the user to /profiles to select one before continuing.
}

export default router