"use client";

import "../lib/fontawesome";

import { useEffect } from "react";
import { ToastContainer } from "react-toastify";
import { Toaster } from "sonner";

import i18n from "../lib/i18n";
import { applyDirection } from "../lib/direction";
import { getCookie } from "@/context/utils/cookies";
import { COLOR_VARIABLES } from "@/lib/constants";

import DomainContextProvider from "@/context/helpers/domain/DomainContext";
import SettingProvider from "@/context/helpers/theme-setting/SettingProvider";
import { AuthProvider } from "@/context/helpers/auth";
import AddressProvider from "@/context/helpers/address/AddressContext";
import { ProductProvider } from "@/context/helpers/product";
import { CategoryProvider } from "@/context/helpers/category";
import { HomeDataProvider } from "@/context/helpers/Home";
import { SearchProvider } from "@/context/helpers/search";
import HomeContextProvider from "@/context/helpers/Home/HomeContext";
import { CompareContextProvider } from "@/context/helpers/Compare/CompareContext";
import { CurrencyContextProvider } from "@/context/helpers/Currency/CurrencyContext";
import CartContextProvider from "@/context/helpers/cart/CartContext";
import { WishlistContextProvider } from "@/context/helpers/wishlist/WishlistContext";
import FilterProvider from "@/context/helpers/filter/FilterProvider";
import OrderProvider from "@/context/helpers/order/OrderContext";
import CheckoutProvider from "@/context/helpers/checkout/CheckoutContext";

/**
 * Client-side provider tree — replaces the body of the old pages/_app.js.
 *
 * A single client boundary at the top of the App Router tree. Everything below
 * (layouts, pages, features) renders inside this same context, exactly like it
 * did under the Pages Router. The storefront shell (LayoutWrapper) now lives in
 * app/(store)/layout.jsx instead of here.
 */
export default function Providers({
  children,
  initialLayout,
  initialTheme,
  initialDarkTheme,
}) {
  useEffect(() => {
    // Clear any i18next localStorage cache to prevent conflicts
    const i18nextLng = localStorage.getItem("i18nextLng");
    if (i18nextLng) {
      localStorage.removeItem("i18nextLng");
    }

    // Read locale from cookies/localStorage (set by API)
    const cookieLocale = getCookie("locale");
    const localStorageLocale = localStorage.getItem("locale");
    const locale = cookieLocale || localStorageLocale || "en";

    // Apply direction to document
    applyDirection(locale);

    // Sync i18n with locale
    if (locale && locale !== i18n.language) {
      i18n.changeLanguage(locale);
    }

    // Listen for locale changes from API (via storage events or polling)
    const handleLocaleChange = () => {
      const newLocale = getCookie("locale") || localStorage.getItem("locale");
      if (newLocale && newLocale !== i18n.language) {
        i18n.changeLanguage(newLocale);
        applyDirection(newLocale);
      }
    };

    // Check for locale changes periodically (API might update it)
    const localeCheckInterval = setInterval(handleLocaleChange, 1000);

    // Initialize theme color from cookies first, then localStorage
    if (typeof window !== "undefined") {
      try {
        const savedColor = getCookie("color") || localStorage.getItem("color");
        if (savedColor) {
          document.documentElement.style.setProperty(
            `--${COLOR_VARIABLES.MAIN_COLOR_BASE}`,
            savedColor
          );
        }
      } catch (error) {
        console.warn("Failed to load theme color:", error);
      }
    }

    return () => clearInterval(localeCheckInterval);
  }, []);

  return (
    <>
      <DomainContextProvider>
        <SettingProvider
          initialLayout={initialLayout}
          initialTheme={initialTheme}
          initialDarkTheme={initialDarkTheme}
        >
          <AuthProvider>
            <AddressProvider>
              <ProductProvider>
                <CategoryProvider>
                  <HomeDataProvider>
                    <SearchProvider>
                      <HomeContextProvider>
                        <CompareContextProvider>
                          <CurrencyContextProvider>
                            <CartContextProvider>
                              <WishlistContextProvider>
                                <FilterProvider>
                                  <OrderProvider>
                                    <CheckoutProvider>
                                      {children}
                                    </CheckoutProvider>
                                  </OrderProvider>
                                </FilterProvider>
                              </WishlistContextProvider>
                            </CartContextProvider>
                          </CurrencyContextProvider>
                        </CompareContextProvider>
                      </HomeContextProvider>
                    </SearchProvider>
                  </HomeDataProvider>
                </CategoryProvider>
              </ProductProvider>
            </AddressProvider>
          </AuthProvider>
        </SettingProvider>
      </DomainContextProvider>

      <Toaster />
      <ToastContainer />
    </>
  );
}