import React from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import MainLayout from './layouts/MainLayout.tsx';
import HomePage from './pages/HomePage.tsx';
import AnalysisPage from './pages/AnalysisPage.tsx';
import ChatPage from './pages/ChatPage.tsx';
import ProtectedRoute from './components/common/ProtectedRoute.tsx';
import { useAuth } from './hooks/index.ts';


const App = () => {
  // add Use reactive authentication state
  const { isAuthenticated } = useAuth();

  return (
    <BrowserRouter>
      <MainLayout>
        <Routes>
          <Route
            path="/"
            element={
              isAuthenticated ? (
                <Navigate to="/analysis" replace />
              ) : (
                <HomePage />
              )
            }
          />
          <Route
            path="/analysis"
            element={
              <ProtectedRoute>
                <AnalysisPage />
              </ProtectedRoute>
            }
          />
          <Route
            path="/chat"
            element={
              <ProtectedRoute>
                <ChatPage />
              </ProtectedRoute>
            }
          />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </MainLayout>
    </BrowserRouter>
  );
};

export default App;