import { useRequireMFA } from '@/hooks/useRequireMFA';
import { AutoMFAVerificationModal } from './AutoMFAVerificationModal';
import { MFAEnrollmentRequired } from './MFAEnrollmentRequired';
import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/hooks/use-toast';
import { handleError } from '@/lib/errorHandler';

interface MFAGuardProps {
  children: React.ReactNode;
}

/**
 * Smart MFA guard that automatically shows verification modal or enrollment alert
 * 
 * Usage:
 * ```tsx
 * <MFAGuard>
 *   <YourProtectedContent />
 * </MFAGuard>
 * ```
 */
export function MFAGuard({ children }: MFAGuardProps) {
  const { needsEnrollment, needsVerification, loading } = useRequireMFA();
  const { verifySession } = useAuth();
  const { toast } = useToast();
  
  const handleVerificationSuccess = async () => {
    try {
      // Refresh the session to get updated AAL level
      await verifySession();
      
      toast({
        title: 'Verification Successful',
        description: 'You can now access this area.',
      });
    } catch (error: unknown) {
      handleError(error, {
        action: 'MFA Session Verification',
        metadata: { context: 'MFAGuard' }
      });
      // Still attempt to show content - session might be valid despite refresh error
    }
  };

  const handleVerificationCancel = () => {
    // Redirect back to main dashboard
    window.location.href = '/';
  };

  // Show verification modal automatically when needed
  if (needsVerification) {
    return (
      <>
        <AutoMFAVerificationModal
          open={true}
          onSuccess={handleVerificationSuccess}
          onCancel={handleVerificationCancel}
        />
        {/* Show blurred content behind modal */}
        <div className="pointer-events-none opacity-50 blur-sm">
          {children}
        </div>
      </>
    );
  }

  // Show enrollment alert when user hasn't set up MFA
  if (needsEnrollment) {
    return <MFAEnrollmentRequired />;
  }

  // User has MFA and is verified - show content
  return <>{children}</>;
}