"use client";

import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";
import { ThemeProvider } from "next-themes";
import Footer from "@/components/Footer";
import { SidebarOverlayContext } from "@/context/SidebarContext";
import { getPageTitleForPath } from "@/lib/page-titles";
import { ApiLoadingProvider } from "@/context/ApiLoadingContext";
import CommonSettingsModal from "@/components/CommonSettingsModal";
import { Header } from "@/components/layout/Header";
import { Sidebar } from "@/components/layout/Sidebar";
import { useSessionVerification } from "@/hooks/useSessionVerification";
import { useHeaderHeight } from "@/hooks/useHeaderHeight";
import { useMenuState } from "@/hooks/useMenuState";
import { useSidebarState } from "@/hooks/useSidebarState";
import { isAuthRoute, CHROME_EXCLUDED_ROUTES } from "@/utils/layout-utils";

const DEFAULT_HEADER_HEIGHT = 110;

export default function ClientRootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const headerRef = useRef<HTMLElement>(null);

  const shouldSkipChrome = isAuthRoute(pathname, CHROME_EXCLUDED_ROUTES);
  const headerHeight = useHeaderHeight(headerRef, !shouldSkipChrome);
  const headerOffset = shouldSkipChrome ? 0 : headerHeight || DEFAULT_HEADER_HEIGHT;

  const { settingsOpen, setSettingsOpen, userMenuOpen, setUserMenuOpen } =
    useMenuState(!shouldSkipChrome);

  const {
    sidebarOpen,
    sidebarReportOpen,
    sidebarDeepdexOpen,
    commonSettingsModalOpen,
    handleToggleSidebar,
    handleToggleSidebarReport,
    handleToggleSidebarDeepdex,
    handleCloseSidebars,
    handleOpenCommonSettings,
    handleCloseCommonSettings,
  } = useSidebarState();

  useSessionVerification(shouldSkipChrome);

  useEffect(() => {
    if (typeof document === "undefined" || !pathname) return;
    document.title = getPageTitleForPath(pathname);
  }, [pathname]);

  useEffect(() => {
    if (typeof window === "undefined") return;
    if (document.getElementById("apollo-tracking-script")) return;

    try {
      const nonce = Math.random().toString(36).substring(7);
      const script = document.createElement("script");

      script.id = "apollo-tracking-script";
      script.src = `https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache=${nonce}`;
      script.async = true;
      script.defer = true;

      script.onload = () => {
        const win = window as Window & {
          trackingFunctions?: { onLoad: (config: { appId: string }) => void };
        };
        win.trackingFunctions?.onLoad({ appId: "6a0ac26ed1783100144d6b14" });
      };

      script.onerror = () => {
        console.log("Apollo script blocked by browser environment (Ad-Blocker).");
      };

      document.head.appendChild(script);
    } catch (error) {
      console.error("Failed to initialize Apollo tracking element", error);
    }
  }, []);

  const handleToggleSettings = () => {
    setSettingsOpen((open) => {
      if (!open) setUserMenuOpen(false);
      return !open;
    });
  };

  const handleCloseSettings = () => setSettingsOpen(false);

  const handleToggleUserMenu = () => {
    setUserMenuOpen((open) => {
      if (!open) setSettingsOpen(false);
      return !open;
    });
  };

  const hideFooter = shouldSkipChrome || pathname?.includes("/create/");

  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <ApiLoadingProvider>
        {shouldSkipChrome ? (
          <div className="min-h-screen bg-white flex-1">{children}</div>
        ) : (
          <>
            <Header
              headerRef={headerRef}
              sidebarOpen={sidebarOpen}
              sidebarReportOpen={sidebarReportOpen}
              sidebarDeepdexOpen={sidebarDeepdexOpen}
              onToggleSidebar={handleToggleSidebar}
              onToggleSidebarReport={handleToggleSidebarReport}
              onToggleSidebarDeepdex={handleToggleSidebarDeepdex}
              settingsOpen={settingsOpen}
              userMenuOpen={userMenuOpen}
              onToggleSettings={handleToggleSettings}
              onCloseSettings={handleCloseSettings}
              onToggleUserMenu={handleToggleUserMenu}
              onOpenCommonSettings={handleOpenCommonSettings}
              pathname={pathname}
            />

            <div
              className="flex flex-1"
              style={{
                paddingTop: headerOffset,
                minHeight: `calc(100vh - ${headerOffset}px)`,
              }}
            >
              <Sidebar
                isOpen={sidebarOpen}
                isReportOpen={sidebarReportOpen}
                isDeepdexOpen={sidebarDeepdexOpen}
                onClose={handleCloseSidebars}
              />

              <SidebarOverlayContext.Provider
                value={sidebarOpen || sidebarReportOpen || sidebarDeepdexOpen}
              >
                <main className="flex-1 bg-gray-50 overflow-auto hide-scrollbar transition-all duration-300 flex flex-col">
                  <div className="flex-1">{children}</div>
                  {!hideFooter && <Footer />}
                </main>
              </SidebarOverlayContext.Provider>
            </div>
          </>
        )}

        {shouldSkipChrome && !hideFooter && <Footer />}

        <CommonSettingsModal
          isOpen={commonSettingsModalOpen}
          onClose={handleCloseCommonSettings}
        />
      </ApiLoadingProvider>
    </ThemeProvider>
  );
}