"use client";

import { Divider } from "antd";
import { copyright } from "../utils/variables";
import { MainHeader } from "../Components/Header";
import NextTopLoader from "nextjs-toploader";
import Navigation from "./Navigation";
import { useSiteContext } from "../Context/SiteContext";
import { useSession } from "next-auth/react";
import BrandLogo from "./BrandLogo";
import InputItem from "./FormItems";
import ProfileAvatar from "./ProfileAvatar";
import { formatDateWithTime } from "../utils/formattedDateWithTime";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import MobileNavigation from "./MobileNavigation";
import GoogleIcon from "./GoogleIcon";
import NewNavigation from "./NewNavigation";

export const LayoutInner = ({ children }) => {
  const pathname = usePathname();
  const typeFor = pathname.split("/")[1] || "dashboard";

  const {
    mobileSidebarVisible,
    setMobileSidebarVisible,
    brandData,
  } = useSiteContext();

  const { data: currentSession } = useSession();

  const systemTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const formattedTime = time.toLocaleTimeString("en-US", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: true,
    timeZone: brandData?.time_zone || systemTimeZone,
  });

  const handleMenuSidebar = () => {
    setMobileSidebarVisible((prev) => !prev);
  };

  return (
    <div className="min-h-screen overflow-hidden ">
      <NextTopLoader color="#fff" showSpinner={false} shadow={false} />

      {/* GRID LAYOUT */}
      <div
        className={`grid w-full transition-all duration-300
          ${mobileSidebarVisible ? "xl:grid-cols-[17%_83%]" : "xl:grid-cols-[5%_95%]"}
          grid-cols-1
        `}
      >
        {/* SIDEBAR */}
        <aside className="hidden xl:flex flex-col sticky top-0 h-screen z-[999]  w-full bg-white dark:bg-black xl:border xl:border-gray-200 dark:xl:border-gray-900">
          <div className="flex flex-col h-full">

            <div
              className={`${mobileSidebarVisible ? "flex pr-4 pl-3" : "grid "} items-center justify-center gap-7 w-full py-[10px]   border-b border-gray-200 dark:border-gray-900`}
            >
              <BrandLogo
                className={`brand ${mobileSidebarVisible
                    ? "w-full text-start text-[22px]"
                    : "w-full text-center text-[24px] flex justify-center items-center"
                  } uppercase font-bold `}
                small={!mobileSidebarVisible}
              />

              <InputItem
                type="icon_button"
                className="no-width"
                border={false}
                icon={
                  <GoogleIcon
                    fill
                    size={22}
                    name="side_navigation"
                    className="text-[18px] text-primary dark:!text-white"
                  />
                }
                onClick={handleMenuSidebar}
              />
            </div>

            {/* <Navigation currentSession={currentSession} /> */}


            <NewNavigation currentSession={currentSession}/>

            {/* <div className="w-full mb-3 border-t border-gray-200 dark:border-gray-900 pt-5">
              
              <ProfileAvatar />
            </div> */}
          </div>
        </aside>

        {/* MAIN */}
        <main className={`${mobileSidebarVisible ? "" : ""} flex flex-col w-full  transition-all duration-300 overflow-hidden h-[calc(100vh-10px)] `}>

          <div className="flex flex-col h-full overflow-hidden">

            <div className="relative z-1">
              <MainHeader typeFor={typeFor} />
            </div>

            {/* CONTENT */}
            <div className="flex-1 overflow-y-auto overflow-x-hidden w-full pb-[30px] sm:px-7 px-3">
              <div className="w-full overflow-x-auto">
                {children}
              </div>
            </div>
          </div>

          {/* FOOTER */}
          <footer className="flex justify-between items-center text-xs text-[#8FA1B3] px-3 pb-3 pt-5">
            {copyright}
            <span>
              {brandData?.time_zone} {brandData?.time_zone ? "-" : ""}{" "}
              {formatDateWithTime(time, brandData)} - {formattedTime}
            </span>
          </footer>

          {/* MOBILE NAV */}
          <div className="fixed bottom-0 left-0 right-0 z-10 xl:hidden bg-white dark:bg-black border-t border-gray-200 dark:border-gray-900">
            <MobileNavigation currentSession={currentSession} />
          </div>
        </main>
      </div>
    </div>
  );
};