@trustchex/react-native-sdk 1.355.1 → 1.357.0

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -1,60 +1,41 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import {
   View,
   StyleSheet,
   Text as TextView,
   Platform,
+  StatusBar,
   Vibration,
-  TouchableOpacity,
-  type GestureResponderEvent,
-  Text,
   Linking,
   Image,
   ActivityIndicator,
+  PermissionsAndroid,
+  Dimensions,
+  type NativeSyntheticEvent,
+  type ViewStyle,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
-  Camera,
-  runAtTargetFps,
-  useCameraDevice,
-  useCameraFormat,
-  useCameraPermission,
-  useFrameProcessor,
-} from 'react-native-vision-camera';
-import type { Frame } from 'react-native-vision-camera';
-import { runAsync } from '../Libs/worklet.utils';
-import { useRunOnJS, useSharedValue } from 'react-native-worklets-core';
-import { useTextRecognition } from '../VisionCameraPlugins/TextRecognition';
-import type { FieldRecords } from 'mrz';
-import {
-  type Face,
-  useFaceDetector,
-} from '../VisionCameraPlugins/FaceDetector';
-import mrzUtils from '../Libs/mrz.utils';
-import { crop, type CropResult } from '../VisionCameraPlugins/Cropper';
+  TrustchexCamera,
+  type TrustchexCameraHandle,
+  type Frame,
+} from './TrustchexCamera';
+import { NativeModules } from 'react-native';
+import type { MRZFields } from '../Types/mrzFields';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
-import ImageEditor from '@react-native-community/image-editor';
 import { useIsFocused } from '@react-navigation/native';
-import {
-  AdaptiveThresholdTypes,
-  ColorConversionCodes,
-  DataTypes,
-  type Mat,
-  ObjectType,
-  OpenCV,
-  ThresholdTypes,
-} from 'react-native-fast-opencv';
-import { getAverageBrightness, getScanAreaCenterPoint, calculateExposureStep, isBlurry as checkBlurry } from '../Libs/camera.utils';
 import { useTranslation } from 'react-i18next';
+import { debugLog, logError, isDebugEnabled } from '../Libs/debug.utils';
 import LottieView from 'lottie-react-native';
 import StyledButton from './StyledButton';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
-import { speakWithDebounce } from '../Libs/tts.utils';
+import { speak, resetLastMessage } from '../Libs/tts.utils';
 import AppContext from '../Contexts/AppContext';
 import { useTheme } from '../Contexts/ThemeContext';
 
+const { OpenCVModule } = NativeModules;
+
 export type DocumentScannedData = {
   documentType: 'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN';
   image: string;
@@ -63,7 +44,7 @@ export type DocumentScannedData = {
   hologramImage?: string;
   barcodeValue?: string;
   mrzText?: string;
-  mrzFields?: FieldRecords;
+  mrzFields?: MRZFields;
 };
 
 export type BlockText = {
@@ -107,63 +88,64 @@ type ElementsData = [
 export type PhotoOptions = {
   uri: string;
   orientation?:
-  | 'landscapeRight'
-  | 'portrait'
-  | 'portraitUpsideDown'
-  | 'landscapeLeft';
+    | 'landscapeRight'
+    | 'portrait'
+    | 'portraitUpsideDown'
+    | 'landscapeLeft';
 };
 
 export interface IdentityDocumentCameraProps {
   onlyMRZScan: boolean;
   onIdentityDocumentScanned: (scannedData: DocumentScannedData) => void;
-  showDebugImages?: boolean; // For development: show detected face and other images
 }
 
-// const windowWidth = Dimensions.get('window').width;
-// const windowHeight = Dimensions.get('window').height;
+interface Face {
+  bounds: { x: number; y: number; width: number; height: number };
+  rollAngle?: number;
+  pitchAngle?: number;
+  yawAngle?: number;
+  leftEyeOpenProbability?: number;
+  rightEyeOpenProbability?: number;
+  smilingProbability?: number;
+}
 
-const HOLOGRAM_IMAGE_COUNT = 7;
-const HOLOGRAM_DETECTION_THRESHOLD = 3500;
-const HOLOGRAM_DETECTION_RETRY_COUNT = 3;
-const SECOND_FACE_DETECTION_RETRY_COUNT = 10;
-const MRZ_VALIDATION_RETRY_COUNT = 3;
+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;
+}
 
-let faceImages: 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 = 60;
+const MAX_CONSECUTIVE_QUALITY_FAILURES = 30;
 
 const IdentityDocumentCamera = ({
   onlyMRZScan,
   onIdentityDocumentScanned,
-  showDebugImages = false,
 }: IdentityDocumentCameraProps) => {
   useKeepAwake();
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const appContext = React.useContext(AppContext);
-  const cameraRef = React.useRef<Camera>(null);
-  const cameraPermission = useCameraPermission();
-  const [permissionsRequested, setPermissionsRequested] = React.useState(false);
-  const [isActive, setIsActive] = React.useState(false);
+  const cameraRef = useRef<TrustchexCameraHandle>(null);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [permissionsRequested, setPermissionsRequested] = useState(false);
+  const [isActive, setIsActive] = useState(false);
   const isFocused = useIsFocused();
-  const [isTorchOn, setIsTorchOn] = React.useState(false);
-  const exposureValue = useSharedValue(0);
-  const [exposure, setExposure] = React.useState(0);
-  const device = useCameraDevice('back', {
-    physicalDevices: ['wide-angle-camera'],
-  });
-  const format = useCameraFormat(device, [
-    {
-      videoResolution: {
-        width: 1920,
-        height: 1080,
-      },
-      iso: 'max',
-      photoHdr: false,
-      videoHdr: false,
-      videoStabilizationMode: 'standard',
-      autoFocusSystem: 'phase-detection',
-    },
-  ]);
-  const isCameraInitialized = useSharedValue(false);
+  const isTorchOnRef = useRef(false);
+  const [isTorchOn, _setIsTorchOn] = useState(false);
+  const setIsTorchOn = useCallback((val: boolean) => {
+    isTorchOnRef.current = val;
+    _setIsTorchOn(val);
+  }, []);
+  const [_exposure, _setExposure] = useState(0);
+  const isCameraInitialized = useRef(false);
   const [currentFaceImage, setCurrentFaceImage] = useState<string | undefined>(
     undefined
   );
@@ -191,152 +173,354 @@ const IdentityDocumentCamera = ({
   const [detectedDocumentType, setDetectedDocumentType] = useState<
     'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN'
   >('UNKNOWN');
-  const hologramDetectionCurrentRetryCount = useSharedValue(0);
-  const secondaryFaceDetectionCurrentRetryCount = useSharedValue(0);
-  const mrzDetectionCurrentRetryCount = useSharedValue(0);
-  const faceDetectionErrorCount = useSharedValue(0);
-  const consecutiveBlurCount = useSharedValue(0);
+  const hologramDetectionCurrentRetryCount = useRef(0);
+  const secondaryFaceDetectionCurrentRetryCount = useRef(0);
+  const consecutiveQualityFailures = useRef(0);
+  const mrzDetectionCurrentRetryCount = useRef(0);
+
+  // MRZ stability tracking - require consistent valid reads
+  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({
+    hasAcceptableQuality: true,
+    isBlurry: false,
+    brightness: 128,
+  });
+
+  // Barcode caching - persist detected barcode across frames for reliability
+  const cachedBarcode = useRef<Barcode | 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 faceDetectionErrorCount = useRef(0);
+  const brightnessHistory = useRef<number[]>([]);
   const [faceDetectionEnabled, setFaceDetectionEnabled] = useState(true);
+  const faceImages = useRef<string[]>([]);
+  const hologramImageCountRef = useRef(0);
+  const [hologramImageCount, setHologramImageCount] = useState(0);
+  const lastVoiceGuidanceMessage = useRef<string>('');
+  const [latestHologramFaceImage, setLatestHologramFaceImage] = useState<
+    string | undefined
+  >(undefined);
+  const lastFacePosition = useRef<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+  const [documentPlaneBounds, setDocumentPlaneBounds] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rollAngle?: number;
+    cropPadding?: number;
+  } | null>(null);
+  const [secondaryFaceBounds, setSecondaryFaceBounds] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rollAngle?: number;
+    cropPadding?: number;
+  } | null>(null);
+  const [barcodeBounds, setBarcodeBounds] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle?: number;
+    corners?: Array<{ x: number; y: number }>;
+  } | null>(null);
+  const [mrzBounds, setMrzBounds] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle?: number;
+    corners?: Array<{ x: number; y: number }>;
+  } | null>(null);
+  const [signatureBounds, setSignatureBounds] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle?: number;
+    corners?: Array<{ x: number; y: number }>;
+  } | null>(null);
+  const [frameDimensions, setFrameDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  // Track if all required elements are detected in current frame
+  const [allElementsDetected, setAllElementsDetected] = useState(false);
+  // Track if detected elements are within scan area
+  const [elementsOutsideScanArea, setElementsOutsideScanArea] = useState<
+    string[]
+  >([]);
   const { t } = useTranslation();
-  // const [boundingBox, setBoundingBox] = useState<Bounds>({
-  //   x: 0,
-  //   y: 0,
-  //   width: 0,
-  //   height: 0,
-  // });
-
-  const { scanText } = useTextRecognition({
-    language: 'latin',
-  });
-  const { detectFaces } = useFaceDetector({
-    contourMode: 'none',
-    landmarkMode: 'none',
-    classificationMode: 'all',
-    performanceMode: 'accurate',
-    trackingEnabled: false,
-    minFaceSize: 0.1,
-    autoScale: false,
-  });
 
   useEffect(() => {
     const requestPermissions = async () => {
-      if (!cameraPermission.hasPermission) {
-        await cameraPermission.requestPermission();
+      if (Platform.OS === 'android') {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.CAMERA
+        );
+        setHasPermission(granted === PermissionsAndroid.RESULTS.GRANTED);
+      } else {
+        setHasPermission(true);
       }
       setPermissionsRequested(true);
     };
     requestPermissions();
-  }, [cameraPermission]);
+  }, []);
 
   useEffect(() => {
-    if (!!device && !!format && isFocused) {
+    if (isFocused && hasPermission && hasGuideShown) {
       setIsActive(true);
     } else {
       setIsActive(false);
-      // Clear any pending OpenCV operations when camera becomes inactive
-      try {
-        OpenCV.clearBuffers();
-      } catch (error) {
-        // Ignore cleanup errors
-      }
-
-      // Reset face images array to free memory
-      faceImages = [];
-
-      // Reset retry counters
-      hologramDetectionCurrentRetryCount.value = 0;
-      secondaryFaceDetectionCurrentRetryCount.value = 0;
-      mrzDetectionCurrentRetryCount.value = 0;
+      faceImages.current = [];
+      hologramImageCountRef.current = 0;
+      setHologramImageCount(0);
+      setLatestHologramFaceImage(undefined);
+      hologramDetectionCurrentRetryCount.current = 0;
+      secondaryFaceDetectionCurrentRetryCount.current = 0;
+      mrzDetectionCurrentRetryCount.current = 0;
+      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
+      lastVoiceGuidanceMessage.current = '';
+      resetLastMessage();
     }
 
     return () => {
       setIsActive(false);
-      // Cleanup on unmount
-      try {
-        OpenCV.clearBuffers();
-      } catch (error) {
-        // Ignore cleanup errors
-      }
-
-      // Clear face images array
-      faceImages = [];
+      faceImages.current = [];
+      hologramImageCountRef.current = 0;
+      setHologramImageCount(0);
+      setLatestHologramFaceImage(undefined);
+      lastVoiceGuidanceMessage.current = '';
+      resetLastMessage();
     };
-  }, [
-    device,
-    format,
-    isFocused,
-    hologramDetectionCurrentRetryCount,
-    secondaryFaceDetectionCurrentRetryCount,
-    mrzDetectionCurrentRetryCount,
-    faceDetectionErrorCount,
-  ]);
+  }, [isFocused, hasPermission, hasGuideShown]);
 
   useEffect(() => {
     if (hasGuideShown) {
+      // Generate message - match UI display logic exactly for consistency
       let message = '';
 
-      // Priority: scanned > incorrect > blur during scanning > brightness > blur > step-specific
       if (status === 'SCANNED') {
-        // Use step-specific completion messages
-        if (completedStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-          message = detectedDocumentType === 'PASSPORT'
-            ? t('identityDocumentCamera.passportScanned')
-            : t('identityDocumentCamera.frontSideScanned');
-        } else if (completedStep === 'SCAN_ID_BACK') {
-          message = t('identityDocumentCamera.backSideScanned');
-        } else if (completedStep === 'SCAN_HOLOGRAM') {
-          message = t('identityDocumentCamera.hologramVerified');
-        } else {
-          message = t('identityDocumentCamera.scanCompleted');
-        }
+        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') {
-        // Wrong side detected - warn user
-        if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-          message = t('identityDocumentCamera.wrongSideFront');
-        } else if (nextStep === 'SCAN_ID_BACK') {
-          message = t('identityDocumentCamera.wrongSideBack');
-        }
+        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) {
-        // Brightness warning takes priority over blur
         message = t('identityDocumentCamera.lowBrightness');
       } else if (isFrameBlurry) {
-        // Show blur warning only when brightness is sufficient
         message = t('identityDocumentCamera.avoidBlur');
-      } else if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
-        // Enhanced feedback based on detection status
-        if (status === 'SCANNING') {
-          if (currentFaceImage) {
-            // Document-specific detection message
-            if (detectedDocumentType === 'PASSPORT') {
-              message = t('identityDocumentCamera.passportDetected');
-            } else if (detectedDocumentType === 'ID_FRONT') {
-              message = t('identityDocumentCamera.idCardFrontDetected');
-            } else {
-              message = t('identityDocumentCamera.readingDocument');
-            }
-          } else {
-            message = t('identityDocumentCamera.readingDocument');
-          }
-        } else {
-          message = t('identityDocumentCamera.alignPhotoSide');
-        }
-      } else if (nextStep === 'SCAN_HOLOGRAM') {
-        message = t('identityDocumentCamera.alignHologram');
-      } else if (nextStep === 'SCAN_ID_BACK') {
-        if (status === 'SCANNING') {
-          message = t('identityDocumentCamera.readingDocument');
-        } else {
-          message = t('identityDocumentCamera.alignIDBackSide');
-        }
-      } else if (nextStep === 'COMPLETED') {
-        message = t('identityDocumentCamera.scanCompleted');
+      } 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 (
         appContext.currentWorkflowStep?.data?.voiceGuidanceActive &&
-        message
+        message &&
+        message !== lastVoiceGuidanceMessage.current
       ) {
-        speakWithDebounce(message);
+        lastVoiceGuidanceMessage.current = message;
+        speak(message, true);
       }
     }
   }, [
@@ -349,402 +533,287 @@ const IdentityDocumentCamera = ({
     completedStep,
     currentFaceImage,
     detectedDocumentType,
+    allElementsDetected,
+    elementsOutsideScanArea,
     t,
   ]);
 
-  // Auto-reset INCORRECT status after showing warning briefly
   useEffect(() => {
     if (status === 'INCORRECT') {
       const timeout = setTimeout(() => {
         setStatus('SEARCHING');
-      }, 1500); // Show warning for 1.5 seconds
+      }, 1500);
       return () => clearTimeout(timeout);
     }
   }, [status]);
 
