'use client';

import { useState, useEffect, ReactNode } from 'react';
import { FeatureFlagService } from '@/lib/feature/FeatureFlagService';

/**
 * ModeGuard - Conditional rendering component based on feature availability
 *
 * Usage:
 * <ModeGuard feature="platform.dashboard">
 *   <DashboardContent />
 * </ModeGuard>
 *
 * <ModeGuard feature="alpha_features">
 *   <AlphaContent />
 * </ModeGuard>
 */

interface ModeGuardProps {
  feature: string;
  children: ReactNode;
  fallback?: ReactNode;
}

/**
 * Client-side feature guard component
 * Uses API-driven feature flags instead of environment mode
 */
export function ModeGuard({ feature, children, fallback = null }: ModeGuardProps) {
  const [isMounted, setIsMounted] = useState(false);
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    
    // Check feature availability using API-driven service
    const checkFeature = async () => {
      try {
        const service = await FeatureFlagService.fromAPI();
        setIsEnabled(service.isEnabled(feature));
      } catch (error) {
        console.error('Error checking feature:', error);
        setIsEnabled(false);
      }
    };
    
    checkFeature();
  }, [feature]);

  if (!isMounted) {
    return <>{fallback}</>;
  }

  if (!isEnabled) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}

/**
 * Hook to check feature availability in client components
 */
export function useFeature(feature: string): boolean {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const checkFeature = async () => {
      try {
        const service = await FeatureFlagService.fromAPI();
        setIsEnabled(service.isEnabled(feature));
      } catch (error) {
        console.error('Error checking feature:', error);
        setIsEnabled(false);
      }
    };
    
    checkFeature();
  }, [feature]);

  return isEnabled;
}

/**
 * Hook to check multiple features
 */
export function useFeatures(features: string[]): Record<string, boolean> {
  const [featureStates, setFeatureStates] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const checkFeatures = async () => {
      try {
        const service = await FeatureFlagService.fromAPI();
        const states: Record<string, boolean> = {};
        
        features.forEach(feature => {
          states[feature] = service.isEnabled(feature);
        });
        
        setFeatureStates(states);
      } catch (error) {
        console.error('Error checking features:', error);
        const states: Record<string, boolean> = {};
        features.forEach(feature => {
          states[feature] = false;
        });
        setFeatureStates(states);
      }
    };
    
    checkFeatures();
  }, [features]);

  return featureStates;
}