import React from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./styles/toastStyles.css";

import AuthProvider from "./context/AuthContext";
import SocketProvider from "./context/SocketContext";
import NotificationProvider from "./context/NotificationProvider";
import Login from "./components/Login";
import Register from "./components/Register";
import MapView from "./components/MapView";
import TaskList from "./components/TaskList";
import SocialFeed from "./components/SocialFeed";
import Profile from "./components/Profile";
import Events from "./components/Events";
import Rewards from "./components/Rewards";
import Premium from "./components/Premium";
import Navbar from "./components/Navbar";
import PrivateRoute from "./components/PrivateRoute";

function App() {
  return (
    <AuthProvider>
      <SocketProvider>
        <NotificationProvider>
          <Router>
            <Navbar />
            <div className="container">
              <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="/map" element={<PrivateRoute><MapView /></PrivateRoute>} />
                <Route path="/tasks" element={<PrivateRoute><TaskList /></PrivateRoute>} />
                <Route path="/feed" element={<PrivateRoute><SocialFeed /></PrivateRoute>} />
                <Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
                <Route path="/events" element={<PrivateRoute><Events /></PrivateRoute>} />
                <Route path="/rewards" element={<PrivateRoute><Rewards /></PrivateRoute>} />
                <Route path="/premium" element={<PrivateRoute><Premium /></PrivateRoute>} />
                <Route path="/" element={<Navigate to="/map" replace />} />
              </Routes>
            </div>
            <ToastContainer
              position="top-right"
              autoClose={5000}
              hideProgressBar={false}
              newestOnTop={true}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
              theme="light"
              limit={5}
            />
          </Router>
        </NotificationProvider>
      </SocketProvider>
    </AuthProvider>
  );
}

export default App;