"use client";

import React, { useEffect, useState } from "react";

// Lazy load providers to avoid webpack module resolution issues
const AnalyticsProvider = React.lazy(() =>
  import("@/components/AnalyticsProvider").then((mod) => ({
    default: mod.AnalyticsProvider,
  }))
);

const ToastProvider = React.lazy(() =>
  import("@/components/Toast").then((mod) => ({
    default: mod.ToastProvider,
  }))
);

const BackgroundBlobs = React.lazy(() =>
  import("@/components/BackgroundBlobs")
);

const ChatWidget = React.lazy(() => import("./ChatWidget"));

export default function RootProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div className="relative z-10">{children}</div>;
  }

  return (
    <React.Suspense fallback={<div className="relative z-10">{children}</div>}>
      <AnalyticsProvider>
        <ToastProvider>
          <BackgroundBlobs />
          <div className="relative z-10">{children}</div>
          <ChatWidget />
        </ToastProvider>
      </AnalyticsProvider>
    </React.Suspense>
  );
}