import { createBrowserRouter, Navigate } from 'react-router-dom'
import { AppLayout, ProtectedRoute } from '@/components/layout'
import { RouteError } from '@/components/common/RouteError'
import {
  LoginPage,
  RegisterPage,
  TreeLibraryPage,
  TreeNavigationPage,
  TreeEditorPage,
  SessionHistoryPage,
  SessionDetailPage,
  SettingsPage,
  AccountSettingsPage,
} from '@/pages'

export const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />,
    errorElement: <RouteError />,
  },
  {
    path: '/register',
    element: <RegisterPage />,
    errorElement: <RouteError />,
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <AppLayout />
      </ProtectedRoute>
    ),
    errorElement: <RouteError />,
    children: [
      {
        index: true,
        element: <Navigate to="/trees" replace />,
      },
      {
        path: 'trees',
        element: <TreeLibraryPage />,
      },
      {
        path: 'trees/new',
        element: <TreeEditorPage />,
      },
      {
        path: 'trees/:id/edit',
        element: <TreeEditorPage />,
      },
      {
        path: 'trees/:id/navigate',
        element: <TreeNavigationPage />,
      },
      {
        path: 'sessions',
        element: <SessionHistoryPage />,
      },
      {
        path: 'sessions/:id',
        element: <SessionDetailPage />,
      },
      {
        path: 'settings',
        element: <SettingsPage />,
      },
      {
        path: 'account',
        element: <AccountSettingsPage />,
      },
    ],
  },
])

export default router