import { createBrowserRouter, RouterProvider } from 'react-router'
import { AppLayout } from '@/components/layout/AppLayout'

const createAppRouter = () =>
    createBrowserRouter([
        {
            element: <AppLayout />,
            children: [
                {
                    path: '/',
                    lazy: () => import('@/app/routes/home')
                },

                {
                    path: '/visual-recognition',
                    lazy: () =>
                        import(
                            '@/features/visual-recognition/routes/VisualRecognitionPage'
                        ).then((m) => ({ Component: m.VisualRecognitionPage }))
                },
                {
                    path: '/chat',
                    lazy: () =>
                        import('@/features/ai-chat/routes/ChatPage').then(
                            (m) => ({ Component: m.ChatPage })
                        )
                },
                {
                    path: '/chat/sandbox/:missionId',
                    lazy: () =>
                        import('@/features/ai-chat/routes/SandboxPage').then(
                            (m) => ({ Component: m.SandboxPage })
                        )
                },
                {
                    path: '/flashcards',
                    lazy: () =>
                        import(
                            '@/features/flashcards/routes/FlashcardsLayout'
                        ).then((m) => ({ Component: m.FlashcardsLayout })),
                    children: [
                        {
                            index: true,
                            lazy: () =>
                                import(
                                    '@/features/flashcards/routes/SetsPage'
                                ).then((m) => ({ Component: m.SetsPage }))
                        },
                        {
                            path: ':setId',
                            lazy: () =>
                                import(
                                    '@/features/flashcards/routes/SetOverviewPage'
                                ).then((m) => ({ Component: m.SetOverviewPage }))
                        },
                        {
                            path: ':setId/study',
                            lazy: () =>
                                import(
                                    '@/features/flashcards/routes/StudyModePage'
                                ).then((m) => ({ Component: m.StudyModePage }))
                        },
                        {
                            path: ':setId/spelling',
                            lazy: () =>
                                import(
                                    '@/features/flashcards/routes/SpellingModePage'
                                ).then((m) => ({ Component: m.SpellingModePage }))
                        },
                        {
                            path: ':setId/transcription',
                            lazy: () =>
                                import(
                                    '@/features/flashcards/routes/TranscriptionModePage'
                                ).then((m) => ({ Component: m.TranscriptionModePage }))
                        },
                        {
                            path: ':setId/list',
                            lazy: () =>
                                import(
                                    '@/features/flashcards/routes/SetListPage'
                                ).then((m) => ({ Component: m.SetListPage }))
                        }
                    ]
                },
                {
                    path: '/smart-reading',
                    lazy: () =>
                        import(
                            '@/features/smart-reading/routes/SmartReadingDashboard'
                        ).then((m) => ({ Component: m.SmartReadingDashboard }))
                },
                {
                    path: '/smart-reading/:storyId',
                    lazy: () =>
                        import(
                            '@/features/smart-reading/routes/StoryReaderPage'
                        ).then((m) => ({ Component: m.StoryReaderPage }))
                },
                {
                    path: '/video-learning',
                    lazy: () => import('@/features/video-learning/routes/VideoLearningPage').then(m => ({ Component: m.VideoLearningPage }))
                },
                {
                    path: '/mini-games',
                    lazy: () => import('@/features/mini-games/routes/MiniGamesDashboard').then(m => ({ Component: m.MiniGamesDashboard }))
                },
                {
                    path: '/mini-games/hangman',
                    lazy: () => import('@/features/mini-games/routes/HangmanPage').then(m => ({ Component: m.HangmanPage }))
                },
                {
                    path: '/mini-games/speed',
                    lazy: () => import('@/features/mini-games/routes/SpeedChallengePage').then(m => ({ Component: m.SpeedChallengePage }))
                },
                {
                    path: '/mini-games/stop-the-bus',
                    lazy: () => import('@/features/mini-games/routes/StopTheBusPage').then(m => ({ Component: m.StopTheBusPage }))
                },
                {
                    path: '*',
                    lazy: () => import('@/app/routes/not-found')
                }
            ]
        }
    ])

export default function AppRouter() {
    return <RouterProvider router={createAppRouter()} />
}
