import React from 'react';
import { Routes, Route, useLocation, Navigate } from 'react-router-dom';
import "../pages/Dashboard.css";
import Sidebar from "../components/SideBar";
import Header from "../components/Header";
import { Box, Toolbar } from "@mui/material";
// GENERAL
import Dasboard from '../pages/Dashboard';
import LoginPage from '../pages/Login';
import RegisterPage from '../pages/Register';
// ADMIN
import ManageTransfers from '../pages/ManageTransfers';
import ManageNotifications from '../pages/ManageNotifications';
import ManageAccess from '../pages/ManageAccess';
import ManageAccounts from '../pages/ManageAccount';
import ManageGroups from '../pages/ManageGroups';
import ManageMembers from '../pages/ManageMembers';
import ManageMenus from '../pages/ManageMenu';
import MemberKyc from '../pages/MemberKYC';
import ManageCredential from '../pages/ManageCredential';
import ManageCurrency from '../pages/ManageCurrency';
import ManageWebservice from '../pages/ManageWebservice';
import SettingPage from '../pages/Setting';
// ESCROW
import TransactionHistory from '../escrowPages/TransactionHistory';
import TransferPage from '../escrowPages/Transfer';
import TicketConfirmationPage from '../escrowPages/TicketConfirmation';

// Mock Authentication Function
const isAuthenticated = () => {
  return localStorage.getItem("authToken") !== null;
};

// Middleware Component for Protected Routes
const ProtectedRoute = ({ children }) => {
  if (!isAuthenticated()) {
    return <Navigate to="/login" replace />;
  }
  return children;
};

const Layout = ({ children }) => {
  const location = useLocation();
  // Define routes where the Navbar should not appear
  const hideNavbarRoutes = ['/login', "/register"];
  const shouldShowLayout = !hideNavbarRoutes.includes(location.pathname);
  return (
    <>
      {shouldShowLayout && 
        (
          <div className="App">
            <Box sx={{ display: "flex", backgroundColor: "#f5f5f5", color: "#333" }}>
              <Sidebar />
              <Box sx={{ flexGrow: 1 }}>
                <Header />
                <Toolbar />
                <main>{children}</main>
              </Box>
            </Box>
          </div>
        )
      }
    </>
  );
};

function App() {
  return (
    <Routes>
      {/* GENERAL */}
      <Route path="/login" element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />
      <Route exact path="/" element={<ProtectedRoute><Layout><Dasboard /></Layout></ProtectedRoute>} />
      {/* ADMIN */}
      <Route path="/manage-groups" element={<ProtectedRoute><Layout><ManageGroups /></Layout></ProtectedRoute>} />
      <Route path="/manage-members" element={<ProtectedRoute><Layout><ManageMembers /></Layout></ProtectedRoute>} />
      <Route path="/manage-member-credential" element={<ProtectedRoute><Layout><ManageCredential /></Layout></ProtectedRoute>} />
      <Route path="/manage-access" element={<ProtectedRoute><Layout><ManageAccess /></Layout></ProtectedRoute>} />
      <Route path="/manage-accounts" element={<ProtectedRoute><Layout><ManageAccounts /></Layout></ProtectedRoute>} />
      <Route path="/manage-currency" element={<ProtectedRoute><Layout><ManageCurrency /></Layout></ProtectedRoute>} />
      <Route path="/manage-transfers" element={<ProtectedRoute><Layout><ManageTransfers /></Layout></ProtectedRoute>} />
      <Route path="/manage-notifications" element={<ProtectedRoute><Layout><ManageNotifications /></Layout></ProtectedRoute>} />
      <Route path="/manage-menu" element={<ProtectedRoute><Layout><ManageMenus /></Layout></ProtectedRoute>} />
      <Route path="/manage-webservice" element={<ProtectedRoute><Layout><ManageWebservice /></Layout></ProtectedRoute>} />
      <Route path="/manage-member-kyc" element={<ProtectedRoute><Layout><MemberKyc /></Layout></ProtectedRoute>} />
      <Route path="/setting" element={<ProtectedRoute><Layout><SettingPage /></Layout></ProtectedRoute>} />
      {/* ESCROW */}
      <Route path="/transaction-history" element={<ProtectedRoute><Layout><TransactionHistory /></Layout></ProtectedRoute>} />
      <Route path="/transfer" element={<ProtectedRoute><Layout><TransferPage /></Layout></ProtectedRoute>} />
      <Route path="/ticket-confirmation" element={<ProtectedRoute><Layout><TicketConfirmationPage /></Layout></ProtectedRoute>} />
    </Routes>
  );
}

export default App;