"use client";

import "./globals.css";
import { usePathname } from "next/navigation";
import Navbar from "./components/Navbar";
import Sidebar from "./components/Sidebar";
import { AuthProvider } from "./context/AuthContext";
import { ThemeProvider,useTheme } from "./context/ThemeContext";
import { SidebarProvider } from './context/SidebarContext';

function LayoutContent({ children }) {
  const { darkMode } = useTheme();
  const pathname = usePathname();
  const isAuthPage = pathname === '/' || pathname.startsWith('/login');

  return (
    <body className={isAuthPage ? "" : "flex h-screen overflow-hidden"}>
      <AuthProvider>
        {!isAuthPage ? (
          <>
            <Sidebar />
            <div className="flex flex-col flex-1 overflow-hidden">
              <Navbar />
              <main
                className={`flex-1 overflow-y-auto p-4 ${
                  darkMode
                    ? "bg-gray-800 text-white"
                    : "bg-white text-gray-800"
                }`}
              >
                {children}
              </main>
            </div>
          </>
        ) : (
          children
        )}
      </AuthProvider>
    </body>
  );
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Employee Portal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/images/brand/brand-08.svg" />
      </head>
      <ThemeProvider>
        <SidebarProvider>
        <LayoutContent>{children}</LayoutContent>
        </SidebarProvider>
      </ThemeProvider>
    </html>
  );
}