-  // Periodic autofocus - refocus on scan area center every 2.5 seconds
+  // Disable face detection when scanning back side (no face expected, avoids false positives)
   useEffect(() => {
-    if (!isActive || !device || !cameraRef.current || !device.supportsFocus) {
-      return;
-    }
-
-    // Only autofocus during searching and scanning states
-    if (status !== 'SEARCHING' && status !== 'SCANNING') {
-      return;
+    if (nextStep === 'SCAN_ID_BACK') {
+      setFaceDetectionEnabled(false);
+    } else {
+      setFaceDetectionEnabled(true);
     }
+  }, [nextStep]);
 
-    const autofocusInterval = setInterval(async () => {
+  // Native OpenCV: detect hologram from sequence of face images
+  const detectHologramNative = useCallback(
+    async (images: string[]): Promise<[string, string] | []> => {
       try {
-        // Get camera dimensions (assuming format dimensions)
-        const width = format?.videoWidth ?? 1920;
-        const height = format?.videoHeight ?? 1080;
-
-        // Calculate center point of scan area
-        const centerPoint = getScanAreaCenterPoint(width, height);
-
-        // Focus on the center of the scan area
-        await cameraRef.current?.focus({
-          x: centerPoint.x,
-          y: centerPoint.y,
-        });
+        if (isDebugEnabled()) {
+          debugLog(
+            'IdentityDocumentCamera',
+            `[Hologram] Detecting hologram from ${images.length} images`
+          );
+        }
+        // Limit images to prevent memory issues
+        const limitedImages = images.slice(0, HOLOGRAM_IMAGE_COUNT);
+        const result = await OpenCVModule.detectHologram(
+          limitedImages,
+          HOLOGRAM_DETECTION_THRESHOLD
+        );
+        if (result) {
+          return [result.hologramMask, result.hologramImage];
+        }
       } catch (error) {
-        // Ignore autofocus errors
+        logError('[Hologram] Detection error:', error);
       }
-    }, 2500); // Every 2.5 seconds
-
-    return () => clearInterval(autofocusInterval);
-  }, [isActive, device, format, status]);
-
-  const detectDocumentType = (
-    faces: Face[],
-    ocrText: string,
-    mrzFields?: FieldRecords
-  ) => {
-    if (
-      faces.length > 0 &&
-      !mrzFields &&
-      ocrText?.includes('Signature')
-      // ocrText?.includes('Surname') &&
-      // ocrText?.includes('Given Name(s)') &&
-      // ocrText?.includes('Date of Birth') &&
-      // ocrText?.includes('Document No') &&
-      // ocrText?.includes('Valid Until')
-    ) {
-      return 'ID_FRONT';
-    } else if (
-      faces.length === 0 &&
-      mrzFields?.documentCode === 'I'
-      // ocrText?.includes("Father's Name") &&
-      // ocrText?.includes("Mother's Name") &&
-      // ocrText?.includes('Issued By')
-    ) {
-      return 'ID_BACK';
-    } else if (faces.length > 0 && mrzFields?.documentCode === 'P') {
-      return 'PASSPORT';
-    }
-
-    return 'UNKNOWN';
-  };
-
-  // const setBoundingBoxInJS = useRunOnJS(
-  //   (bounds: Bounds) => {
-  //     setBoundingBox(bounds);
-  //   },
-  //   [setBoundingBox],
-  // );
-
-  // const isBlockInFrame = (block: BlocksData) => {
-  //   'worklet';
-  //   const scanningFrame = {
-  //     x: 0.03 * 1080,
-  //     y: 0.35 * 1920,
-  //     width: 0.94 * 1080,
-  //     height: 0.3 * 1920,
-  //   } as Bounds;
-  //   const bounds = {
-  //     x: block.blockFrame.x,
-  //     y: block.blockFrame.y,
-  //     width: block.blockFrame.width,
-  //     height: block.blockFrame.height,
-  //   } as Bounds;
-
-  //   if (
-  //     bounds.x >= scanningFrame.x &&
-  //     bounds.y >= scanningFrame.y &&
-  //     bounds.x + bounds.width <= scanningFrame.x + scanningFrame.width &&
-  //     bounds.y + bounds.height <= scanningFrame.y + scanningFrame.height
-  //   ) {
-  //     return true;
-  //   }
-
-  //   setBoundingBoxInJS({
-  //     x: (bounds.x / 1080) * windowWidth,
-  //     y: (bounds.y / 1920) * windowHeight,
-  //     width: (bounds.width / 1080) * windowWidth,
-  //     height: (bounds.height / 1920) * windowHeight,
-  //   });
-
-  //   return false;
-  // };
-
-  const applyThreshold = (image: Mat) => {
-    const gray = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
-
-    // Convert to grayscale
-    OpenCV.invoke('cvtColor', image, gray, ColorConversionCodes.COLOR_RGB2GRAY);
-
-    // Apply GaussianBlur to reduce noise
-    const kSize = OpenCV.createObject(ObjectType.Size, 5, 5);
-    OpenCV.invoke('GaussianBlur', gray, gray, kSize, 0);
-
-    // Apply Otsu's thresholding
-    OpenCV.invoke(
-      'threshold',
-      gray,
-      gray,
-      0,
-      255,
-      ThresholdTypes.THRESH_BINARY + ThresholdTypes.THRESH_OTSU
-    );
-
-    return gray;
-  };
+      return [];
+    },
+    []
+  );
 
