'use client';

import { useState } from 'react';
import Sidebar from '@/app/components/admin/Sidebar';
import Header from '@/app/components/admin/Header';
import { AlertProvider } from '@/contexts/AlertContext';
import UserProvider from '@/providers/AdminProvider';
import { ThemeProvider } from '@/providers/ThemeProvider';

import "@/app/admin/dashboard/admin-style.css"

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider>
      <UserProvider>
        <AdminLayoutContent>{children}</AdminLayoutContent>
      </UserProvider>
    </ThemeProvider>
  );
}

function AdminLayoutContent({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex h-screen bg-var-bg">
      <Sidebar 
        isOpen={sidebarOpen} 
        onClose={() => setSidebarOpen(false)} 
      />
      
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header onMenuClick={() => setSidebarOpen(true)} />
        
        <main className="flex-1 overflow-auto p-4 md:p-6">
          <AlertProvider>
            {children}
          </AlertProvider>
        </main>
      </div>
    </div>
  );
}