// src/router/routes.ts
// Adapt paths to new component locations
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('../layouts/MainLayout.vue'), // Use .. alias
    children: [
      { path: '', redirect: '/lists' },
      {
        path: 'lists',
        name: 'PersonalLists',
        component: () => import('../pages/ListsPage.vue'),
        meta: { keepAlive: true },
      },
      {
        path: 'lists/:id',
        name: 'ListDetail',
        component: () => import('../pages/ListDetailPage.vue'),
        props: true,
        meta: { keepAlive: true },
      },
      {
        path: 'groups',
        name: 'GroupsList',
        component: () => import('../pages/GroupsPage.vue'),
        meta: { keepAlive: true },
      },
      {
        path: 'groups/:id',
        name: 'GroupDetail',
        component: () => import('../pages/GroupDetailPage.vue'),
        props: true,
        meta: { keepAlive: true },
      },
      {
        path: 'groups/:groupId/lists',
        name: 'GroupLists',
        component: () => import('../pages/ListsPage.vue'), // Reusing ListsPage
        props: true,
        meta: { keepAlive: true },
      },
      {
        path: 'account',
        name: 'Account',
        component: () => import('../pages/AccountPage.vue'),
        meta: { keepAlive: true },
      },
      {
        path: '/groups/:groupId/chores',
        name: 'GroupChores',
        component: () => import('@/pages/ChoresPage.vue'),
        props: (route) => ({ groupId: Number(route.params.groupId) }),
        meta: { requiresAuth: true, keepAlive: false },
      },
      {
        path: '/chores',
        name: 'Chores',
        component: () => import('@/pages/ChoresPage.vue'),
        meta: { requiresAuth: true, keepAlive: false },
      },
      {
        path: '/personal-chores',
        name: 'PersonalChores',
        component: () => import('@/pages/PersonalChoresPage.vue'),
        meta: { requiresAuth: true, keepAlive: false },
      },
    ],
  },
  {
    path: '/auth', // Group auth routes under a common path for clarity (optional)
    component: () => import('../layouts/AuthLayout.vue'),
    children: [
      { path: 'login', name: 'Login', component: () => import('../pages/LoginPage.vue') },
      { path: 'signup', name: 'Signup', component: () => import('../pages/SignupPage.vue') },
      {
        path: 'callback',
        name: 'AuthCallback',
        component: () => import('../pages/AuthCallbackPage.vue'),
      },
    ],
  },
  // {
  //   path: '/:catchAll(.*)*', name: '404',
  //   component: () => import('../pages/ErrorNotFound.vue'),
  // },
]

export default routes