import { BrowserRouter, Route, Routes } from 'react-router-dom'
import HomePage from './app/feed/pages/HomePage.tsx'
import { PostsService } from './app/feed/posts/postsService.ts'
import AuthorPage from './app/feed/pages/AuthorPage.tsx'
import { MediaService } from './app/media/mediaService.ts'
import SignupPage from './app/auth/pages/SignupPage.tsx'
import LoginPage from './app/auth/pages/LoginPage.tsx'
import { AuthService } from './app/auth/authService.ts'
import { useUser } from './app/user/userStore.ts'
import LogoutPage from './app/auth/pages/LogoutPage.tsx'
import UnauthorizedHandler from './app/auth/components/UnauthorizedHandler.tsx'

function App() {
  const { user } = useUser()
  const postService = new PostsService()
  const mediaService = new MediaService()
  const authService = new AuthService(user)

  return (
    <BrowserRouter>
      <UnauthorizedHandler>
        <Routes>
          <Route
            path={'/'}
            element={<HomePage postsService={postService} mediaService={mediaService} />}
          />
          <Route path="/u/:username" element={<AuthorPage postsService={postService} />} />
          <Route path="/login" element={<LoginPage authService={authService} />} />
          <Route path="/logout" element={<LogoutPage authService={authService} />} />
          <Route path="/signup/:code?" element={<SignupPage authService={authService} />} />
        </Routes>
      </UnauthorizedHandler>
    </BrowserRouter>
  )
}

export default App