import React, { ReactNode } from 'react';
import { HelmetProvider } from 'react-helmet-async';
import { BrowserRouter } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
import { QueryProvider } from './QueryProvider';
import { ThemeProvider } from './ThemeProvider';
import { LocaleProvider } from './LocaleProvider';
import { RealtimeProvider } from './RealtimeProvider';
import { OfflineBanner } from '@/shared/components/OfflineBanner';
import { ErrorBoundary } from '@/shared/components/ErrorBoundary';
import { AuthBootstrap } from '@/features/auth/components/AuthBootstrap';
import '@/shared/config/env';
import '@/locales/i18n';

interface AppProvidersProps {
  children: ReactNode;
}

export const AppProviders: React.FC<AppProvidersProps> = ({ children }) => {
  return (
    <HelmetProvider>
      <BrowserRouter>
        <QueryProvider>
          <ThemeProvider>
            <ErrorBoundary>
            <LocaleProvider>
              <OfflineBanner />
              <AuthBootstrap>
                <RealtimeProvider>
                  {children}
                </RealtimeProvider>
              </AuthBootstrap>
              <Toaster
                position="top-right"
                toastOptions={{
                  duration: 4000,
                  style: {
                    background: '#363636',
                    color: '#fff',
                  },
                  success: {
                    duration: 3000,
                    iconTheme: {
                      primary: '#10B981',
                      secondary: '#fff',
                    },
                  },
                  error: {
                    duration: 5000,
                    iconTheme: {
                      primary: '#EF4444',
                      secondary: '#fff',
                    },
                  },
                }}
              />
            </LocaleProvider>
            </ErrorBoundary>
          </ThemeProvider>
        </QueryProvider>
      </BrowserRouter>
    </HelmetProvider>
  );
};