@trustchex/react-native-sdk 1.362.6 → 1.381.0

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -8,11 +8,9 @@ import {
   StatusBar,
   Vibration,
   Linking,
-  Image,
   ActivityIndicator,
   PermissionsAndroid,
-  Dimensions,
-  ScrollView,
+  Animated,
   type NativeSyntheticEvent,
   type ViewStyle,
 } from 'react-native';
@@ -23,7 +21,6 @@ import {
   type Frame,
 } from './TrustchexCamera';
 import { NativeModules } from 'react-native';
-import type { MRZFields } from '../Types/mrzFields';
 import mrzUtils from '../Libs/mrz.utils';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { useIsFocused } from '@react-navigation/native';
@@ -35,99 +32,59 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { speak, resetLastMessage } from '../Libs/tts.utils';
 import AppContext from '../Contexts/AppContext';
 import { useTheme } from '../Contexts/ThemeContext';
+import DebugOverlay, { TestModePanel } from './DebugOverlay';
+import {
+  getStatusMessage,
+  getFrameToScreenTransform,
+  transformBoundsToScreen,
+  getScanAreaBounds,
+  angleBetweenPoints,
+  detectDocumentType,
+  determineDocumentTypeToSet,
+  areMRZFieldsEqual,
+  hasRequiredMRZFields,
+  validateFacePosition,
+} from './IdentityDocumentCamera.utils';
+import {
+  handlePassportFlow,
+  handleIDFrontFlow,
+  handleIDBackFlow,
+  getNextStepAfterHologram,
+} from './IdentityDocumentCamera.flows';
+import {
+  HOLOGRAM_IMAGE_COUNT,
+  HOLOGRAM_DETECTION_THRESHOLD,
+  HOLOGRAM_DETECTION_RETRY_COUNT,
+  HOLOGRAM_CAPTURE_INTERVAL,
+  HOLOGRAM_MAX_FRAMES_WITHOUT_FACE,
+  MIN_BRIGHTNESS_THRESHOLD,
+  MAX_BRIGHTNESS_THRESHOLD,
+  FACE_EDGE_MARGIN_PERCENT,
+  MAX_CONSECUTIVE_QUALITY_FAILURES,
+  REQUIRED_CONSISTENT_MRZ_READS,
+  REQUIRED_CONSISTENT_DOCTYPE_DETECTIONS,
+  SIGNATURE_TEXT_REGEX,
+  MRZ_BLOCK_PATTERN,
+  PASSPORT_MRZ_PATTERN,
+  MIN_CARD_FACE_SIZE_PERCENT,
+} from './IdentityDocumentCamera.constants';
+import type {
+  DocumentScannedData,
+  BlockText,
+  IdentityDocumentCameraProps,
+  Face,
+  Barcode,
+  CornerPointsType,
+  LinesData,
+} from './IdentityDocumentCamera.types';
+
+// Re-export types for backward compatibility
+export type { DocumentScannedData, BlockText, IdentityDocumentCameraProps };
+export type { PhotoOptions } from './IdentityDocumentCamera.types';
 
 const { OpenCVModule } = NativeModules;
 
