import { Navigate, Routes, Route } from "react-router-dom"
import { useEffect } from "react"
import { Toaster } from "react-hot-toast"
import useAuthStore from "./store/useAuthStore.js"

import Navbar from "./components/Navbar.jsx"
import Login from "./pages/Login.jsx"
import Register from "./pages/Register.jsx"
import Dashboard from "./pages/Dashboard.jsx"
import Student from "./pages/Student.jsx"
import Payment from "./pages/Payment.jsx"
import StudentEdit from "./components/StudentEdit.jsx"
import AnimateRoutes from "./components/AnimateRoutes.jsx"
function App() {
  const { isLoggedIn, checkAuth } = useAuthStore()
  useEffect(() => {
    checkAuth()
  }, [])
  return(
    <div className="w-screen min-h-screen bg-black text-white">
      <Toaster />
      <Navbar isLoggedIn={isLoggedIn} />
      <Routes>
        <Route path="/" element={isLoggedIn ? <AnimateRoutes><Navigate to="/dashboard" /></AnimateRoutes> : <AnimateRoutes><Login /></AnimateRoutes>} />
        <Route path="/dashboard" element={!isLoggedIn ? <AnimateRoutes><Navigate to="/" /></AnimateRoutes> : <AnimateRoutes><Dashboard /></AnimateRoutes>} />
        <Route path="/student" element={!isLoggedIn ? <AnimateRoutes><Navigate to="/" /></AnimateRoutes> : <AnimateRoutes><Student /></AnimateRoutes>} />
        <Route path="/payment" element={!isLoggedIn ? <AnimateRoutes><Navigate to="/" /></AnimateRoutes> : <AnimateRoutes><Payment /></AnimateRoutes>} />
        <Route path="/login" element={!isLoggedIn ? <AnimateRoutes><Login /></AnimateRoutes> : <AnimateRoutes><Navigate to="/dashboard" /></AnimateRoutes>} />
        <Route path="/register" element={!isLoggedIn ? <AnimateRoutes><Register /></AnimateRoutes> : <AnimateRoutes><Navigate to="/dashboard" /></AnimateRoutes>} />  

        <Route path="/student/:id/edit" element={!isLoggedIn ? <AnimateRoutes><Navigate to="/" /></AnimateRoutes> : <AnimateRoutes><StudentEdit /></AnimateRoutes>} />

        <Route path="*" element={<Navigate to="/" />} />

      </Routes>
    </div>
  )
}
export default App