import { Toaster } from "@/components/ui/toaster"
import { Toaster as SonnerToaster } from "sonner"
import NotificationsProvider from "@/components/notifications/NotificationsProvider"
import { QueryClientProvider } from '@tanstack/react-query'
import { queryClientInstance } from '@/lib/query-client'
import NavigationTracker from '@/lib/NavigationTracker'
import { pagesConfig } from './pages.config'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Suspense, startTransition } from 'react'
import PageNotFound from './lib/PageNotFound';
import DiscordOrderStatusPage from './pages/DiscordOrderStatus';
import OrderStatusPage from './pages/OrderStatus';
import AdminAnalyticsPage from './pages/AdminAnalytics';
import Metin2PrivateServerWonPage from './pages/Metin2PrivateServerWon';
import AdminUsersPage from './pages/AdminUsers';
import MyAnalyticsPage from './pages/MyAnalytics';
import MySubscriptionsPage from './pages/MySubscriptions';
import UserBadgesPage from './pages/UserBadges';
import AdminCryptoPaymentsPage from './pages/AdminCryptoPayments';
import Metin2CalculatorPage from './pages/Metin2Calculator';
import { AuthProvider, useAuth } from '@/lib/AuthContext';
import { ThemeProvider } from '@/lib/ThemeContext';
import UserNotRegisteredError from '@/components/UserNotRegisteredError';
import { CurrencyProvider } from '@/components/store/CurrencySelector';
import { LanguageProvider } from '@/lib/LanguageContext';

const PageLoader = () => (
  <div className="fixed inset-0 flex items-center justify-center bg-[#0a0818]">
    <div className="w-8 h-8 border-4 border-purple-600/30 border-t-purple-600 rounded-full animate-spin"></div>
  </div>
);

const { Pages, Layout, mainPage } = pagesConfig;
const mainPageKey = mainPage ?? Object.keys(Pages)[0];
const MainPageComponent = mainPageKey ? Pages[mainPageKey] : null;

const LayoutWrapper = ({ children, currentPageName }) => Layout ?
  <Layout currentPageName={currentPageName}>{children}</Layout>
  : <>{children}</>;

const AuthenticatedApp = () => {
  const { isLoadingAuth, isLoadingPublicSettings, authError } = useAuth();

  // Show loading spinner while checking app public settings or auth
  if (isLoadingPublicSettings || isLoadingAuth) {
    return (
      <div className="fixed inset-0 flex items-center justify-center">
        <div className="w-8 h-8 border-4 border-slate-200 border-t-slate-800 rounded-full animate-spin"></div>
      </div>
    );
  }

  // Handle authentication errors
  if (authError) {
    if (authError.type === 'user_not_registered') {
      return <UserNotRegisteredError />;
    }
    // Silently handle auth_required errors - don't crash the page
    // The auth system will redirect when needed
  }

  // Render the main app
  return (
    <Suspense fallback={<PageLoader />}>
    <Routes>
      <Route path="/" element={
        MainPageComponent ? (
          <LayoutWrapper currentPageName={mainPageKey}>
            <MainPageComponent />
          </LayoutWrapper>
        ) : (
          <div className="flex items-center justify-center min-h-screen">
            <p className="text-gray-500">No main page configured</p>
          </div>
        )
      } />
      {Object.entries(Pages).map(([path, Page]) => (
        <Route
          key={path}
          path={`/${path}`}
          element={
            <LayoutWrapper currentPageName={path}>
              <Suspense fallback={<PageLoader />}>
                <Page />
              </Suspense>
            </LayoutWrapper>
          }
        />
      ))}
      <Route path="/AdminAnalytics" element={<LayoutWrapper currentPageName="AdminAnalytics"><Suspense fallback={<PageLoader />}><AdminAnalyticsPage /></Suspense></LayoutWrapper>} />
      <Route path="/DiscordOrderStatus" element={<LayoutWrapper currentPageName="DiscordOrderStatus"><Suspense fallback={<PageLoader />}><DiscordOrderStatusPage /></Suspense></LayoutWrapper>} />
      <Route path="/OrderStatus" element={<LayoutWrapper currentPageName="OrderStatus"><Suspense fallback={<PageLoader />}><OrderStatusPage /></Suspense></LayoutWrapper>} />
      <Route path="/Metin2PrivateServerWon" element={<LayoutWrapper currentPageName="Metin2PrivateServerWon"><Suspense fallback={<PageLoader />}><Metin2PrivateServerWonPage /></Suspense></LayoutWrapper>} />
      <Route path="/AdminUsers" element={<LayoutWrapper currentPageName="AdminUsers"><Suspense fallback={<PageLoader />}><AdminUsersPage /></Suspense></LayoutWrapper>} />
      <Route path="/MyAnalytics" element={<LayoutWrapper currentPageName="MyAnalytics"><Suspense fallback={<PageLoader />}><MyAnalyticsPage /></Suspense></LayoutWrapper>} />
      <Route path="/MySubscriptions" element={<LayoutWrapper currentPageName="MySubscriptions"><Suspense fallback={<PageLoader />}><MySubscriptionsPage /></Suspense></LayoutWrapper>} />
      <Route path="/UserBadges" element={<LayoutWrapper currentPageName="UserBadges"><Suspense fallback={<PageLoader />}><UserBadgesPage /></Suspense></LayoutWrapper>} />
      <Route path="/AdminCryptoPayments" element={<LayoutWrapper currentPageName="AdminCryptoPayments"><Suspense fallback={<PageLoader />}><AdminCryptoPaymentsPage /></Suspense></LayoutWrapper>} />
      <Route path="/Metin2Calculator" element={<LayoutWrapper currentPageName="Metin2Calculator"><Suspense fallback={<PageLoader />}><Metin2CalculatorPage /></Suspense></LayoutWrapper>} />
      <Route path="*" element={<PageNotFound />} />
    </Routes>
    </Suspense>
  );
};


function App() {
  return (
    <ThemeProvider>
    <AuthProvider>
      <QueryClientProvider client={queryClientInstance}>
        <CurrencyProvider>
        <LanguageProvider>
        <Router>
            <NavigationTracker />
            <NotificationsProvider />
            <AuthenticatedApp />
          </Router>
          </LanguageProvider>
        </CurrencyProvider>
        <Toaster />
        <SonnerToaster
          position="bottom-right"
          toastOptions={{
            style: {
              background: "#12102a",
              border: "1px solid rgba(139,92,246,0.25)",
              color: "#f0eeff",
              borderRadius: "14px",
              fontSize: "13px",
            },
          }}
          richColors
          closeButton
        />
      </QueryClientProvider>
    </AuthProvider>
    </ThemeProvider>
  )
}

export default App