'use client';

import { AuthProvider } from "@/lib/auth-context";
import { LanguageProvider } from "@/lib/language-context";
import { NotificationProvider } from "@/lib/notification-context";
import { usePlansStore } from "@/lib/plans-store";
import React, { useEffect } from "react";
import { Toaster } from "sonner";
import Header from "./components/Layout/Header";

export function Providers({ children }: { children: React.ReactNode }) {
    const [sidebarOpen, setSidebarOpen] = React.useState(true);
    const fetchPlans = usePlansStore((state) => state.fetchPlans);

    useEffect(() => {
        fetchPlans();
    }, [fetchPlans]);

    const handleToggleSidebar = () => {
        window.dispatchEvent(new CustomEvent('toggleSidebar'));
        setSidebarOpen(!sidebarOpen);
    };

    return (
        <AuthProvider>
            <LanguageProvider>
                <NotificationProvider>
                    <Header onToggleSidebar={handleToggleSidebar} />
                    {children}
                    <Toaster richColors position="top-right" />
                </NotificationProvider>
            </LanguageProvider>
        </AuthProvider>
    );
}
