import React, { useEffect, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import LeftSidebar from "@/components/_App/LeftSidebar";
import TopNavbar from "@/components/_App/TopNavbar";
import Footer from "@/components/_App/Footer";
import ScrollToTop from "./ScrollToTop";
import ControlPanelModal from "./ControlPanelModal";

const Layout = ({ children }) => {
  const router = useRouter();
  const [active, setActive] = useState(false);

  const [isAuthenticationPage, setIsAuthenticationPage] = useState(false);

  const toggleActive = () => {
    setActive(!active);
  };

  useEffect(() => {
    const authenticationPages = [
      "/auth/login",
      "/auth/sign-up",
      "/auth/forgot-password",
      "/auth/lock-screen",
      "/auth/confirm-mail",
    ];

    setIsAuthenticationPage(authenticationPages.includes(router.pathname));
  }, [router.pathname]);

  // Debugging: Log the value of isAuthenticationPage
  // console.log("isAuthenticationPage:", isAuthenticationPage, router.pathname);

  const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>

      <div
        className={`main-wrapper-content ${active ? "active" : ""} ${
          isAuthenticationPage ? "authBox" : ""
        }`}
      >
        {!isAuthenticationPage && (
          <>
            <TopNavbar toggleActive={toggleActive} />
            <LeftSidebar toggleActive={toggleActive} />
          </>
        )}

        <div
          className={`main-content ${isAuthenticationPage ? "authBox" : ""}`}
        >
          {children}
        </div>

        {!isAuthenticationPage && router.pathname !== "/auth/logout" && (
          <Footer />
        )}
      </div>

      <ScrollToTop />

      {!isAuthenticationPage && <ControlPanelModal />}
    </>
  );
};

export default Layout;
