import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router';
import { ConfigProvider } from 'antd';
import { AppRoutes } from '@/routes';
import { ThemeProvider, useTheme } from '@/contexts/ThemeContext';
import { useThemeConfig } from '@/themes';

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

function ThemedApp() {
  const { effectiveThemeId } = useTheme();
  const configProps = useThemeConfig(effectiveThemeId);

  return (
    <ConfigProvider {...configProps}>
      <BrowserRouter>
        <AppRoutes />
      </BrowserRouter>
    </ConfigProvider>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <ThemedApp />
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default App;