-  const areImagesSimilar = (
+  // Native OpenCV: compare two images for similarity
+  const areImagesSimilarNative = async (
     image1: string,
     image2: string,
-    threshold = 15000
-  ) => {
+    threshold = 20000 // Relaxed threshold for better tolerance of lighting/angle variations
+  ): Promise<boolean> => {
     try {
-      if (!image1 || !image2) {
-        return false;
-      }
-      const mat1 = OpenCV.base64ToMat(image1);
-      const mat2 = OpenCV.base64ToMat(image2);
-      const diff = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
-      OpenCV.invoke(
-        'absdiff',
-        applyThreshold(mat1),
-        applyThreshold(mat2),
-        diff
-      );
-      const count = OpenCV.invoke('countNonZero', diff);
-
-      return count.value < threshold;
+      if (!image1 || !image2) return false;
+      return await OpenCVModule.areImagesSimilar(image1, image2, threshold);
     } catch (error) {
-      // console.log('Error while comparing images:', error);
       return false;
     }
   };
 
-
-  const detectHologram = (images: string[]) => {
-    try {
-      const lowerBound = OpenCV.createObject(ObjectType.Scalar, 40, 90, 90);
-      const upperBound = OpenCV.createObject(ObjectType.Scalar, 179, 255, 255);
-      const diffs = [];
-      const hologram = OpenCV.base64ToMat(images[0]);
-      for (let i = 0; i < images.length - 1; i++) {
-        const mat1 = OpenCV.base64ToMat(images[i]);
-        const mat2 = OpenCV.base64ToMat(images[i + 1]);
-        let diff = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
-        OpenCV.invoke('absdiff', mat1, mat2, diff);
-        OpenCV.invoke(
-          'cvtColor',
-          diff,
-          diff,
-          ColorConversionCodes.COLOR_RGB2HSV
-        );
-        OpenCV.invoke('inRange', diff, lowerBound, upperBound, diff);
-        if (OpenCV.invoke('countNonZero', diff).value > 500) {
-          OpenCV.invoke('addWeighted', hologram, 0.5, mat2, 0.5, 0, hologram);
-          diffs.push(diff);
-        }
-      }
-
-      const hologramMask = diffs[0];
-      for (let i = 1; i < diffs.length; i++) {
-        OpenCV.invoke(
-          'addWeighted',
-          hologramMask,
-          0.5,
-          diffs[i],
-          0.5,
-          0,
-          hologramMask
-        );
-      }
-      OpenCV.invoke(
-        'adaptiveThreshold',
-        hologramMask,
-        hologramMask,
-        255,
-        AdaptiveThresholdTypes.ADAPTIVE_THRESH_GAUSSIAN_C,
-        ThresholdTypes.THRESH_BINARY_INV,
-        21,
-        2
-      );
-      const count = OpenCV.invoke('countNonZero', hologramMask);
-      if (count.value > HOLOGRAM_DETECTION_THRESHOLD) {
-        const hologramMaskJs = OpenCV.toJSValue(hologramMask);
-        const hologramJs = OpenCV.toJSValue(hologram);
-        return [hologramMaskJs.base64, hologramJs.base64];
-      }
-    } catch (error) {
-      // console.log('Error while detecting hologram:', error);
-    }
-
-    return [];
-  };
-
-  const getFaceImagesOrderedByLocation = (faces: Face[]) => {
-    return faces.sort((a, b) => {
-      if (a.bounds.x < b.bounds.x) {
-        return -1;
-      } else if (a.bounds.x > b.bounds.x) {
-        return 1;
-      }
-      return 0;
-    });
-  };
-
+  // Native OpenCV: crop face images from full frame
   const getFaceImages = async (
-    faces: Face[],
+    facesToDetect: Face[],
     image: string,
     width: number,
     height: number
-  ) => {
-    if (!faces.length || !image || width <= 0 || height <= 0) {
+  ): Promise<string[]> => {
+    if (!facesToDetect.length || !image || width <= 0 || height <= 0) {
       return [];
     }
-
-    const croppedFaces = [];
-
     try {
-      for (const face of getFaceImagesOrderedByLocation(faces)) {
-        const uri = `data:image/jpeg;base64,${image}`;
+      const faceBounds = facesToDetect.map((f) => ({
+        x: f.bounds.x,
+        y: f.bounds.y,
+        width: f.bounds.width,
+        height: f.bounds.height,
+      }));
+      const croppedFaces: string[] = await OpenCVModule.cropFaceImages(
+        image,
+        faceBounds,
+        width,
+        height
+      );
+      return croppedFaces ?? [];
+    } catch (error) {
+      logError('[getFaceImages] Native face crop failed:', error);
+      return [];
+    }
+  };
 
-        // Add validation for face bounds to prevent invalid crop operations
-        if (
-          face.bounds.x < 0 ||
-          face.bounds.y < 0 ||
-          face.bounds.width <= 0 ||
-          face.bounds.height <= 0 ||
-          face.bounds.x >= width ||
-          face.bounds.y >= height
-        ) {
-          // console.warn(
-          //   'Invalid face bounds detected, skipping face:',
-          //   face.bounds
-          // );
-          continue;
-        }
+  const setNextStepAndVibrate = useCallback(
+    (
+      nextStepType:
+        | 'SCAN_ID_FRONT_OR_PASSPORT'
+        | 'SCAN_ID_BACK'
+        | 'SCAN_HOLOGRAM'
+        | 'COMPLETED',
+      fromStep?: 'SCAN_ID_FRONT_OR_PASSPORT' | 'SCAN_ID_BACK' | 'SCAN_HOLOGRAM'
+    ) => {
+      if (fromStep) {
+        setCompletedStep(fromStep);
+      }
 
-        // Calculate crop area with bounds checking
-        const expandedWidth = face.bounds.width * 1.5;
-        const expandedHeight = face.bounds.height * 1.5;
-        const offsetX = Math.max(0, face.bounds.x - expandedWidth / 6);
-        const offsetY =
-          Platform.OS === 'ios'
-            ? Math.max(0, face.bounds.y - expandedHeight / 6)
-            : Math.max(0, width - face.bounds.y - expandedHeight / 1.2);
-
-        const croppedFace = await ImageEditor.cropImage(uri, {
-          offset: {
-            x: offsetX,
-            y: offsetY,
-          },
-          size: {
-            width: expandedWidth,
-            height: expandedHeight,
-          },
-          displaySize: {
-            width: 240,
-            height: 320,
-          },
-          includeBase64: true,
-          quality: 1,
-        });
+      // 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);
+      }
 
-        if (croppedFace.width !== 240 || croppedFace.height !== 320) {
-          try {
-            const croppedFaceMat = OpenCV.base64ToMat(croppedFace.base64);
-
-            // Ensure crop dimensions are valid for the matrix
-            const matCropWidth = Math.min(240, croppedFace.width);
-            const matCropHeight = Math.min(320, croppedFace.height);
-
-            // Only crop if we have valid dimensions
-            if (matCropWidth > 0 && matCropHeight > 0) {
-              OpenCV.invoke(
-                'crop',
-                croppedFaceMat,
-                croppedFaceMat,
-                OpenCV.createObject(
-                  ObjectType.Rect,
-                  0,
-                  0,
-                  matCropWidth,
-                  matCropHeight
-                )
-              );
-              croppedFaces.push(OpenCV.toJSValue(croppedFaceMat).base64);
-            } else {
-              // Fallback to original base64 if crop dimensions are invalid
-              croppedFaces.push(croppedFace.base64);
-            }
-          } catch (cropError) {
-            console.warn('OpenCV crop operation failed:', cropError);
-            // Fallback to original image if OpenCV crop fails
-            croppedFaces.push(croppedFace.base64);
-          }
-        } else {
-          croppedFaces.push(croppedFace.base64);
+      // Clean up flash and hologram state when leaving SCAN_HOLOGRAM step
+      if (fromStep === 'SCAN_HOLOGRAM' && nextStepType !== 'SCAN_HOLOGRAM') {
+        setIsTorchOn(false);
+        faceImages.current = [];
+        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'
+          );
         }
       }
-    } catch (error) {
-      console.warn('Error while cropping face:', error);
-    }
 
-    return croppedFaces;
-  };
+      setNextStep(nextStepType);
+      Vibration.vibrate(100);
 
-  const setNextStepAndVibrate = (
-    nextStepType:
-      | 'SCAN_ID_FRONT_OR_PASSPORT'
-      | 'SCAN_ID_BACK'
-      | 'SCAN_HOLOGRAM'
-      | 'COMPLETED',
-    fromStep?:
-      | 'SCAN_ID_FRONT_OR_PASSPORT'
-      | 'SCAN_ID_BACK'
-      | 'SCAN_HOLOGRAM'
-  ) => {
-    // Track which step was just completed for showing specific message
-    if (fromStep) {
-      setCompletedStep(fromStep);
-    }
-    setNextStep(nextStepType);
-    Vibration.vibrate(100);
+      // Reset MRZ retry counter for each new step so retries start fresh
+      mrzDetectionCurrentRetryCount.current = 0;
+      lastValidMRZText.current = null;
+      validMRZConsecutiveCount.current = 0;
+      cachedBarcode.current = null; // Clear cached barcode on step change
 
-    // Reset status after delay to show success animation fully before next step
-    if (nextStepType !== 'COMPLETED') {
-      setTimeout(() => {
-        setStatus('SEARCHING');
-        setCompletedStep(null);
-      }, 2000); // Show success checkmark for 2 seconds before transitioning
-    }
-  };
-
-  const handleBrightness = useRunOnJS(
-    (isBright: boolean) => {
-      setIsBrightnessLow(!isBright);
-    },
-    [setIsBrightnessLow]
-  );
-
-  const handleBlurStatus = useRunOnJS(
-    (blurry: boolean) => {
-      setIsFrameBlurry(blurry);
+      if (nextStepType !== 'COMPLETED') {
+        setTimeout(() => {
+          setStatus('SEARCHING');
+          setCompletedStep(null);
+        }, 1000);
+      }
     },
-    [setIsFrameBlurry]
+    [setIsTorchOn]
   );
 
-  const handleFaceAndText = useRunOnJS(
+  const handleFaceAndText = useCallback(
     async (
       text: string,
       faces: Face[],
       frameWidth: number,
       frameHeight: number,
       barcode?: Barcode,
-      image?: string
+      image?: string,
+      elementsOutside?: boolean,
+      nativeMrzResult?: Frame['mrzResult']
     ) => {
+      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
+          );
+        }
+
+        // ID Back: no face + ID MRZ
+        if (facesParam.length === 0 && mrzFields?.documentCode === 'I') {
+          return 'ID_BACK';
+        }
+
+        // Passport: face + passport MRZ
+        if (facesParam.length > 0 && mrzFields?.documentCode === 'P') {
+          return 'PASSPORT';
+        }
+
+        // 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);
+          }
+
+          // 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;
+
+          // 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);
+          }
+        }
+
+        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
+      if (barcode?.rawValue && nextStep === 'SCAN_ID_BACK') {
+        cachedBarcode.current = barcode;
+      }
+      const barcodeToUse = barcode || cachedBarcode.current;
+
+      // Store frame dimensions for coordinate conversion
       if (
-        device?.hasTorch &&
-        isTorchOn &&
+        frameDimensions?.width !== frameWidth ||
+        frameDimensions.height !== frameHeight
+      ) {
+        setFrameDimensions({ width: frameWidth, height: frameHeight });
+      }
+
+      if (
+        nextStep !== 'SCAN_HOLOGRAM' &&
+        isTorchOnRef.current &&
         (currentHologramImage ||
-          hologramDetectionCurrentRetryCount.value >=
-          HOLOGRAM_DETECTION_RETRY_COUNT)
+          hologramDetectionCurrentRetryCount.current >=
+            HOLOGRAM_DETECTION_RETRY_COUNT)
       ) {
         setIsTorchOn(false);
       }
