chore/frontend/vue-app/src/router/index.ts

import { watch } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ChildLayout from '../layout/ChildLayout.vue'
import ParentLayout from '../layout/ParentLayout.vue'
import ChildrenListView from '../components/shared/ChildrenListView.vue'
import ChildView from '../components/child/ChildView.vue'
import ParentView from '../components/child/ParentView.vue'
import TaskView from '../components/task/TaskView.vue'
import RewardView from '../components/reward/RewardView.vue'
import TaskEditView from '@/components/task/TaskEditView.vue'
import RewardEditView from '@/components/reward/RewardEditView.vue'
import ChildEditView from '@/components/child/ChildEditView.vue'
import TaskAssignView from '@/components/child/TaskAssignView.vue'
import RewardAssignView from '@/components/child/RewardAssignView.vue'
import NotificationView from '@/components/notification/NotificationView.vue'
import AuthLayout from '@/layout/AuthLayout.vue'
import Signup from '@/components/auth/Signup.vue'
import AuthLanding from '@/components/auth/AuthLanding.vue'
import Login from '@/components/auth/Login.vue'
import { isUserLoggedIn, isParentAuthenticated, isAuthReady } from '../stores/auth'
import ParentPinSetup from '@/components/auth/ParentPinSetup.vue'

const routes = [
  {
    path: '/auth',
    component: AuthLayout,
    children: [
      {
        path: '',
        name: 'AuthLanding',
        component: AuthLanding,
      },
      {
        path: 'signup',
        name: 'Signup',
        component: Signup,
      },
      {
        path: 'login',
        name: 'Login',
        component: Login,
      },
      {
        path: 'verify',
        name: 'VerifySignup',
        component: () => import('@/components/auth/VerifySignup.vue'),
      },
      {
        path: 'forgot-password',
        name: 'ForgotPassword',
        component: () => import('@/components/auth/ForgotPassword.vue'),
      },
      {
        path: 'reset-password',
        name: 'ResetPassword',
        component: () => import('@/components/auth/ResetPassword.vue'),
      },
    ],
  },
  {
    path: '/child',
    component: ChildLayout,
    children: [
      {
        path: '',
        name: 'ChildrenListView',
        component: ChildrenListView,
      },
      {
        path: ':id',
        name: 'ChildView',
        component: ChildView,
        props: true,
      },
    ],
  },
  {
    path: '/parent',
    component: ParentLayout,
    meta: { requiresAuth: true },
    children: [
      {
        path: '',
        name: 'ParentChildrenListView',
        component: ChildrenListView,
      },
      {
        path: ':id',
        name: 'ParentView',
        component: ParentView,
        props: true,
      },
      {
        path: 'children/create',
        name: 'CreateChild',
        component: ChildEditView,
      },
      {
        path: ':id/edit',
        name: 'ChildEditView',
        component: ChildEditView,
        props: true,
      },
      {
        path: 'tasks',
        name: 'TaskView',
        component: TaskView,
        props: false,
      },
      {
        path: 'tasks/create',
        name: 'CreateTask',
        component: TaskEditView,
      },
      {
        path: 'tasks/:id/edit',
        name: 'EditTask',
        component: TaskEditView,
        props: true,
      },
      {
        path: 'rewards',
        name: 'RewardView',
        component: RewardView,
        props: false,
      },
      {
        path: 'rewards/create',
        name: 'CreateReward',
        component: RewardEditView,
      },
      {
        path: 'rewards/:id/edit',
        name: 'EditReward',
        component: RewardEditView,
        props: true,
      },
      {
        path: ':id/assign-tasks/:type?',
        name: 'TaskAssignView',
        component: TaskAssignView,
        props: true,
      },
      {
        path: ':id/assign-rewards',
        name: 'RewardAssignView',
        component: RewardAssignView,
        props: true,
      },
      {
        path: 'notifications',
        name: 'NotificationView',
        component: NotificationView,
        props: false,
      },
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('@/components/profile/UserProfile.vue'),
      },
      {
        path: 'pin-setup',
        name: 'ParentPinSetup',
        component: ParentPinSetup,
        meta: { requiresAuth: true, allowNoParent: true },
      },
    ],
  },
  {
    path: '/',
    redirect: '/child',
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    return { top: 0, left: 0, behavior: 'smooth' }
  },
})

// Auth guard
router.beforeEach(async (to, from, next) => {
  if (!isAuthReady.value) {
    await new Promise((resolve) => {
      const stop = watch(isAuthReady, (ready) => {
        if (ready) {
          stop()
          resolve(true)
        }
      })
    })
  }

  // If already logged in and trying to access /auth, redirect to appropriate view
  if (to.path.startsWith('/auth') && isUserLoggedIn.value) {
    if (isParentAuthenticated.value) {
      return next('/parent')
    } else {
      return next('/child')
    }
  }

  // Always allow /auth and /parent/pin-setup
  if (to.path.startsWith('/auth') || to.name === 'ParentPinSetup') {
    return next()
  }

  // If not logged in, redirect to /auth
  if (!isUserLoggedIn.value) {
    return next('/auth')
  }

  // If parent-authenticated, allow all /parent routes
  if (isParentAuthenticated.value && to.path.startsWith('/parent')) {
    return next()
  }

  // If not parent-authenticated, allow all /child routes
  if (!isParentAuthenticated.value && to.path.startsWith('/child')) {
    return next()
  }

  // Otherwise, redirect based on parent authentication
  if (isParentAuthenticated.value) {
    return next('/parent')
  } else {
    return next('/child')
  }
})

export default router