import React, { Suspense, useState } from "react";
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
import { AuthContext } from "./authContext";

import SnackBar from "Components/SnackBar";
import PublicHeader from "Components/PublicHeader";
import TopHeader from "Components/TopHeader";
import SessionExpiredModal from "Components/SessionExpiredModal";
import ClientHeader from "Components/Client/ClientHeader";

import NotFoundPage from "Pages/NotFoundPage";
import ClientLoginPage from "Pages/Client/ClientLoginPage";
import ClientForgotPage from "Pages/Client/ClientForgotPage";
import ClientResetPage from "Pages/Client/ClientResetPage";
import HomePage from "Pages/HomePage";
import ProfilePage from "Pages/ProfilePage";
import ClientListProjectPage from "Pages/Client/ClientListProjectPage";
import ClientViewProjectPage from "Pages/Client/ClientViewProjectPage";
import CountTracksClient from "Pages/Client/CountTracksClient";
import ClientEditsPage from "Pages/Client/ClientEditsPage";
import ClientEditViewPage from "Pages/Client/ClientEditViewPage";
import { GlobalContext } from "Context/Global";

function renderHeader() {
  return <ClientHeader />;
}

function renderRoutes(isAuthenticated) {
  if (!isAuthenticated) {
    return (
      <Routes>
        <Route exact path="/" element={<HomePage />}></Route>
        <Route exact path="/login" element={<ClientLoginPage />}></Route>
        <Route exact path="/forgot" element={<ClientForgotPage />}></Route>
        <Route exact path="/reset" element={<ClientResetPage />}></Route>
        <Route path="*" exact element={<NotFoundPage />}></Route>
      </Routes>
    );
  }

  return (
    <Routes>
      <Route exact path="/" element={<HomePage />}></Route>
      <Route
        path="/login"
        element={<Navigate to="/projects" replace />}
      ></Route>
      <Route
        path="/forgot"
        element={<Navigate to="/projects" replace />}
      ></Route>
      <Route
        path="/reset"
        element={<Navigate to="/projects" replace />}
      ></Route>
      <Route path="/projects" element={<ClientListProjectPage />}></Route>
      <Route exact path="/profile" element={<ProfilePage />}></Route>
      <Route
        path="/view-project/:id"
        element={<ClientViewProjectPage />}
      ></Route>
      <Route path="/count-tracks" element={<CountTracksClient />}></Route>
      <Route path="/edits" element={<ClientEditsPage />}></Route>
      <Route
        path="/view-edit/:id/:project_id"
        element={<ClientEditViewPage />}
      ></Route>
      <Route path="*" exact element={<NotFoundPage />}></Route>
    </Routes>
  );
}

function Main() {
  const { state } = React.useContext(AuthContext);
  const { state: GlobalState } = React.useContext(GlobalContext);
  const location = useLocation();

  if (location.pathname === "/") {
    return (
      <div className="h-full bg-boxdark-2 text-bodydark dark:bg-boxdark-2 dark:text-bodydark">
        <PublicHeader />
        <HomePage />
        <SessionExpiredModal />
        <SnackBar />
      </div>
    );
  }

  return (
    <div className="h-full bg-boxdark-2 text-bodydark dark:bg-boxdark-2 dark:text-bodydark">
      <div className="flex overflow-hidden h-screen">
        {/* Sidebar */}
        {state.isAuthenticated && (
          <div
            className={`left-0 top-0 z-[9] h-screen w-[180px] flex-shrink-0 bg-boxdark duration-300 ease-in-out ${
              GlobalState.isOpen
                ? "left-[0px] translate-x-0 md:left-0 lg:static "
                : "fixed -translate-x-full lg:-translate-x-full"
            }`}
          >
            {renderHeader()}
          </div>
        )}

        {/* Main Content */}
        <div
          id="mainContainer"
          className="flex overflow-y-auto overflow-x-hidden relative flex-col flex-1"
        >
          {/* Top Header */}
          {state.isAuthenticated && (
            <header className="sticky top-0 z-[9] flex w-full bg-boxdark drop-shadow-none">
              <TopHeader />
            </header>
          )}

          {/* Main Content Area */}
          <main>
            <div className="w-full h-full">
              <>
                {renderRoutes(state.isAuthenticated)}
                <SessionExpiredModal />
                <SnackBar />
              </>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}

export default Main;
