AppInitializer.tsx

"use client";

import React, { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { OnboardingWizard } from "./onboarding/OnboardingWizard";
import { useAuth } from "@/contexts/AuthContext";
import { useUserStore } from "@/lib/userStore";

const LOCAL_STORAGE_KEY = "kagent-onboarding";

export function AppInitializer({ children }: { children: React.ReactNode }) {
  /** `null` = not read yet (must match server + first client paint to avoid hydration mismatch) */
  const [isOnboarding, setIsOnboarding] = useState<boolean | null>(null);
  const pathname = usePathname();
  const { user, userIdClaim } = useAuth();
  const setUserId = useUserStore((s) => s.setUserId);

  useEffect(() => {
    const identity = user?.[userIdClaim] as string | undefined;
    if (identity) {
      setUserId(identity);
    }
  }, [user, userIdClaim, setUserId]);

  useEffect(() => {
    const hasOnboarded = localStorage.getItem(LOCAL_STORAGE_KEY) === "true";
    // Defer so this isn’t a synchronous setState in the effect body (react-hooks/set-state-in-effect).
    const id = requestAnimationFrame(() => {
      setIsOnboarding(!hasOnboarded);
    });
    return () => cancelAnimationFrame(id);
  }, []);

  const handleOnboardingComplete = () => {
    localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
    setIsOnboarding(false);
  };

  const handleSkipWizard = () => {
    localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
    setIsOnboarding(false);
    // You might want to show a toast here as well, depending on your UI library setup
  };

  if (isOnboarding === null) {
    return null;
  }

  // Don't show the wizard on the login page
  if (isOnboarding && pathname !== '/login') {
    return <OnboardingWizard onOnboardingComplete={handleOnboardingComplete} onSkip={handleSkipWizard} />;
  }

  return <>{children}</>;
}