'use client';

import { Provider } from 'react-redux';
import { store } from './store';
import { clearSession, hydrateSession } from './slices/sessionSlice';
import { useEffect } from 'react';
import { UnknownRecord } from '@/types';

/**
 * ReduxProvider wraps the application with the Redux store
 * and hydrates session data when available.
 *
 * Responsibilities:
 * - Provide Redux store to the React component tree
 * - Hydrate session state from server-provided session data
 * - Clear session when no session data is present
 *
 * @param children - React children components
 * @param sessionData - Optional session data for hydration
 */
export default function ReduxProvider({
  children,
  sessionData,
}: {
  children: React.ReactNode;

  /**
   * Session data passed from server or layout.
   */
  sessionData?: UnknownRecord | null;
}) {
  /**
   * Hydrate or clear session state on mount or when session data changes.
   */
  useEffect(() => {
    if (sessionData) {
      const {
        session_id,
        user,
        panelTheme,
        timezone,
        menuBookmarks,
        recentVisitedMenus,
      } = sessionData;

      store.dispatch(
        hydrateSession({
          sessionId: session_id,
          user,
          panelTheme,
          timezone,
          menuBookmarks,
          recentVisitedMenus,
        }),
      );
    } else {
      store.dispatch(clearSession());
    }
  }, [sessionData]);

  return <Provider store={store}>{children}</Provider>;
}