"use client";

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

// Dynamic import with SSR disabled to avoid framer-motion issues
const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
  ssr: false,
  loading: () => null,
});

const ChatWidget = dynamic(() => import("./ChatWidget").catch(() => ({ default: () => null })), {
  ssr: false,
  loading: () => null,
});

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]);

  // Wrap in multiple error boundaries to isolate failures
  return (
    <ErrorBoundary>
      <ErrorBoundary>
        <AnalyticsProvider>
          <ErrorBoundary>
            <ToastProvider>
              {mounted && <BackgroundBlobs />}
              <div className="relative z-10">{children}</div>
              {mounted && !is404Page && <ChatWidget />}
            </ToastProvider>
          </ErrorBoundary>
        </AnalyticsProvider>
      </ErrorBoundary>
    </ErrorBoundary>
  );
}
