// import React, { useEffect } from "react";
// import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
// import { useDispatch, useSelector } from "react-redux";
// import { AppDispatch, RootState } from "./store";
// import { loadUserFromStorage } from "./store/userSlice";

// import Login from "./pages/Login";
// import Dashboard from "./pages/Dashboard";
// import Projects from "./pages/Projects/Projects";
// import DashboardLayout from "./layout/DashboardLayout";
// import ProtectedRoute from "./routes/ProtectedRoute";
// import PublicRoute from "./routes/PublicRoute";
// import { ThemeToggle } from "./helper/ThemeToggle";
// import LeaveAndAdjustments from "./pages/LeaveAndAdjustments/LeaveAndAdjustments";
// import Timesheets from "./pages/Timesheets/Timesheets";
// import Settings from "./pages/Settings/Settings";
// import HelpSupport from "./pages/HelpSupport/HelpSupport";

// const App: React.FC = () => {
//   const theme = ThemeToggle();
//   const dispatch = useDispatch<AppDispatch>();

//   // ✅ Get user directly from Redux
//   const user = useSelector((state: RootState) => state.user.user);

//   useEffect(() => {
//     document.documentElement.setAttribute("data-theme", theme);
//   }, [theme]);

//   // ✅ Load user from localStorage into Redux when app starts
//   useEffect(() => {
//     dispatch(loadUserFromStorage());
//   }, [dispatch]);

//   console.log("App.tsx → user:", user);

//   return (
//     <BrowserRouter>
//       <Routes>
//         {/* Public Route */}
//         <Route
//           path="/login"
//           element={
//             <PublicRoute user={user}>
//               <Login />
//             </PublicRoute>
//           }
//         />

//         {/* Protected Routes */}
//         <Route
//           path="/dashboard"
//           element={
//             <ProtectedRoute user={user}>
//               <DashboardLayout />
//             </ProtectedRoute>
//           }
//         >
//           <Route index element={<Dashboard />} />
//           <Route path="projects" element={<Projects />} />
//           <Route path="leave-adjustments" element={<LeaveAndAdjustments />} />
//           <Route path="timesheet" element={<Timesheets />} />
//           <Route path="settings" element={<Settings />} />
//           <Route path="help-support" element={<HelpSupport />} />
//         </Route>

//         {/* Default Redirect */}
//         <Route
//           path="*"
//           element={<Navigate to={user ? "/dashboard" : "/login"} replace />}
//         />
//       </Routes>
//     </BrowserRouter>
//   );
// };

// export default App;


import React, { useEffect } from "react";
import { HashRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "./store";
import { loadUserFromStorage } from "./store/userSlice";

import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import Projects from "./pages/Projects/Projects";
import DashboardLayout from "./layout/DashboardLayout";
import ProtectedRoute from "./routes/ProtectedRoute";
import PublicRoute from "./routes/PublicRoute";
import LeaveAndAdjustments from "./pages/LeaveAndAdjustments/LeaveAndAdjustments";
import Timesheets from "./pages/Timesheets/Timesheets";
import Settings from "./pages/Settings/Settings";
import HelpSupport from "./pages/HelpSupport/HelpSupport";
import Vpn from "./pages/Vpn/Vpn";
import Schedule from "./pages/Schedule/Schedule";
import PaysSlips from "./pages/PaySlips/PaysSlips";
import ApplyLeaveAndAdjustmentsTime from "./pages/LeaveAndAdjustments/ApplyLeaveAndAdjustmentsTime";


const App: React.FC = () => {
  
  const dispatch = useDispatch<AppDispatch>();

  // ✅ Get user directly from Redux
  const user = useSelector((state: RootState) => state.user.user);

  

  useEffect(() => {
    dispatch(loadUserFromStorage());
  }, [dispatch]);

  console.log("App.tsx → user:", user); 

  return (
    <Router>
      <Routes>
        {/* Public Route */}
        <Route
          path="/login"
          element={
            <PublicRoute user={user}>
              <Login />
            </PublicRoute>
          }
        />

        {/* Protected Routes */}
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute user={user}>
              <DashboardLayout />
            </ProtectedRoute>
          }
        >
          <Route index element={<Dashboard />} />
          <Route path="projects" element={<Projects />} />
          <Route path="leave-adjustments" element={<LeaveAndAdjustments />} />
          <Route path="leave-adjustments/apply" element={<ApplyLeaveAndAdjustmentsTime/>} />
          <Route path="timesheet" element={<Timesheets />} />
          <Route path="settings" element={<Settings />} />
          <Route path="vpn" element={<Vpn />} />
          <Route path="help-support" element={<HelpSupport />} />
          <Route path="schedule" element={<Schedule/>} />
          <Route path="pays-slips" element={<PaysSlips/>} />
        </Route>

        {/* Default Redirect */}
        <Route
          path="*"
          element={<Navigate to={user ? "/dashboard" : "/login"} replace />}
        />
      </Routes>
    </Router>
  );
};

export default App;