import './normalize.css';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
  BrowserRouter,
  Route,
  Routes,
} from 'react-router';

import { LoginPage, RegisterPage } from '@/pages/Authorization';
import { ExpensePage } from '@/pages/Expense';
import { ExpensesPage } from '@/pages/Expenses';
import { HomePage } from '@/pages/Home';
import { AuthContextProvider } from '@/shared/context/AuthContext';
import { PAGES } from '@/shared/router';
import { AuthRoute } from '@/shared/ui/AuthRoute';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <AuthContextProvider>
      <BrowserRouter>
        <Routes>
          <Route element={<AuthRoute />}>
            <Route element={<HomePage />} path={PAGES.Home} />

            <Route element={<ExpensesPage />} path={PAGES.Expenses} />

            <Route element={<ExpensePage />} path={PAGES.Expense} />
          </Route>

          <Route element={<AuthRoute needAuth={false} to="/" />}>
            <Route element={<LoginPage />} path={PAGES.Login} />

            <Route element={<RegisterPage />} path={PAGES.Register} />
          </Route>
        </Routes>
      </BrowserRouter>
    </AuthContextProvider>
  </QueryClientProvider>
);

export default App;