import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { CssBaseline, Box } from "@mui/material";
import { useMsal } from "@azure/msal-react";
import { ToastContainer } from "react-toastify";
import Monitoring from "../pages/Monitoring.js";
import CallDetails from "../pages/ActivityReports/CallDetails.js";
import EmployeeWorkingTime from "../pages/ActivityReports/EmployeeWorkingTime.js";
import RunningApplicationDetails from "../pages/ActivityReports/RunningApplicationDetails.js";
import SystemLoginDetails from "../pages/ActivityReports/SystemLoginDetails.js";
import SystemSleepDetails from "../pages/ActivityReports/SystemSleepDetails.js";
import UserProfile from "../pages/UserProfile/UserProfile.js";
import Dashboard from "../pages/Dashboard.js";
import Users from "../pages/Users.js";
import ActivityTable from "../pages/ActivityTable.js";
import ProtectedRoute from "./ProtectedRoute.js";
import CustomAppBar from "./CustomAppBar.js";
import CustomDrawer from "./CustomDrawer.js";
import SignIn from "../pages/SignIn.js";
import ActivityReports from "../pages/ActivityReportsCharts/ActivityReportsCharts.js";
import ManageRoles from "../pages/ManageRoles/ManageRoles.js";
import ManageUsers from "../pages/ManageUsers.js";
import { useUser } from "../context/UserContext.js";
import "react-toastify/dist/ReactToastify.css";
import PageNotFound from "../pages/PageNotFound.js";
import BrowsingHistory from "../pages/BrowsingHistory.js";
import UserLocation from "./UserLocation.js";
import Screenshots from "../pages/ActivityReports/Screenshots.js";
import Unauthorized from "../pages/Unauthorized.js";
import AuditLogs from "./AuditLogs.js";
import GlobalConfig from "../pages/GlobalConfig/GlobalConfig.js";

function MainContainer() {
  const { instance, accounts } = useMsal();
  const [open, setOpen] = useState(true);
  const { logout } = useUser();

  const handleDrawerToggle = () => {
    setOpen(!open);
  };

  const handleLogout = () => {
    const account = instance.getActiveAccount();
    logout();
    instance.logoutRedirect({
      account,
      postLogoutRedirectUri: "/signin",
    });
  };

  return (
    <Router>
      <Box sx={{ display: "flex" }}>
        <ToastContainer
          position="top-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="light"
        />

        <CssBaseline />
        {accounts?.length > 0 && (
          <>
            <CustomAppBar
              open={open}
              handleDrawerToggle={handleDrawerToggle}
              handleLogout={handleLogout}
            />
            <CustomDrawer open={open} handleDrawerToggle={handleDrawerToggle} />
          </>
        )}
        <Box
          component="main"
          sx={{
            flexGrow: 1,
            p: accounts?.length === 0 ? "0" : "64px 24px 24px",
            transition: "margin-left 0.3s",
            marginLeft: "0",
          }}
          className="main-container"
        >
          <Routes>
            <Route element={<ProtectedRoute />}>
              <Route path="/" element={<Dashboard title="Dashboard" />} />
              <Route
                path="/activity-report"
                element={<ActivityReports title="Activity Reports" />}
              />
              <Route
                path="/audit-logs"
                element={<AuditLogs title="Audit Logs" />}
              />
              <Route
                path="/global-config"
                element={<GlobalConfig title="Global Config" />}
              />
              <Route
                path="/system-activity"
                element={<ActivityTable title="System Activity" />}
              />
              <Route
                path="/manage-users"
                element={
                  <ManageUsers
                    title="Manage Users"
                    secondaryTitle="Users List"
                  />
                }
              />
              <Route
                path="/manage-roles"
                element={
                  <ManageRoles
                    title="Manage Roles"
                    secondaryTitle="Users Roles"
                  />
                }
              />
              <Route
                path="/dashboard"
                element={<Dashboard title="Dashboard" />}
              />
              <Route path="/users" element={<Users title="Users Data" />} />
              <Route
                path="/user-location"
                element={<UserLocation title="Users Data" />}
              />
              <Route path="/monitoring" element={<Monitoring />} />
              <Route
                path="/monitoring/browsing-history"
                element={<BrowsingHistory title="Call Details" />}
              />
              <Route
                path="/monitoring/call-details"
                element={<CallDetails title="Call Details" />}
              />
              <Route
                path="/monitoring/employee-working-time"
                element={<EmployeeWorkingTime />}
              />
              <Route
                path="/monitoring/running-application-details"
                element={<RunningApplicationDetails />}
              />
              <Route
                path="/monitoring/system-login-details"
                element={<SystemLoginDetails />}
              />
              <Route
                path="/monitoring/system-sleep-details"
                element={<SystemSleepDetails />}
              />
              <Route path="/monitoring/screenshots" element={<Screenshots />} />
              <Route
                path="/user-profile/:id"
                element={<UserProfile title="User Summary" />}
              />
            </Route>
            <Route path="/signin" element={<SignIn />} />
            <Route path="/unauthorized" element={<Unauthorized />} />
            <Route path="*" element={<PageNotFound />} />
          </Routes>
        </Box>
      </Box>
    </Router>
  );
}

export default MainContainer;
