import { Routes, Route, Navigate } from "react-router-dom";
import Report from "./pages/Report";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Patient from "./pages/Patient";
import Appintment from "./pages/Appintment";
import MedicalReports from "./pages/MedicalReports";

import useStore from "./store/useStore.js";
import { useEffect } from "react";
import Navbar from "./components/Navbar.jsx";

function App() {
 const {isLoggedIn, authUser, authRole, checkAuth} = useStore((state) => state);

  useEffect(() => {
    checkAuth();
  }, []);

  return (
    <div>
      <Navbar isLoggedIn={isLoggedIn} authUser={authUser} />
      <Routes>
        <Route path="/" element={authUser ? <Navigate to="/home" /> : <Navigate to="/login" />} />
        <Route path="/home" element={ isLoggedIn ? <Report /> : <Navigate to="/login" />} />
        <Route path="/login" element={!isLoggedIn ? <Login /> : <Navigate to="/home" />} />
        <Route path="/register" element={!isLoggedIn ? <Register /> : <Navigate to="/home" />} />

        {/* Receptionist routes */}
        <Route path="/patient" element={isLoggedIn && authRole === "receptionist" ? <Patient /> : <Navigate to="/login" />} />
        <Route path="/appointment" element={isLoggedIn && authRole === "receptionist" ? <Appintment /> : <Navigate to="/login" />} />

        {/* Doctor routes */}
        <Route path="/medical-report" element={isLoggedIn && authRole === "doctor" ? <MedicalReports /> : <Navigate to="/login" />} />

        {/* Shared routes */}
        <Route path="/report" element={isLoggedIn ? <Report /> : <Navigate to="/login" />} />
      </Routes>
    </div>
  )
}

export default App