import React from "react";
import {
    BrowserRouter,
    Navigate,
    Route,
    Routes,
    useLocation,
    useNavigate,
} from "react-router-dom";
import { ToastContainer } from "react-toastify";
import { Suspense, useEffect } from "react";
import { ThemeProvider } from "./context/ThemeContext";
import { LanguageProvider } from "./context/LanguageContext";
import { CurrencyProvider } from "./context/CurrencyContext";
import { CartProvider } from "./context/CartContext";
import { CompanyProfileProvider } from "./context/CompanyProfileContext";
import { CategoriesProvider } from "./context/CategoriesContext";
import { ProvinceProvider } from "./context/ProvinceContext";
import { SettingsProvider } from "./context/SettingsContext";
import { HomepageDataProvider } from "./context/HomepageDataContext";
import { StorefrontDataProvider } from "./context/StorefrontDataContext";
import { ShopDataProvider } from "./context/ShopDataContext";
import GlobalDataTableConfig from "./components/Common/GlobalDataTableConfig";
import RouteScrollToTop from "./helper/RouteScrollToTop";
import RequireAuth from "./components/Auth/RequireAuth";
import CustomerAuthInitializer from "./components/Auth/CustomerAuthInitializer";
import { useCustomerAuthStore } from "./store/useCustomerAuthStore";
import { useAuthStore } from "./store/useAuthStore";
import CustomerAuthModal from "./features/website/components/Layout/CustomerAuthModal";
import { useCustomerAuthModalStore } from "./store/useCustomerAuthModalStore";
import Header from "./features/website/components/Layout/Header";

import AppRoutes from "./routes";
const ChatWidget = React.lazy(
    () => import("./features/chat/components/ChatWidget"),
);

function AppContent() {
    const location = useLocation();
    const customerUser = useCustomerAuthStore((state) => state.user);
    const adminUser = useAuthStore((state) => state.user);
    const navigate = useNavigate();

    const isAuthModalOpen = useCustomerAuthModalStore((s) => s.isOpen);
    const closeAuthModal = useCustomerAuthModalStore((s) => s.close);
    const consumeOnSuccess = useCustomerAuthModalStore(
        (s) => s.consumeOnSuccess,
    );

    useEffect(() => {
        // If user is logged in as customer and trying to access admin routes,
        // allow the admin login page but redirect everything else to it.
        const isAdminRoute = location.pathname.startsWith("/admin");
        const isAdminLogin = location.pathname === "/admin/login";

        // If admin is logged in, do not block admin routes even if a customer
        // session exists in the same browser.
        if (customerUser && !adminUser && isAdminRoute && !isAdminLogin) {
            navigate("/admin/login", {
                replace: true,
                state: { from: location.pathname + location.search },
            });
        }
    }, [customerUser, adminUser, location.pathname, location.search, navigate]);

    return (
        <>
            <ToastContainer
                position="top-right"
                autoClose={4000}
                hideProgressBar={false}
                newestOnTop={false}
                closeOnClick
                pauseOnFocusLoss
                draggable
                pauseOnHover
                theme="colored"
            />
            <GlobalDataTableConfig />
            <RouteScrollToTop />
            <Suspense
                fallback={
                    <div className="min-vh-100">
                        <Header />
                        <div
                            className="d-flex justify-content-center align-items-center"
                            style={{ minHeight: "400px" }}
                        >
                            <div
                                className="spinner-border text-primary"
                                role="status"
                            >
                                <span className="visually-hidden">
                                    Loading...
                                </span>
                            </div>
                        </div>
                    </div>
                }
            >
                <AppRoutes />
            </Suspense>

            {/* Global customer auth modal (used for add-to-cart login prompts) */}
            <CustomerAuthModal
                isOpen={isAuthModalOpen}
                onClose={closeAuthModal}
                onSuccess={() => {
                    const cb = consumeOnSuccess();
                    closeAuthModal();
                    if (typeof cb === "function") cb();
                }}
            />
        </>
    );
}

function App() {
    return (
        <ThemeProvider>
            <LanguageProvider>
                <CurrencyProvider>
                    <CartProvider>
                        <CompanyProfileProvider>
                            <CategoriesProvider>
                                <ProvinceProvider>
                                    <SettingsProvider>
                                        <CustomerAuthInitializer />
                                        <BrowserRouter>
                                            <HomepageDataProvider>
                                                <StorefrontDataProvider>
                                                    <ShopDataProvider>
                                                        <AppContent />
                                                        <ChatWidgetVisibilityGate />
                                                    </ShopDataProvider>
                                                </StorefrontDataProvider>
                                            </HomepageDataProvider>
                                        </BrowserRouter>
                                    </SettingsProvider>
                                </ProvinceProvider>
                            </CategoriesProvider>
                        </CompanyProfileProvider>
                    </CartProvider>
                </CurrencyProvider>
            </LanguageProvider>
        </ThemeProvider>
    );
}

const ChatWidgetVisibilityGate = () => {
    const location = useLocation();
    const storefrontExactRoutes = new Set([
        "/",
        "/shop",
        "/packages",
        "/cart",
        "/checkout",
        "/account",
        "/about",
        "/orders/track",
        "/wishlist",
    ]);
    const storefrontPrefixRoutes = ["/product/", "/package/"];
    const pathname = location.pathname;
    const isStorefrontRoute =
        storefrontExactRoutes.has(pathname) ||
        storefrontPrefixRoutes.some((prefix) => pathname.startsWith(prefix));

    if (!isStorefrontRoute) {
        return null;
    }

    return (
        <Suspense fallback={null}>
            <ChatWidget />
        </Suspense>
    );
};

export default App;