"use client";
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@/lib/queryClient";
import { ThemeProvider } from "@/components/ui/theme-provider";
import { AuthProvider } from "@/hooks/use-auth";
import { Toaster } from "@/components/ui/toaster";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import AdminSidebar from "@/components/layout/AdminSidebar";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

// export const metadata: Metadata = {
//   title: "Create Next App",
//   description: "Generated by create next app",
// };

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [interfaceType, setInterfaceType] = useState<
    "public" | "admin" | "superadmin"
  >("public");

  const pathname = usePathname();

  useEffect(() => {
    if (pathname?.startsWith("/dashboard")) {
      setInterfaceType("admin");
    } else {
      setInterfaceType("public");
    }

    // setShowSwitcher(true);
  }, [pathname]);
  return (
    <html lang="en">
      <ThemeProvider defaultTheme="light" storageKey="badagry-theme">
        <QueryClientProvider client={queryClient}>
          <AuthProvider>
            <body
              className={`${geistSans.variable} ${geistMono.variable} antialiased`}
            >
              {interfaceType === "public" && (
                <div className="flex flex-col min-h-screen">
                  <Header />
                  <main className="flex-grow">{children}</main>
                  <Footer />
                </div>
              )}

              {interfaceType === "admin" && (
                <div className="flex h-screen overflow-hidden">
                  <AdminSidebar />
                  <div className="flex-1 overflow-y-auto py-10 bg-gray-100 min-h-screen overflow-x-hidden">{children}</div>
                </div>
              )}

              <Toaster />
            </body>
          </AuthProvider>
        </QueryClientProvider>
      </ThemeProvider>
    </html>
  );
}
