import React, { ReactNode } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider } from './AuthContext';
import { ThemeProvider } from './ThemeContext';
import { UIProvider } from './UIContext';
import { ChatProvider } from './ChatContext';
import { ComposerProvider } from './ComposerContext';
import { PluginSettingsProvider } from './PluginSettingsContext';
import { AppRouteProvider } from './AppRouteContext';
import { WorkflowsProvider } from './WorkflowsContext';

const queryClient = new QueryClient();

interface ProvidersProps {
  children: ReactNode;
}

const Providers: React.FC<ProvidersProps> = ({ children }) => {
  return (
    <UIProvider>
      <AppRouteProvider>
        <QueryClientProvider client={queryClient}>
          <PluginSettingsProvider>
            <AuthProvider>
              <ThemeProvider>
                <ComposerProvider>
                  <WorkflowsProvider>
                    <ChatProvider>
                      {children}
                    </ChatProvider>
                  </WorkflowsProvider>
                </ComposerProvider>
              </ThemeProvider>
            </AuthProvider>
          </PluginSettingsProvider>
        </QueryClientProvider>
      </AppRouteProvider>
    </UIProvider>
  );
};

export default Providers;
