import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'react-hot-toast';
import App from './App';
import { useAuthStore } from './stores/authStore';
import { env } from './config/env';
import { logger } from './utils/logger';
import { errorTracker } from './utils/errorTracking';
import './index.css';

// Initialize error tracking (ready for Sentry integration)
// Uncomment and configure when ready:
// errorTracker.init(import.meta.env.VITE_SENTRY_DSN, import.meta.env.VITE_SENTRY_ENVIRONMENT);

// Validate environment variables on startup
logger.info('Application starting', {
  appName: env.VITE_APP_NAME,
  apiUrl: env.VITE_API_BASE_URL,
  environment: import.meta.env.MODE,
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 30000,
    },
  },
});

function AppWithAuth() {
  const initialize = useAuthStore((state) => state.initialize);
  
  React.useEffect(() => {
    initialize();
  }, [initialize]);

  return <App />;
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <AppWithAuth />
        <Toaster
          position="top-right"
          toastOptions={{
            duration: 4000,
            style: {
              background: '#363636',
              color: '#fff',
            },
            success: {
              duration: 3000,
              iconTheme: {
                primary: '#4ade80',
                secondary: '#fff',
              },
            },
            error: {
              duration: 5000,
              iconTheme: {
                primary: '#ef4444',
                secondary: '#fff',
              },
            },
          }}
        />
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>
);

