'use client';

import { ReactNode } from 'react';

/**
 * ModeGuard - Conditional rendering component based on application mode
 * 
 * Usage:
 * <ModeGuard mode="pre-launch">
 *   <PreLaunchContent />
 * </ModeGuard>
 * 
 * <ModeGuard mode="post-launch">
 *   <FullPlatformContent />
 * </ModeGuard>
 */

export type GuardMode = 'pre-launch' | 'post-launch';

interface ModeGuardProps {
  mode: GuardMode;
  children: ReactNode;
  fallback?: ReactNode;
}

/**
 * Client-side mode guard component
 * Note: For initial page load, rely on middleware for route protection
 * This component is for conditional UI rendering within accessible pages
 */
export function ModeGuard({ mode, children, fallback = null }: ModeGuardProps) {
  const currentMode = getClientMode();
  
  if (currentMode === mode) {
    return <>{children}</>;
  }
  
  return <>{fallback}</>;
}

/**
 * Get mode on client side from injected environment variable
 * Falls back to 'pre-launch' if not available
 */
function getClientMode(): GuardMode {
  if (typeof window === 'undefined') {
    return 'pre-launch';
  }
  
  const mode = process.env.NEXT_PUBLIC_GRIDPILOT_MODE;
  
  if (mode === 'post-launch') {
    return 'post-launch';
  }
  
  return 'pre-launch';
}

/**
 * Hook to get current mode in client components
 */
export function useAppMode(): GuardMode {
  return getClientMode();
}

/**
 * Hook to check if in pre-launch mode
 */
export function useIsPreLaunch(): boolean {
  return getClientMode() === 'pre-launch';
}

/**
 * Hook to check if in post-launch mode
 */
export function useIsPostLaunch(): boolean {
  return getClientMode() === 'post-launch';
}