import { RouterProvider } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { router } from "./app/router";
import { useEffect } from 'react';
import { useThemeStore } from './hooks/use-theme';
import { useAuthStore } from './hooks/use-auth';

import { ToastProvider } from "./components/ui/Toast";

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

export const App = () => {
  const initTheme = useThemeStore(state => state.initTheme);
  const { isInitializing, checkAuth } = useAuthStore();
  
  useEffect(() => {
    initTheme();
    checkAuth();
  }, [initTheme, checkAuth]);

  if (isInitializing) {
    return (
      <div className="flex h-screen w-full flex-col items-center justify-center bg-ink-50 font-sans text-ink-900 transition-colors duration-500">
        <div className="relative flex flex-col items-center gap-6">
          <div className="relative">
            <div className="w-12 h-12 border-2 border-ink-200 rounded-full"></div>
            <div className="absolute inset-0 w-12 h-12 border-2 border-t-ink-900 rounded-full animate-spin"></div>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <h2 className="text-xs font-bold tracking-[0.2em] text-ink-800 uppercase animate-pulse">Initializing</h2>
            <p className="text-[10px] text-ink-400 tracking-wider">Securing connection...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <QueryClientProvider client={queryClient}>
      <ToastProvider>
        <RouterProvider router={router} />
      </ToastProvider>
    </QueryClientProvider>
  );
};
export default App;