-export type DocumentScannedData = {
-  documentType: 'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN';
-  image: string;
-  faceImage?: string;
-  secondaryFaceImage?: string;
-  hologramImage?: string;
-  barcodeValue?: string;
-  mrzText?: string;
-  mrzFields?: MRZFields;
-};
-
-export type BlockText = {
-  blocks: BlocksData[];
-  resultText: string;
-  mrzOnlyText?: string; // MRZ-specific text from detected MRZ blocks only
-};
-
-type BlocksData = {
-  blockFrame: FrameType;
-  blockCornerPoints: CornerPointsType;
-  lines: LinesData;
-  blockLanguages: string[] | [];
-  blockText: string;
-};
-
-type CornerPointsType = [{ x: number; y: number }];
-
-type FrameType = {
-  boundingCenterX: number;
-  boundingCenterY: number;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-};
-
-type LinesData = [
-  lineCornerPoints: CornerPointsType,
-  elements: ElementsData,
-  lineFrame: FrameType,
-  lineLanguages: string[] | [],
-  lineText: string,
-];
-
-type ElementsData = [
-  elementCornerPoints: CornerPointsType,
-  elementFrame: FrameType,
-  elementText: string,
-];
-
-export type PhotoOptions = {
-  uri: string;
-  orientation?:
-    | 'landscapeRight'
-    | 'portrait'
-    | 'portraitUpsideDown'
-    | 'landscapeLeft';
-};
-
-export interface IdentityDocumentCameraProps {
-  onlyMRZScan: boolean;
-  onIdentityDocumentScanned: (scannedData: DocumentScannedData) => void;
-  testMode?: boolean;
-}
-
-interface Face {
-  bounds: { x: number; y: number; width: number; height: number };
-  rollAngle?: number;
-  pitchAngle?: number;
-  yawAngle?: number;
-  leftEyeOpenProbability?: number;
-  rightEyeOpenProbability?: number;
-  smilingProbability?: number;
-}
-
-interface Barcode {
-  rawValue: string;
-  displayValue: string;
-  format: number;
-  boundingBox: { left: number; top: number; right: number; bottom: number };
-  cornerPoints: Array<{ x: number; y: number }>;
-  value?: string;
-}
-
-const HOLOGRAM_IMAGE_COUNT = 12;
-const HOLOGRAM_DETECTION_THRESHOLD = 1000; // Lowered for better sensitivity while still filtering noise
-const HOLOGRAM_DETECTION_RETRY_COUNT = 3; // More attempts but faster each (~1s per attempt)
-const SECOND_FACE_DETECTION_RETRY_COUNT = 10;
-const MIN_BRIGHTNESS_THRESHOLD = 45;
-const MAX_CONSECUTIVE_QUALITY_FAILURES = 30;
+const AnimatedText = Animated.createAnimatedComponent(TextView);
 
 const IdentityDocumentCamera = ({
   onlyMRZScan,
@@ -149,7 +106,6 @@ const IdentityDocumentCamera = ({
     isTorchOnRef.current = val;
     _setIsTorchOn(val);
   }, []);
-  const [_exposure, _setExposure] = useState(0);
   const isCameraInitialized = useRef(false);
   const [currentFaceImage, setCurrentFaceImage] = useState<string | undefined>(
     undefined
@@ -172,7 +128,7 @@ const IdentityDocumentCamera = ({
   const [nextStep, setNextStep] = useState<
     'SCAN_ID_FRONT_OR_PASSPORT' | 'SCAN_ID_BACK' | 'SCAN_HOLOGRAM' | 'COMPLETED'
   >('SCAN_ID_FRONT_OR_PASSPORT');
-  const [completedStep, setCompletedStep] = useState<
+  const [_completedStep, setCompletedStep] = useState<
     'SCAN_ID_FRONT_OR_PASSPORT' | 'SCAN_ID_BACK' | 'SCAN_HOLOGRAM' | null
   >(null);
   const [detectedDocumentType, setDetectedDocumentType] = useState<
@@ -187,14 +143,12 @@ const IdentityDocumentCamera = ({
   const lastValidMRZText = useRef<string | null>(null);
   const lastValidMRZFields = useRef<any>(null);
   const validMRZConsecutiveCount = useRef(0);
-  const REQUIRED_CONSISTENT_MRZ_READS = 2; // Require 2 consistent valid reads
 
   // Document type stability tracking - require consistent detections from good quality frames
   const lastDetectedDocType = useRef<
     'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN'
   >('UNKNOWN');
   const consistentDocTypeCount = useRef(0);
-  const REQUIRED_CONSISTENT_DOCTYPE_DETECTIONS = 3; // Require 3 consistent detections from quality frames
 
   // Frame quality tracking - persist across callbacks
   const lastFrameQuality = useRef({
@@ -206,127 +160,20 @@ const IdentityDocumentCamera = ({
   // Barcode caching - persist detected barcode across frames for reliability
   const cachedBarcode = useRef<Barcode | null>(null);
 
+  // Error message flash animation
+  const errorFlashAnim = useRef(new Animated.Value(1)).current;
+
   // Test mode tracking
   const [testModeData, setTestModeData] = useState<{
     mrzText: string;
     timestamp: number;
   } | null>(null);
 
-  // Helper to compare MRZ field values (ignore raw text variations)
-  const areMRZFieldsEqual = useCallback(
-    (fields1: any, fields2: any): boolean => {
-      if (!fields1 || !fields2) return false;
-      // Compare critical fields that define document identity
-      return (
-        fields1.documentNumber === fields2.documentNumber &&
-        fields1.birthDate === fields2.birthDate &&
-        fields1.expirationDate === fields2.expirationDate &&
-        fields1.firstName === fields2.firstName &&
-        fields1.lastName === fields2.lastName &&
-        fields1.issuingState === fields2.issuingState
-      );
-    },
-    []
-  );
-
-  // Helper functions to reduce duplication
-
-  /**
-   * Check if all required MRZ fields are present
-   */
-  const hasRequiredMRZFields = useCallback(
-    (fields: any): boolean =>
-      !!fields?.firstName &&
-      !!fields?.lastName &&
-      !!fields?.documentNumber &&
-      !!fields?.birthDate,
-    []
-  );
-
-  /**
-   * Log detailed MRZ information for debugging and verification
-   */
-  const logMRZDetails = useCallback(
-    (
-      stepName: string,
-      fields: any,
-      mrzText: string | null,
-      consecutiveReads: number,
-      isDebugMode: boolean
-    ) => {
-      if (isDebugMode) {
-        debugLog(
-          'IdentityDocumentCamera',
-          `[${stepName}] MRZ validated successfully (consistent reads: ${consecutiveReads})`
-        );
-        debugLog('IdentityDocumentCamera', `[${stepName}] Final MRZ Fields:`, {
-          documentNumber: fields?.documentNumber,
-          name: `${fields?.lastName} ${fields?.firstName}`,
-          birthDate: fields?.birthDate,
-          expirationDate: fields?.expirationDate,
-          nationality: fields?.nationality || fields?.issuingState,
-          sex: fields?.sex,
-          personalId: fields?.optional1,
-        });
-        if (mrzText) {
-          const mrzLines = mrzText
-            .split('\n')
-            .map((l) => l.replace(/\s/g, ''))
-            .filter((l) => l.length >= 20 && /^[A-Z0-9<]+$/.test(l));
-          debugLog(
-            'IdentityDocumentCamera',
-            `[${stepName}] MRZ lines (${mrzLines.length}):`
-          );
-          mrzLines.forEach((line, idx) => {
-            debugLog('IdentityDocumentCamera', `  ${idx + 1}: ${line}`);
-          });
-        }
-      }
-    },
-    []
-  );
-
-  /**
-   * Log MRZ validation failure details for debugging
-   */
-  const logMRZValidationFailure = useCallback(
-    (
-      stepName: string,
-      hasRequiredFields: boolean,
-      parsedData: any,
-      retryCount: number,
-      isDebugMode: boolean
-    ) => {
-      if (isDebugMode) {
-        const debugInfo: any = {
-          hasRequiredFields,
-          isValid: parsedData?.valid,
-          retryCount,
-        };
-
-        if (parsedData?.valid) {
-          debugInfo.consistentReads = validMRZConsecutiveCount.current;
-          debugInfo.requiredReads = REQUIRED_CONSISTENT_MRZ_READS;
-          debugInfo.fieldsMatch = areMRZFieldsEqual(
-            lastValidMRZFields.current,
-            parsedData?.fields
-          );
-        }
-
-        debugLog(
-          'IdentityDocumentCamera',
-          `[${stepName}] MRZ detected but validation failed - retrying`,
-          debugInfo
-        );
-      }
-    },
-    [areMRZFieldsEqual]
-  );
-
   const lastHologramCaptureTime = useRef(0);
-  const HOLOGRAM_CAPTURE_INTERVAL = 250; // ms between captures - allows flash to fully stabilize for accurate diff
   const hologramFramesWithoutFace = useRef(0); // Track consecutive frames without face during hologram collection
-  const HOLOGRAM_MAX_FRAMES_WITHOUT_FACE = 30; // ~1 second at 30fps - safety timeout
+  const isHologramDetectionInProgress = useRef(false); // Prevent concurrent hologram detection calls
+  const isCompletionCallbackInvoked = useRef(false); // Prevent multiple callback invocations when COMPLETED
+  const isStepTransitionInProgress = useRef(false); // Prevent duplicate step transitions from rapid frames
 
   const faceDetectionErrorCount = useRef(0);
   const brightnessHistory = useRef<number[]>([]);
@@ -415,6 +262,8 @@ const IdentityDocumentCamera = ({
   useEffect(() => {
     if (isFocused && hasPermission && hasGuideShown) {
       setIsActive(true);
+      isCompletionCallbackInvoked.current = false; // Reset callback flag when starting new scan
+      isStepTransitionInProgress.current = false;
     } else {
       setIsActive(false);
       faceImages.current = [];
@@ -427,11 +276,14 @@ const IdentityDocumentCamera = ({
       lastValidMRZText.current = null;
       lastValidMRZFields.current = null;
       validMRZConsecutiveCount.current = 0;
-      lastValidMRZText.current = null;
-      lastValidMRZFields.current = null;
-      validMRZConsecutiveCount.current = 0;
-      cachedBarcode.current = null; // Clear cached barcode on new scan
+      cachedBarcode.current = null;
       lastVoiceGuidanceMessage.current = '';
+      isCompletionCallbackInvoked.current = false;
+      isStepTransitionInProgress.current = false;
+      // Clear all captured image states from previous scan
+      setCurrentFaceImage(undefined);
+      setCurrentHologramImage(undefined);
+      setCurrentSecondaryFaceImage(undefined);
       resetLastMessage();
     }
 
@@ -442,97 +294,37 @@ const IdentityDocumentCamera = ({
       setHologramImageCount(0);
       setLatestHologramFaceImage(undefined);
       lastVoiceGuidanceMessage.current = '';
+      isCompletionCallbackInvoked.current = false; // Reset callback flag on unmount
+      isStepTransitionInProgress.current = false;
+      // Clear all captured image states on unmount
+      setCurrentFaceImage(undefined);
+      setCurrentHologramImage(undefined);
+      setCurrentSecondaryFaceImage(undefined);
       resetLastMessage();
     };
   }, [isFocused, hasPermission, hasGuideShown]);
 
   useEffect(() => {
-    if (hasGuideShown) {
-      // Generate message - match UI display logic exactly for consistency
-      let message = '';
-
-      if (status === 'SCANNED') {
-        message =
-          completedStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-            ? detectedDocumentType === 'PASSPORT'
-              ? t('identityDocumentCamera.passportScanned')
-              : t('identityDocumentCamera.frontSideScanned')
-            : completedStep === 'SCAN_ID_BACK'
-              ? t('identityDocumentCamera.backSideScanned')
-              : completedStep === 'SCAN_HOLOGRAM'
-                ? t('identityDocumentCamera.hologramVerified')
-                : t('identityDocumentCamera.scanCompleted');
-      } else if (status === 'INCORRECT') {
-        message =
-          nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-            ? t('identityDocumentCamera.wrongSideFront')
-            : nextStep === 'SCAN_ID_BACK'
-              ? t('identityDocumentCamera.wrongSideBack')
-              : nextStep === 'SCAN_HOLOGRAM'
-                ? t('identityDocumentCamera.wrongSideFront')
-                : t('identityDocumentCamera.alignPhotoSide');
-      } else if (isBrightnessLow) {
-        message = t('identityDocumentCamera.lowBrightness');
-      } else if (isFrameBlurry) {
-        message = t('identityDocumentCamera.avoidBlur');
-      } else if (
-        status === 'SCANNING' &&
-        allElementsDetected &&
-        elementsOutsideScanArea.length === 0
-      ) {
-        message =
-          nextStep === 'SCAN_ID_BACK'
-            ? t('identityDocumentCamera.idCardBackDetected')
-            : detectedDocumentType === 'PASSPORT'
-              ? t('identityDocumentCamera.passportDetected')
-              : detectedDocumentType === 'ID_FRONT'
-                ? t('identityDocumentCamera.idCardFrontDetected')
-                : nextStep === 'SCAN_HOLOGRAM'
-                  ? t('identityDocumentCamera.alignHologram')
-                  : t('identityDocumentCamera.readingDocument');
-      } else if (elementsOutsideScanArea.length > 0) {
-        message = t('identityDocumentCamera.centerDocument');
-      } else if (
-        (status === 'SCANNING' || status === 'SEARCHING') &&
-        !allElementsDetected
-      ) {
-        message =
-          nextStep === 'SCAN_ID_BACK'
-            ? t('identityDocumentCamera.alignIDBack')
-            : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-              ? detectedDocumentType === 'PASSPORT'
-                ? t('identityDocumentCamera.alignPassport')
-                : detectedDocumentType === 'ID_FRONT'
-                  ? t('identityDocumentCamera.alignIDFront')
-                  : t('identityDocumentCamera.alignPhotoSide')
-              : nextStep === 'SCAN_HOLOGRAM'
-                ? t('identityDocumentCamera.alignHologram')
-                : t('identityDocumentCamera.readingDocument');
-      } else {
-        message =
-          nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-            ? status === 'SCANNING'
-              ? t('identityDocumentCamera.readingDocument')
-              : t('identityDocumentCamera.alignPhotoSide')
-            : nextStep === 'SCAN_HOLOGRAM'
-              ? t('identityDocumentCamera.alignHologram')
-              : nextStep === 'SCAN_ID_BACK'
-                ? status === 'SCANNING'
-                  ? t('identityDocumentCamera.readingDocument')
-                  : t('identityDocumentCamera.alignIDBackSide')
-                : nextStep === 'COMPLETED'
-                  ? t('identityDocumentCamera.scanCompleted')
-                  : '';
-      }
+    if (
+      !hasGuideShown ||
+      !appContext.currentWorkflowStep?.data?.voiceGuidanceActive
+    )
+      return;
 
-      if (
-        appContext.currentWorkflowStep?.data?.voiceGuidanceActive &&
-        message &&
-        message !== lastVoiceGuidanceMessage.current
-      ) {
-        lastVoiceGuidanceMessage.current = message;
-        speak(message, true);
-      }
+    const message = getStatusMessage(
+      nextStep,
+      status,
+      detectedDocumentType,
+      isBrightnessLow,
+      isFrameBlurry,
+      allElementsDetected,
+      elementsOutsideScanArea,
+      t
+    );
+
+    if (message && message !== lastVoiceGuidanceMessage.current) {
+      lastVoiceGuidanceMessage.current = message;
+      speak(message, true);
     }
   }, [
     appContext.currentWorkflowStep?.data?.voiceGuidanceActive,
@@ -541,8 +333,6 @@ const IdentityDocumentCamera = ({
     isFrameBlurry,
     nextStep,
     status,
-    completedStep,
-    currentFaceImage,
     detectedDocumentType,
     allElementsDetected,
     elementsOutsideScanArea,
@@ -567,6 +357,35 @@ const IdentityDocumentCamera = ({
     }
   }, [nextStep]);
 
+  // Reset completion callback flag when transitioning away from COMPLETED
+  useEffect(() => {
+    if (nextStep !== 'COMPLETED') {
+      isCompletionCallbackInvoked.current = false;
+    }
+    isStepTransitionInProgress.current = false;
+  }, [nextStep]);
+
+  // Error flash animation - flash red text when wrong side detected
+  useEffect(() => {
+    if (status === 'INCORRECT') {
+      errorFlashAnim.setValue(1);
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(errorFlashAnim, {
+            toValue: 0.3,
+            duration: 300,
+            useNativeDriver: false,
+          }),
+          Animated.timing(errorFlashAnim, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: false,
+          }),
+        ])
+      ).start();
+    }
+  }, [status, errorFlashAnim]);
+
   // Native OpenCV: detect hologram from sequence of face images
   const detectHologramNative = useCallback(
     async (images: string[]): Promise<[string, string] | []> => {
@@ -594,17 +413,22 @@ const IdentityDocumentCamera = ({
     []
   );
 
-  // Native OpenCV: compare two images for similarity
-  const areImagesSimilarNative = async (
-    image1: string,
-    image2: string,
-    threshold = 20000 // Relaxed threshold for better tolerance of lighting/angle variations
-  ): Promise<boolean> => {
+  // Native OpenCV: compare face visual similarity (device-side validation before backend FaceNet)
+  const compareFaceVisualSimilarityNative = async (
+    faceImage1: string,
+    faceImage2: string
+  ): Promise<{ similarity: number } | null> => {
     try {
-      if (!image1 || !image2) return false;
-      return await OpenCVModule.areImagesSimilar(image1, image2, threshold);
+      if (!faceImage1 || !faceImage2) return null;
+      return await OpenCVModule.compareFaceVisualSimilarity(
+        faceImage1,
+        faceImage2
+      );
     } catch (error) {
-      return false;
+      if (isDebugEnabled()) {
+        logError('[Face Visual Similarity] Comparison error:', error);
+      }
+      return null;
     }
   };
 
@@ -613,7 +437,8 @@ const IdentityDocumentCamera = ({
     facesToDetect: Face[],
     image: string,
     width: number,
-    height: number
+    height: number,
+    widerRightPadding = false
   ): Promise<string[]> => {
     if (!facesToDetect.length || !image || width <= 0 || height <= 0) {
       return [];
@@ -629,7 +454,8 @@ const IdentityDocumentCamera = ({
         image,
         faceBounds,
         width,
-        height
+        height,
+        widerRightPadding
       );
       return croppedFaces ?? [];
     } catch (error) {
@@ -638,6 +464,62 @@ const IdentityDocumentCamera = ({
     }
   };
 
+  // Check if face image has glare (brightness exceeds threshold)
+  const checkFaceGlare = async (faceImage: string): Promise<boolean> => {
+    try {
+      // Check entire face region for glare
+      const hasGlare = await OpenCVModule.isRectangularRegionBright(
+        faceImage,
+        0,
+        0,
+        100, // Full face width
+        100, // Full face height
+        MAX_BRIGHTNESS_THRESHOLD
+      );
+      return hasGlare;
+    } catch (error) {
+      return false; // Assume no glare on error
+    }
+  };
+
+  // Check if face is fully visible (not cropped at edges)
+  const isFaceFullyVisible = (
+    face: Face,
+    frameWidth: number,
+    frameHeight: number
+  ): boolean => {
+    const margin = FACE_EDGE_MARGIN_PERCENT;
+    const bounds = face.bounds;
+    return (
+      bounds.x >= frameWidth * margin &&
+      bounds.y >= frameHeight * margin &&
+      bounds.x + bounds.width <= frameWidth * (1 - margin) &&
+      bounds.y + bounds.height <= frameHeight * (1 - margin)
+    );
+  };
+
+  // Check if document image has glare
+  const checkDocumentGlare = async (
+    image: string,
+    width: number,
+    height: number
+  ): Promise<boolean> => {
+    try {
+      // Check center 80% region for glare (document area)
+      const hasGlare = await OpenCVModule.isRectangularRegionBright(
+        image,
+        Math.round(width * 0.1),
+        Math.round(height * 0.1),
+        Math.round(width * 0.8),
+        Math.round(height * 0.8),
+        MAX_BRIGHTNESS_THRESHOLD
+      );
+      return hasGlare;
+    } catch (error) {
+      return false;
+    }
+  };
+
   const setNextStepAndVibrate = useCallback(
     (
       nextStepType:
@@ -653,15 +535,23 @@ const IdentityDocumentCamera = ({
 
       // Turn flash on and reset hologram counters when entering SCAN_HOLOGRAM
       if (nextStepType === 'SCAN_HOLOGRAM' && fromStep !== 'SCAN_HOLOGRAM') {
-        setIsTorchOn(true);
-        // Reset hologram detection counters for fresh start
-        hologramDetectionCurrentRetryCount.current = 0;
-        secondaryFaceDetectionCurrentRetryCount.current = 0;
-        hologramFramesWithoutFace.current = 0;
-        faceImages.current = [];
-        hologramImageCountRef.current = 0;
-        setHologramImageCount(0);
-        setLatestHologramFaceImage(undefined);
+        const isMidCollection =
+          faceImages.current.length > 0 &&
+          faceImages.current.length < HOLOGRAM_IMAGE_COUNT;
+
+        if (!isMidCollection) {
+          setIsTorchOn(true);
+          hologramDetectionCurrentRetryCount.current = 0;
+          secondaryFaceDetectionCurrentRetryCount.current = 0;
+          hologramFramesWithoutFace.current = 0;
+          faceImages.current = [];
+          hologramImageCountRef.current = 0;
+          setHologramImageCount(0);
+          setLatestHologramFaceImage(undefined);
+          // Clear previous hologram state to prevent premature completion
+          setCurrentHologramImage(undefined);
+          setCurrentHologramMaskImage(undefined);
+        }
       }
 
       // Clean up flash and hologram state when leaving SCAN_HOLOGRAM step
@@ -671,15 +561,11 @@ const IdentityDocumentCamera = ({
         hologramImageCountRef.current = 0;
         setHologramImageCount(0);
         setLatestHologramFaceImage(undefined);
-        lastFacePosition.current = null; // Reset document plane reference
-        cachedBarcode.current = null; // Clear cached barcode
-        setDocumentPlaneBounds(null); // Clear visual overlay
-        setSecondaryFaceBounds(null); // Clear secondary face overlay
-        if (isDebugEnabled()) {
-          console.log(
-            '[Flash] Turning off flash and clearing hologram images when leaving step'
-          );
-        }
+        isHologramDetectionInProgress.current = false;
+        lastFacePosition.current = null;
+        cachedBarcode.current = null;
+        setDocumentPlaneBounds(null);
+        setSecondaryFaceBounds(null);
       }
 
       setNextStep(nextStepType);
@@ -687,7 +573,12 @@ const IdentityDocumentCamera = ({
 
       // Reset MRZ retry counter for each new step so retries start fresh
       mrzDetectionCurrentRetryCount.current = 0;
-      lastValidMRZText.current = null;
+      // Only clear MRZ text when entering SCAN_ID_BACK (new MRZ expected).
+      // Preserve across SCAN_HOLOGRAM so passport completion has MRZ data.
+      if (nextStepType === 'SCAN_ID_BACK') {
+        lastValidMRZText.current = null;
+        lastValidMRZFields.current = null;
+      }
       validMRZConsecutiveCount.current = 0;
       cachedBarcode.current = null; // Clear cached barcode on step change
 
@@ -701,6 +592,50 @@ const IdentityDocumentCamera = ({
     [setIsTorchOn]
   );
 
+  const transitionStepWithCallback = useCallback(
+    (
+      nextStepType:
+        | 'SCAN_ID_FRONT_OR_PASSPORT'
+        | 'SCAN_ID_BACK'
+        | 'SCAN_HOLOGRAM'
+        | 'COMPLETED',
+      fromStep: 'SCAN_ID_FRONT_OR_PASSPORT' | 'SCAN_ID_BACK' | 'SCAN_HOLOGRAM',
+      scannedData: DocumentScannedData
+    ) => {
+      if (isStepTransitionInProgress.current) {
+        return;
+      }
+
+      isStepTransitionInProgress.current = true;
+
+      // Torch only needed during SCAN_HOLOGRAM - turn off for all other transitions
+      if (nextStepType !== 'SCAN_HOLOGRAM') {
+        setIsTorchOn(false);
+      }
+
+      setNextStepAndVibrate(nextStepType, fromStep);
+
+      // Prevent the COMPLETED handler from firing a duplicate callback with
+      // potentially wrong detectedDocumentType. This transition already sends
+      // the correct scannedData below.
+      if (nextStepType === 'COMPLETED') {
+        isCompletionCallbackInvoked.current = true;
+      }
+
+      // Only notify parent for step completions, not intermediate transitions.
+      // The COMPLETED handler constructs final data from accumulated state.
+      // For ID cards, front/back data must be sent incrementally since parent stores them separately.
+      const isIntermediatePassportStep =
+        scannedData.documentType === 'PASSPORT' && nextStepType !== 'COMPLETED';
+      if (!isIntermediatePassportStep) {
+        setTimeout(() => {
+          onIdentityDocumentScanned(scannedData);
+        }, 1000);
+      }
+    },
+    [onIdentityDocumentScanned, setNextStepAndVibrate, setIsTorchOn]
+  );
+
   const handleFaceAndText = useCallback(
     async (
       text: string,
@@ -712,97 +647,98 @@ const IdentityDocumentCamera = ({
       elementsOutside?: boolean,
       scannedText?: BlockText
     ) => {
-      const detectDocumentType = (
-        facesParam: Face[],
-        ocrText: string,
-        mrzFields?: MRZFields,
-        frameWidthParam?: number,
-        mrzTextParam?: string | null
-      ) => {
-        // Relaxed signature detection: matches signature/imza variants and OCR errors
-        const hasSignatureMatch = /s[gi]g?n[au]?t[u]?r|imz[a]s?/i.test(ocrText);
-
-        if (isDebugEnabled()) {
-          console.log(
-            '[DocType] faces:',
-            facesParam.length,
-            'mrzFields:',
-            !!mrzFields,
-            'mrzText:',
-            !!mrzTextParam,
-            'textLen:',
-            ocrText?.length,
-            'hasSignature:',
-            hasSignatureMatch
-          );
-        }
+      // Classify faces: Primary (>= 5% of frame) vs Secondary (< 5%)
+      const primaryFaces = faces.filter(
+        (face) =>
+          face.bounds.width >= frameWidth * MIN_CARD_FACE_SIZE_PERCENT &&
+          face.bounds.height >= frameWidth * MIN_CARD_FACE_SIZE_PERCENT
+      );
 
-        // ID Back: no face + ID MRZ
-        if (facesParam.length === 0 && mrzFields?.documentCode === 'I') {
-          return 'ID_BACK';
-        }
+      const secondaryFaces = faces.filter(
+        (face) =>
+          face.bounds.width < frameWidth * MIN_CARD_FACE_SIZE_PERCENT ||
+          face.bounds.height < frameWidth * MIN_CARD_FACE_SIZE_PERCENT
+      );
 
-        // Passport: face + passport MRZ
-        if (facesParam.length > 0 && mrzFields?.documentCode === 'P') {
-          return 'PASSPORT';
-        }
+      // All faces for processing
+      const allDetectedFaces = faces;
+
+      // Validate primary face meets ICAO standards (face height 70-80% of image, aspect ratio ~1:1.25)
+      let primaryFaceICAOCompliant = false;
+      if (primaryFaces.length > 0) {
+        const face = primaryFaces[0];
+        const faceHeightPercent = (face.bounds.height / frameHeight) * 100;
+        const aspectRatio = face.bounds.width / face.bounds.height;
+
+        // ICAO: face height 70-80% of image, width:height ratio between 0.75 and 0.85
+        primaryFaceICAOCompliant =
+          faceHeightPercent >= 70 &&
+          faceHeightPercent <= 80 &&
+          aspectRatio >= 0.75 &&
+          aspectRatio <= 0.85;
+      }
 
-        // ID Front: face detected with signature text
-        if (facesParam.length > 0 && ocrText?.length >= 5) {
-          const hasSignature = hasSignatureMatch;
-          // Only turn off torch during initial scan step, not during SCAN_HOLOGRAM
-          if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-            setIsTorchOn(false);
-          }
+      if (
+        isDebugEnabled() &&
+        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' &&
+        faces.length > 0
+      ) {
+        debugLog('IdentityDocumentCamera', '[FACE DETECTION] All faces', {
+          totalFaces: faces.length,
+          primaryFacesCount: primaryFaces.length,
+          secondaryFacesCount: secondaryFaces.length,
+          frameWidth,
+          frameHeight,
+          minPrimarySize: frameWidth * MIN_CARD_FACE_SIZE_PERCENT,
+          primaryFaceICAOCompliant,
+          faceDetails: faces.map((f, i) => ({
+            index: i,
+            width: Math.round(f.bounds.width),
+            height: Math.round(f.bounds.height),
+            x: Math.round(f.bounds.x),
+            y: Math.round(f.bounds.y),
+            widthPercent:
+              ((f.bounds.width / frameWidth) * 100).toFixed(1) + '%',
+            heightPercent:
+              ((f.bounds.height / frameHeight) * 100).toFixed(1) + '%',
+            aspectRatio: (f.bounds.width / f.bounds.height).toFixed(2),
+            category:
+              f.bounds.width >= frameWidth * MIN_CARD_FACE_SIZE_PERCENT &&
+              f.bounds.height >= frameWidth * MIN_CARD_FACE_SIZE_PERCENT
+                ? 'primary'
+                : 'secondary',
+          })),
+        });
+      }
 
-          // Filter to card-sized faces only (min 5% of frame width to exclude tiny background faces)
-          const cardSizedFaces = frameWidthParam
-            ? facesParam.filter(
-                (face) =>
-                  face.bounds.width >= frameWidthParam * 0.05 &&
-                  face.bounds.height >= frameWidthParam * 0.05
-              )
-            : facesParam;
+      // Get scan area bounds for face filtering
+      const { isInsideScan } = getScanAreaBounds(frameWidth, frameHeight);
+
+      // Filter to only faces inside scan area (for hologram, exclude passport secondary faces)
+      const facesInsideScanArea = primaryFaces.filter((face) =>
+        isInsideScan(
+          face.bounds.x,
+          face.bounds.y,
+          face.bounds.width,
+          face.bounds.height
+        )
+      );
 
-          // CRITICAL: If passport MRZ pattern is detected but not parsed yet,
-          // return UNKNOWN instead of ID_FRONT to avoid misclassifying passports
-          // Passports always have MRZ visible on front starting with P<TUR or similar
-          if (
-            cardSizedFaces.length > 0 &&
-            !mrzFields?.documentCode &&
-            hasSignature
-          ) {
-            if (
-              mrzTextParam &&
-              mrzTextParam.length > 20 &&
-              /P<[A-Z]{3}/.test(mrzTextParam)
-            ) {
-              // Passport MRZ pattern detected (P<TUR, P<USA, etc.) but not parsed
-              // Could be passport with OCR errors - wait for proper parsing
-              if (isDebugEnabled()) {
-                console.log(
-                  '[DocType] Passport MRZ pattern (P<XXX) detected but not parsed - returning UNKNOWN to wait for proper classification'
-                );
-              }
-              return 'UNKNOWN';
-            }
-            return 'ID_FRONT';
-          }
-          // Also ensure flash is off when scan is completed
-          if (nextStep === 'COMPLETED' && isTorchOn) {
-            setIsTorchOn(false);
+      if (
+        isDebugEnabled() &&
+        nextStep === 'SCAN_HOLOGRAM' &&
+        primaryFaces.length > facesInsideScanArea.length
+      ) {
+        debugLog(
+          'IdentityDocumentCamera',
+          '[HOLOGRAM] Filtered out faces outside scan area',
+          {
+            totalFaces: primaryFaces.length,
+            facesInside: facesInsideScanArea.length,
+            filtered: primaryFaces.length - facesInsideScanArea.length,
           }
-        }
-
-        return 'UNKNOWN';
-      };
-
-      // Filter to card-sized faces only (min 5% of frame width to exclude tiny background faces)
-      const cardSizedFaces = faces.filter(
-        (face) =>
-          face.bounds.width >= frameWidth * 0.05 &&
-          face.bounds.height >= frameWidth * 0.05
-      );
+        );
+      }
 
       // Cache barcode when detected, use cached value if current frame has no barcode
       // This handles inconsistent barcode detection across frames
@@ -830,27 +766,100 @@ const IdentityDocumentCamera = ({
       }
 
       if (nextStep === 'COMPLETED') {
+        // Prevent multiple callback invocations from repeated frames
+        if (isCompletionCallbackInvoked.current) {
+          return;
+        }
+        isCompletionCallbackInvoked.current = true;
+
         setStatus('SCANNED');
-        return;
-      }
+        // Construct scanned data from available state and invoke callback
+        // Use MRZ document code as ultimate authority for document type —
+        // detectedDocumentType may be wrong if locked from early noisy frames
+        const completedDocType =
+          lastValidMRZFields.current?.documentCode === 'P'
+            ? 'PASSPORT'
+            : (detectedDocumentType as
+                | 'ID_FRONT'
+                | 'ID_BACK'
+                | 'PASSPORT'
+                | 'UNKNOWN');
+        const scannedData: DocumentScannedData = {
+          documentType: completedDocType,
+          image: image ?? '',
+          faceImage: currentFaceImage,
+          secondaryFaceImage: currentSecondaryFaceImage,
+          hologramImage: currentHologramImage,
+          mrzText: lastValidMRZText.current ?? undefined,
+          mrzFields: lastValidMRZFields.current ?? undefined,
+          barcodeValue: barcodeToUse?.rawValue ?? undefined,
+        };
 
-      if (elementsOutside) {
+        if (isDebugEnabled()) {
+          debugLog('IdentityDocumentCamera', '[COMPLETED] Final scanned data', {
+            documentType: completedDocType,
+            hasFaceImage: !!scannedData.faceImage,
+            hasSecondaryFace: !!scannedData.secondaryFaceImage,
+            secondaryFaceImageLength:
+              scannedData.secondaryFaceImage?.length || 0,
+            currentSecondaryFaceLength: currentSecondaryFaceImage?.length || 0,
+            hasHologramImage: !!scannedData.hologramImage,
+            hasMRZ: !!scannedData.mrzFields,
+            hasBarcode: !!scannedData.barcodeValue,
+          });
+        }
+
+        setTimeout(() => {
+          onIdentityDocumentScanned(scannedData);
+        }, 500);
         return;
       }
 
-      if (nextStep === 'SCAN_ID_BACK' && cardSizedFaces.length > 0) {
-        setStatus('INCORRECT');
+      // Skip elementsOutside check during SCAN_HOLOGRAM - allow document tilting for hologram capture
+      if (elementsOutside && nextStep !== 'SCAN_HOLOGRAM') {
         return;
       }
 
-      // Only crop and lock face when ID_FRONT or PASSPORT is confirmed
+      // Parse MRZ early to use for document type detection
+      // Use JavaScript MRZ validation with corrections
+      // Prefer MRZ-only text if available (from detected MRZ blocks),
+      // otherwise fall back to all text (for backward compatibility)
+      const textForValidation = scannedText?.mrzOnlyText || text;
+      const mrzValidationResult =
+        mrzUtils.validateMRZWithCorrections(textForValidation);
+      const parsedMRZData = {
+        valid: mrzValidationResult.valid,
+        fields: mrzValidationResult.fields || null,
+      };
+      // Extract raw MRZ lines from text if validation succeeded
+      const mrzText = parsedMRZData.valid ? mrzUtils.fixMRZ(text) : null;
+
+      // CRITICAL: Only detect document type during initial scan step
+      // For SCAN_HOLOGRAM and beyond, use the locked detectedDocumentType to avoid
+      // interruptions when user tilts document (MRZ may not be visible)
+      // However, if MRZ code 'P' is detected, always use PASSPORT — the lock may
+      // be wrong (ID_FRONT locked before passport MRZ became readable)
+      const documentType =
+        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
+          ? detectDocumentType(
+              primaryFaces,
+              text,
+              parsedMRZData?.fields,
+              frameWidth,
+              mrzText
+            )
+          : parsedMRZData?.fields?.documentCode === 'P'
+            ? 'PASSPORT'
+            : detectedDocumentType;
+
+      // Crop faces once document type is confirmed or we're past the initial step
       const shouldCropFaces =
-        detectedDocumentType === 'ID_FRONT' ||
-        detectedDocumentType === 'PASSPORT' ||
+        documentType === 'ID_FRONT' ||
+        documentType === 'PASSPORT' ||
         nextStep !== 'SCAN_ID_FRONT_OR_PASSPORT';
       const croppedFaces = shouldCropFaces
         ? await getFaceImages(
-            cardSizedFaces,
+            primaryFaces,
             image ?? '',
             frameWidth,
             frameHeight
@@ -859,95 +868,41 @@ const IdentityDocumentCamera = ({
 
       // Validate document plane consistency across all captures
       let facePositionValid = true;
-      if (cardSizedFaces.length > 0 && cardSizedFaces[0]) {
-        const currentFaceBounds = cardSizedFaces[0].bounds;
+      if (primaryFaces.length > 0 && primaryFaces[0]) {
+        const currentFaceBounds = primaryFaces[0].bounds;
         if (lastFacePosition.current) {
-          // Check if face position is within acceptable range
-          // Use looser tolerance during hologram step since flash toggling causes position jitter
-          const xDiff = Math.abs(
-            currentFaceBounds.x - lastFacePosition.current.x
-          );
-          const yDiff = Math.abs(
-            currentFaceBounds.y - lastFacePosition.current.y
-          );
-          const widthDiff = Math.abs(
-            currentFaceBounds.width - lastFacePosition.current.width
-          );
-          const heightDiff = Math.abs(
-            currentFaceBounds.height - lastFacePosition.current.height
-          );
-
-          const tolerance = nextStep === 'SCAN_HOLOGRAM' ? 0.5 : 0.2;
-          const xTolerance = lastFacePosition.current.width * tolerance;
-          const yTolerance = lastFacePosition.current.height * tolerance;
-          const sizeTolerance = lastFacePosition.current.width * tolerance;
-
-          facePositionValid =
-            xDiff <= xTolerance &&
-            yDiff <= yTolerance &&
-            widthDiff <= sizeTolerance &&
-            heightDiff <= sizeTolerance;
-
-          if (!facePositionValid) {
-            if (isDebugEnabled()) {
-              console.log(
-                `[DocPlane] Face position changed - document moved (xDiff=${xDiff.toFixed(1)}, yDiff=${yDiff.toFixed(1)}) - rejecting frame`
-              );
-            }
-          }
-
-          // Update reference position to follow gradual movement (sliding window)
-          lastFacePosition.current = {
-            x: currentFaceBounds.x,
-            y: currentFaceBounds.y,
-            width: currentFaceBounds.width,
-            height: currentFaceBounds.height,
-          };
-        } else {
-          // First capture - store reference position
-          lastFacePosition.current = {
-            x: currentFaceBounds.x,
-            y: currentFaceBounds.y,
-            width: currentFaceBounds.width,
-            height: currentFaceBounds.height,
-          };
-          console.log(
-            '[DocPlane] Stored reference face position for document plane validation'
+          facePositionValid = validateFacePosition(
+            currentFaceBounds,
+            lastFacePosition.current,
+            nextStep === 'SCAN_HOLOGRAM'
           );
         }
 
-        // Update visual bounds for debug overlay
-        // Transform face bounds from image coordinates to screen coordinates
-        if (facePositionValid && frameDimensions) {
-          const screen = Dimensions.get('window');
-
-          // Camera uses FILL_CENTER: scale to fill screen while maintaining aspect ratio
-          const frameAspect = frameDimensions.width / frameDimensions.height;
-          const screenAspect = screen.width / screen.height;
-
-          let scale: number;
-          let offsetX = 0;
-          let offsetY = 0;
-
-          if (frameAspect > screenAspect) {
-            // Frame is wider - scale by height, crop width
-            scale = screen.height / frameDimensions.height;
-            offsetX = (frameDimensions.width * scale - screen.width) / 2;
-          } else {
-            // Frame is taller - scale by width, crop height
-            scale = screen.width / frameDimensions.width;
-            offsetY = (frameDimensions.height * scale - screen.height) / 2;
-          }
+        // Update reference position (sliding window)
+        lastFacePosition.current = {
+          x: currentFaceBounds.x,
+          y: currentFaceBounds.y,
+          width: currentFaceBounds.width,
+          height: currentFaceBounds.height,
+        };
 
+        // Update debug overlay bounds
+        if (facePositionValid && frameDimensions) {
+          const { scale, offsetX, offsetY } = getFrameToScreenTransform(
+            frameDimensions.width,
+            frameDimensions.height
+          );
           const cropPadding = Math.max(
             currentFaceBounds.width * 0.15,
             currentFaceBounds.height * 0.15
           );
           setDocumentPlaneBounds({
-            x: currentFaceBounds.x * scale - offsetX,
-            y: currentFaceBounds.y * scale - offsetY,
-            width: currentFaceBounds.width * scale,
-            height: currentFaceBounds.height * scale,
+            ...transformBoundsToScreen(
+              currentFaceBounds,
+              scale,
+              offsetX,
+              offsetY
+            ),
             cropPadding: cropPadding * scale,
           });
         }
@@ -960,38 +915,40 @@ const IdentityDocumentCamera = ({
         shouldCropFaces &&
         croppedFaces.length > 0 &&
         croppedFaces[0] &&
-        facePositionValid
+        facePositionValid &&
+        !currentFaceImage
       ) {
-        if (!currentFaceImage) {
-          // First face detection after doc type confirmed - lock it for all subsequent steps
-          faceImageToUse = croppedFaces[0];
-          setCurrentFaceImage(croppedFaces[0]);
+        // Validate face quality before accepting
+        const faceFullyVisible =
+          primaryFaces[0] &&
+          isFaceFullyVisible(primaryFaces[0], frameWidth, frameHeight);
+        const hasGlare = await checkFaceGlare(croppedFaces[0]);
+
+        if (!faceFullyVisible || hasGlare) {
+          // Reject face with glare or partially visible
           if (isDebugEnabled()) {
-            console.log(
-              '[DocPlane] Locked primary face from validated document plane (docType: ' +
-                detectedDocumentType +
-                ')'
-            );
+            debugLog('IdentityDocumentCamera', '[FACE] Rejected', {
+              fullyVisible: faceFullyVisible,
+              hasGlare,
+            });
           }
+          // Continue scanning without locking this face
+        } else {
+          faceImageToUse = croppedFaces[0];
+          setCurrentFaceImage(croppedFaces[0]);
         }
       }
 
+      // Skip OCR text checks during SCAN_HOLOGRAM - flash and tilting make text unreadable
+      // but we only need face detection for hologram collection
       if (!text || text.length < 5 || !image) {
-        setStatus('SEARCHING');
-        return;
+        if (nextStep !== 'SCAN_HOLOGRAM') {
+          setStatus('SEARCHING');
+          return;
+        }
+        // During SCAN_HOLOGRAM, allow processing even if text is not readable
       }
 
-      // Use JavaScript MRZ validation with corrections
-      // Prefer MRZ-only text if available (from detected MRZ blocks),
-      // otherwise fall back to all text (for backward compatibility)
-      const textForValidation = scannedText?.mrzOnlyText || text;
-      const mrzValidationResult =
-        mrzUtils.validateMRZWithCorrections(textForValidation);
-      const parsedMRZData = {
-        valid: mrzValidationResult.valid,
-        fields: mrzValidationResult.fields || null,
-      };
-
       // Capture test mode data
       if (testMode && text && text.includes('<')) {
         const mrzOnlyText = scannedText?.mrzOnlyText || text;
@@ -1001,36 +958,12 @@ const IdentityDocumentCamera = ({
         });
       }
 
-      // Log MRZ validation details for debugging
-      if (isDebugEnabled() && text && text.includes('<')) {
-        const mrzLines = text
-          .split('\n')
-          .filter((line) => line.includes('<') && line.length > 20);
-        if (mrzLines.length >= 2) {
-          console.log(
-            '[MRZ Debug] Raw OCR text lines:',
-            mrzLines.map((l) => `"${l}"`)
-          );
-          console.log('[MRZ Debug] Validation result:', {
-            valid: mrzValidationResult.valid,
-            format: mrzValidationResult.format,
-            documentCode: mrzValidationResult.fields?.documentCode,
-            documentNumber: mrzValidationResult.fields?.documentNumber,
-            optional1: mrzValidationResult.fields?.optional1,
-            error: mrzValidationResult.error,
-          });
-        }
-      }
-
-      // Extract raw MRZ lines from text if validation succeeded
-      const mrzText = parsedMRZData.valid ? mrzUtils.fixMRZ(text) : null;
-
-      // MRZ stability check - require consistent valid reads to avoid OCR noise
-      // Compare parsed field values instead of raw text to handle OCR variations in filler characters
-      // Only proceed with MRZ if it's actually valid and has all required fields
+      // MRZ stability: require consistent valid reads across frames
+      // Skip during SCAN_HOLOGRAM - document type already locked
       const mrzHasRequiredFields = hasRequiredMRZFields(parsedMRZData?.fields);
 
       if (
+        nextStep !== 'SCAN_HOLOGRAM' &&
         mrzText &&
         parsedMRZData?.valid === true &&
         parsedMRZData?.fields &&
@@ -1039,23 +972,14 @@ const IdentityDocumentCamera = ({
         const currentFields = parsedMRZData.fields;
 
         if (areMRZFieldsEqual(lastValidMRZFields.current, currentFields)) {
-          // Same MRZ data detected again - increment counter
           validMRZConsecutiveCount.current++;
         } else {
-          // Different MRZ data - reset counter and store new data
-          if (isDebugEnabled()) {
-            console.log(
-              `[MRZ Stability] New MRZ detected, resetting counter (was ${validMRZConsecutiveCount.current}, doc: ${currentFields.documentNumber?.slice(-4)})`
-            );
-          }
           lastValidMRZFields.current = currentFields;
           lastValidMRZText.current = mrzText;
           validMRZConsecutiveCount.current = 1;
         }
-      } else {
-        // Invalid or no MRZ - don't reset completely, just skip this frame
-        // This allows temporary OCR noise without losing progress
       }
+      // else: Invalid/no MRZ - skip frame without resetting (allows temporary OCR noise)
 
       // Check if we have enough consistent valid reads
       const mrzStableAndValid =
@@ -1063,276 +987,149 @@ const IdentityDocumentCamera = ({
         parsedMRZData?.valid === true &&
         areMRZFieldsEqual(lastValidMRZFields.current, parsedMRZData?.fields);
 
-      // During SCAN_ID_BACK, handle MRZ/barcode directly without full document type detection
-      // This avoids the chicken-and-egg problem where detectDocumentType requires
-      // mrzFields.documentCode === 'I' but MRZ parsing may return different codes
+      // ============================================================================
+      // SCAN_ID_BACK STEP - Validate MRZ + barcode on back of ID card
+      // ============================================================================
       if (nextStep === 'SCAN_ID_BACK') {
-        // CRITICAL: Always check if wrong side is shown (front or passport when back is expected)
-        // ID_BACK should have NO faces and NO signature text
-        // Multiple indicators for robust detection:
-        const hasFaces = cardSizedFaces.length > 0;
-        const hasSignature = /signature|imza|İmza/i.test(text);
-        const hasPassportMRZ = parsedMRZData?.fields?.documentCode === 'P';
-        const hasPassportMRZPattern = mrzText && /P<[A-Z]{3}/.test(mrzText);
+        const handleIdBackStep = async () => {
+          // Guard: wrong side detection (front or passport when back is expected)
+          const hasFaces = primaryFaces.length > 0;
+          const hasSignature = /signature|imza|İmza/i.test(text);
+          const hasPassportMRZ = parsedMRZData?.fields?.documentCode === 'P';
+          const hasPassportMRZPattern =
+            mrzText && PASSPORT_MRZ_PATTERN.test(mrzText);
 
-        if (
-          hasFaces ||
-          hasSignature ||
-          hasPassportMRZ ||
-          hasPassportMRZPattern
-        ) {
-          if (isDebugEnabled()) {
-            console.log(
-              `[ID_BACK Scan] Wrong side detected - faces: ${hasFaces}, signature: ${hasSignature}, passport MRZ: ${hasPassportMRZ}, passport pattern: ${hasPassportMRZPattern}`
-            );
+          if (
+            hasFaces ||
+            hasSignature ||
+            hasPassportMRZ ||
+            hasPassportMRZPattern
+          ) {
+            setStatus('INCORRECT');
+            return;
           }
-          setStatus('INCORRECT');
-          return;
-        }
 
-        // SAFETY CHECK: If we detect passport during ID_BACK scan via state, skip this step
-        // This shouldn't happen but protects against edge cases
-        if (detectedDocumentType === 'PASSPORT') {
-          if (isDebugEnabled()) {
-            console.log(
-              '[ID_BACK Scan] ERROR: Passport detected in ID_BACK step - skipping to COMPLETED'
-            );
-          }
-          setNextStepAndVibrate('COMPLETED', 'SCAN_ID_BACK');
-          setTimeout(() => {
-            onIdentityDocumentScanned({
+          // Safety: passport somehow reached ID_BACK step
+          if (detectedDocumentType === 'PASSPORT') {
+            transitionStepWithCallback('COMPLETED', 'SCAN_ID_BACK', {
               image,
               documentType: 'PASSPORT',
               mrzText: mrzText ?? undefined,
               mrzFields: parsedMRZData?.fields,
             });
-          }, 1000);
-          return;
-        }
+            return;
+          }
 
-        const hasMRZ = !!mrzText;
-        const hasRequiredFields = hasRequiredMRZFields(parsedMRZData?.fields);
-        // CRITICAL: Only accept MRZ with valid checksums AND consistent reads
-        // AND ensure all required fields are present
-        const mrzAccepted =
-          parsedMRZData?.valid === true &&
-          hasRequiredFields &&
-          mrzStableAndValid;
-
-        // For Turkish ID cards, barcode should match MRZ optional1 (serial number)
-        // But some cards have encoding differences, so be lenient
-        const barcodeMatchesMRZ =
-          barcodeToUse?.rawValue?.trim() ===
-          parsedMRZData?.fields?.optional1?.trim();
-
-        // If barcode doesn't match exactly, check if it contains the optional1 value
-        const barcodeContainsMRZ =
-          barcodeToUse?.rawValue?.includes(
-            parsedMRZData?.fields?.optional1?.trim() || ''
-          ) ||
-          parsedMRZData?.fields?.optional1?.includes(
-            barcodeToUse?.rawValue?.trim() || ''
-          );
+          setElementsOutsideScanArea([]);
 
-        // Require barcode for all documents (no special card fallback)
-        // Accept if exact match OR if one contains the other (handles encoding differences)
-        const barcodeAccepted =
-          onlyMRZScan ||
-          barcodeMatchesMRZ ||
-          (!!barcodeToUse?.rawValue && barcodeContainsMRZ);
+          const flowResult = handleIDBackFlow(
+            mrzText,
+            parsedMRZData?.fields,
+            parsedMRZData?.valid === true,
+            mrzStableAndValid,
+            hasRequiredMRZFields(parsedMRZData?.fields),
+            barcodeToUse?.rawValue,
+            onlyMRZScan
+          );
 
-        // CRITICAL: Require all document elements to be in frame before accepting
-        // For ID_BACK: MRZ + barcode (check directly, not via state to avoid timing issues)
-        const hasBarcode = !!barcodeToUse?.rawValue;
-        const allRequiredElementsInFrame =
-          (hasMRZ && hasBarcode) || onlyMRZScan;
+          if (!flowResult.shouldProceed) {
+            mrzDetectionCurrentRetryCount.current++;
+            setStatus(mrzText ? 'SCANNING' : 'SEARCHING');
+            return;
+          }
 
-        // Don't block based on bounds - just ensure elements are present
-        setElementsOutsideScanArea([]);
+          // Check for glare on ID back before accepting
+          const hasGlare = await checkDocumentGlare(
+            image,
+            frameWidth,
+            frameHeight
+          );
+          if (hasGlare) {
+            if (isDebugEnabled()) {
+              debugLog(
+                'IdentityDocumentCamera',
+                '[ID_BACK] Rejected - glare detected'
+              );
+            }
+            setStatus('SCANNING');
+            return;
+          }
 
-        if (!allRequiredElementsInFrame && hasMRZ && mrzAccepted) {
           if (isDebugEnabled()) {
-            console.log(
-              '[ID_BACK Scan] MRZ valid but waiting for all elements in frame (MRZ + barcode)'
-            );
+            debugLog('IdentityDocumentCamera', '[ID_BACK] MRZ validated', {
+              documentNumber: parsedMRZData?.fields?.documentNumber,
+              reads: validMRZConsecutiveCount.current,
+            });
           }
-          setStatus('SCANNING');
-          return;
-        }
-
-        if (
-          hasMRZ &&
-          mrzAccepted &&
-          barcodeAccepted &&
-          allRequiredElementsInFrame
-        ) {
-          logMRZDetails(
-            'ID_BACK Scan',
-            parsedMRZData?.fields,
-            mrzText,
-            validMRZConsecutiveCount.current,
-            isDebugEnabled()
-          );
-          const scannedData: DocumentScannedData = {
+          setDetectedDocumentType('ID_BACK');
+          setStatus('SCANNED');
+          transitionStepWithCallback('COMPLETED', 'SCAN_ID_BACK', {
             image,
             documentType: 'ID_BACK',
             mrzText: mrzText ?? undefined,
             mrzFields: parsedMRZData?.fields,
             barcodeValue: barcodeToUse?.rawValue ?? undefined,
-          };
-          setDetectedDocumentType('ID_BACK');
-          setStatus('SCANNED');
-          setIsTorchOn(false);
-          setNextStepAndVibrate('COMPLETED', 'SCAN_ID_BACK');
-          setTimeout(() => {
-            onIdentityDocumentScanned(scannedData);
-          }, 1000);
-        } else {
-          if (hasMRZ && !mrzAccepted) {
-            logMRZValidationFailure(
-              'ID_BACK Scan',
-              hasRequiredFields,
-              parsedMRZData,
-              mrzDetectionCurrentRetryCount.current,
-              isDebugEnabled()
-            );
-          } else if (hasMRZ && mrzAccepted && !barcodeAccepted) {
-            if (isDebugEnabled()) {
-              console.log(
-                '[ID_BACK Scan] MRZ valid but barcode check failed - retrying',
-                {
-                  onlyMRZScan,
-                  hasBarcodeValue: !!barcodeToUse?.rawValue,
-                  barcodeMatchesMRZ,
-                  barcodeContainsMRZ,
-                  mrzOptional1: parsedMRZData?.fields?.optional1,
-                  barcodeValue: barcodeToUse?.rawValue,
-                  barcodeValueTrimmed: barcodeToUse?.rawValue?.trim(),
-                  optional1Trimmed: parsedMRZData?.fields?.optional1?.trim(),
-                  barcodeSource:
-                    barcodeToUse === cachedBarcode.current
-                      ? 'cached'
-                      : 'current',
-                }
-              );
-            }
-          }
-          mrzDetectionCurrentRetryCount.current++;
-          setStatus(hasMRZ ? 'SCANNING' : 'SEARCHING');
-        }
+          });
+        };
+
+        handleIdBackStep();
         return;
       }
 
-      const documentType = detectDocumentType(
-        cardSizedFaces,
-        text,
-        parsedMRZData?.fields,
-        frameWidth,
-        mrzText
-      );
+      // Turn off torch when ID_FRONT detected during initial scan
+      if (
+        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' &&
+        (documentType === 'ID_FRONT' || documentType === 'PASSPORT') &&
+        isTorchOnRef.current
+      ) {
+        setIsTorchOn(false);
+      }
 
-      // Update detected document type only during initial scan step
-      // CRITICAL: Only set document type from non-blurry, stable frames
-      // Once set to PASSPORT or definitively identified, preserve it to avoid incorrect flow transitions
+      // Lock document type from stable quality frames during initial scan.
+      // Also allow correcting ID_FRONT → PASSPORT when passport MRZ appears later.
+      // Passport MRZ may not be visible in early frames (while signature is),
+      // causing premature ID_FRONT lock that must be correctable.
       if (
         nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' &&
-        detectedDocumentType === 'UNKNOWN'
+        (detectedDocumentType === 'UNKNOWN' ||
+          detectedDocumentType === 'ID_FRONT')
       ) {
-        // Determine the document type to set based on current frame analysis
-        let docTypeToSet: 'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN' =
-          documentType;
-
-        if (documentType === 'PASSPORT') {
-          // Passport detected definitively - candidate for locking in
-          docTypeToSet = 'PASSPORT';
-        } else if (
-          documentType === 'UNKNOWN' &&
-          cardSizedFaces.length > 0 &&
-          parsedMRZData?.fields?.documentCode === 'P'
-        ) {
-          // Early passport detection: face detected + passport MRZ code (even if not fully valid yet)
-          docTypeToSet = 'PASSPORT';
-        } else if (documentType === 'ID_FRONT') {
-          // Check if this is actually a passport based on MRZ code
-          // Passports can be misdetected as ID_FRONT when signature-like text is visible
-          if (parsedMRZData?.fields?.documentCode === 'P') {
-            if (isDebugEnabled()) {
-              console.log(
-                '[DocType] Correcting misdetection: ID_FRONT → PASSPORT (MRZ code P)'
-              );
-            }
-            docTypeToSet = 'PASSPORT';
-          } else if (parsedMRZData?.fields?.documentCode === 'I') {
-            // MRZ confirms it's an ID card
-            docTypeToSet = 'ID_FRONT';
-          } else if (mrzText && /P<[A-Z]{3}/.test(mrzText)) {
-            // Passport MRZ pattern visible but not parsed yet - wait for proper classification
-            if (isDebugEnabled()) {
-              console.log(
-                '[DocType] Passport MRZ pattern detected but not parsed - waiting instead of locking as ID_FRONT'
-              );
-            }
-            docTypeToSet = 'UNKNOWN';
-          } else {
-            // No MRZ code and no passport pattern - safe to classify as ID_FRONT
-            // ID cards typically don't have MRZ on front (only on back)
-            docTypeToSet = 'ID_FRONT';
-          }
-        } else {
-          docTypeToSet = 'UNKNOWN';
-        }
+        const docTypeToSet = determineDocumentTypeToSet(
+          documentType,
+          primaryFaces,
+          parsedMRZData?.fields,
+          mrzText
+        );
 
-        // Only update document type state if:
-        // 1. Frame quality is acceptable (not blurry, good brightness)
-        // 2. Document type has been detected consistently for multiple frames
+        // If already locked as ID_FRONT, only allow correction to PASSPORT
         if (
-          lastFrameQuality.current.hasAcceptableQuality &&
-          docTypeToSet !== 'UNKNOWN'
+          detectedDocumentType === 'ID_FRONT' &&
+          docTypeToSet === 'PASSPORT'
         ) {
-          if (docTypeToSet === lastDetectedDocType.current) {
-            consistentDocTypeCount.current++;
-            if (isDebugEnabled()) {
-              console.log(
-                `[DocType Stability] Consistent detection: ${docTypeToSet} (${consistentDocTypeCount.current}/${REQUIRED_CONSISTENT_DOCTYPE_DETECTIONS})`
-              );
+          setDetectedDocumentType('PASSPORT');
+          consistentDocTypeCount.current = 0;
+          lastDetectedDocType.current = 'PASSPORT';
+        } else if (detectedDocumentType === 'UNKNOWN') {
+          if (
+            lastFrameQuality.current.hasAcceptableQuality &&
+            docTypeToSet !== 'UNKNOWN'
+          ) {
+            if (docTypeToSet === lastDetectedDocType.current) {
+              consistentDocTypeCount.current++;
+            } else {
+              lastDetectedDocType.current = docTypeToSet;
+              consistentDocTypeCount.current = 1;
             }
 
             if (
               consistentDocTypeCount.current >=
               REQUIRED_CONSISTENT_DOCTYPE_DETECTIONS
             ) {
-              // Stable detection confirmed - lock it in
-              if (isDebugEnabled()) {
-                console.log(
-                  `[DocType] Locked document type: ${docTypeToSet} (stable for ${consistentDocTypeCount.current} quality frames)`
-                );
-              }
               setDetectedDocumentType(docTypeToSet);
             }
-          } else {
-            // Document type changed - reset counter
-            if (isDebugEnabled()) {
-              console.log(
-                `[DocType Stability] Type changed: ${lastDetectedDocType.current} → ${docTypeToSet}, resetting counter`
-              );
-            }
-            lastDetectedDocType.current = docTypeToSet;
-            consistentDocTypeCount.current = 1;
-          }
-        } else if (
-          !lastFrameQuality.current.hasAcceptableQuality &&
-          docTypeToSet !== 'UNKNOWN'
-        ) {
-          // Poor quality frame - don't use for document type detection
-          if (isDebugEnabled()) {
-            console.log(
-              `[DocType Stability] Skipping poor quality frame (blurry: ${lastFrameQuality.current.isBlurry}, brightness: ${lastFrameQuality.current.brightness.toFixed(0)})`
-            );
           }
         }
       }
-      // Document type is now locked and won't be changed after initial scan
-      // Hologram and subsequent steps use the preserved detectedDocumentType state
 
       const scannedData: DocumentScannedData = {
         image,
@@ -1341,10 +1138,10 @@ const IdentityDocumentCamera = ({
         mrzFields: parsedMRZData?.fields,
       };
 
-      const isWrongSide =
-        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' && documentType === 'ID_BACK';
-
-      if (isWrongSide) {
+      if (
+        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' &&
+        documentType === 'ID_BACK'
+      ) {
         setStatus('INCORRECT');
         return;
       }
@@ -1354,238 +1151,366 @@ const IdentityDocumentCamera = ({
         scannedData.faceImage = faceImageToUse;
       }
 
+      const continueScanning = (incrementMrzRetry: boolean = false) => {
+        if (incrementMrzRetry) {
+          mrzDetectionCurrentRetryCount.current++;
+        }
+        setStatus('SCANNING');
+      };
+
       if (!onlyMRZScan) {
-        // Hologram detection during SCAN_HOLOGRAM step - ALWAYS use first/leftmost face ONLY
+        // Hologram detection during SCAN_HOLOGRAM step
         if (nextStep === 'SCAN_HOLOGRAM') {
-          if (isDebugEnabled()) {
-            console.log(
-              `[Hologram] In SCAN_HOLOGRAM step - currentHologramImage: ${!!currentHologramImage}, collected: ${faceImages.current.length}/${HOLOGRAM_IMAGE_COUNT}`
-            );
-          }
-
-          // Always crop to the same face region across all hologram frames so
-          // OpenCV receives consistently-sized images for comparison.
-          // Use current face bounds if available, otherwise fall back to last known position.
+          // CRITICAL: Only use faces inside scan area for hologram
+          // This prevents passport secondary faces (outside frame or on right side) from being used
           const hologramFaceBounds =
-            cardSizedFaces.length > 0 && cardSizedFaces[0]
-              ? cardSizedFaces[0].bounds
+            facesInsideScanArea.length > 0 && facesInsideScanArea[0]
+              ? facesInsideScanArea[0].bounds
               : lastFacePosition.current;
           let primaryFaceOnly: string | undefined;
           if (hologramFaceBounds && image) {
-            const hologramCropped = await getFaceImages(
-              [{ bounds: hologramFaceBounds, rollAngle: 0, yawAngle: 0 }],
-              image,
-              frameWidth,
-              frameHeight
-            );
-            primaryFaceOnly = hologramCropped[0] ?? faceImageToUse;
+            // Verify face is fully visible before using for hologram
+            const faceFullyVisible = hologramFaceBounds
+              ? hologramFaceBounds.x >= frameWidth * FACE_EDGE_MARGIN_PERCENT &&
+                hologramFaceBounds.y >=
+                  frameHeight * FACE_EDGE_MARGIN_PERCENT &&
+                hologramFaceBounds.x + hologramFaceBounds.width <=
+                  frameWidth * (1 - FACE_EDGE_MARGIN_PERCENT) &&
+                hologramFaceBounds.y + hologramFaceBounds.height <=
+                  frameHeight * (1 - FACE_EDGE_MARGIN_PERCENT)
+              : false;
+
+            if (faceFullyVisible) {
+              const hologramCropped = await getFaceImages(
+                [{ bounds: hologramFaceBounds, rollAngle: 0, yawAngle: 0 }],
+                image,
+                frameWidth,
+                frameHeight,
+                true // widerRightPadding for hologram detection
+              );
+              primaryFaceOnly = hologramCropped[0] ?? faceImageToUse;
+            } else {
+              // Face not fully visible - skip this frame
+              if (isDebugEnabled()) {
+                debugLog(
+                  'IdentityDocumentCamera',
+                  '[HOLOGRAM] Face not fully visible',
+                  {
+                    faceX: hologramFaceBounds.x,
+                    faceY: hologramFaceBounds.y,
+                    faceWidth: hologramFaceBounds.width,
+                    faceHeight: hologramFaceBounds.height,
+                    frameWidth,
+                    frameHeight,
+                  }
+                );
+              }
+              primaryFaceOnly = undefined;
+            }
           } else {
             primaryFaceOnly = faceImageToUse;
           }
 
           // Skip face position validation for hologram — flash toggling causes position jitter
           if (primaryFaceOnly) {
-            // Reset consecutive no-face counter since we have a face
             hologramFramesWithoutFace.current = 0;
 
             if (currentHologramImage) {
               scannedData.hologramImage = currentHologramImage;
             } else if (faceImages.current.length < HOLOGRAM_IMAGE_COUNT) {
-              // Add timing control to space out captures for better variation
-              const now = Date.now();
+              // Space out captures for better variation
               const timeSinceLastCapture =
-                now - lastHologramCaptureTime.current;
+                Date.now() - lastHologramCaptureTime.current;
 
               if (
                 faceImages.current.length === 0 ||
                 timeSinceLastCapture >= HOLOGRAM_CAPTURE_INTERVAL
               ) {
-                // Collect PRIMARY face image ONLY (always index 0) from same document plane
-                faceImages.current.push(primaryFaceOnly);
-                lastHologramCaptureTime.current = now;
-                hologramImageCountRef.current = faceImages.current.length;
-
-                // Only update state at first and last frame to minimize re-renders
-                if (
-                  faceImages.current.length === 1 ||
-                  faceImages.current.length === HOLOGRAM_IMAGE_COUNT
-                ) {
-                  setHologramImageCount(faceImages.current.length);
-                  setLatestHologramFaceImage(primaryFaceOnly);
+                // Keep torch on during hologram scan for consistent lighting
+                if (!isTorchOnRef.current) {
+                  setIsTorchOn(true);
                 }
 
-                if (isDebugEnabled()) {
-                  console.log(
-                    `[Hologram] Collected ${faceImages.current.length}/${HOLOGRAM_IMAGE_COUNT} face images`
+                // Check hologram face for glare
+                const hasGlare = await checkFaceGlare(primaryFaceOnly);
+                if (!hasGlare) {
+                  faceImages.current.push(primaryFaceOnly);
+                  lastHologramCaptureTime.current = Date.now();
+                  hologramImageCountRef.current = faceImages.current.length;
+
+                  if (isDebugEnabled()) {
+                    debugLog(
+                      'IdentityDocumentCamera',
+                      '[HOLOGRAM] Frame captured',
+                      {
+                        frameIndex: faceImages.current.length - 1,
+                        totalFrames: faceImages.current.length,
+                      }
+                    );
+                  }
+                } else if (isDebugEnabled()) {
+                  debugLog(
+                    'IdentityDocumentCamera',
+                    '[HOLOGRAM] Rejected glare frame',
+                    {
+                      collectedCount: faceImages.current.length,
+                    }
                   );
                 }
 
-                // Keep flash on during processing - will turn off when step changes
+                if (faceImages.current.length > 0) {
+                  // Update UI state at first and last frame only
+                  if (
+                    faceImages.current.length === 1 ||
+                    faceImages.current.length === HOLOGRAM_IMAGE_COUNT
+                  ) {
+                    setHologramImageCount(faceImages.current.length);
+                    setLatestHologramFaceImage(primaryFaceOnly);
+                  }
+                }
               }
             } else if (faceImages.current.length >= HOLOGRAM_IMAGE_COUNT) {
-              // Process collected full document images
-              if (isDebugEnabled()) {
-                console.log(
-                  `[Hologram] Processing ${faceImages.current.length} full document images`
-                );
+              // Guard: skip if already processing or max retries exhausted
+              if (isHologramDetectionInProgress.current) return;
+              if (
+                hologramDetectionCurrentRetryCount.current >=
+                HOLOGRAM_DETECTION_RETRY_COUNT
+              ) {
+                faceImages.current = [];
+                hologramImageCountRef.current = 0;
+                setHologramImageCount(0);
+                setLatestHologramFaceImage(undefined);
+                return;
               }
+
+              // Process collected face images for hologram detection
+              isHologramDetectionInProgress.current = true;
               try {
                 const [hologramMask, hologram] = await detectHologramNative(
                   faceImages.current
                 );
+                if (isDebugEnabled()) {
+                  debugLog(
+                    'IdentityDocumentCamera',
+                    '[Hologram] Native result',
+                    {
+                      hasHologram: !!hologram,
+                      hasHologramMask: !!hologramMask,
+                      hologramLength: hologram?.length || 0,
+                    }
+                  );
+                }
                 if (hologram) {
                   setCurrentHologramMaskImage(hologramMask);
                   scannedData.hologramImage = hologram;
                   setCurrentHologramImage(hologram);
                   if (isDebugEnabled()) {
-                    console.log('[Hologram] Detection successful');
+                    debugLog(
+                      'IdentityDocumentCamera',
+                      '[Hologram] ✓ Saved hologram image'
+                    );
                   }
                 } else {
                   if (isDebugEnabled()) {
-                    console.log('[Hologram] No hologram detected');
+                    debugLog(
+                      'IdentityDocumentCamera',
+                      '[Hologram] ✗ No hologram detected'
+                    );
                   }
                 }
               } catch (error) {
                 console.error('[Hologram] Processing error:', error);
               } finally {
-                // Keep flash on - will turn off when step changes
                 faceImages.current = [];
                 hologramImageCountRef.current = 0;
                 setHologramImageCount(0);
                 setLatestHologramFaceImage(undefined);
                 hologramDetectionCurrentRetryCount.current++;
-                if (isDebugEnabled()) {
-                  console.log(
-                    `[Hologram] Retry ${hologramDetectionCurrentRetryCount.current}/${HOLOGRAM_DETECTION_RETRY_COUNT}`
-                  );
-                }
+                isHologramDetectionInProgress.current = false;
+                // Turn off torch after detection completes
+                setIsTorchOn(false);
               }
             }
           } else {
-            // No face detected for hologram collection
-            // Track consecutive frames without face for safety timeout
             hologramFramesWithoutFace.current++;
-            if (isDebugEnabled()) {
-              console.log(
-                `[Hologram] No face detected - frame ${hologramFramesWithoutFace.current}/${HOLOGRAM_MAX_FRAMES_WITHOUT_FACE}`
-              );
-            }
           }
         } else if (currentHologramImage) {
           scannedData.hologramImage = currentHologramImage;
-        } else if (faceImages.current.length > 0) {
-          // Safety cleanup: not in hologram step but have images collected
-          faceImages.current = [];
-          hologramImageCountRef.current = 0;
-          setHologramImageCount(0);
-          setLatestHologramFaceImage(undefined);
-          if (isDebugEnabled()) {
-            console.log(
-              '[Hologram] Defensive cleanup - cleared images outside hologram step'
+        }
+
+        // Secondary face capture (continuous during initial scan and hologram detection)
+        // MLI (Multi Layer Image) is small secondary face on Turkish ID cards
+        if (
+          nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ||
+          nextStep === 'SCAN_HOLOGRAM'
+        ) {
+          if (isDebugEnabled() && allDetectedFaces.length > 1) {
+            debugLog(
+              'IdentityDocumentCamera',
+              '[MLI FACE] Entry conditions check',
+              {
+                hasCurrentSecondary: !!currentSecondaryFaceImage,
+                hasPrimaryFace: !!scannedData.faceImage,
+                totalFaces: allDetectedFaces.length,
+                facePositionValid,
+                willAttemptDetection:
+                  !currentSecondaryFaceImage &&
+                  !!scannedData.faceImage &&
+                  allDetectedFaces.length > 1 &&
+                  facePositionValid,
+              }
             );
           }
-        }
 
-        // SKIP secondary face detection during SCAN_HOLOGRAM - only focus on primary face
-        // Secondary face was already captured during initial scan (SCAN_ID_FRONT_OR_PASSPORT)
-        // During hologram, we only collect hologram images from primary face
-        if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-          // Capture secondary face - must be similar to main face AND from same document plane
           if (currentSecondaryFaceImage) {
             scannedData.secondaryFaceImage = currentSecondaryFaceImage;
           } else if (
-            !!scannedData.faceImage &&
-            croppedFaces.length > 1 &&
-            !!croppedFaces[1] &&
+            scannedData.faceImage &&
+            allDetectedFaces.length > 1 &&
             facePositionValid
           ) {
-            // Always validate similarity to ensure it's the same person on the same document
-            const isSimilar = await areImagesSimilarNative(
-              scannedData.faceImage,
-              croppedFaces[1],
-              15000 // Default threshold from main branch
+            // Detect MLI face (smaller than main face, to the right)
+            const primaryFace = primaryFaces[0];
+
+            if (isDebugEnabled() && primaryFace) {
+              debugLog(
+                'IdentityDocumentCamera',
+                '[MLI FACE] Starting detection',
+                {
+                  totalFaces: allDetectedFaces.length,
+                  primaryFaceSize: `${Math.round(primaryFace.bounds.width)}x${Math.round(primaryFace.bounds.height)}`,
+                  primaryFacePos: `x:${Math.round(primaryFace.bounds.x)} y:${Math.round(primaryFace.bounds.y)}`,
+                  otherFaces: allDetectedFaces
+                    .filter((f) => f !== primaryFace)
+                    .map((f) => ({
+                      size: `${Math.round(f.bounds.width)}x${Math.round(f.bounds.height)}`,
+                      pos: `x:${Math.round(f.bounds.x)} y:${Math.round(f.bounds.y)}`,
+                      isRight: f.bounds.x > primaryFace.bounds.x,
+                      verticalRange: `${Math.round(primaryFace.bounds.y - primaryFace.bounds.height * 0.3)}-${Math.round(primaryFace.bounds.y + primaryFace.bounds.height * 1.3)}`,
+                      inVerticalRange:
+                        f.bounds.y >=
+                          primaryFace.bounds.y -
+                            primaryFace.bounds.height * 0.3 &&
+                        f.bounds.y <=
+                          primaryFace.bounds.y +
+                            primaryFace.bounds.height * 1.3,
+                    })),
+                }
+              );
+            }
+
+            const potentialMLIFaces = allDetectedFaces.filter(
+              (f) =>
+                f !== primaryFace &&
+                f.bounds.x > primaryFace.bounds.x && // MLI is to the right of main face
+                f.bounds.y >=
+                  primaryFace.bounds.y - primaryFace.bounds.height * 0.3 && // Same vertical level (±30%)
+                f.bounds.y <=
+                  primaryFace.bounds.y + primaryFace.bounds.height * 1.3
             );
 
-            if (isSimilar) {
-              scannedData.secondaryFaceImage = croppedFaces[1];
-              setCurrentSecondaryFaceImage(scannedData.secondaryFaceImage);
+            if (isDebugEnabled()) {
+              debugLog(
+                'IdentityDocumentCamera',
+                '[MLI FACE] Position filter result',
+                {
+                  potentialMLICount: potentialMLIFaces.length,
+                }
+              );
+            }
+
+            if (potentialMLIFaces.length > 0 && potentialMLIFaces[0]) {
+              const secondaryFace = potentialMLIFaces[0];
 
-              // Update secondary face bounds for debug overlay
-              if (faces.length > 1 && faces[1] && frameDimensions) {
-                const screen = Dimensions.get('window');
-                const frameAspect =
-                  frameDimensions.width / frameDimensions.height;
-                const screenAspect = screen.width / screen.height;
+              // Crop MLI face separately
+              const mliFaceCropped = await getFaceImages(
+                [primaryFace, secondaryFace],
+                image ?? '',
+                frameWidth,
+                frameHeight
+              );
+
+              if (mliFaceCropped.length > 1 && mliFaceCropped[1]) {
+                // Visual similarity check with lenient threshold
+                const visualResult = await compareFaceVisualSimilarityNative(
+                  mliFaceCropped[0],
+                  mliFaceCropped[1]
+                );
+
+                const similarityScore = visualResult?.similarity || 0;
+                const isLikelySamePerson = similarityScore >= 0.2; // Very lenient: 20%
+
+                if (isDebugEnabled()) {
+                  debugLog(
+                    'IdentityDocumentCamera',
+                    '[MLI FACE] Similarity check',
+                    {
+                      visualSimilarity: similarityScore.toFixed(3),
+                      isLikelySamePerson,
+                      threshold: 0.2,
+                    }
+                  );
+                }
 
-                let scale: number;
-                let offsetX = 0;
-                let offsetY = 0;
+                if (isLikelySamePerson) {
+                  // Skip glare check for MLI - it's a small printed photo with different reflective properties
+                  // Backend will validate quality
+                  scannedData.secondaryFaceImage = mliFaceCropped[1];
+                  setCurrentSecondaryFaceImage(scannedData.secondaryFaceImage);
 
-                if (frameAspect > screenAspect) {
-                  scale = screen.height / frameDimensions.height;
-                  offsetX = (frameDimensions.width * scale - screen.width) / 2;
-                } else {
-                  scale = screen.width / frameDimensions.width;
-                  offsetY =
-                    (frameDimensions.height * scale - screen.height) / 2;
-                }
+                  if (isDebugEnabled()) {
+                    debugLog(
+                      'IdentityDocumentCamera',
+                      '[MLI FACE] Captured successfully',
+                      {
+                        similarity: similarityScore.toFixed(3),
+                        imageLength: mliFaceCropped[1]?.length || 0,
+                        imageSet: !!scannedData.secondaryFaceImage,
+                        stateSet: !!currentSecondaryFaceImage,
+                        primarySize: `${Math.round(primaryFace.bounds.width)}x${Math.round(primaryFace.bounds.height)}`,
+                        secondarySize: `${Math.round(secondaryFace.bounds.width)}x${Math.round(secondaryFace.bounds.height)}`,
+                      }
+                    );
+                  }
 
-                const scanLeft = (screen.width * 0.05 + offsetX) / scale;
-                const scanTop = (screen.height * 0.36 + offsetY) / scale;
-                const scanRight = (screen.width * 0.95 + offsetX) / scale;
-                const scanBottom = (screen.height * 0.64 + offsetY) / scale;
-                const isInsideScan = (
-                  x: number,
-                  y: number,
-                  w: number,
-                  h: number
-                ) =>
-                  x >= scanLeft &&
-                  y >= scanTop &&
-                  x + w <= scanRight &&
-                  y + h <= scanBottom;
-
-                const secondaryBounds = faces[1].bounds;
-                if (
-                  isInsideScan(
-                    secondaryBounds.x,
-                    secondaryBounds.y,
-                    secondaryBounds.width,
-                    secondaryBounds.height
-                  )
-                ) {
-                  setSecondaryFaceBounds({
-                    x: secondaryBounds.x * scale - offsetX,
-                    y: secondaryBounds.y * scale - offsetY,
-                    width: secondaryBounds.width * scale,
-                    height: secondaryBounds.height * scale,
-                  });
-                } else {
-                  setSecondaryFaceBounds(null);
+                  if (frameDimensions) {
+                    const { scale, offsetX, offsetY } =
+                      getFrameToScreenTransform(
+                        frameDimensions.width,
+                        frameDimensions.height
+                      );
+                    const secondaryBounds = secondaryFace.bounds;
+                    setSecondaryFaceBounds(
+                      transformBoundsToScreen(
+                        secondaryBounds,
+                        scale,
+                        offsetX,
+                        offsetY
+                      )
+                    );
+                  }
+                } else if (isDebugEnabled()) {
+                  debugLog(
+                    'IdentityDocumentCamera',
+                    '[MLI FACE] Rejected - similarity too low',
+                    { similarity: similarityScore.toFixed(3), threshold: 0.2 }
+                  );
                 }
               }
-
-              if (isDebugEnabled()) {
-                console.log(
-                  '[SecondaryFace] ✓ Captured and validated as similar to main face (same document plane)'
-                );
-              }
-            } else {
-              secondaryFaceDetectionCurrentRetryCount.current++;
-              if (isDebugEnabled()) {
-                console.log(
-                  '[SecondaryFace] ✗ Rejected - not similar enough to main face'
-                );
-              }
             }
           } else {
             secondaryFaceDetectionCurrentRetryCount.current++;
-            if (!facePositionValid && croppedFaces.length > 1) {
-              if (isDebugEnabled()) {
-                console.log(
-                  '[SecondaryFace] ✗ Rejected - document plane changed'
-                );
-              }
+            if (isDebugEnabled() && allDetectedFaces.length > 1) {
+              debugLog(
+                'IdentityDocumentCamera',
+                '[MLI FACE] Conditions not met',
+                {
+                  hasPrimaryFace: !!scannedData.faceImage,
+                  primaryFacesCount: primaryFaces.length,
+                  allDetectedFaces: allDetectedFaces.length,
+                  facePositionValid,
+                }
+              );
             }
           }
         } else if (currentSecondaryFaceImage) {
@@ -1594,344 +1519,213 @@ const IdentityDocumentCamera = ({
         }
       }
 
-      // UNIFIED SCAN_HOLOGRAM completion - ONLY check primary face and hologram collection
-      // Document type is already definitively determined before entering this step
+      // ============================================================================
+      // SCAN_HOLOGRAM STEP
+      // ============================================================================
       if (nextStep === 'SCAN_HOLOGRAM') {
-        // CRITICAL: Verify correct side is shown - hologram is ALWAYS on the front side with photo
-        // If wrong side detected, warn user immediately
-        const hasFaces = cardSizedFaces.length > 0;
-        const hasBarcode = !!barcode?.rawValue; // ID back has barcode, front doesn't
+        // Guard: barcode visible = back side shown
+        if (barcode?.rawValue) {
+          setStatus('INCORRECT');
+          return;
+        }
 
-        // For passport: back side has no photo and different text pattern
-        // For ID card: back side has no photo, has barcode
-        const isWrongSideForHologram = !hasFaces || hasBarcode;
+        const isCollecting = faceImages.current.length > 0;
+        const maxRetriesReached =
+          hologramDetectionCurrentRetryCount.current >=
+          HOLOGRAM_DETECTION_RETRY_COUNT;
 
-        if (isWrongSideForHologram) {
-          if (isDebugEnabled()) {
-            console.log(
-              `[SCAN_HOLOGRAM] Wrong side detected - no faces: ${!hasFaces}, has barcode: ${hasBarcode} - expecting front side with photo`
-            );
+        // Wait for face if not yet started collecting
+        if (!isCollecting && primaryFaces.length === 0) {
+          hologramFramesWithoutFace.current++;
+          if (
+            hologramFramesWithoutFace.current >=
+            HOLOGRAM_MAX_FRAMES_WITHOUT_FACE
+          ) {
+            setStatus('INCORRECT');
+            return;
           }
-          setStatus('INCORRECT');
+          continueScanning();
           return;
         }
 
-        // Safety timeout: if we can't detect face for too many consecutive frames, give up
-        const faceDetectionTimeout =
-          hologramFramesWithoutFace.current >= HOLOGRAM_MAX_FRAMES_WITHOUT_FACE;
+        // Complete when hologram captured OR retries exhausted (not mid-collection)
+        const stepComplete =
+          (!!scannedData.hologramImage ||
+            (maxRetriesReached && !isCollecting)) &&
+          !!faceImageToUse; // Require face before completing
+
+        if (stepComplete) {
+          // Ensure preserved MRZ data is included (current frame may not have
+          // readable MRZ due to flash/tilting during hologram capture)
+          if (!scannedData.mrzText && lastValidMRZText.current) {
+            scannedData.mrzText = lastValidMRZText.current;
+          }
+          if (!scannedData.mrzFields && lastValidMRZFields.current) {
+            scannedData.mrzFields = lastValidMRZFields.current;
+          }
 
-        // Don't skip if actively collecting images
-        const isActivelyCollecting =
-          faceImages.current.length > 0 &&
-          faceImages.current.length < HOLOGRAM_IMAGE_COUNT;
+          setStatus('SCANNED');
 
-        const hologramConditionMet =
-          !!scannedData.hologramImage ||
-          (hologramDetectionCurrentRetryCount.current >=
-            HOLOGRAM_DETECTION_RETRY_COUNT &&
-            !isActivelyCollecting) || // Don't skip if mid-collection
-          (faceDetectionTimeout && !isActivelyCollecting); // Don't timeout if mid-collection
-
-        // During hologram scan, we ONLY care about hologram collection - no other checks
-        // Secondary face, MRZ, document type checks are all skipped
-        // Document type was already definitively determined in the initial scan phase
-
-        // Log detailed state for debugging
-        if (isActivelyCollecting && isDebugEnabled()) {
-          console.log(
-            `[SCAN_HOLOGRAM] Actively collecting: ${faceImages.current.length}/${HOLOGRAM_IMAGE_COUNT} - continuing collection`
+          // Use scannedData.mrzFields which we just ensured has preserved MRZ
+          const mrzDocCode = scannedData.mrzFields?.documentCode;
+          const nextStepAfterHologram = getNextStepAfterHologram(
+            detectedDocumentType,
+            documentType,
+            mrzDocCode
           );
-        }
 
-        if (hologramConditionMet) {
-          if (faceDetectionTimeout && isDebugEnabled()) {
-            console.log(
-              '[SCAN_HOLOGRAM] Face detection timeout - proceeding without hologram'
-            );
-          }
-          setStatus('SCANNED');
-          if (nextStep !== 'SCAN_HOLOGRAM') {
-            setIsTorchOn(false);
-          }
-          // Route based on PRESERVED detectedDocumentType state (set during initial scan)
-          // Also check current frame's documentType and MRZ code as fallback
-          // Passport has no back side - go directly to COMPLETED
-          const isPassport =
-            detectedDocumentType === 'PASSPORT' ||
-            documentType === 'PASSPORT' ||
-            parsedMRZData?.fields?.documentCode === 'P';
-          if (isDebugEnabled()) {
-            console.log('[SCAN_HOLOGRAM] Document type check:', {
-              detectedDocumentType,
-              documentType,
-              mrzCode: parsedMRZData?.fields?.documentCode,
-              isPassport,
-            });
-          }
-          if (isPassport) {
-            if (isDebugEnabled()) {
-              console.log(
-                '[SCAN_HOLOGRAM] Passport detected - completing scan (no back side)'
-              );
-            }
-            setNextStepAndVibrate('COMPLETED', 'SCAN_HOLOGRAM');
-          } else {
-            if (isDebugEnabled()) {
-              console.log(
-                '[SCAN_HOLOGRAM] ID card detected - proceeding to back scan'
-              );
-            }
-            setNextStepAndVibrate('SCAN_ID_BACK', 'SCAN_HOLOGRAM');
-          }
-          setTimeout(() => {
-            onIdentityDocumentScanned(scannedData);
-          }, 1000);
+          transitionStepWithCallback(
+            nextStepAfterHologram,
+            'SCAN_HOLOGRAM',
+            scannedData
+          );
           return;
         }
-        // Still collecting or conditions not met - stay in SCAN_HOLOGRAM
-        // Don't fall through to document type branching
-        setStatus('SCANNING');
+
+        continueScanning();
         return;
       }
 
-      if (documentType === 'ID_FRONT') {
-        if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-          // CRITICAL: Verify this is actually an ID card, not a passport misdetected as ID_FRONT
-          // Passports can show signature-like text and be temporarily classified as ID_FRONT
-          if (parsedMRZData?.fields?.documentCode === 'P') {
+      // ============================================================================
+      // INITIAL SCAN STEP - Detect document type and validate
+      // ============================================================================
+      if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
+        // Determine which flow handler to use.
+        // Current-frame passport detection always takes precedence over a locked
+        // ID_FRONT — passport MRZ may not appear until later frames.
+        const flowDocumentType =
+          documentType === 'PASSPORT'
+            ? 'PASSPORT'
+            : detectedDocumentType !== 'UNKNOWN'
+              ? detectedDocumentType
+              : documentType;
+
+        const handlePassportInitialStep = async () => {
+          const flowResult = handlePassportFlow(
+            primaryFaces,
+            mrzText,
+            parsedMRZData?.fields,
+            mrzStableAndValid,
+            onlyMRZScan,
+            hasRequiredMRZFields(parsedMRZData?.fields),
+            !!faceImageToUse
+          );
+
+          if (!flowResult.shouldProceed) {
+            continueScanning(true);
+            return;
+          }
+
+          // Check for glare on passport before accepting
+          const hasGlare = await checkDocumentGlare(
+            image,
+            frameWidth,
+            frameHeight
+          );
+          if (hasGlare) {
             if (isDebugEnabled()) {
-              console.log(
-                '[ID_FRONT Scan] Detected as ID_FRONT but MRZ shows passport (code P) - waiting for passport branch'
+              debugLog(
+                'IdentityDocumentCamera',
+                '[PASSPORT] Rejected - glare detected'
               );
             }
-            setStatus('SCANNING');
+            continueScanning(false);
             return;
           }
 
-          const hasFace = cardSizedFaces.length > 0;
-          const hasSignature = /signature|imza|İmza/i.test(text);
-          const retryThreshold = 60;
-          const allowFaceOnly =
-            mrzDetectionCurrentRetryCount.current > retryThreshold;
-          const allRequiredElementsInFrame =
-            hasFace && (hasSignature || allowFaceOnly);
+          setDetectedDocumentType('PASSPORT');
+          setStatus('SCANNED');
 
-          setElementsOutsideScanArea([]);
+          const nextPassportStep =
+            flowResult.nextAction === 'PROCEED_TO_COMPLETED'
+              ? 'COMPLETED'
+              : 'SCAN_HOLOGRAM';
+          transitionStepWithCallback(
+            nextPassportStep,
+            'SCAN_ID_FRONT_OR_PASSPORT',
+            scannedData
+          );
+        };
 
-          if (!allRequiredElementsInFrame) {
-            console.log(
-              '[ID_FRONT Scan] Valid but waiting for all elements in frame (face + signature)'
-            );
-            mrzDetectionCurrentRetryCount.current++;
-            setStatus('SCANNING');
+        const handleIdFrontInitialStep = async () => {
+          const flowResult = handleIDFrontFlow(
+            primaryFaces,
+            text,
+            mrzText,
+            parsedMRZData?.fields,
+            mrzDetectionCurrentRetryCount.current
+          );
+
+          if (!flowResult.shouldProceed) {
+            if (flowResult.nextAction === 'REJECT_AS_PASSPORT') {
+              setDetectedDocumentType('UNKNOWN');
+              consistentDocTypeCount.current = 0;
+              lastDetectedDocType.current = 'UNKNOWN';
+            }
+            continueScanning(flowResult.nextAction !== 'REJECT_AS_PASSPORT');
             return;
           }
 
-          // CRITICAL: Final verification that this is definitively an ID card before proceeding
-          // Check if we have MRZ and if it indicates ID card (not passport)
-          if (parsedMRZData?.fields?.documentCode) {
-            if (parsedMRZData.fields.documentCode === 'I') {
-              if (isDebugEnabled()) {
-                console.log('[ID_FRONT Scan] MRZ confirms ID card (code I)');
-              }
-            } else if (parsedMRZData.fields.documentCode === 'P') {
-              if (isDebugEnabled()) {
-                console.log(
-                  '[ID_FRONT Scan] MRZ shows passport (code P) - rejecting as ID_FRONT'
-                );
-              }
-              setStatus('SCANNING');
-              return;
-            }
-          } else if (mrzText && /P<[A-Z]{3}/.test(mrzText)) {
-            // No parsed MRZ BUT passport MRZ pattern visible (P<TUR, P<USA, etc.)
-            // This is likely a passport with OCR errors - wait for proper parsing
+          // Check for glare on ID front before accepting
+          const hasGlare = await checkDocumentGlare(
+            image,
+            frameWidth,
+            frameHeight
+          );
+          if (hasGlare) {
             if (isDebugEnabled()) {
-              console.log(
-                '[ID_FRONT Scan] Passport MRZ pattern (P<XXX) visible but not parsed - waiting for passport classification'
+              debugLog(
+                'IdentityDocumentCamera',
+                '[ID_FRONT] Rejected - glare detected'
               );
             }
-            mrzDetectionCurrentRetryCount.current++;
-            setStatus('SCANNING');
+            continueScanning(false);
             return;
           }
-          // No MRZ or no passport pattern - proceed as ID card
-          // ID cards typically don't have MRZ on front side (only on back)
 
-          // CRITICAL: Lock document type state to ID_FRONT before proceeding
-          // This ensures hologram completion knows it's an ID card (needs ID_BACK step)
           setDetectedDocumentType('ID_FRONT');
           setStatus('SCANNED');
-          setIsTorchOn(false);
-          if (onlyMRZScan) {
-            // Passport has no back side - go directly to COMPLETED
-            // At this point detectedDocumentType is definitively set
-            if (detectedDocumentType === 'PASSPORT') {
-              setNextStepAndVibrate('COMPLETED', 'SCAN_ID_FRONT_OR_PASSPORT');
-            } else {
-              setNextStepAndVibrate(
-                'SCAN_ID_BACK',
-                'SCAN_ID_FRONT_OR_PASSPORT'
-              );
-            }
-            setTimeout(() => {
-              onIdentityDocumentScanned(scannedData);
-            }, 1000);
-          } else {
-            if (isDebugEnabled()) {
-              console.log(
-                '[ID_FRONT Scan] Confirmed as ID card - proceeding to hologram'
-              );
-            }
-            setNextStepAndVibrate('SCAN_HOLOGRAM', 'SCAN_ID_FRONT_OR_PASSPORT');
-            setTimeout(() => {
-              onIdentityDocumentScanned(scannedData);
-            }, 1000);
-          }
-        }
-        // Note: SCAN_HOLOGRAM completion is now handled in the unified block above
-      } else if (documentType === 'PASSPORT') {
-        if (
-          nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' &&
-          !scannedData.hologramImage
-        ) {
-          if (onlyMRZScan) {
-            const hasRequiredFields = hasRequiredMRZFields(
-              parsedMRZData?.fields
-            );
-            // CRITICAL: Only accept MRZ with valid checksums AND consistent reads
-            if (
-              !!scannedData.mrzText &&
-              hasRequiredFields &&
-              mrzStableAndValid
-            ) {
-              const hasFace = cardSizedFaces.length > 0;
-              const hasMRZ = !!mrzText;
-              const allRequiredElementsInFrame = hasFace && hasMRZ;
-
-              setElementsOutsideScanArea([]);
-
-              if (!allRequiredElementsInFrame) {
-                console.log(
-                  '[Passport Scan] MRZ valid but waiting for all elements in frame (face + MRZ)'
-                );
-                setStatus('SCANNING');
-                return;
-              }
-              logMRZDetails(
-                'Passport Scan',
-                parsedMRZData?.fields,
-                mrzText,
-                validMRZConsecutiveCount.current,
-                isDebugEnabled()
-              );
-              setDetectedDocumentType('PASSPORT');
-              setStatus('SCANNED');
-              setIsTorchOn(false);
-              setNextStepAndVibrate('COMPLETED', 'SCAN_ID_FRONT_OR_PASSPORT');
-              setTimeout(() => {
-                onIdentityDocumentScanned(scannedData);
-              }, 1000);
-              return; // CRITICAL: Exit after MRZ-only scan completes to prevent fall-through
-            } else {
-              if (!!scannedData.mrzText && !mrzStableAndValid) {
-                logMRZValidationFailure(
-                  'Passport Scan',
-                  hasRequiredFields,
-                  parsedMRZData,
-                  mrzDetectionCurrentRetryCount.current,
-                  isDebugEnabled()
-                );
-              }
-              mrzDetectionCurrentRetryCount.current++;
-              setStatus('SCANNING');
-              return; // Don't fall through to else-if
-            }
-          } else {
-            // Normal passport scan (with hologram) - require MRZ to be detected before proceeding
-            const hasFace = cardSizedFaces.length > 0;
-            const hasMRZ = !!mrzText;
-            const allRequiredElementsInFrame = hasFace && hasMRZ;
-
-            setElementsOutsideScanArea([]);
-
-            if (!allRequiredElementsInFrame) {
-              console.log(
-                '[Passport Scan] Valid but waiting for all elements in frame (face + MRZ)'
-              );
-              setStatus('SCANNING');
-              return;
-            }
 
-            // CRITICAL: Final verification - ensure MRZ definitively identifies this as passport
-            // This must pass before we can proceed to hologram
-            if (
-              !parsedMRZData?.fields?.documentCode ||
-              parsedMRZData.fields.documentCode !== 'P'
-            ) {
-              console.log(
-                '[Passport Scan] MRZ detected but not confirmed as passport (code:',
-                parsedMRZData?.fields?.documentCode || 'none',
-                ') - waiting for valid passport MRZ'
-              );
-              setStatus('SCANNING');
-              return;
-            }
+          const nextIdFrontStep = onlyMRZScan
+            ? 'SCAN_ID_BACK'
+            : 'SCAN_HOLOGRAM';
+          transitionStepWithCallback(
+            nextIdFrontStep,
+            'SCAN_ID_FRONT_OR_PASSPORT',
+            scannedData
+          );
+        };
 
-            console.log(
-              '[Passport Scan] MRZ confirmed passport (code P) - definitively identified, proceeding to hologram'
-            );
-            // CRITICAL: Lock document type state to PASSPORT before proceeding to hologram
-            // This ensures hologram completion knows it's a passport (no ID_BACK step)
-            setDetectedDocumentType('PASSPORT');
-            setStatus('SCANNED');
-            setIsTorchOn(false);
-            setNextStepAndVibrate('SCAN_HOLOGRAM', 'SCAN_ID_FRONT_OR_PASSPORT');
-            setTimeout(() => {
-              onIdentityDocumentScanned(scannedData);
-            }, 1000);
-          }
+        // PASSPORT FLOW: Face + MRZ with code 'P'
+        if (flowDocumentType === 'PASSPORT') {
+          handlePassportInitialStep();
+          return;
         }
-        // Note: SCAN_HOLOGRAM completion is now handled in the unified block above
-      } else if (documentType === 'ID_BACK') {
-        // ID_BACK is now handled in the early-return path above (SCAN_ID_BACK)
-        // This branch only triggers if somehow ID_BACK is detected during a non-back-scan step
-        mrzDetectionCurrentRetryCount.current++;
-        setStatus('SCANNING');
-      } else {
-        // Document type UNKNOWN - continue scanning until we can classify it
-        if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-          console.log(
-            '[Document Scan] Type UNKNOWN - waiting for clearer detection (faces:',
-            cardSizedFaces.length,
-            'mrzCode:',
-            parsedMRZData?.fields?.documentCode || 'none',
-            'text length:',
-            text.length,
-            ')'
-          );
+
+        // ID CARD FLOW: Face + No passport MRZ pattern
+        if (flowDocumentType === 'ID_FRONT') {
+          handleIdFrontInitialStep();
+          return;
         }
-        setStatus('SCANNING');
+
+        // UNKNOWN - Continue scanning
+        continueScanning();
+        return;
       }
     },
     [
       nextStep,
       frameDimensions,
       currentHologramImage,
-      currentFaceImage,
-      hasRequiredMRZFields,
-      areMRZFieldsEqual,
       detectedDocumentType,
+      currentFaceImage,
+      testMode,
       onlyMRZScan,
-      isTorchOn,
       setIsTorchOn,
-      setNextStepAndVibrate,
+      transitionStepWithCallback,
       onIdentityDocumentScanned,
-      logMRZDetails,
-      logMRZValidationFailure,
       currentSecondaryFaceImage,
       detectHologramNative,
-      mrzUtils,
     ]
   );
 
@@ -2082,61 +1876,18 @@ const IdentityDocumentCamera = ({
             },
             cornerPoints: b.cornerPoints ?? [],
           }));
-
-          // Log barcode detection for debugging (only when scanning ID back)
-          if (
-            barcodes.length > 0 &&
-            nextStep === 'SCAN_ID_BACK' &&
-            isDebugEnabled()
-          ) {
-            console.log(`[Barcode JS] Detected ${barcodes.length} barcode(s):`);
-            barcodes.forEach((b, idx) => {
-              const formatNames: { [key: number]: string } = {
-                5: 'PDF417',
-                64: 'QR_CODE',
-                1: 'CODE_128',
-                2: 'CODE_39',
-                13: 'EAN_13',
-                8: 'EAN_8',
-                4096: 'AZTEC',
-                16: 'DATA_MATRIX',
-              };
-              const formatName =
-                formatNames[b.format] || `UNKNOWN(${b.format})`;
-              console.log(
-                `  [${idx + 1}] ${formatName}: ${b.rawValue.substring(0, 50)}`
-              );
-            });
-          }
         }
 
         // Update all debug overlay bounds continuously when debug mode is enabled
         if (isDebugEnabled() && frameDimensions) {
-          const screen = Dimensions.get('window');
-          const frameAspect = frameDimensions.width / frameDimensions.height;
-          const screenAspect = screen.width / screen.height;
-
-          let scale: number;
-          let offsetX = 0;
-          let offsetY = 0;
-
-          if (frameAspect > screenAspect) {
-            scale = screen.height / frameDimensions.height;
-            offsetX = (frameDimensions.width * scale - screen.width) / 2;
-          } else {
-            scale = screen.width / frameDimensions.width;
-            offsetY = (frameDimensions.height * scale - screen.height) / 2;
-          }
-
-          const scanLeft = (screen.width * 0.05 + offsetX) / scale;
-          const scanTop = (screen.height * 0.36 + offsetY) / scale;
-          const scanRight = (screen.width * 0.95 + offsetX) / scale;
-          const scanBottom = (screen.height * 0.64 + offsetY) / scale;
-          const isInsideScan = (x: number, y: number, w: number, h: number) =>
-            x >= scanLeft &&
-            y >= scanTop &&
-            x + w <= scanRight &&
-            y + h <= scanBottom;
+          const { scale, offsetX, offsetY } = getFrameToScreenTransform(
+            frameDimensions.width,
+            frameDimensions.height
+          );
+          const { isInsideScan } = getScanAreaBounds(
+            frameDimensions.width,
+            frameDimensions.height
+          );
 
           // Update barcode bounds
           if (barcodes.length > 0 && barcodes[0]) {
@@ -2150,15 +1901,12 @@ const IdentityDocumentCamera = ({
                 x: c.x * scale - offsetX,
                 y: c.y * scale - offsetY,
               }));
-              // Calculate angle from first two corners (bottom edge)
-              const dx = transformedCorners[1].x - transformedCorners[0].x;
-              const dy = transformedCorners[1].y - transformedCorners[0].y;
-              angle = Math.atan2(dy, dx) * (180 / Math.PI);
+              angle = angleBetweenPoints(
+                transformedCorners[0],
+                transformedCorners[1]
+              );
             }
 
-            if (isDebugEnabled()) {
-              console.log('[Debug] Barcode detected:', { bbox, angle });
-            }
             setBarcodeBounds({
               x: bbox.left * scale - offsetX,
               y: bbox.top * scale - offsetY,
@@ -2228,46 +1976,21 @@ const IdentityDocumentCamera = ({
 
           // Detect MRZ and signature text areas continuously
           if (textBlocks.length > 0) {
-            console.log('[Debug] Text blocks count:', textBlocks.length);
-            // Find MRZ-like text blocks (bottom area, contains MRZ-like characters)
-            // More strict pattern: look for blocks with 8+ consecutive uppercase/numbers/< characters AND
-            // must contain at least one '<' character (true MRZ characteristic)
-            const mrzPattern = /[A-Z0-9<]{8,}.*</i;
-            const bottomHalf = frame.height * 0.5; // Increased from 0.67 to catch more MRZ blocks
-
-            // Log bottom area blocks for debugging
-            const bottomBlocks = textBlocks.filter(
-              (block) => block.blockFrame && block.blockFrame.y > bottomHalf
-            );
-            if (bottomBlocks.length > 0) {
-              console.log(
-                '[Debug] Bottom area blocks:',
-                bottomBlocks.map((b) => b.text.substring(0, 30))
-              );
-            }
-
+            const bottomHalf = frame.height * 0.5;
             const mrzBlocks = textBlocks.filter(
               (block) =>
                 block.blockFrame &&
                 block.blockFrame.y > bottomHalf &&
-                mrzPattern.test(block.text)
+                MRZ_BLOCK_PATTERN.test(block.text)
             );
 
-            console.log('[Debug] MRZ blocks found:', mrzBlocks.length);
             if (mrzBlocks.length > 0) {
-              // Extract MRZ-only text from detected blocks (sorted by Y position for correct line order)
               const sortedMrzBlocks = [...mrzBlocks].sort(
                 (a, b) => (a.blockFrame?.y || 0) - (b.blockFrame?.y || 0)
               );
               scannedText.mrzOnlyText = sortedMrzBlocks
                 .map((b) => b.text)
                 .join('\n');
-              if (isDebugEnabled()) {
-                console.log(
-                  '[MRZ Extraction] Using only MRZ blocks:',
-                  scannedText.mrzOnlyText.substring(0, 100)
-                );
-              }
 
               const minX = Math.min(...mrzBlocks.map((b) => b.blockFrame!.x));
               const minY = Math.min(...mrzBlocks.map((b) => b.blockFrame!.y));
@@ -2277,30 +2000,17 @@ const IdentityDocumentCamera = ({
               const maxY = Math.max(
                 ...mrzBlocks.map((b) => b.blockFrame!.y + b.blockFrame!.height)
               );
-
-              // Collect all corner points from MRZ blocks
               const allCornerPoints = mrzBlocks
                 .flatMap((b) => b.cornerPoints || [])
                 .map((c) => ({
                   x: c.x * scale - offsetX,
                   y: c.y * scale - offsetY,
                 }));
+              const angle =
+                allCornerPoints.length >= 2
+                  ? angleBetweenPoints(allCornerPoints[0], allCornerPoints[1])
+                  : 0;
 
-              let angle = 0;
-              if (allCornerPoints.length >= 2) {
-                // Calculate angle from first two points
-                const dx = allCornerPoints[1].x - allCornerPoints[0].x;
-                const dy = allCornerPoints[1].y - allCornerPoints[0].y;
-                angle = Math.atan2(dy, dx) * (180 / Math.PI);
-              }
-
-              console.log('[Debug] MRZ bounds:', {
-                minX,
-                minY,
-                maxX,
-                maxY,
-                angle,
-              });
               setMrzBounds({
                 x: minX * scale - offsetX,
                 y: minY * scale - offsetY,
@@ -2314,19 +2024,11 @@ const IdentityDocumentCamera = ({
               setMrzBounds(null);
             }
 
-            // Detect signature area
-            const signaturePattern = /signature|imza|İmza/i;
             const signatureBlocks = textBlocks.filter(
-              (block) => block.blockFrame && signaturePattern.test(block.text)
+              (block) =>
+                block.blockFrame && SIGNATURE_TEXT_REGEX.test(block.text)
             );
 
-            if (textBlocks.length > 0 && signatureBlocks.length === 0) {
-              console.log(
-                `[Signature Debug] No signature blocks found. All blocks (${textBlocks.length}):`,
-                textBlocks.map((b) => b.text).join(' | ')
-              );
-            }
-
             if (signatureBlocks.length > 0) {
               const minX = Math.min(
                 ...signatureBlocks.map((b) => b.blockFrame!.x)
@@ -2344,22 +2046,16 @@ const IdentityDocumentCamera = ({
                   (b) => b.blockFrame!.y + b.blockFrame!.height
                 )
               );
-
-              // Collect all corner points from signature blocks
               const allCornerPoints = signatureBlocks
                 .flatMap((b) => b.cornerPoints || [])
                 .map((c) => ({
                   x: c.x * scale - offsetX,
                   y: c.y * scale - offsetY,
                 }));
-
-              let angle = 0;
-              if (allCornerPoints.length >= 2) {
-                // Calculate angle from first two points
-                const dx = allCornerPoints[1].x - allCornerPoints[0].x;
-                const dy = allCornerPoints[1].y - allCornerPoints[0].y;
-                angle = Math.atan2(dy, dx) * (180 / Math.PI);
-              }
+              const angle =
+                allCornerPoints.length >= 2
+                  ? angleBetweenPoints(allCornerPoints[0], allCornerPoints[1])
+                  : 0;
 
               setSignatureBounds({
                 x: minX * scale - offsetX,
@@ -2373,81 +2069,9 @@ const IdentityDocumentCamera = ({
             } else {
               setSignatureBounds(null);
             }
-
-            // Check if all required elements are detected based on document type
-            if (nextStep === 'SCAN_ID_BACK') {
-              // ID Back: MRZ + barcode (barcode optional but preferred)
-              const hasMRZ = mrzBlocks.length > 0;
-              const hasBarcode =
-                barcodes.length > 0 || cachedBarcode.current !== null;
-              const allPresent = hasMRZ && hasBarcode;
-              setAllElementsDetected(allPresent);
-
-              // Don't block based on bounds - allow elements even if slightly outside
-              setElementsOutsideScanArea([]);
-
-              if (!allPresent) {
-                const missing = [];
-                if (!hasMRZ) missing.push('MRZ');
-                if (!hasBarcode) missing.push('Barcode');
-                console.log(
-                  `[Frame Check] Missing elements: ${missing.join(', ')}`
-                );
-              } else {
-                console.log('[Frame Check] ✓ All elements detected in frame');
-              }
-            } else if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-              // Check if it's passport (has MRZ) or ID front (no MRZ)
-              const hasMRZ = mrzBlocks.length > 0;
-              const hasFace = detectedFaces.length > 0;
-              const hasSignature = signatureBlocks.length > 0;
-
-              // Don't block based on bounds - allow elements even if slightly outside
-              setElementsOutsideScanArea([]);
-
-              let allPresent = false;
-              if (hasMRZ) {
-                // Passport: face + MRZ
-                allPresent = hasFace && hasMRZ;
-                if (!allPresent) {
-                  const missing = [];
-                  if (!hasFace) missing.push('Face');
-                  if (!hasMRZ) missing.push('MRZ');
-                  console.log(
-                    `[Frame Check] Passport - Missing elements: ${missing.join(', ')}`
-                  );
-                } else {
-                  console.log(
-                    '[Frame Check] ✓ Passport - All elements detected (face + MRZ)'
-                  );
-                }
-              } else {
-                // ID Front: face + signature
-                allPresent = hasFace && hasSignature;
-                if (!allPresent) {
-                  const missing = [];
-                  if (!hasFace) missing.push('Face');
-                  if (!hasSignature) missing.push('Signature');
-                  console.log(
-                    `[Frame Check] ID Front - Missing elements: ${missing.join(', ')}`
-                  );
-                } else {
-                  console.log(
-                    '[Frame Check] ✓ ID Front - All elements detected (face + signature)'
-                  );
-                }
-              }
-
-              setAllElementsDetected(allPresent);
-            } else {
-              setAllElementsDetected(false);
-              setElementsOutsideScanArea([]);
-            }
           } else {
             setMrzBounds(null);
             setSignatureBounds(null);
-            setAllElementsDetected(false);
-            setElementsOutsideScanArea([]);
           }
         } else if (!isDebugEnabled()) {
           // Clear all bounds when debug mode is disabled
@@ -2458,21 +2082,17 @@ const IdentityDocumentCamera = ({
           setSignatureBounds(null);
         }
 
-        // Update allElementsDetected for status text display (regardless of debug mode)
+        // Update allElementsDetected for status text display
         if (nextStep === 'SCAN_ID_BACK') {
-          const hasMRZ = textBlocks.some((b) =>
-            /[A-Z0-9<]{8,}.*</i.test(b.text)
-          );
+          const hasMRZ = textBlocks.some((b) => MRZ_BLOCK_PATTERN.test(b.text));
           const hasBarcode =
             barcodes.length > 0 || cachedBarcode.current !== null;
           setAllElementsDetected(hasMRZ && hasBarcode);
         } else if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-          const hasMRZ = textBlocks.some((b) =>
-            /[A-Z0-9<]{8,}.*</i.test(b.text)
-          );
+          const hasMRZ = textBlocks.some((b) => MRZ_BLOCK_PATTERN.test(b.text));
           const hasFace = detectedFaces.length > 0;
           const hasSignature = textBlocks.some((b) =>
-            /signature|imza|İmza/i.test(b.text)
+            SIGNATURE_TEXT_REGEX.test(b.text)
           );
           setAllElementsDetected(
             hasMRZ ? hasFace && hasMRZ : hasFace && hasSignature
@@ -2482,29 +2102,8 @@ const IdentityDocumentCamera = ({
         }
 
         // Check if detected elements are inside the scan area
-        const scanScreen = Dimensions.get('window');
-        const scanFrameAspect = frame.width / frame.height;
-        const scanScreenAspect = scanScreen.width / scanScreen.height;
-        let scanScale: number;
-        let scanOffsetX = 0;
-        let scanOffsetY = 0;
-        if (scanFrameAspect > scanScreenAspect) {
-          scanScale = scanScreen.height / frame.height;
-          scanOffsetX = (frame.width * scanScale - scanScreen.width) / 2;
-        } else {
-          scanScale = scanScreen.width / frame.width;
-          scanOffsetY = (frame.height * scanScale - scanScreen.height) / 2;
-        }
-        const scanLeft = (scanScreen.width * 0.05 + scanOffsetX) / scanScale;
-        const scanTop = (scanScreen.height * 0.36 + scanOffsetY) / scanScale;
-        const scanRight = (scanScreen.width * 0.95 + scanOffsetX) / scanScale;
-        const scanBottom = (scanScreen.height * 0.64 + scanOffsetY) / scanScale;
-
-        const isInsideScan = (x: number, y: number, w: number, h: number) =>
-          x >= scanLeft &&
-          y >= scanTop &&
-          x + w <= scanRight &&
-          y + h <= scanBottom;
+        const { scanLeft, scanTop, scanRight, scanBottom, isInsideScan } =
+          getScanAreaBounds(frame.width, frame.height);
 
         const outsideElements: string[] = [];
 
@@ -2550,8 +2149,8 @@ const IdentityDocumentCamera = ({
                 y2: bf.y + bf.height,
               });
             }
-            const isMRZ = /[A-Z0-9<]{8,}.*</i.test(block.text);
-            const isSignature = /signature|imza|İmza/i.test(block.text);
+            const isMRZ = MRZ_BLOCK_PATTERN.test(block.text);
+            const isSignature = SIGNATURE_TEXT_REGEX.test(block.text);
             if (
               (isMRZ || isSignature) &&
               !isInsideScan(bf.x, bf.y, bf.width, bf.height)
@@ -2717,444 +2316,6 @@ const IdentityDocumentCamera = ({
             onCameraReady={handleCameraReady}
             onCameraError={handleCameraError}
           />
-          {isDebugEnabled() &&
-            documentPlaneBounds &&
-            nextStep !== 'COMPLETED' && (
-              <>
-                {/* Crop area border (with padding) */}
-                {!!documentPlaneBounds.cropPadding && (
-                  <View
-                    style={{
-                      position: 'absolute',
-                      left:
-                        documentPlaneBounds.x - documentPlaneBounds.cropPadding,
-                      top:
-                        documentPlaneBounds.y - documentPlaneBounds.cropPadding,
-                      width:
-                        documentPlaneBounds.width +
-                        2 * documentPlaneBounds.cropPadding,
-                      height:
-                        documentPlaneBounds.height +
-                        2 * documentPlaneBounds.cropPadding,
-                      borderWidth: 2,
-                      borderColor: 'rgba(76, 175, 80, 0.5)',
-                      borderStyle: 'dashed',
-                      borderRadius: 8,
-                      backgroundColor: 'transparent',
-                      transform: [
-                        {
-                          rotate: `${-(documentPlaneBounds.rollAngle || 0)}deg`,
-                        },
-                      ],
-                      transformOrigin: 'center',
-                    }}
-                  />
-                )}
-                {/* Actual face border */}
-                <View
-                  style={{
-                    position: 'absolute',
-                    left: documentPlaneBounds.x,
-                    top: documentPlaneBounds.y,
-                    width: documentPlaneBounds.width,
-                    height: documentPlaneBounds.height,
-                    borderWidth: 3,
-                    borderColor: '#4CAF50',
-                    borderRadius: 8,
-                    backgroundColor: 'transparent',
-                    transform: [
-                      { rotate: `${-(documentPlaneBounds.rollAngle || 0)}deg` },
-                    ],
-                    transformOrigin: 'center',
-                  }}
-                >
-                  {!!documentPlaneBounds.rollAngle &&
-                    Math.abs(documentPlaneBounds.rollAngle) > 5 && (
-                      <TextView
-                        style={{
-                          position: 'absolute',
-                          top: -20,
-                          left: 0,
-                          color: '#4CAF50',
-                          fontSize: 10,
-                          fontWeight: 'bold',
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          paddingHorizontal: 4,
-                          paddingVertical: 2,
-                          borderRadius: 2,
-                        }}
-                      >
-                        {documentPlaneBounds.rollAngle.toFixed(1)}°
-                      </TextView>
-                    )}
-                </View>
-              </>
-            )}
-          {isDebugEnabled() &&
-            secondaryFaceBounds &&
-            nextStep !== 'COMPLETED' && (
-              <>
-                {/* Crop area border (with padding) */}
-                {!!secondaryFaceBounds.cropPadding && (
-                  <View
-                    style={{
-                      position: 'absolute',
-                      left:
-                        secondaryFaceBounds.x - secondaryFaceBounds.cropPadding,
-                      top:
-                        secondaryFaceBounds.y - secondaryFaceBounds.cropPadding,
-                      width:
-                        secondaryFaceBounds.width +
-                        2 * secondaryFaceBounds.cropPadding,
-                      height:
-                        secondaryFaceBounds.height +
-                        2 * secondaryFaceBounds.cropPadding,
-                      borderWidth: 2,
-                      borderColor: 'rgba(33, 150, 243, 0.5)',
-                      borderStyle: 'dashed',
-                      borderRadius: 8,
-                      backgroundColor: 'transparent',
-                      transform: [
-                        {
-                          rotate: `${-(secondaryFaceBounds.rollAngle || 0)}deg`,
-                        },
-                      ],
-                      transformOrigin: 'center',
-                    }}
-                  />
-                )}
-                {/* Actual face border */}
-                <View
-                  style={{
-                    position: 'absolute',
-                    left: secondaryFaceBounds.x,
-                    top: secondaryFaceBounds.y,
-                    width: secondaryFaceBounds.width,
-                    height: secondaryFaceBounds.height,
-                    borderWidth: 3,
-                    borderColor: '#2196F3',
-                    borderRadius: 8,
-                    backgroundColor: 'transparent',
-                    transform: [
-                      { rotate: `${-(secondaryFaceBounds.rollAngle || 0)}deg` },
-                    ],
-                    transformOrigin: 'center',
-                  }}
-                >
-                  {!!secondaryFaceBounds.rollAngle &&
-                    Math.abs(secondaryFaceBounds.rollAngle) > 5 && (
-                      <TextView
-                        style={{
-                          position: 'absolute',
-                          top: -20,
-                          left: 0,
-                          color: '#2196F3',
-                          fontSize: 10,
-                          fontWeight: 'bold',
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          paddingHorizontal: 4,
-                          paddingVertical: 2,
-                          borderRadius: 2,
-                        }}
-                      >
-                        {secondaryFaceBounds.rollAngle.toFixed(1)}°
-                      </TextView>
-                    )}
-                </View>
-              </>
-            )}
-          {isDebugEnabled() && barcodeBounds && nextStep !== 'COMPLETED' && (
-            <>
-              {barcodeBounds.corners && barcodeBounds.corners.length >= 4 ? (
-                // Render using corner points for precise rotated border
-                <>
-                  {/* Draw border lines between corners */}
-                  {[0, 1, 2, 3].map((i) => {
-                    const start = barcodeBounds.corners![i];
-                    const end = barcodeBounds.corners![(i + 1) % 4];
-                    const dx = end.x - start.x;
-                    const dy = end.y - start.y;
-                    const length = Math.sqrt(dx * dx + dy * dy);
-                    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-
-                    return (
-                      <View
-                        key={i}
-                        style={{
-                          position: 'absolute',
-                          left: start.x,
-                          top: start.y,
-                          width: length,
-                          height: 3,
-                          backgroundColor: '#FF9800',
-                          transform: [{ rotate: `${angle}deg` }],
-                          transformOrigin: 'top left',
-                        }}
-                      />
-                    );
-                  })}
-                  {/* Draw corner markers */}
-                  {barcodeBounds.corners.map((corner, idx) => (
-                    <View
-                      key={`corner-${idx}`}
-                      style={{
-                        position: 'absolute',
-                        left: corner.x - 4,
-                        top: corner.y - 4,
-                        width: 8,
-                        height: 8,
-                        borderRadius: 4,
-                        backgroundColor: '#FF9800',
-                      }}
-                    />
-                  ))}
-                  {/* Angle indicator */}
-                  {!!barcodeBounds.angle &&
-                    Math.abs(barcodeBounds.angle) > 5 && (
-                      <TextView
-                        style={{
-                          position: 'absolute',
-                          left: barcodeBounds.x,
-                          top: barcodeBounds.y - 20,
-                          color: '#FF9800',
-                          fontSize: 10,
-                          fontWeight: 'bold',
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          paddingHorizontal: 4,
-                          paddingVertical: 2,
-                          borderRadius: 2,
-                        }}
-                      >
-                        {barcodeBounds.angle.toFixed(1)}°
-                      </TextView>
-                    )}
-                </>
-              ) : (
-                // Fallback to rotated rectangle if corners not available
-                <View
-                  style={{
-                    position: 'absolute',
-                    left: barcodeBounds.x + barcodeBounds.width / 2,
-                    top: barcodeBounds.y + barcodeBounds.height / 2,
-                    width: barcodeBounds.width,
-                    height: barcodeBounds.height,
-                    marginLeft: -barcodeBounds.width / 2,
-                    marginTop: -barcodeBounds.height / 2,
-                    borderWidth: 3,
-                    borderColor: '#FF9800',
-                    borderRadius: 8,
-                    backgroundColor: 'transparent',
-                    transform: [{ rotate: `${barcodeBounds.angle || 0}deg` }],
-                  }}
-                >
-                  {!!barcodeBounds.angle &&
-                    Math.abs(barcodeBounds.angle) > 5 && (
-                      <TextView
-                        style={{
-                          position: 'absolute',
-                          top: -20,
-                          left: 0,
-                          color: '#FF9800',
-                          fontSize: 10,
-                          fontWeight: 'bold',
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          paddingHorizontal: 4,
-                          paddingVertical: 2,
-                          borderRadius: 2,
-                        }}
-                      >
-                        {barcodeBounds.angle.toFixed(1)}°
-                      </TextView>
-                    )}
-                </View>
-              )}
-            </>
-          )}
-          {isDebugEnabled() && mrzBounds && nextStep !== 'COMPLETED' && (
-            <>
-              {mrzBounds.corners && mrzBounds.corners.length >= 2 ? (
-                // Render using corner points for precise rotated border
-                <>
-                  {/* Draw border lines between consecutive corners */}
-                  {mrzBounds.corners.map((corner, idx) => {
-                    const nextCorner =
-                      mrzBounds.corners![(idx + 1) % mrzBounds.corners!.length];
-                    const dx = nextCorner.x - corner.x;
-                    const dy = nextCorner.y - corner.y;
-                    const length = Math.sqrt(dx * dx + dy * dy);
-                    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-
-                    return (
-                      <View
-                        key={idx}
-                        style={{
-                          position: 'absolute',
-                          left: corner.x,
-                          top: corner.y,
-                          width: length,
-                          height: 3,
-                          backgroundColor: '#9C27B0',
-                          transform: [{ rotate: `${angle}deg` }],
-                          transformOrigin: 'top left',
-                        }}
-                      />
-                    );
-                  })}
-                  {/* Angle indicator */}
-                  {!!mrzBounds.angle && Math.abs(mrzBounds.angle) > 5 && (
-                    <TextView
-                      style={{
-                        position: 'absolute',
-                        left: mrzBounds.x,
-                        top: mrzBounds.y - 20,
-                        color: '#9C27B0',
-                        fontSize: 10,
-                        fontWeight: 'bold',
-                        backgroundColor: 'rgba(0,0,0,0.7)',
-                        paddingHorizontal: 4,
-                        paddingVertical: 2,
-                        borderRadius: 2,
-                      }}
-                    >
-                      {mrzBounds.angle.toFixed(1)}°
-                    </TextView>
-                  )}
-                </>
-              ) : (
-                // Fallback to rotated rectangle if corners not available
-                <View
-                  style={{
-                    position: 'absolute',
-                    left: mrzBounds.x + mrzBounds.width / 2,
-                    top: mrzBounds.y + mrzBounds.height / 2,
-                    width: mrzBounds.width,
-                    height: mrzBounds.height,
-                    marginLeft: -mrzBounds.width / 2,
-                    marginTop: -mrzBounds.height / 2,
-                    borderWidth: 3,
-                    borderColor: '#9C27B0',
-                    borderRadius: 8,
-                    backgroundColor: 'transparent',
-                    transform: [{ rotate: `${mrzBounds.angle || 0}deg` }],
-                  }}
-                >
-                  {!!mrzBounds.angle && Math.abs(mrzBounds.angle) > 5 && (
-                    <TextView
-                      style={{
-                        position: 'absolute',
-                        top: -20,
-                        left: 0,
-                        color: '#9C27B0',
-                        fontSize: 10,
-                        fontWeight: 'bold',
-                        backgroundColor: 'rgba(0,0,0,0.7)',
-                        paddingHorizontal: 4,
-                        paddingVertical: 2,
-                        borderRadius: 2,
-                      }}
-                    >
-                      {mrzBounds.angle.toFixed(1)}°
-                    </TextView>
-                  )}
-                </View>
-              )}
-            </>
-          )}
-          {isDebugEnabled() && signatureBounds && nextStep !== 'COMPLETED' && (
-            <>
-              {signatureBounds.corners &&
-              signatureBounds.corners.length >= 2 ? (
-                // Render using corner points for precise rotated border
-                <>
-                  {/* Draw border lines between consecutive corners */}
-                  {signatureBounds.corners.map((corner, idx) => {
-                    const nextCorner =
-                      signatureBounds.corners![
-                        (idx + 1) % signatureBounds.corners!.length
-                      ];
-                    const dx = nextCorner.x - corner.x;
-                    const dy = nextCorner.y - corner.y;
-                    const length = Math.sqrt(dx * dx + dy * dy);
-                    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-
-                    return (
-                      <View
-                        key={idx}
-                        style={{
-                          position: 'absolute',
-                          left: corner.x,
-                          top: corner.y,
-                          width: length,
-                          height: 3,
-                          backgroundColor: '#00BCD4',
-                          transform: [{ rotate: `${angle}deg` }],
-                          transformOrigin: 'top left',
-                        }}
-                      />
-                    );
-                  })}
-                  {/* Angle indicator */}
-                  {!!signatureBounds.angle &&
-                    Math.abs(signatureBounds.angle) > 5 && (
-                      <TextView
-                        style={{
-                          position: 'absolute',
-                          left: signatureBounds.x,
-                          top: signatureBounds.y - 20,
-                          color: '#00BCD4',
-                          fontSize: 10,
-                          fontWeight: 'bold',
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          paddingHorizontal: 4,
-                          paddingVertical: 2,
-                          borderRadius: 2,
-                        }}
-                      >
-                        {signatureBounds.angle.toFixed(1)}°
-                      </TextView>
-                    )}
-                </>
-              ) : (
-                // Fallback to rotated rectangle if corners not available
-                <View
-                  style={{
-                    position: 'absolute',
-                    left: signatureBounds.x + signatureBounds.width / 2,
-                    top: signatureBounds.y + signatureBounds.height / 2,
-                    width: signatureBounds.width,
-                    height: signatureBounds.height,
-                    marginLeft: -signatureBounds.width / 2,
-                    marginTop: -signatureBounds.height / 2,
-                    borderWidth: 3,
-                    borderColor: '#00BCD4',
-                    borderRadius: 8,
-                    backgroundColor: 'transparent',
-                    transform: [{ rotate: `${signatureBounds.angle || 0}deg` }],
-                  }}
-                >
-                  {!!signatureBounds.angle &&
-                    Math.abs(signatureBounds.angle) > 5 && (
-                      <TextView
-                        style={{
-                          position: 'absolute',
-                          top: -20,
-                          left: 0,
-                          color: '#00BCD4',
-                          fontSize: 10,
-                          fontWeight: 'bold',
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          paddingHorizontal: 4,
-                          paddingVertical: 2,
-                          borderRadius: 2,
-                        }}
-                      >
-                        {signatureBounds.angle.toFixed(1)}°
-                      </TextView>
-                    )}
-                </View>
-              )}
-            </>
-          )}
           <View style={[styles.topZone, { paddingTop: insets.top }]}>
             {nextStep !== 'COMPLETED' &&
               status !== 'SCANNED' &&
@@ -3188,14 +2349,17 @@ const IdentityDocumentCamera = ({
                 </TextView>
               )}
 
-            <TextView
+            <AnimatedText
               style={[
                 styles.topZoneText,
                 // Priority order for coloring (later styles override earlier ones)
                 // 1. Success (green) - scan completed
-                status === 'SCANNED' && styles.topZoneTextSuccess,
-                // 2. Error (red) - wrong side
+                nextStep === 'COMPLETED' && styles.topZoneTextSuccess,
+                // 2. Error (red) - wrong side - with flash opacity
                 status === 'INCORRECT' && styles.topZoneTextError,
+                status === 'INCORRECT' && {
+                  opacity: errorFlashAnim,
+                },
                 // 3. Warning (yellow) - quality issues
                 (isBrightnessLow || isFrameBlurry) && styles.topZoneTextWarning,
                 // 4. Scanning (green) - all elements detected AND inside scan area
@@ -3208,266 +2372,27 @@ const IdentityDocumentCamera = ({
                 // 5. Default (white) - aligning (not all detected OR elements outside scan area)
               ]}
             >
-              {status === 'SCANNED'
-                ? completedStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                  ? detectedDocumentType === 'PASSPORT'
-                    ? t('identityDocumentCamera.passportScanned')
-                    : t('identityDocumentCamera.frontSideScanned')
-                  : completedStep === 'SCAN_ID_BACK'
-                    ? t('identityDocumentCamera.backSideScanned')
-                    : completedStep === 'SCAN_HOLOGRAM'
-                      ? t('identityDocumentCamera.hologramVerified')
-                      : t('identityDocumentCamera.scanCompleted')
-                : status === 'INCORRECT'
-                  ? nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                    ? t('identityDocumentCamera.wrongSideFront')
-                    : nextStep === 'SCAN_ID_BACK'
-                      ? t('identityDocumentCamera.wrongSideBack')
-                      : nextStep === 'SCAN_HOLOGRAM'
-                        ? t('identityDocumentCamera.wrongSideFront') // Hologram is on front, show same message as front scan
-                        : t('identityDocumentCamera.alignPhotoSide')
-                  : isBrightnessLow
-                    ? t('identityDocumentCamera.lowBrightness')
-                    : isFrameBlurry
-                      ? t('identityDocumentCamera.avoidBlur')
-                      : status === 'SCANNING' &&
-                          allElementsDetected &&
-                          elementsOutsideScanArea.length === 0
-                        ? nextStep === 'SCAN_ID_BACK'
-                          ? t('identityDocumentCamera.idCardBackDetected')
-                          : detectedDocumentType === 'PASSPORT'
-                            ? t('identityDocumentCamera.passportDetected')
-                            : detectedDocumentType === 'ID_FRONT'
-                              ? t('identityDocumentCamera.idCardFrontDetected')
-                              : nextStep === 'SCAN_HOLOGRAM'
-                                ? t('identityDocumentCamera.alignHologram')
-                                : t('identityDocumentCamera.readingDocument')
-                        : elementsOutsideScanArea.length > 0
-                          ? t('identityDocumentCamera.centerDocument')
-                          : (status === 'SCANNING' || status === 'SEARCHING') &&
-                              !allElementsDetected
-                            ? nextStep === 'SCAN_ID_BACK'
-                              ? t('identityDocumentCamera.alignIDBack')
-                              : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                                ? detectedDocumentType === 'PASSPORT'
-                                  ? t('identityDocumentCamera.alignPassport')
-                                  : detectedDocumentType === 'ID_FRONT'
-                                    ? t('identityDocumentCamera.alignIDFront')
-                                    : t('identityDocumentCamera.alignPhotoSide')
-                                : nextStep === 'SCAN_HOLOGRAM'
-                                  ? t('identityDocumentCamera.alignHologram')
-                                  : t('identityDocumentCamera.readingDocument')
-                            : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                              ? status === 'SCANNING'
-                                ? t('identityDocumentCamera.readingDocument')
-                                : t('identityDocumentCamera.alignPhotoSide')
-                              : nextStep === 'SCAN_HOLOGRAM'
-                                ? t('identityDocumentCamera.alignHologram')
-                                : nextStep === 'SCAN_ID_BACK'
-                                  ? status === 'SCANNING'
-                                    ? t(
-                                        'identityDocumentCamera.readingDocument'
-                                      )
-                                    : t(
-                                        'identityDocumentCamera.alignIDBackSide'
-                                      )
-                                  : nextStep === 'COMPLETED'
-                                    ? t('identityDocumentCamera.scanCompleted')
-                                    : ''}
-            </TextView>
+              {getStatusMessage(
+                nextStep,
+                status,
+                detectedDocumentType,
+                isBrightnessLow,
+                isFrameBlurry,
+                allElementsDetected,
+                elementsOutsideScanArea,
+                t
+              )}
+            </AnimatedText>
           </View>
           <View style={styles.leftZone} />
           <View style={styles.rightZone} />
-          <View style={styles.bottomZone}>
-            <View style={styles.debugImagesRow}>
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {currentFaceImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${currentFaceImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      currentFaceImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${currentFaceImage ? '✓ ' : ''}Face`}
-                  </TextView>
-                </View>
-              )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {currentSecondaryFaceImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      currentSecondaryFaceImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${currentSecondaryFaceImage ? '✓ ' : ''}2nd Face`}
-                  </TextView>
-                </View>
-              )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {currentHologramImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${currentHologramImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : latestHologramFaceImage && hologramImageCount > 0 ? (
-                    <View style={{ position: 'relative' }}>
-                      <Image
-                        source={{
-                          uri: `data:image/jpeg;base64,${latestHologramFaceImage}`,
-                        }}
-                        style={[styles.faceImage, { opacity: 0.7 }]}
-                      />
-                      <View
-                        style={{
-                          position: 'absolute',
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          padding: 2,
-                        }}
-                      >
-                        <TextView
-                          style={{
-                            color: '#FFA500',
-                            fontSize: 8,
-                            textAlign: 'center',
-                            fontWeight: 'bold',
-                          }}
-                        >
-                          {hologramImageCount}/{HOLOGRAM_IMAGE_COUNT}
-                        </TextView>
-                      </View>
-                    </View>
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      currentHologramImage && { color: '#4CAF50' },
-                      latestHologramFaceImage &&
-                        !currentHologramImage && { color: '#FFA500' },
-                    ]}
-                  >
-                    {`${currentHologramImage ? '✓ ' : latestHologramFaceImage ? '⏳ ' : ''}Hologram`}
-                  </TextView>
-                </View>
-              )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {_currentHologramMaskImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      _currentHologramMaskImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${_currentHologramMaskImage ? '✓ ' : ''}Mask`}
-                  </TextView>
-                </View>
-              )}
-            </View>
-          </View>
+          <View style={styles.bottomZone} />
           <View
             style={[
               styles.scanArea,
               {
                 borderColor:
-                  status === 'SCANNED' || nextStep === 'COMPLETED'
+                  nextStep === 'COMPLETED'
                     ? '#4CAF50'
                     : status === 'INCORRECT'
                       ? '#f44336'
@@ -3480,7 +2405,7 @@ const IdentityDocumentCamera = ({
               },
             ]}
           >
-            {nextStep === 'COMPLETED' || status === 'SCANNED' ? (
+            {nextStep === 'COMPLETED' ? (
               <LottieView
                 source={require('../../Shared/Animations/success.json')}
                 style={styles.animation}
@@ -3501,130 +2426,33 @@ const IdentityDocumentCamera = ({
                 loop={true}
                 autoPlay
               />
-            ) : status === 'SCANNING' ? (
-              <LottieView
-                source={require('../../Shared/Animations/scanning.json')}
-                style={styles.animation}
-                loop={true}
-                autoPlay
-              />
             ) : null}
           </View>
           {isDebugEnabled() && (
-            <SafeAreaView
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                alignItems: 'center',
-                pointerEvents: 'none',
-              }}
-            >
-              <View
-                style={{
-                  marginTop: 10,
-                  backgroundColor: 'rgba(0, 0, 0, 0.85)',
-                  padding: 10,
-                  borderRadius: 8,
-                  borderWidth: 1,
-                  borderColor: '#FF6B6B',
-                  minWidth: 200,
-                }}
-              >
-                <TextView
-                  style={{
-                    color: '#FF6B6B',
-                    fontSize: 11,
-                    fontWeight: 'bold',
-                    marginBottom: 6,
-                    textAlign: 'center',
-                  }}
-                >
-                  DEBUG MODE
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Step: ${nextStep}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Status: ${status}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Doc Type: ${detectedDocumentType}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓'}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Blur: ${isFrameBlurry ? '⚠️' : '✓'}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Flash: ${isTorchOn ? '🔦' : '○'}`}
-                </TextView>
-                <TextView style={{ color: '#88D8B0', fontSize: 9 }}>
-                  {`Face Detection: ${faceDetectionEnabled ? '✓' : '✗'}`}
-                </TextView>
-              </View>
-            </SafeAreaView>
+            <DebugOverlay
+              nextStep={nextStep}
+              status={status}
+              detectedDocumentType={detectedDocumentType}
+              isBrightnessLow={isBrightnessLow}
+              isFrameBlurry={isFrameBlurry}
+              isTorchOn={isTorchOn}
+              documentPlaneBounds={documentPlaneBounds}
+              secondaryFaceBounds={secondaryFaceBounds}
+              barcodeBounds={barcodeBounds}
+              mrzBounds={mrzBounds}
+              signatureBounds={signatureBounds}
+              currentFaceImage={currentFaceImage}
+              currentSecondaryFaceImage={currentSecondaryFaceImage}
+              currentHologramImage={currentHologramImage}
+              currentHologramMaskImage={_currentHologramMaskImage}
+              latestHologramFaceImage={latestHologramFaceImage}
+              hologramImageCount={hologramImageCount}
+              allElementsDetected={allElementsDetected}
+              elementsOutsideScanArea={elementsOutsideScanArea}
+            />
           )}
           {testMode && testModeData && (
-            <SafeAreaView
-              style={{
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                maxHeight: '40%',
-                backgroundColor: 'rgba(0, 0, 0, 0.95)',
-                borderTopWidth: 2,
-                borderTopColor: '#FFA500',
-              }}
-            >
-              <ScrollView style={{ flex: 1 }}>
-                <View style={{ padding: 10 }}>
-                  <TextView
-                    style={{
-                      color: '#FFA500',
-                      fontSize: 12,
-                      fontWeight: 'bold',
-                      marginBottom: 8,
-                      textAlign: 'center',
-                    }}
-                  >
-                    MRZ Text Read
-                  </TextView>
-
-                  <TextView
-                    style={{
-                      color: '#FFFFFF',
-                      fontSize: 9,
-                      fontFamily: 'monospace',
-                      lineHeight: 16,
-                    }}
-                  >
-                    {testModeData.mrzText
-                      .split('\n')
-                      .map(
-                        (line, i) =>
-                          `Line ${i + 1}: ${line} (${line.length} chars)`
-                      )
-                      .join('\n')}
-                  </TextView>
-                </View>
-              </ScrollView>
-            </SafeAreaView>
+            <TestModePanel mrzText={testModeData.mrzText} />
           )}
         </>
       )}
@@ -3633,9 +2461,6 @@ const IdentityDocumentCamera = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   permissionContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -3732,50 +2557,6 @@ const styles = StyleSheet.create({
     gap: 10,
     justifyContent: 'flex-start',
   },
-  debugImagesRow: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 10,
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-  },
-  cardDetectionRow: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 5,
-  },
-  imageContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  imageContainerText: {
-    color: 'white',
-    fontSize: 8,
-    textAlign: 'center',
-    fontWeight: 'bold',
-    marginTop: 2,
-  },
-  faceImage: {
-    width: 60,
-    height: 80,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: 'white',
-  },
-  cardDetectionImage: {
-    width: 160,
-    height: 120,
-    borderRadius: 8,
-    borderWidth: 2,
-    borderColor: '#FF9800',
-  },
-  cardDetectionContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
   guide: {
     flex: 1,
     display: 'flex',