@@ -754,30 +823,450 @@ const IdentityDocumentCamera = ({
         return;
       }
 
-      // Early wrong side detection for SCAN_ID_BACK: if faces detected, it's the front side
-      if (nextStep === 'SCAN_ID_BACK' && faces.length > 0) {
+      if (elementsOutside) {
+        return;
+      }
+
+      if (nextStep === 'SCAN_ID_BACK' && cardSizedFaces.length > 0) {
         setStatus('INCORRECT');
         return;
       }
 
-      if (!text || text.length < 10 || !image) {
+      // Only crop and lock face when ID_FRONT or PASSPORT is confirmed
+      const shouldCropFaces =
+        detectedDocumentType === 'ID_FRONT' ||
+        detectedDocumentType === 'PASSPORT' ||
+        nextStep !== 'SCAN_ID_FRONT_OR_PASSPORT';
+      const croppedFaces = shouldCropFaces
+        ? await getFaceImages(
+            cardSizedFaces,
+            image ?? '',
+            frameWidth,
+            frameHeight
+          )
+        : [];
+
+      // Validate document plane consistency across all captures
+      let facePositionValid = true;
+      if (cardSizedFaces.length > 0 && cardSizedFaces[0]) {
+        const currentFaceBounds = cardSizedFaces[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'
+          );
+        }
+
+        // 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;
+          }
+
+          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,
+            cropPadding: cropPadding * scale,
+          });
+        }
+      }
+
+      // Capture and persist face only after document type is confirmed
+      // This prevents locking a face before we know what document we're scanning
+      let faceImageToUse = currentFaceImage;
+      if (
+        shouldCropFaces &&
+        croppedFaces.length > 0 &&
+        croppedFaces[0] &&
+        facePositionValid
+      ) {
+        if (!currentFaceImage) {
+          // First face detection after doc type confirmed - lock it for all subsequent steps
+          faceImageToUse = croppedFaces[0];
+          setCurrentFaceImage(croppedFaces[0]);
+          if (isDebugEnabled()) {
+            console.log(
+              '[DocPlane] Locked primary face from validated document plane (docType: ' +
+                detectedDocumentType +
+                ')'
+            );
+          }
+        }
+      }
+
+      if (!text || text.length < 5 || !image) {
         setStatus('SEARCHING');
         return;
       }
 
-      const { mrzText, parsedResult: parsedMRZData } =
-        mrzUtils.getMRZData(text);
-      const croppedFaces = await getFaceImages(
-        faces,
-        image,
-        frameWidth,
-        frameHeight
-      );
+      const parsedMRZData =
+        nativeMrzResult?.valid && nativeMrzResult.documentCode
+          ? { valid: true, fields: nativeMrzResult as MRZFields }
+          : nativeMrzResult?.documentCode
+            ? { valid: false, fields: nativeMrzResult as MRZFields }
+            : { valid: false, fields: null };
+      const mrzText = parsedMRZData.valid ? nativeMrzResult?.rawLines : 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
+      const mrzHasRequiredFields = hasRequiredMRZFields(parsedMRZData?.fields);
+
+      if (
+        mrzText &&
+        parsedMRZData?.valid === true &&
+        parsedMRZData?.fields &&
+        mrzHasRequiredFields
+      ) {
+        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
+      }
+
+      // Check if we have enough consistent valid reads
+      const mrzStableAndValid =
+        validMRZConsecutiveCount.current >= REQUIRED_CONSISTENT_MRZ_READS &&
+        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
+      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);
+
+        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}`
+            );
+          }
+          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({
+              image,
+              documentType: 'PASSPORT',
+              mrzText: mrzText ?? undefined,
+              mrzFields: parsedMRZData?.fields,
+            });
+          }, 1000);
+          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;
+        const barcodeMatchesMRZ =
+          barcodeToUse?.rawValue?.trim() ===
+          parsedMRZData?.fields?.optional1?.trim();
+        // Require barcode for all documents (no special card fallback)
+        const barcodeAccepted = onlyMRZScan || barcodeMatchesMRZ;
+
+        // 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;
+
+        // Don't block based on bounds - just ensure elements are present
+        setElementsOutsideScanArea([]);
+
+        if (!allRequiredElementsInFrame && hasMRZ && mrzAccepted) {
+          if (isDebugEnabled()) {
+            console.log(
+              '[ID_BACK Scan] MRZ valid but waiting for all elements in frame (MRZ + barcode)'
+            );
+          }
+          setStatus('SCANNING');
+          return;
+        }
+
+        if (
+          hasMRZ &&
+          mrzAccepted &&
+          barcodeAccepted &&
+          allRequiredElementsInFrame
+        ) {
+          logMRZDetails(
+            'ID_BACK Scan',
+            parsedMRZData?.fields,
+            mrzText,
+            validMRZConsecutiveCount.current,
+            isDebugEnabled()
+          );
+          const scannedData: DocumentScannedData = {
+            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,
+                  mrzOptional1: parsedMRZData?.fields?.optional1,
+                  barcodeValue: barcodeToUse?.rawValue,
+                  barcodeSource:
+                    barcodeToUse === cachedBarcode.current
+                      ? 'cached'
+                      : 'current',
+                }
+              );
+            }
+          }
+          mrzDetectionCurrentRetryCount.current++;
+          setStatus(hasMRZ ? 'SCANNING' : 'SEARCHING');
+        }
+        return;
+      }
+
       const documentType = detectDocumentType(
-        faces,
+        cardSizedFaces,
         text,
-        parsedMRZData?.fields
+        parsedMRZData?.fields,
+        frameWidth,
+        mrzText
       );
+
+      // 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
+      if (
+        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' &&
+        detectedDocumentType === 'UNKNOWN'
+      ) {
+        // 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';
+        }
+
+        // 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 (
+          lastFrameQuality.current.hasAcceptableQuality &&
+          docTypeToSet !== 'UNKNOWN'
+        ) {
+          if (docTypeToSet === lastDetectedDocType.current) {
+            consistentDocTypeCount.current++;
+            if (isDebugEnabled()) {
+              console.log(
+                `[DocType Stability] Consistent detection: ${docTypeToSet} (${consistentDocTypeCount.current}/${REQUIRED_CONSISTENT_DOCTYPE_DETECTIONS})`
+              );
+            }
+
+            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,
         documentType,
@@ -785,420 +1274,1281 @@ const IdentityDocumentCamera = ({
         mrzFields: parsedMRZData?.fields,
       };
 
-      scannedData.faceImage = croppedFaces[0];
-      setCurrentFaceImage(croppedFaces[0]);
-
-      // Track detected document type for UI feedback
-      if (documentType !== 'UNKNOWN') {
-        setDetectedDocumentType(documentType);
-      }
-
-      // Detect wrong side based on document type or face presence (works for both normal and eID scan)
-      // For ID_BACK step: if faces are detected, it's likely the front side (wrong)
-      // For FRONT step: if ID_BACK is detected, it's the wrong side
       const isWrongSide =
-        (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' && documentType === 'ID_BACK') ||
-        (nextStep === 'SCAN_ID_BACK' && (documentType === 'ID_FRONT' || documentType === 'PASSPORT' || croppedFaces.length > 0));
+        nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' && documentType === 'ID_BACK';
 
       if (isWrongSide) {
         setStatus('INCORRECT');
         return;
       }
 
+      // Always use locked face if available
+      if (faceImageToUse) {
+        scannedData.faceImage = faceImageToUse;
+      }
+
       if (!onlyMRZScan) {
-        if (croppedFaces.length > 0 && croppedFaces[0]) {
-          if (currentFaceImage) {
-            scannedData.faceImage = currentFaceImage;
+        // Hologram detection during SCAN_HOLOGRAM step - ALWAYS use first/leftmost face ONLY
+        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.
+          const hologramFaceBounds =
+            cardSizedFaces.length > 0 && cardSizedFaces[0]
+              ? cardSizedFaces[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;
           } else {
-            scannedData.faceImage = croppedFaces[0];
-            setCurrentFaceImage(croppedFaces[0]);
+            primaryFaceOnly = faceImageToUse;
           }
 
-          if (currentHologramImage) {
-            scannedData.hologramImage = currentHologramImage;
-          } else if (faceImages.length <= HOLOGRAM_IMAGE_COUNT) {
-            if (device?.hasTorch) {
-              setIsTorchOn(true);
+          // 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();
+              const timeSinceLastCapture =
+                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);
+                }
+
+                if (isDebugEnabled()) {
+                  console.log(
+                    `[Hologram] Collected ${faceImages.current.length}/${HOLOGRAM_IMAGE_COUNT} face images`
+                  );
+                }
+
+                // Keep flash on during processing - will turn off when step changes
+              }
+            } 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`
+                );
+              }
+              try {
+                const [hologramMask, hologram] = await detectHologramNative(
+                  faceImages.current
+                );
+                if (hologram) {
+                  setCurrentHologramMaskImage(hologramMask);
+                  scannedData.hologramImage = hologram;
+                  setCurrentHologramImage(hologram);
+                  if (isDebugEnabled()) {
+                    console.log('[Hologram] Detection successful');
+                  }
+                } else {
+                  if (isDebugEnabled()) {
+                    console.log('[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}`
+                  );
+                }
+              }
             }
-            faceImages.push(croppedFaces[0]);
           } else {
-            const [hologramMask, hologram] = detectHologram(faceImages);
-            if (
-              !!currentFaceImage &&
-              areImagesSimilar(currentFaceImage, hologram, 25000)
-            ) {
-              setCurrentHologramMaskImage(hologramMask);
-              scannedData.hologramImage = hologram;
-              setCurrentHologramImage(hologram);
+            // 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}`
+              );
             }
-            faceImages = [];
-            hologramDetectionCurrentRetryCount.value++;
           }
+        } 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'
+            );
+          }
+        }
 
