"use client";

import { SidebarProvider } from "@/context/SidebarContext";
import AppSidebar from "@/layout/AppSidebar";
import { useSidebar } from "@/context/SidebarContext";
import { cn } from "@/lib/utils";
import Navbar from '@/components/layout/Navbar';
import { SelectedClientProvider } from '@/context/SelectedClientContext';
import AppHeader from '@/layout/AppHeader';
import Image from 'next/image';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Users, User, FileText, Receipt, CheckSquare, BookText, Calendar } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { AuthProvider } from '@/context/AuthContext';
import LayoutClient from "@/app/LayoutClient";
import ImpersonationBanner from '@/components/ImpersonationBanner';
import { useEffect, useState } from 'react';

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LayoutClient>
      <AuthProvider>
        <SidebarProvider>
          <SelectedClientProvider>
            <AdminLayoutContent>{children}</AdminLayoutContent>
          </SelectedClientProvider>
        </SidebarProvider>
      </AuthProvider>
    </LayoutClient>
  );
}

function AdminLayoutContent({ children }: { children: React.ReactNode }) {
  const { isExpanded, isMobileOpen, toggleMobile } = useSidebar();
  const [impersonatedManagerName, setImpersonatedManagerName] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setImpersonatedManagerName(localStorage.getItem('impersonatedManagerName'));
    }
  }, []);

  return (
    <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
      {/* Sidebar */}
      <AppSidebar />

      {/* Mobile sidebar backdrop */}
      {isMobileOpen && (
      <div
          className="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"
          onClick={toggleMobile}
        />
      )}

      {/* Main content */}
      <div
        className={cn(
          "flex-1 flex flex-col min-h-screen transition-all duration-300",
          isExpanded ? "lg:ml-64" : "lg:ml-20"
        )}
      >
        {/* Sticky Navbar */}
        <AppHeader />
        <main className="flex-1 p-4 md:p-6 overflow-auto">
          {impersonatedManagerName && (
            <ImpersonationBanner managerName={impersonatedManagerName} />
          )}
          {children}
        </main>
      </div>
    </div>
  );
}