"use client";

import React, { useEffect, useState, Suspense, lazy } from "react";
import { usePathname } from "next/navigation";
import { ToastProvider } from "@/components/Toast";
import { AnalyticsProvider } from "@/components/AnalyticsProvider";

// Lazy load heavy components to avoid webpack issues
const BackgroundBlobs = lazy(() => import("@/components/BackgroundBlobs"));
const ChatWidget = lazy(() => import("./ChatWidget"));

export default function ClientProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mounted, setMounted] = useState(false);
  const [is404Page, setIs404Page] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setMounted(true);
    // Check if we're on a 404 page by looking for the data attribute or pathname
    const check404 = () => {
      if (typeof window !== "undefined") {
        const has404Component = document.querySelector('[data-404-page]');
        const is404Path = pathname === '/404' || window.location.pathname === '/404' || window.location.pathname.includes('404');
        setIs404Page(!!has404Component || is404Path);
      }
    };
    // Check immediately and after a short delay
    check404();
    const timeout = setTimeout(check404, 100);
    const interval = setInterval(check404, 500);
    return () => {
      clearTimeout(timeout);
      clearInterval(interval);
    };
  }, [pathname]);

  return (
    <AnalyticsProvider>
      <ToastProvider>
        {mounted && (
          <Suspense fallback={null}>
            <BackgroundBlobs />
          </Suspense>
        )}
        <div className="relative z-10">{children}</div>
        {mounted && !is404Page && (
          <Suspense fallback={null}>
            <ChatWidget />
          </Suspense>
        )}
      </ToastProvider>
    </AnalyticsProvider>
  );
}