+        // 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] &&
-            areImagesSimilar(scannedData.faceImage, croppedFaces[1])
+            facePositionValid
           ) {
-            scannedData.secondaryFaceImage = croppedFaces[1];
-            setCurrentSecondaryFaceImage(scannedData.secondaryFaceImage);
+            // 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
+            );
+
+            if (isSimilar) {
+              scannedData.secondaryFaceImage = croppedFaces[1];
+              setCurrentSecondaryFaceImage(scannedData.secondaryFaceImage);
+
+              // 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;
+
+                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 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 (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.value++;
+            secondaryFaceDetectionCurrentRetryCount.current++;
+            if (!facePositionValid && croppedFaces.length > 1) {
+              if (isDebugEnabled()) {
+                console.log(
+                  '[SecondaryFace] ✗ Rejected - document plane changed'
+                );
+              }
+            }
           }
+        } else if (currentSecondaryFaceImage) {
+          // Already have secondary face from earlier - just use it
+          scannedData.secondaryFaceImage = currentSecondaryFaceImage;
         }
       }
 
+      // UNIFIED SCAN_HOLOGRAM completion - ONLY check primary face and hologram collection
+      // Document type is already definitively determined before entering this 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
+
+        // 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;
+
+        if (isWrongSideForHologram) {
+          if (isDebugEnabled()) {
+            console.log(
+              `[SCAN_HOLOGRAM] Wrong side detected - no faces: ${!hasFaces}, has barcode: ${hasBarcode} - expecting front side with photo`
+            );
+          }
+          setStatus('INCORRECT');
+          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;
+
+        // Don't skip if actively collecting images
+        const isActivelyCollecting =
+          faceImages.current.length > 0 &&
+          faceImages.current.length < HOLOGRAM_IMAGE_COUNT;
+
+        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`
+          );
+        }
+
+        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);
+          return;
+        }
+        // Still collecting or conditions not met - stay in SCAN_HOLOGRAM
+        // Don't fall through to document type branching
+        setStatus('SCANNING');
+        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') {
+            if (isDebugEnabled()) {
+              console.log(
+                '[ID_FRONT Scan] Detected as ID_FRONT but MRZ shows passport (code P) - waiting for passport branch'
+              );
+            }
+            setStatus('SCANNING');
+            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);
+
+          setElementsOutsideScanArea([]);
+
+          if (!allRequiredElementsInFrame) {
+            console.log(
+              '[ID_FRONT Scan] Valid but waiting for all elements in frame (face + signature)'
+            );
+            mrzDetectionCurrentRetryCount.current++;
+            setStatus('SCANNING');
+            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
+            if (isDebugEnabled()) {
+              console.log(
+                '[ID_FRONT Scan] Passport MRZ pattern (P<XXX) visible but not parsed - waiting for passport classification'
+              );
+            }
+            mrzDetectionCurrentRetryCount.current++;
+            setStatus('SCANNING');
+            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) {
-            setNextStepAndVibrate('SCAN_ID_BACK', 'SCAN_ID_FRONT_OR_PASSPORT');
-            onIdentityDocumentScanned(scannedData);
+            // 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');
-          }
-        } else if (
-          nextStep === 'SCAN_HOLOGRAM' &&
-          (!!scannedData.hologramImage ||
-            hologramDetectionCurrentRetryCount.value >=
-            HOLOGRAM_DETECTION_RETRY_COUNT) &&
-          (!!scannedData.secondaryFaceImage ||
-            secondaryFaceDetectionCurrentRetryCount.value >=
-            SECOND_FACE_DETECTION_RETRY_COUNT)
-        ) {
-          setStatus('SCANNED');
-          setNextStepAndVibrate('SCAN_ID_BACK', 'SCAN_HOLOGRAM');
-          onIdentityDocumentScanned(scannedData);
+            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
         ) {
-          // For passport, require valid MRZ before proceeding
           if (onlyMRZScan) {
-            // eID scan: require valid MRZ
+            const hasRequiredFields = hasRequiredMRZFields(
+              parsedMRZData?.fields
+            );
+            // CRITICAL: Only accept MRZ with valid checksums AND consistent reads
             if (
               !!scannedData.mrzText &&
-              (parsedMRZData?.valid ||
-                mrzDetectionCurrentRetryCount.value >= MRZ_VALIDATION_RETRY_COUNT)
+              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');
-              onIdentityDocumentScanned(scannedData);
-            } else if (!parsedMRZData?.valid) {
-              mrzDetectionCurrentRetryCount.value++;
+              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 scan: proceed to hologram check (MRZ validated later)
+            // 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;
+            }
+
+            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);
           }
-        } else if (
-          ((nextStep === 'SCAN_HOLOGRAM' &&
-            (!!scannedData.hologramImage ||
-              hologramDetectionCurrentRetryCount.value >=
-              HOLOGRAM_DETECTION_RETRY_COUNT) &&
-            (!!scannedData.secondaryFaceImage ||
-              secondaryFaceDetectionCurrentRetryCount.value >=
-              SECOND_FACE_DETECTION_RETRY_COUNT)) ||
-            onlyMRZScan) &&
-          !!scannedData.mrzText &&
-          (parsedMRZData?.valid ||
-            mrzDetectionCurrentRetryCount.value >= MRZ_VALIDATION_RETRY_COUNT)
-        ) {
-          setStatus('SCANNED');
-          setNextStepAndVibrate('COMPLETED', 'SCAN_HOLOGRAM');
-          onIdentityDocumentScanned(scannedData);
-        } else if (!parsedMRZData?.valid) {
-          mrzDetectionCurrentRetryCount.value++;
         }
+        // Note: SCAN_HOLOGRAM completion is now handled in the unified block above
       } else if (documentType === 'ID_BACK') {
-        if (
-          ((parsedMRZData?.fields?.issuingState === 'TUR' &&
-            barcode?.value?.trim() ===
-            parsedMRZData?.fields?.optional1?.trim()) ||
-            parsedMRZData?.fields?.issuingState !== 'TUR' ||
-            onlyMRZScan) &&
-          nextStep === 'SCAN_ID_BACK' &&
-          !!scannedData.mrzText &&
-          (parsedMRZData?.valid ||
-            mrzDetectionCurrentRetryCount.value >= MRZ_VALIDATION_RETRY_COUNT)
-        ) {
-          scannedData.barcodeValue = barcode?.value ?? undefined;
-          setStatus('SCANNED');
-          setNextStepAndVibrate('COMPLETED', 'SCAN_ID_BACK');
-          onIdentityDocumentScanned(scannedData);
-        } else if (!parsedMRZData?.valid) {
-          mrzDetectionCurrentRetryCount.value++;
-        }
+        // 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,
+            ')'
+          );
+        }
         setStatus('SCANNING');
       }
-
-      // Clear OpenCV buffers to prevent memory leaks
-      try {
-        OpenCV.clearBuffers();
-      } catch (bufferError) {
-        // Ignore buffer cleanup errors
-        console.warn('Buffer cleanup error:', bufferError);
-      }
     },
     [
-      currentFaceImage,
-      currentHologramImage,
-      currentSecondaryFaceImage,
-      device,
       nextStep,
+      frameDimensions,
+      currentHologramImage,
+      currentFaceImage,
+      hasRequiredMRZFields,
+      areMRZFieldsEqual,
+      detectedDocumentType,
       onlyMRZScan,
+      isTorchOn,
+      setIsTorchOn,
+      setNextStepAndVibrate,
+      onIdentityDocumentScanned,
+      logMRZDetails,
+      logMRZValidationFailure,
+      currentSecondaryFaceImage,
+      detectHologramNative,
     ]
   );
 
-  const handleExposureValue = useRunOnJS(
-    (value: number) => {
-      setExposure(value);
-    },
-    [exposure]
-  );
-
-  // Focus trigger for when blur is detected (called from worklet)
-  const triggerFocus = useRunOnJS(
-    async () => {
-      if (!cameraRef.current || !device?.supportsFocus) {
-        return;
-      }
-      try {
-        const width = format?.videoWidth ?? 1920;
-        const height = format?.videoHeight ?? 1080;
-        const centerPoint = getScanAreaCenterPoint(width, height);
-        await cameraRef.current.focus({
-          x: centerPoint.x,
-          y: centerPoint.y,
-        });
-      } catch (error) {
-        // Ignore focus errors
-      }
-    },
-    [device, format]
-  );
-
-  const handleExposureAndBrightness = (frame: Frame) => {
-    'worklet';
-    const averageBrightness = getAverageBrightness(frame);
-    const minExposure = device?.minExposure ?? 0;
-    const maxExposure = device?.maxExposure ?? 0;
-
-    // Dynamic thresholds based on scanning state using config values
-    // Face detection requires higher minimum brightness for reliable detection
-    const isFrontOrPassport = nextStep === 'SCAN_ID_FRONT_OR_PASSPORT';
-    const isBack = nextStep === 'SCAN_ID_BACK';
-
-    // Using config values: faceDetection { low: 50, high: 110, target: 85 }, mrzScanning { low: 45, high: 130, target: 80 }
-    const lowerBrightnessBound = isFrontOrPassport ? 50 : 40;
-    const upperBrightnessBound = isBack ? 130 : 120;
-    const targetBrightness = isFrontOrPassport ? 85 : 80;
-
-    // Smooth exposure adjustment with hysteresis to prevent oscillation
-    // Only adjust if brightness is significantly outside the acceptable range
-    const hysteresis = 5; // Dead zone to prevent jitter
-
-    if (
-      averageBrightness < (lowerBrightnessBound - hysteresis) &&
-      exposureValue.value < maxExposure
-    ) {
-      // Increase exposure smoothly when too dark
-      const step = calculateExposureStep(averageBrightness, targetBrightness);
-      exposureValue.value = Math.min(maxExposure, exposureValue.value + step);
-    } else if (
-      averageBrightness > (upperBrightnessBound + hysteresis) &&
-      exposureValue.value > minExposure
-    ) {
-      // Decrease exposure smoothly when too bright
-      const step = calculateExposureStep(averageBrightness, targetBrightness);
-      exposureValue.value = Math.max(minExposure, exposureValue.value - step);
-    }
-    // When within acceptable range (with hysteresis), don't adjust - prevents oscillation
-
-    const isBright = averageBrightness > lowerBrightnessBound;
-    handleExposureValue(exposureValue.value);
-    handleBrightness(isBright);
-
-    return isBright;
-  };
-
-  const handleWorklet = (frame: Frame) => {
-    'worklet';
-    try {
-      const isBright = handleExposureAndBrightness(frame);
-      if (!isBright) {
-        return;
-      }
-
-
-
-      // Check for blur before processing - skip blurry frames
-      // Use different thresholds: 25 for front (face detection), 30 for back (MRZ/text)
-      // Higher thresholds with improved Laplacian algorithm using H+V gradients
-      const isFront = nextStep === 'SCAN_ID_FRONT_OR_PASSPORT';
-      const blurThreshold = isFront ? 25 : 30;
-      const blurry = checkBlurry(frame, blurThreshold);
-      handleBlurStatus(blurry);
-      if (blurry) {
-        consecutiveBlurCount.value++;
-        // Only trigger focus after 2 consecutive blurry frames (matching Flutter)
-        if (consecutiveBlurCount.value >= 2) {
-          triggerFocus();
-          consecutiveBlurCount.value = 0;
-        }
+  const handleFrame = useCallback(
+    async (event: NativeSyntheticEvent<{ frame: Frame }>) => {
+      if (!isCameraInitialized.current) {
         return;
       }
-      // Reset blur count on sharp frame
-      consecutiveBlurCount.value = 0;
 
+      const { frame } = event.nativeEvent;
 
-      // Validate frame dimensions before processing
       if (
         !frame.width ||
         !frame.height ||
         frame.width <= 0 ||
         frame.height <= 0
       ) {
-        console.warn('Invalid frame dimensions:', {
-          width: frame.width,
-          height: frame.height,
-        });
         return;
       }
 
-      // Detect faces first with error handling
-      let detectedFaces: Face[] = [];
-      try {
-        if (faceDetectionEnabled) {
-          detectedFaces = detectFaces(frame);
-          // Reset error count on successful detection
-          faceDetectionErrorCount.value = 0;
-        }
-      } catch (faceError) {
-        console.warn('Face detection failed:', faceError);
-        faceDetectionErrorCount.value += 1;
-
-        // Disable face detection temporarily after 5 consecutive errors
-        if (faceDetectionErrorCount.value >= 5) {
-          setFaceDetectionEnabled(false);
-          // Re-enable after 10 seconds
-          setTimeout(() => {
-            setFaceDetectionEnabled(true);
-            faceDetectionErrorCount.value = 0;
-          }, 10000);
-        }
+      const base64Image = frame.base64Image;
+      if (!base64Image) return;
 
-        detectedFaces = []; // Continue without face detection
+      const frameBrightness = frame.brightness ?? 128;
+      brightnessHistory.current.push(frameBrightness);
+      if (brightnessHistory.current.length > 5) {
+        brightnessHistory.current.shift();
       }
+      const avgBrightness =
+        brightnessHistory.current.reduce((a, b) => a + b, 0) /
+        brightnessHistory.current.length;
+      const isOverallBright = avgBrightness >= MIN_BRIGHTNESS_THRESHOLD;
 
-      // Create a copy of the frame for cropping to avoid buffer conflicts
-      let image: CropResult;
+      setIsBrightnessLow(!isOverallBright);
+
+      // Check blur only in center region (area of interest) to avoid false positives
+      // from iOS depth-of-field background blur
+      let isNotBlurry = true;
+      let isBlurry = false; // Track blur state for quality metrics
       try {
-        image = crop(frame, {
-          cropRegion: {
-            top: 0,
-            left: 0,
-            width: 100,
-            height: 100,
-          },
-          includeImageBase64: true,
-          saveAsFile: false,
-        });
-      } catch (cropError) {
-        console.warn('Crop operation failed:', cropError);
-        return;
+        // Check blur in center 60% of frame (0.6 width x 0.6 height)
+        // Center position: 50% x, 50% y
+        isBlurry = await OpenCVModule.checkBlurryInRegion(
+          base64Image,
+          0.5, // centerXPercent
+          0.5, // centerYPercent
+          0.6, // widthPercent
+          0.6, // heightPercent
+          60 // threshold
+        );
+        isNotBlurry = !isBlurry;
+        setIsFrameBlurry(isBlurry);
+      } catch (error) {
+        setIsFrameBlurry(false);
       }
 
-      // Text recognition with error handling
-      // Note: CLAHE enhancement is applied to captured images, not live frames
-      // ML Kit plugins work directly on Frame objects and don't support Mat input
-      let scannedText: BlockText;
-      try {
-        scannedText = scanText(frame) as any as BlockText;
-      } catch (textError) {
-        console.warn('Text recognition failed:', textError);
-        scannedText = { blocks: [], resultText: '' };
+      // Only proceed if image quality is acceptable
+      const hasAcceptableQuality = isOverallBright && isNotBlurry;
+
+      // Store quality metrics in ref for access in handleFaceAndText callback
+      lastFrameQuality.current = {
+        hasAcceptableQuality,
+        isBlurry, // Use local variable, not state (which is from previous frame)
+        brightness: avgBrightness,
+      };
+
+      if (!hasAcceptableQuality) {
+        consecutiveQualityFailures.current++;
+        // After max failures, allow capture to prevent indefinite waiting
+        if (
+          consecutiveQualityFailures.current < MAX_CONSECUTIVE_QUALITY_FAILURES
+        ) {
+          return;
+        }
+        console.warn(
+          'Max quality failures reached, proceeding with current frame'
+        );
+      } else {
+        consecutiveQualityFailures.current = 0;
       }
 
-      // Barcode scanning with error handling
-      let barcodes: any[] = [];
       try {
-        barcodes = scanCodes(frame, {
-          barcodeTypes: ['code-128', 'code-39', 'code-93', 'ean-13', 'qr'],
-        });
-      } catch (barcodeError) {
-        console.warn('Barcode scanning failed:', barcodeError);
-        barcodes = [];
-      }
+        // Read faces directly from native ML Kit results
+        let detectedFaces: Face[] = [];
+        if (faceDetectionEnabled && frame.faces) {
+          detectedFaces = frame.faces.map((f) => ({
+            bounds: {
+              x: f.bounds.x,
+              y: f.bounds.y,
+              width: f.bounds.width,
+              height: f.bounds.height,
+            },
+            rollAngle: f.rollAngle,
+            yawAngle: f.yawAngle,
+          }));
+          faceDetectionErrorCount.current = 0;
+        }
 
-      handleFaceAndText(
-        scannedText.resultText ?? '',
-        detectedFaces,
-        frame.width,
-        frame.height,
-        barcodes.length ? barcodes[0] : undefined,
-        image?.base64
-      );
-    } catch (error: any) {
-      console.warn('Frame processing error:', error?.message);
-    }
-  };
+        // Read text directly from native ML Kit results
+        const textBlocks = frame.textBlocks ?? [];
+        const resultText = textBlocks.map((b) => b.text).join('\n');
+        const scannedText: BlockText = {
+          resultText,
+          blocks: textBlocks.map((block) => ({
+            blockText: block.text || '',
+            blockFrame: block.blockFrame ?? {
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+              boundingCenterX: 0,
+              boundingCenterY: 0,
+            },
+            blockCornerPoints: [] as unknown as CornerPointsType,
+            lines: [] as unknown as LinesData,
+            blockLanguages: [],
+          })),
+        };
+
+        // Read barcodes directly from native ML Kit results
+        let barcodes: Barcode[] = [];
+        if (frame.barcodes) {
+          barcodes = frame.barcodes.map((b) => ({
+            rawValue: b.rawValue,
+            displayValue: b.displayValue,
+            format: b.format,
+            boundingBox: b.boundingBox ?? {
+              left: 0,
+              top: 0,
+              right: 0,
+              bottom: 0,
+            },
+            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)}`
+              );
+            });
+          }
+        }
 
