import { RouterProvider } from "react-router-dom";
import { router } from "../router";
import { MagicBagProvider } from "./context/MagicBagContext";
import { ProfileProvider } from "./context/ProfileContext";
import { PageTrackingProvider } from "./context/PageTrackingContext";
import { InboxProvider } from "./context/InboxContext";
import { Toaster } from "sonner";

function RouteFallback() {
  return (
    <div
      className="fixed inset-0 flex items-center justify-center"
      style={{
        background:
          "radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.32) 0%, rgba(46, 27, 61, 1) 52%, rgba(35, 24, 62, 1) 100%)",
      }}
    >
      <div
        className="h-9 w-9 animate-spin rounded-full border-2 border-[#ffd6f0]/30 border-t-[#ff79cf]"
        aria-label="در حال بارگذاری"
      />
    </div>
  );
}

export default function App() {
  return (
    <ProfileProvider>
      <MagicBagProvider>
        <InboxProvider>
          <PageTrackingProvider>
            <RouterProvider router={router} fallbackElement={<RouteFallback />} />
            <Toaster 
              position="top-center" 
              richColors 
              dir="rtl"
              toastOptions={{
                style: {
                  fontFamily: "Alibaba, sans-serif",
                  direction: "rtl",
                  textAlign: "right",
                },
              }}
            />
          </PageTrackingProvider>
        </InboxProvider>
      </MagicBagProvider>
    </ProfileProvider>
  );
}