-  const frameProcessor = useFrameProcessor(
-    (frame) => {
-      'worklet';
+        // 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;
 
-      if (!isCameraInitialized.value) {
-        return;
-      }
+          let scale: number;
+          let offsetX = 0;
+          let offsetY = 0;
 
-      if (Platform.OS === 'ios') {
-        // iOS: Run at target 6 FPS using runAtTargetFps
-        runAtTargetFps(6, () => {
-          'worklet';
-          try {
-            handleWorklet(frame);
-          } catch (error: any) {
-            console.warn('iOS Frame processor error:', error?.message || error?.name || String(error));
+          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;
           }
-        });
-      } else {
-        // Android: Run async without throttling
-        runAsync(frame, () => {
-          'worklet';
-          try {
-            handleWorklet(frame);
-          } catch (workletError: any) {
-            console.warn('[Android workletCallback] Worklet execution error:', workletError?.message || workletError?.name || String(workletError));
+
+          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;
+
+          // Update barcode bounds
+          if (barcodes.length > 0 && barcodes[0]) {
+            const bbox = barcodes[0].boundingBox;
+            const corners = barcodes[0].cornerPoints;
+            let angle = 0;
+
+            // Calculate angle from corner points if available
+            if (corners && corners.length >= 2) {
+              const transformedCorners = corners.map((c) => ({
+                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);
+            }
+
+            if (isDebugEnabled()) {
+              console.log('[Debug] Barcode detected:', { bbox, angle });
+            }
+            setBarcodeBounds({
+              x: bbox.left * scale - offsetX,
+              y: bbox.top * scale - offsetY,
+              width: (bbox.right - bbox.left) * scale,
+              height: (bbox.bottom - bbox.top) * scale,
+              angle,
+              corners: corners?.map((c) => ({
+                x: c.x * scale - offsetX,
+                y: c.y * scale - offsetY,
+              })),
+            });
+          } else {
+            setBarcodeBounds(null);
           }
-        });
+
+          // Update face bounds continuously
+          if (detectedFaces.length > 0 && detectedFaces[0]) {
+            const faceBounds = detectedFaces[0].bounds;
+            const rollAngle = detectedFaces[0].rollAngle;
+            const faceWidth = faceBounds.width * scale;
+            const faceHeight = faceBounds.height * scale;
+            const cropPadding = Math.max(faceWidth * 0.15, faceHeight * 0.15);
+            setDocumentPlaneBounds({
+              x: faceBounds.x * scale - offsetX,
+              y: faceBounds.y * scale - offsetY,
+              width: faceWidth,
+              height: faceHeight,
+              rollAngle,
+              cropPadding,
+            });
+          } else {
+            setDocumentPlaneBounds(null);
+          }
+
+          // Update secondary face bounds
+          if (detectedFaces.length > 1 && detectedFaces[1]) {
+            const secondaryBounds = detectedFaces[1].bounds;
+            const rollAngle = detectedFaces[1].rollAngle;
+            const secondaryWidth = secondaryBounds.width * scale;
+            const secondaryHeight = secondaryBounds.height * scale;
+            const cropPadding = Math.max(
+              secondaryWidth * 0.15,
+              secondaryHeight * 0.15
+            );
+            if (
+              isInsideScan(
+                secondaryBounds.x,
+                secondaryBounds.y,
+                secondaryBounds.width,
+                secondaryBounds.height
+              )
+            ) {
+              setSecondaryFaceBounds({
+                x: secondaryBounds.x * scale - offsetX,
+                y: secondaryBounds.y * scale - offsetY,
+                width: secondaryWidth,
+                height: secondaryHeight,
+                rollAngle,
+                cropPadding,
+              });
+            } else {
+              setSecondaryFaceBounds(null);
+            }
+          } else {
+            setSecondaryFaceBounds(null);
+          }
+
+          // 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 mrzBlocks = textBlocks.filter(
+              (block) =>
+                block.blockFrame &&
+                block.blockFrame.y > bottomHalf &&
+                mrzPattern.test(block.text)
+            );
+
+            console.log('[Debug] MRZ blocks found:', mrzBlocks.length);
+            if (mrzBlocks.length > 0) {
+              const minX = Math.min(...mrzBlocks.map((b) => b.blockFrame!.x));
+              const minY = Math.min(...mrzBlocks.map((b) => b.blockFrame!.y));
+              const maxX = Math.max(
+                ...mrzBlocks.map((b) => b.blockFrame!.x + b.blockFrame!.width)
+              );
+              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,
+                }));
+
+              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,
+                width: (maxX - minX) * scale,
+                height: (maxY - minY) * scale,
+                angle,
+                corners:
+                  allCornerPoints.length > 0 ? allCornerPoints : undefined,
+              });
+            } else {
+              setMrzBounds(null);
+            }
+
+            // Detect signature area
+            const signaturePattern = /signature|imza|İmza/i;
+            const signatureBlocks = textBlocks.filter(
+              (block) => block.blockFrame && signaturePattern.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)
+              );
+              const minY = Math.min(
+                ...signatureBlocks.map((b) => b.blockFrame!.y)
+              );
+              const maxX = Math.max(
+                ...signatureBlocks.map(
+                  (b) => b.blockFrame!.x + b.blockFrame!.width
+                )
+              );
+              const maxY = Math.max(
+                ...signatureBlocks.map(
+                  (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);
+              }
+
+              setSignatureBounds({
+                x: minX * scale - offsetX,
+                y: minY * scale - offsetY,
+                width: (maxX - minX) * scale,
+                height: (maxY - minY) * scale,
+                angle,
+                corners:
+                  allCornerPoints.length > 0 ? allCornerPoints : undefined,
+              });
+            } 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
+          setBarcodeBounds(null);
+          setDocumentPlaneBounds(null);
+          setSecondaryFaceBounds(null);
+          setMrzBounds(null);
+          setSignatureBounds(null);
+        }
+
+        // Update allElementsDetected for status text display (regardless of debug mode)
+        if (nextStep === 'SCAN_ID_BACK') {
+          const hasMRZ = textBlocks.some((b) =>
+            /[A-Z0-9<]{8,}.*</i.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 hasFace = detectedFaces.length > 0;
+          const hasSignature = textBlocks.some((b) =>
+            /signature|imza|İmza/i.test(b.text)
+          );
+          setAllElementsDetected(
+            hasMRZ ? hasFace && hasMRZ : hasFace && hasSignature
+          );
+        } else {
+          setAllElementsDetected(false);
+        }
+
+        // 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 outsideElements: string[] = [];
+
+        // Collect all detected element bounds
+        const allBounds: Array<{
+          x: number;
+          y: number;
+          x2: number;
+          y2: number;
+        }> = [];
+        const primaryFace = detectedFaces[0];
+        if (primaryFace) {
+          if (
+            primaryFace.bounds.width >= frame.width * 0.05 &&
+            primaryFace.bounds.height >= frame.width * 0.05
+          ) {
+            allBounds.push({
+              x: primaryFace.bounds.x,
+              y: primaryFace.bounds.y,
+              x2: primaryFace.bounds.x + primaryFace.bounds.width,
+              y2: primaryFace.bounds.y + primaryFace.bounds.height,
+            });
+            if (
+              !isInsideScan(
+                primaryFace.bounds.x,
+                primaryFace.bounds.y,
+                primaryFace.bounds.width,
+                primaryFace.bounds.height
+              )
+            ) {
+              outsideElements.push('face');
+            }
+          }
+        }
+        for (const block of textBlocks) {
+          if (block.blockFrame) {
+            const bf = block.blockFrame;
+            if (bf.width > 0 && bf.height > 0) {
+              allBounds.push({
+                x: bf.x,
+                y: bf.y,
+                x2: bf.x + bf.width,
+                y2: bf.y + bf.height,
+              });
+            }
+            const isMRZ = /[A-Z0-9<]{8,}.*</i.test(block.text);
+            const isSignature = /signature|imza|İmza/i.test(block.text);
+            if (
+              (isMRZ || isSignature) &&
+              !isInsideScan(bf.x, bf.y, bf.width, bf.height)
+            ) {
+              outsideElements.push('text');
+            }
+          }
+        }
+        for (const bc of barcodes) {
+          if (bc.boundingBox) {
+            const bb = bc.boundingBox;
+            if (
+              !isInsideScan(
+                bb.left,
+                bb.top,
+                bb.right - bb.left,
+                bb.bottom - bb.top
+              )
+            ) {
+              outsideElements.push('barcode');
+            }
+          }
+        }
+
+        // Check that detected content spans enough of the scan area horizontally and vertically
+        // This catches cases where one side of the card is off-screen (elements on that side won't be detected)
+        if (allBounds.length > 0 && outsideElements.length === 0) {
+          const minX = Math.min(...allBounds.map((b) => b.x));
+          const maxX = Math.max(...allBounds.map((b) => b.x2));
+          const minY = Math.min(...allBounds.map((b) => b.y));
+          const maxY = Math.max(...allBounds.map((b) => b.y2));
+          const spanWidth = maxX - minX;
+          const spanHeight = maxY - minY;
+          const scanWidth = scanRight - scanLeft;
+          const scanHeight = scanBottom - scanTop;
+          // Require content to span at least 55% of scan area in both dimensions
+          if (spanWidth < scanWidth * 0.55 || spanHeight < scanHeight * 0.55) {
+            outsideElements.push('span');
+          }
+        }
+
+        setElementsOutsideScanArea(outsideElements);
+
+        handleFaceAndText(
+          scannedText.resultText ?? '',
+          detectedFaces,
+          frame.width,
+          frame.height,
+          barcodes.length ? barcodes[0] : undefined,
+          base64Image,
+          outsideElements.length > 0,
+          frame.mrzResult
+        );
+      } catch (error: any) {
+        console.warn('Frame processing error:', error?.message);
       }
     },
-    [handleFaceAndText, isCameraInitialized]
+    [faceDetectionEnabled, frameDimensions, handleFaceAndText, nextStep]
+  );
+
+  const handleCameraReady = useCallback(
+    (
+      _event: NativeSyntheticEvent<{
+        minExposureOffset: number;
+        maxExposureOffset: number;
+      }>
+    ) => {
+      isCameraInitialized.current = true;
+    },
+    []
+  );
+
+  const handleCameraError = useCallback(
+    (event: NativeSyntheticEvent<{ error: string }>) => {
+      console.error('Camera error:', event.nativeEvent.error);
+    },
+    []
   );
 
   if (!permissionsRequested) {
     return (
       <SafeAreaView style={styles.permissionContainer}>
+        <StatusBar barStyle="dark-content" />
         <ActivityIndicator size="large" color={theme.colors.primary} />
       </SafeAreaView>
     );
   }
 
-  if (!cameraPermission.hasPermission) {
+  if (!hasPermission) {
     return (
       <SafeAreaView style={styles.permissionContainer}>
-        <Text style={styles.permissionText}>
+        <StatusBar barStyle="dark-content" />
+        <TextView style={styles.permissionText}>
           {t('general.noCameraPermissionGiven')}
-        </Text>
+        </TextView>
         <StyledButton
           mode="contained"
           onPress={() => {
@@ -1211,32 +2561,13 @@ const IdentityDocumentCamera = ({
     );
   }
 
-  if (device == null) {
-    return (
-      <SafeAreaView style={styles.permissionContainer}>
-        <TextView style={styles.permissionText}>
-          {t('general.noCameraDetected')}
-        </TextView>
-      </SafeAreaView>
-    );
-  }
-
-  const handleFocus = async (event: GestureResponderEvent) => {
-    if (cameraRef.current && device.supportsFocus) {
-      try {
-        const { locationX, locationY } = event.nativeEvent;
-        await cameraRef.current.focus({
-          x: locationX,
-          y: locationY,
-        });
-      } catch (error) {
-        // console.log('Error while focusing:', error);
-      }
-    }
-  };
-
   return (
     <View style={StyleSheet.absoluteFill}>
+      <StatusBar
+        barStyle="light-content"
+        backgroundColor="transparent"
+        translucent
+      />
       {!hasGuideShown ? (
         <SafeAreaView style={styles.guide}>
           <LottieView
@@ -1273,52 +2604,513 @@ const IdentityDocumentCamera = ({
         </SafeAreaView>
       ) : (
         <>
-          <Camera
+          <TrustchexCamera
             ref={cameraRef}
-            frameProcessor={frameProcessor}
-            style={StyleSheet.absoluteFill}
-            device={device}
-            format={format}
-            isActive={isActive}
-            photo={false}
-            video={false}
-            audio={false}
-            torch={isTorchOn ? 'on' : 'off'}
-            fps={Math.max(format?.minFps ?? 0, 30)}
-            exposure={exposure}
-            onInitialized={() => {
-              isCameraInitialized.value = true;
-            }}
+            style={StyleSheet.absoluteFill as ViewStyle}
+            cameraType="back"
+            enableFrameProcessing={isActive}
+            enableFaceDetection={isActive && faceDetectionEnabled}
+            enableTextRecognition={isActive}
+            enableMrzValidation={isActive}
+            enableBarcodeScanning={isActive && nextStep === 'SCAN_ID_BACK'}
+            includeBase64={isActive}
+            targetFps={10}
+            torchEnabled={isTorchOn}
+            onFrameAvailable={handleFrame}
+            onCameraReady={handleCameraReady}
+            onCameraError={handleCameraError}
           />
-          <View style={[styles.topZone, { paddingTop: insets.top }]}>
-            {/* Step Progress Indicator - show only after document type detected and not completed/scanned */}
-            {nextStep !== 'COMPLETED' && status !== 'SCANNED' && detectedDocumentType !== 'UNKNOWN' && (
-              <TextView style={styles.stepIndicator}>
-                {nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                  ? `${t('identityDocumentCamera.frontSide')} • ${t('identityDocumentCamera.stepProgress', {
-                    current: 1,
-                    total: onlyMRZScan
-                      ? (detectedDocumentType === 'PASSPORT' ? 1 : 2)
-                      : (detectedDocumentType === 'PASSPORT' ? 2 : 3)
-                  })}`
-                  : nextStep === 'SCAN_HOLOGRAM'
-                    ? `${t('identityDocumentCamera.hologramCheck')} • ${t('identityDocumentCamera.stepProgress', {
-                      current: 2,
-                      total: detectedDocumentType === 'PASSPORT' ? 2 : 3
-                    })}`
-                    : nextStep === 'SCAN_ID_BACK'
-                      ? `${t('identityDocumentCamera.backSide')} • ${t('identityDocumentCamera.stepProgress', { current: 3, total: 3 })}`
-                      : ''}
-              </TextView>
+          {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>
+              </>
             )}
-            {/* Status-based guidance text */}
-            <TextView style={[
-              styles.topZoneText,
-              status === 'SCANNING' && styles.topZoneTextScanning,
-              status === 'SCANNED' && styles.topZoneTextSuccess,
-              status === 'INCORRECT' && styles.topZoneTextError,
-              (isBrightnessLow || isFrameBlurry) && styles.topZoneTextWarning,
-            ]}>
+          {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' &&
+              detectedDocumentType !== 'UNKNOWN' && (
+                <TextView style={styles.stepIndicator}>
+                  {nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
+                    ? `${t('identityDocumentCamera.frontSide')} • ${t(
+                        'identityDocumentCamera.stepProgress',
+                        {
+                          current: 1,
+                          total: onlyMRZScan
+                            ? detectedDocumentType === 'PASSPORT'
+                              ? 1
+                              : 2
+                            : detectedDocumentType === 'PASSPORT'
+                              ? 2
+                              : 3,
+                        }
+                      )}`
+                    : nextStep === 'SCAN_HOLOGRAM'
+                      ? `${t('identityDocumentCamera.hologramCheck')} • ${t(
+                          'identityDocumentCamera.stepProgress',
+                          {
+                            current: 2,
+                            total: detectedDocumentType === 'PASSPORT' ? 2 : 3,
+                          }
+                        )}`
+                      : nextStep === 'SCAN_ID_BACK'
+                        ? `${t('identityDocumentCamera.backSide')} • ${t('identityDocumentCamera.stepProgress', { current: 3, total: 3 })}`
+                        : ''}
+                </TextView>
+              )}
+
+            <TextView
+              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
+                status === 'INCORRECT' && styles.topZoneTextError,
+                // 3. Warning (yellow) - quality issues
+                (isBrightnessLow || isFrameBlurry) && styles.topZoneTextWarning,
+                // 4. Scanning (green) - all elements detected AND inside scan area
+                status === 'SCANNING' &&
+                  allElementsDetected &&
+                  elementsOutsideScanArea.length === 0 &&
+                  !isBrightnessLow &&
+                  !isFrameBlurry &&
+                  styles.topZoneTextScanning,
+                // 5. Default (white) - aligning (not all detected OR elements outside scan area)
+              ]}
+            >
               {status === 'SCANNED'
                 ? completedStep === 'SCAN_ID_FRONT_OR_PASSPORT'
                   ? detectedDocumentType === 'PASSPORT'
@@ -1334,109 +3126,272 @@ const IdentityDocumentCamera = ({
                     ? t('identityDocumentCamera.wrongSideFront')
                     : nextStep === 'SCAN_ID_BACK'
                       ? t('identityDocumentCamera.wrongSideBack')
-                      : t('identityDocumentCamera.alignPhotoSide')
+                      : 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')
-                      : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                        ? status === 'SCANNING'
-                          ? currentFaceImage
-                            ? detectedDocumentType === 'PASSPORT'
-                              ? t('identityDocumentCamera.passportDetected')
-                              : detectedDocumentType === 'ID_FRONT'
-                                ? t('identityDocumentCamera.idCardFrontDetected')
+                      : 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')
-                            : 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')
-                              : ''}
+                        : 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>
           </View>
           <View style={styles.leftZone} />
           <View style={styles.rightZone} />
           <View style={styles.bottomZone}>
-            {showDebugImages && currentFaceImage && (
-              <View style={styles.imageContainer}>
-                <Image
-                  source={{
-                    uri: `data:image/jpeg;base64,${currentFaceImage}`,
-                  }}
-                  style={styles.faceImage}
-                />
-                <TextView style={styles.imageContainerText}>Face</TextView>
-              </View>
-            )}
-
-            {showDebugImages && currentSecondaryFaceImage && (
-              <View style={styles.imageContainer}>
-                <Image
-                  source={{
-                    uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`,
-                  }}
-                  style={styles.faceImage}
-                />
-                <TextView style={styles.imageContainerText}>
-                  Secondary Face
-                </TextView>
-              </View>
-            )}
-
-            {showDebugImages && _currentHologramMaskImage && (
-              <View style={styles.imageContainer}>
-                <Image
-                  source={{
-                    uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
-                  }}
-                  style={styles.faceImage}
-                />
-                <TextView style={styles.imageContainerText}>
-                  Hologram Mask
-                </TextView>
-              </View>
-            )}
-
-            {showDebugImages && currentHologramImage && (
-              <View style={styles.imageContainer}>
-                <Image
-                  source={{
-                    uri: `data:image/jpeg;base64,${currentHologramImage}`,
-                  }}
-                  style={styles.faceImage}
-                />
-                <TextView style={styles.imageContainerText}>Hologram</TextView>
-              </View>
-            )}
-
-            {showDebugImages && (
-              <View style={styles.debugInfoContainer}>
-                <TextView style={styles.debugInfoText}>
-                  Step: {nextStep}
-                </TextView>
-                <TextView style={styles.debugInfoText}>
-                  Status: {status}
-                </TextView>
-                <TextView style={styles.debugInfoText}>
-                  {`Face: ${currentFaceImage ? '✓' : '✗'} ${!faceDetectionEnabled ? '(DISABLED)' : ''
-                    }`}
-                </TextView>
-                <TextView style={styles.debugInfoText}>
-                  {`Hologram: ${currentHologramImage ? '✓' : '✗'} (${hologramDetectionCurrentRetryCount.value
-                    }/${HOLOGRAM_DETECTION_RETRY_COUNT})`}
-                </TextView>
-                <TextView style={styles.debugInfoText}>
-                  {`2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'} (${secondaryFaceDetectionCurrentRetryCount.value
-                    }/${SECOND_FACE_DETECTION_RETRY_COUNT})`}
-                </TextView>
-              </View>
-            )}
+            <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}>
+                  {_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>
+              )}
+              {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.debugInfoContainer}>
+                  <TextView style={styles.debugInfoText}>
+                    {`Step: ${nextStep}`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`Status: ${status}`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`Face: ${currentFaceImage ? '✓ CAPTURED' : '✗ WAITING'} ${!faceDetectionEnabled ? '(DISABLED)' : ''}`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`Hologram: ${currentHologramImage ? '✓ CAPTURED' : `${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT} imgs`} (retry ${hologramDetectionCurrentRetryCount.current}/${HOLOGRAM_DETECTION_RETRY_COUNT})`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`2nd Face: ${currentSecondaryFaceImage ? '✓ CAPTURED' : '✗ WAITING'} (retry ${secondaryFaceDetectionCurrentRetryCount.current}/${SECOND_FACE_DETECTION_RETRY_COUNT})`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`Flash: ${isTorchOn ? '🔦 ON' : '🔦 OFF'}`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓ OK'}`}
+                  </TextView>
+                  <TextView style={styles.debugInfoText}>
+                    {`Blur: ${isFrameBlurry ? '⚠️ BLURRY' : '✓ OK'}`}
+                  </TextView>
+                </View>
+              )}
+            </View>
           </View>
           <View
             style={[
@@ -1444,19 +3399,18 @@ const IdentityDocumentCamera = ({
               {
                 borderColor:
                   status === 'SCANNED' || nextStep === 'COMPLETED'
-                    ? '#4CAF50' // Green - success
+                    ? '#4CAF50'
                     : status === 'INCORRECT'
-                      ? '#f44336' // Red - error
+                      ? '#f44336'
                       : status === 'SCANNING'
-                        ? '#2196F3' // Blue - processing
+                        ? '#2196F3'
                         : isBrightnessLow || isFrameBlurry
-                          ? '#FFC107' // Yellow - warning
+                          ? '#FFC107'
                           : 'white',
                 borderWidth: status === 'SCANNING' ? 3 : 2,
               },
             ]}
           >
-            {/* Only show ONE animation at a time - priority order: completed/scanned > brightness > hologram > scanning */}
             {nextStep === 'COMPLETED' || status === 'SCANNED' ? (
               <LottieView
                 source={require('../../Shared/Animations/success.json')}
@@ -1487,11 +3441,84 @@ const IdentityDocumentCamera = ({
               />
             ) : null}
           </View>
-          <TouchableOpacity
-            onPress={handleFocus}
-            style={styles.focusArea}
-            activeOpacity={1}
-          />
+          {isDebugEnabled() && (
+            <View
+              style={{
+                position: 'absolute',
+                top: 10,
+                right: 10,
+                backgroundColor: 'rgba(0, 0, 0, 0.85)',
+                padding: 10,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: '#FF6B6B',
+                maxWidth: 200,
+              }}
+            >
+              <TextView
+                style={{
+                  color: '#FF6B6B',
+                  fontSize: 11,
+                  fontWeight: 'bold',
+                  marginBottom: 6,
+                }}
+              >
+                🐛 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 }}
+              >
+                {`Face: ${currentFaceImage ? '✓' : '✗'}`}
+              </TextView>
+              {!onlyMRZScan && (
+                <>
+                  <TextView
+                    style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                  >
+                    {`2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'}`}
+                  </TextView>
+                  <TextView
+                    style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                  >
+                    {`Hologram: ${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT}`}
+                  </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>
+          )}
         </>
       )}
     </View>
@@ -1528,14 +3555,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 5,
   },
-  focusArea: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    zIndex: 2,
-  },
   animation: {
     width: '100%',
     height: '100%',
@@ -1566,16 +3585,16 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   topZoneTextScanning: {
-    color: '#2196F3', // Blue when scanning
+    color: '#2196F3',
   },
   topZoneTextSuccess: {
-    color: '#4CAF50', // Green for success
+    color: '#4CAF50',
   },
   topZoneTextWarning: {
-    color: '#FFC107', // Yellow for warnings
+    color: '#FFC107',
   },
   topZoneTextError: {
-    color: '#f44336', // Red for errors
+    color: '#f44336',
   },
   leftZone: {
     position: 'absolute',
@@ -1601,12 +3620,24 @@ const styles = StyleSheet.create({
     bottom: 0,
     backgroundColor: '#00000099',
     padding: 20,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    justifyContent: 'flex-start',
+  },
+  debugImagesRow: {
     display: 'flex',
     flexDirection: 'row',
     gap: 10,
     justifyContent: 'flex-start',
     flexWrap: 'wrap',
   },
+  cardDetectionRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 5,
+  },
   imageContainer: {
     display: 'flex',
     flexDirection: 'column',
@@ -1626,6 +3657,18 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'white',
   },
+  cardDetectionImage: {
+    width: 160,
+    height: 120,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#FF9800',
+  },
+  cardDetectionContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
   debugInfoContainer: {
     flex: 1,
     paddingLeft: 10,