@trustchex/react-native-sdk 1.355.1 → 1.357.0

package/lib/module/Shared/Components/IdentityDocumentCamera.js

@@ -1,71 +1,52 @@
 "use strict";
 
 /* eslint-disable react-native/no-inline-styles */
-import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Text as TextView, Platform, Vibration, TouchableOpacity, Text, Linking, Image, ActivityIndicator } from 'react-native';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { View, StyleSheet, Text as TextView, Platform, StatusBar, Vibration, Linking, Image, ActivityIndicator, PermissionsAndroid, Dimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Camera, runAtTargetFps, useCameraDevice, useCameraFormat, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
-import { runAsync } from "../Libs/worklet.utils.js";
-import { useRunOnJS, useSharedValue } from 'react-native-worklets-core';
-import { useTextRecognition } from "../VisionCameraPlugins/TextRecognition/index.js";
-import { useFaceDetector } from "../VisionCameraPlugins/FaceDetector/index.js";
-import mrzUtils from "../Libs/mrz.utils.js";
-import { crop } from "../VisionCameraPlugins/Cropper/index.js";
+import { TrustchexCamera } from "./TrustchexCamera.js";
+import { NativeModules } from 'react-native';
 import { useKeepAwake } from "../Libs/native-keep-awake.utils.js";
-import ImageEditor from '@react-native-community/image-editor';
 import { useIsFocused } from '@react-navigation/native';
-import { AdaptiveThresholdTypes, ColorConversionCodes, DataTypes, ObjectType, OpenCV, ThresholdTypes } from 'react-native-fast-opencv';
-import { getAverageBrightness, getScanAreaCenterPoint, calculateExposureStep, isBlurry as checkBlurry } from "../Libs/camera.utils.js";
 import { useTranslation } from 'react-i18next';
+import { debugLog, logError, isDebugEnabled } from "../Libs/debug.utils.js";
 import LottieView from 'lottie-react-native';
 import StyledButton from "./StyledButton.js";
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { scanCodes } from "../VisionCameraPlugins/BarcodeScanner/index.js";
-import { speakWithDebounce } from "../Libs/tts.utils.js";
+import { speak, resetLastMessage } from "../Libs/tts.utils.js";
 import AppContext from "../Contexts/AppContext.js";
 import { useTheme } from "../Contexts/ThemeContext.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// const windowWidth = Dimensions.get('window').width;
-// const windowHeight = Dimensions.get('window').height;
-
-const HOLOGRAM_IMAGE_COUNT = 7;
-const HOLOGRAM_DETECTION_THRESHOLD = 3500;
-const HOLOGRAM_DETECTION_RETRY_COUNT = 3;
+const {
+  OpenCVModule
+} = NativeModules;
+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 MRZ_VALIDATION_RETRY_COUNT = 3;
-let faceImages = [];
+const MIN_BRIGHTNESS_THRESHOLD = 60;
+const MAX_CONSECUTIVE_QUALITY_FAILURES = 30;
 const IdentityDocumentCamera = ({
   onlyMRZScan,
-  onIdentityDocumentScanned,
-  showDebugImages = false
+  onIdentityDocumentScanned
 }) => {
   useKeepAwake();
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const appContext = React.useContext(AppContext);
-  const cameraRef = React.useRef(null);
-  const cameraPermission = useCameraPermission();
-  const [permissionsRequested, setPermissionsRequested] = React.useState(false);
-  const [isActive, setIsActive] = React.useState(false);
+  const cameraRef = useRef(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 => {
+    isTorchOnRef.current = val;
+    _setIsTorchOn(val);
+  }, []);
+  const [_exposure, _setExposure] = useState(0);
+  const isCameraInitialized = useRef(false);
   const [currentFaceImage, setCurrentFaceImage] = useState(undefined);
   const [_currentHologramMaskImage, setCurrentHologramMaskImage] = useState(undefined);
   const [currentHologramImage, setCurrentHologramImage] = useState(undefined);
@@ -77,762 +58,1628 @@ const IdentityDocumentCamera = ({
   const [nextStep, setNextStep] = useState('SCAN_ID_FRONT_OR_PASSPORT');
   const [completedStep, setCompletedStep] = useState(null);
   const [detectedDocumentType, setDetectedDocumentType] = useState('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(null);
+  const lastValidMRZFields = useRef(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('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(null);
+
+  // Helper to compare MRZ field values (ignore raw text variations)
+  const areMRZFieldsEqual = useCallback((fields1, fields2) => {
+    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 => !!fields?.firstName && !!fields?.lastName && !!fields?.documentNumber && !!fields?.birthDate, []);
+
+  /**
+   * Log detailed MRZ information for debugging and verification
+   */
+  const logMRZDetails = useCallback((stepName, fields, mrzText, consecutiveReads, isDebugMode) => {
+    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, hasRequiredFields, parsedData, retryCount, isDebugMode) => {
+    if (isDebugMode) {
+      const debugInfo = {
+        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([]);
   const [faceDetectionEnabled, setFaceDetectionEnabled] = useState(true);
+  const faceImages = useRef([]);
+  const hologramImageCountRef = useRef(0);
+  const [hologramImageCount, setHologramImageCount] = useState(0);
+  const lastVoiceGuidanceMessage = useRef('');
+  const [latestHologramFaceImage, setLatestHologramFaceImage] = useState(undefined);
+  const lastFacePosition = useRef(null);
+  const [documentPlaneBounds, setDocumentPlaneBounds] = useState(null);
+  const [secondaryFaceBounds, setSecondaryFaceBounds] = useState(null);
+  const [barcodeBounds, setBarcodeBounds] = useState(null);
+  const [mrzBounds, setMrzBounds] = useState(null);
+  const [signatureBounds, setSignatureBounds] = useState(null);
+  const [frameDimensions, setFrameDimensions] = useState(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([]);
   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) {
-        speakWithDebounce(message);
+      if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive && message && message !== lastVoiceGuidanceMessage.current) {
+        lastVoiceGuidanceMessage.current = message;
+        speak(message, true);
       }
     }
-  }, [appContext.currentWorkflowStep?.data?.voiceGuidanceActive, hasGuideShown, isBrightnessLow, isFrameBlurry, nextStep, status, completedStep, currentFaceImage, detectedDocumentType, t]);
-
-  // Auto-reset INCORRECT status after showing warning briefly
+  }, [appContext.currentWorkflowStep?.data?.voiceGuidanceActive, hasGuideShown, isBrightnessLow, isFrameBlurry, nextStep, status, completedStep, currentFaceImage, detectedDocumentType, allElementsDetected, elementsOutsideScanArea, t]);
   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;
-    }
-    const autofocusInterval = setInterval(async () => {
-      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
-        });
-      } catch (error) {
-        // Ignore autofocus errors
-      }
-    }, 2500); // Every 2.5 seconds
-
-    return () => clearInterval(autofocusInterval);
-  }, [isActive, device, format, status]);
-  const detectDocumentType = (faces, ocrText, mrzFields) => {
-    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';
+    if (nextStep === 'SCAN_ID_BACK') {
+      setFaceDetectionEnabled(false);
+    } else {
+      setFaceDetectionEnabled(true);
     }
-    return 'UNKNOWN';
-  };
+  }, [nextStep]);
 
-  // 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 => {
-    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;
-  };
-  const areImagesSimilar = (image1, image2, threshold = 15000) => {
+  // Native OpenCV: detect hologram from sequence of face images
+  const detectHologramNative = useCallback(async images => {
     try {
-      if (!image1 || !image2) {
-        return false;
+      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];
       }
-      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;
     } catch (error) {
-      // console.log('Error while comparing images:', error);
-      return false;
+      logError('[Hologram] Detection error:', error);
     }
-  };
-  const detectHologram = images => {
+    return [];
+  }, []);
+
+  // Native OpenCV: compare two images for similarity
+  const areImagesSimilarNative = async (image1, image2, threshold = 20000 // Relaxed threshold for better tolerance of lighting/angle variations
+  ) => {
     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];
-      }
+      if (!image1 || !image2) return false;
+      return await OpenCVModule.areImagesSimilar(image1, image2, threshold);
     } catch (error) {
-      // console.log('Error while detecting hologram:', error);
+      return false;
     }
-    return [];
   };
-  const getFaceImagesOrderedByLocation = faces => {
-    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;
-    });
-  };
-  const getFaceImages = async (faces, image, width, height) => {
-    if (!faces.length || !image || width <= 0 || height <= 0) {
+
+  // Native OpenCV: crop face images from full frame
+  const getFaceImages = async (facesToDetect, image, width, height) => {
+    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}`;
-
-        // 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;
-        }
-
-        // 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
-        });
-        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);
-        }
-      }
+      const faceBounds = facesToDetect.map(f => ({
+        x: f.bounds.x,
+        y: f.bounds.y,
+        width: f.bounds.width,
+        height: f.bounds.height
+      }));
+      const croppedFaces = await OpenCVModule.cropFaceImages(image, faceBounds, width, height);
+      return croppedFaces ?? [];
     } catch (error) {
-      console.warn('Error while cropping face:', error);
+      logError('[getFaceImages] Native face crop failed:', error);
+      return [];
     }
-    return croppedFaces;
   };
-  const setNextStepAndVibrate = (nextStepType, fromStep) => {
-    // Track which step was just completed for showing specific message
+  const setNextStepAndVibrate = useCallback((nextStepType, fromStep) => {
     if (fromStep) {
       setCompletedStep(fromStep);
     }
+
+    // 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);
+    }
+
+    // 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');
+      }
+    }
     setNextStep(nextStepType);
     Vibration.vibrate(100);
 
-    // Reset status after delay to show success animation fully before next step
+    // 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
+
     if (nextStepType !== 'COMPLETED') {
       setTimeout(() => {
         setStatus('SEARCHING');
         setCompletedStep(null);
-      }, 2000); // Show success checkmark for 2 seconds before transitioning
+      }, 1000);
     }
-  };
-  const handleBrightness = useRunOnJS(isBright => {
-    setIsBrightnessLow(!isBright);
-  }, [setIsBrightnessLow]);
-  const handleBlurStatus = useRunOnJS(blurry => {
-    setIsFrameBlurry(blurry);
-  }, [setIsFrameBlurry]);
-  const handleFaceAndText = useRunOnJS(async (text, faces, frameWidth, frameHeight, barcode, image) => {
-    if (device?.hasTorch && isTorchOn && (currentHologramImage || hologramDetectionCurrentRetryCount.value >= HOLOGRAM_DETECTION_RETRY_COUNT)) {
+  }, [setIsTorchOn]);
+  const handleFaceAndText = useCallback(async (text, faces, frameWidth, frameHeight, barcode, image, elementsOutside, nativeMrzResult) => {
+    const detectDocumentType = (facesParam, ocrText, mrzFields, frameWidthParam, mrzTextParam) => {
+      // 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 (frameDimensions?.width !== frameWidth || frameDimensions.height !== frameHeight) {
+      setFrameDimensions({
+        width: frameWidth,
+        height: frameHeight
+      });
+    }
+    if (nextStep !== 'SCAN_HOLOGRAM' && isTorchOnRef.current && (currentHologramImage || hologramDetectionCurrentRetryCount.current >= HOLOGRAM_DETECTION_RETRY_COUNT)) {
       setIsTorchOn(false);
     }
     if (nextStep === 'COMPLETED') {
       setStatus('SCANNED');
       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;
+        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 documentType = detectDocumentType(faces, text, parsedMRZData?.fields);
+    const parsedMRZData = nativeMrzResult?.valid && nativeMrzResult.documentCode ? {
+      valid: true,
+      fields: nativeMrzResult
+    } : nativeMrzResult?.documentCode ? {
+      valid: false,
+      fields: nativeMrzResult
+    } : {
+      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 = {
+          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(cardSizedFaces, text, 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 = 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 = {
       image,
       documentType,
       mrzText: mrzText ?? undefined,
       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);
+    const isWrongSide = 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;
+        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])) {
-          scannedData.secondaryFaceImage = croppedFaces[1];
-          setCurrentSecondaryFaceImage(scannedData.secondaryFaceImage);
+        } else if (!!scannedData.faceImage && croppedFaces.length > 1 && !!croppedFaces[1] && facePositionValid) {
+          // Always validate similarity to ensure it's the same person on the same document
+          const isSimilar = await areImagesSimilarNative(scannedData.faceImage, croppedFaces[1], 15000 // Default threshold from main branch
+          );
+          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;
+              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, y, w, h) => 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');
+          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)) {
-        setStatus('SCANNED');
-        setNextStepAndVibrate('SCAN_ID_BACK', 'SCAN_HOLOGRAM');
-        onIdentityDocumentScanned(scannedData);
       }
+      // 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
-          if (!!scannedData.mrzText && (parsedMRZData?.valid || mrzDetectionCurrentRetryCount.value >= MRZ_VALIDATION_RETRY_COUNT)) {
+          const hasRequiredFields = hasRequiredMRZFields(parsedMRZData?.fields);
+          // CRITICAL: Only accept MRZ with valid checksums AND consistent reads
+          if (!!scannedData.mrzText && hasRequiredFields && mrzStableAndValid) {
+            const hasFace = cardSizedFaces.length > 0;
+            const hasMRZ = !!mrzText;
+            const allRequiredElementsInFrame = hasFace && hasMRZ;
+            setElementsOutsideScanArea([]);
+            if (!allRequiredElementsInFrame) {
+              console.log('[Passport Scan] MRZ valid but waiting for all elements in frame (face + MRZ)');
+              setStatus('SCANNING');
+              return;
+            }
+            logMRZDetails('Passport Scan', parsedMRZData?.fields, mrzText, validMRZConsecutiveCount.current, isDebugEnabled());
+            setDetectedDocumentType('PASSPORT');
             setStatus('SCANNED');
+            setIsTorchOn(false);
             setNextStepAndVibrate('COMPLETED', 'SCAN_ID_FRONT_OR_PASSPORT');
-            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);
+  }, [nextStep, frameDimensions, currentHologramImage, currentFaceImage, hasRequiredMRZFields, areMRZFieldsEqual, detectedDocumentType, onlyMRZScan, isTorchOn, setIsTorchOn, setNextStepAndVibrate, onIdentityDocumentScanned, logMRZDetails, logMRZValidationFailure, currentSecondaryFaceImage, detectHologramNative]);
+  const handleFrame = useCallback(async event => {
+    if (!isCameraInitialized.current) {
+      return;
     }
-  }, [currentFaceImage, currentHologramImage, currentSecondaryFaceImage, device, nextStep, onlyMRZScan]);
-  const handleExposureValue = useRunOnJS(value => {
-    setExposure(value);
-  }, [exposure]);
-
-  // Focus trigger for when blur is detected (called from worklet)
-  const triggerFocus = useRunOnJS(async () => {
-    if (!cameraRef.current || !device?.supportsFocus) {
+    const {
+      frame
+    } = event.nativeEvent;
+    if (!frame.width || !frame.height || frame.width <= 0 || frame.height <= 0) {
       return;
     }
+    const base64Image = frame.base64Image;
+    if (!base64Image) return;
+    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;
+    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 {
-      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
-      });
+      // 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) {
-      // Ignore focus errors
+      setIsFrameBlurry(false);
     }
-  }, [device, format]);
-  const handleExposureAndBrightness = 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 => {
-    'worklet';
+    // Only proceed if image quality is acceptable
+    const hasAcceptableQuality = isOverallBright && isNotBlurry;
 
-    try {
-      const isBright = handleExposureAndBrightness(frame);
-      if (!isBright) {
+    // 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;
+    }
+    try {
+      // Read faces directly from native ML Kit results
+      let detectedFaces = [];
+      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;
+      }
+
+      // Read text directly from native ML Kit results
+      const textBlocks = frame.textBlocks ?? [];
+      const resultText = textBlocks.map(b => b.text).join('\n');
+      const scannedText = {
+        resultText,
+        blocks: textBlocks.map(block => ({
+          blockText: block.text || '',
+          blockFrame: block.blockFrame ?? {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            boundingCenterX: 0,
+            boundingCenterY: 0
+          },
+          blockCornerPoints: [],
+          lines: [],
+          blockLanguages: []
+        }))
+      };
 
-      // 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;
+      // Read barcodes directly from native ML Kit results
+      let barcodes = [];
+      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 = {
+              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)}`);
+          });
         }
-        return;
-      }
-      // Reset blur count on sharp frame
-      consecutiveBlurCount.value = 0;
-
-      // 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 = [];
-      try {
-        if (faceDetectionEnabled) {
-          detectedFaces = detectFaces(frame);
-          // Reset error count on successful detection
-          faceDetectionErrorCount.value = 0;
+      // Update all debug overlay bounds continuously when debug mode is enabled
+      if (isDebugEnabled() && frameDimensions) {
+        const screen = Dimensions.get('window');
+        const frameAspect = frameDimensions.width / frameDimensions.height;
+        const screenAspect = screen.width / screen.height;
+        let scale;
+        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;
         }
-      } 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 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, y, w, h) => 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);
         }
-        detectedFaces = []; // Continue without face detection
-      }
 
-      // Create a copy of the frame for cropping to avoid buffer conflicts
-      let image;
-      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;
+        // 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);
       }
 
-      // 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;
-      try {
-        scannedText = scanText(frame);
-      } catch (textError) {
-        console.warn('Text recognition failed:', textError);
-        scannedText = {
-          blocks: [],
-          resultText: ''
-        };
+      // 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);
       }
 
-      // Barcode scanning with error handling
-      let barcodes = [];
-      try {
-        barcodes = scanCodes(frame, {
-          barcodeTypes: ['code-128', 'code-39', 'code-93', 'ean-13', 'qr']
-        });
-      } catch (barcodeError) {
-        console.warn('Barcode scanning failed:', barcodeError);
-        barcodes = [];
+      // 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;
+      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;
       }
-      handleFaceAndText(scannedText.resultText ?? '', detectedFaces, frame.width, frame.height, barcodes.length ? barcodes[0] : undefined, image?.base64);
-    } catch (error) {
-      console.warn('Frame processing error:', error?.message);
-    }
-  };
-  const frameProcessor = useFrameProcessor(frame => {
-    'worklet';
+      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, y, w, h) => x >= scanLeft && y >= scanTop && x + w <= scanRight && y + h <= scanBottom;
+      const outsideElements = [];
 
-    if (!isCameraInitialized.value) {
-      return;
-    }
-    if (Platform.OS === 'ios') {
-      // iOS: Run at target 6 FPS using runAtTargetFps
-      runAtTargetFps(6, () => {
-        'worklet';
-
-        try {
-          handleWorklet(frame);
-        } catch (error) {
-          console.warn('iOS Frame processor error:', error?.message || error?.name || String(error));
+      // Collect all detected element bounds
+      const allBounds = [];
+      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');
+          }
         }
-      });
-    } else {
-      // Android: Run async without throttling
-      runAsync(frame, () => {
-        'worklet';
-
-        try {
-          handleWorklet(frame);
-        } catch (workletError) {
-          console.warn('[Android workletCallback] Worklet execution error:', workletError?.message || workletError?.name || String(workletError));
+      }
+      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) {
+      console.warn('Frame processing error:', error?.message);
     }
-  }, [handleFaceAndText, isCameraInitialized]);
+  }, [faceDetectionEnabled, frameDimensions, handleFaceAndText, nextStep]);
+  const handleCameraReady = useCallback(_event => {
+    isCameraInitialized.current = true;
+  }, []);
+  const handleCameraError = useCallback(event => {
+    console.error('Camera error:', event.nativeEvent.error);
+  }, []);
   if (!permissionsRequested) {
-    return /*#__PURE__*/_jsx(SafeAreaView, {
+    return /*#__PURE__*/_jsxs(SafeAreaView, {
       style: styles.permissionContainer,
-      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+      children: [/*#__PURE__*/_jsx(StatusBar, {
+        barStyle: "dark-content"
+      }), /*#__PURE__*/_jsx(ActivityIndicator, {
         size: "large",
         color: theme.colors.primary
-      })
+      })]
     });
   }
-  if (!cameraPermission.hasPermission) {
+  if (!hasPermission) {
     return /*#__PURE__*/_jsxs(SafeAreaView, {
       style: styles.permissionContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
+      children: [/*#__PURE__*/_jsx(StatusBar, {
+        barStyle: "dark-content"
+      }), /*#__PURE__*/_jsx(TextView, {
         style: styles.permissionText,
         children: t('general.noCameraPermissionGiven')
       }), /*#__PURE__*/_jsx(StyledButton, {
@@ -844,34 +1691,13 @@ const IdentityDocumentCamera = ({
       })]
     });
   }
-  if (device == null) {
-    return /*#__PURE__*/_jsx(SafeAreaView, {
-      style: styles.permissionContainer,
-      children: /*#__PURE__*/_jsx(TextView, {
-        style: styles.permissionText,
-        children: t('general.noCameraDetected')
-      })
-    });
-  }
-  const handleFocus = async event => {
-    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 /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: StyleSheet.absoluteFill,
-    children: !hasGuideShown ? /*#__PURE__*/_jsxs(SafeAreaView, {
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: "light-content",
+      backgroundColor: "transparent",
+      translucent: true
+    }), !hasGuideShown ? /*#__PURE__*/_jsxs(SafeAreaView, {
       style: styles.guide,
       children: [/*#__PURE__*/_jsx(LottieView, {
         source: require('../../Shared/Animations/id-or-passport.json'),
@@ -904,22 +1730,360 @@ const IdentityDocumentCamera = ({
         children: t('general.letsGo')
       })]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Camera, {
+      children: [/*#__PURE__*/_jsx(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;
-        }
+        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
+      }), isDebugEnabled() && documentPlaneBounds && nextStep !== 'COMPLETED' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!!documentPlaneBounds.cropPadding && /*#__PURE__*/_jsx(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'
+          }
+        }), /*#__PURE__*/_jsx(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'
+          },
+          children: !!documentPlaneBounds.rollAngle && Math.abs(documentPlaneBounds.rollAngle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [documentPlaneBounds.rollAngle.toFixed(1), "\xB0"]
+          })
+        })]
+      }), isDebugEnabled() && secondaryFaceBounds && nextStep !== 'COMPLETED' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!!secondaryFaceBounds.cropPadding && /*#__PURE__*/_jsx(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'
+          }
+        }), /*#__PURE__*/_jsx(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'
+          },
+          children: !!secondaryFaceBounds.rollAngle && Math.abs(secondaryFaceBounds.rollAngle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [secondaryFaceBounds.rollAngle.toFixed(1), "\xB0"]
+          })
+        })]
+      }), isDebugEnabled() && barcodeBounds && nextStep !== 'COMPLETED' && /*#__PURE__*/_jsx(_Fragment, {
+        children: barcodeBounds.corners && barcodeBounds.corners.length >= 4 ?
+        /*#__PURE__*/
+        // Render using corner points for precise rotated border
+        _jsxs(_Fragment, {
+          children: [[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 /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                left: start.x,
+                top: start.y,
+                width: length,
+                height: 3,
+                backgroundColor: '#FF9800',
+                transform: [{
+                  rotate: `${angle}deg`
+                }],
+                transformOrigin: 'top left'
+              }
+            }, i);
+          }), barcodeBounds.corners.map((corner, idx) => /*#__PURE__*/_jsx(View, {
+            style: {
+              position: 'absolute',
+              left: corner.x - 4,
+              top: corner.y - 4,
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              backgroundColor: '#FF9800'
+            }
+          }, `corner-${idx}`)), !!barcodeBounds.angle && Math.abs(barcodeBounds.angle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [barcodeBounds.angle.toFixed(1), "\xB0"]
+          })]
+        }) :
+        /*#__PURE__*/
+        // Fallback to rotated rectangle if corners not available
+        _jsx(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`
+            }]
+          },
+          children: !!barcodeBounds.angle && Math.abs(barcodeBounds.angle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [barcodeBounds.angle.toFixed(1), "\xB0"]
+          })
+        })
+      }), isDebugEnabled() && mrzBounds && nextStep !== 'COMPLETED' && /*#__PURE__*/_jsx(_Fragment, {
+        children: mrzBounds.corners && mrzBounds.corners.length >= 2 ?
+        /*#__PURE__*/
+        // Render using corner points for precise rotated border
+        _jsxs(_Fragment, {
+          children: [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 /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                left: corner.x,
+                top: corner.y,
+                width: length,
+                height: 3,
+                backgroundColor: '#9C27B0',
+                transform: [{
+                  rotate: `${angle}deg`
+                }],
+                transformOrigin: 'top left'
+              }
+            }, idx);
+          }), !!mrzBounds.angle && Math.abs(mrzBounds.angle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [mrzBounds.angle.toFixed(1), "\xB0"]
+          })]
+        }) :
+        /*#__PURE__*/
+        // Fallback to rotated rectangle if corners not available
+        _jsx(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`
+            }]
+          },
+          children: !!mrzBounds.angle && Math.abs(mrzBounds.angle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [mrzBounds.angle.toFixed(1), "\xB0"]
+          })
+        })
+      }), isDebugEnabled() && signatureBounds && nextStep !== 'COMPLETED' && /*#__PURE__*/_jsx(_Fragment, {
+        children: signatureBounds.corners && signatureBounds.corners.length >= 2 ?
+        /*#__PURE__*/
+        // Render using corner points for precise rotated border
+        _jsxs(_Fragment, {
+          children: [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 /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                left: corner.x,
+                top: corner.y,
+                width: length,
+                height: 3,
+                backgroundColor: '#00BCD4',
+                transform: [{
+                  rotate: `${angle}deg`
+                }],
+                transformOrigin: 'top left'
+              }
+            }, idx);
+          }), !!signatureBounds.angle && Math.abs(signatureBounds.angle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [signatureBounds.angle.toFixed(1), "\xB0"]
+          })]
+        }) :
+        /*#__PURE__*/
+        // Fallback to rotated rectangle if corners not available
+        _jsx(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`
+            }]
+          },
+          children: !!signatureBounds.angle && Math.abs(signatureBounds.angle) > 5 && /*#__PURE__*/_jsxs(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
+            },
+            children: [signatureBounds.angle.toFixed(1), "\xB0"]
+          })
+        })
       }), /*#__PURE__*/_jsxs(View, {
         style: [styles.topZone, {
           paddingTop: insets.top
@@ -937,85 +2101,197 @@ const IdentityDocumentCamera = ({
             total: 3
           })}` : ''
         }), /*#__PURE__*/_jsx(TextView, {
-          style: [styles.topZoneText, status === 'SCANNING' && styles.topZoneTextScanning, status === 'SCANNED' && styles.topZoneTextSuccess, status === 'INCORRECT' && styles.topZoneTextError, (isBrightnessLow || isFrameBlurry) && styles.topZoneTextWarning],
-          children: status === 'SCANNED' ? completedStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportScanned') : t('identityDocumentCamera.frontSideScanned') : completedStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.backSideScanned') : completedStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.hologramVerified') : t('identityDocumentCamera.scanCompleted') : status === 'INCORRECT' ? nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.wrongSideFront') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.wrongSideBack') : 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') : 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') : ''
+          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)
+          ],
+          children: status === 'SCANNED' ? completedStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportScanned') : t('identityDocumentCamera.frontSideScanned') : completedStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.backSideScanned') : completedStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.hologramVerified') : t('identityDocumentCamera.scanCompleted') : status === 'INCORRECT' ? nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.wrongSideFront') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.wrongSideBack') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.wrongSideFront') // Hologram is on front, show same message as front scan
+          : t('identityDocumentCamera.alignPhotoSide') : isBrightnessLow ? t('identityDocumentCamera.lowBrightness') : isFrameBlurry ? t('identityDocumentCamera.avoidBlur') : status === 'SCANNING' && allElementsDetected && elementsOutsideScanArea.length === 0 ? nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.idCardBackDetected') : detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportDetected') : detectedDocumentType === 'ID_FRONT' ? t('identityDocumentCamera.idCardFrontDetected') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : t('identityDocumentCamera.readingDocument') : elementsOutsideScanArea.length > 0 ? t('identityDocumentCamera.centerDocument') : (status === 'SCANNING' || status === 'SEARCHING') && !allElementsDetected ? nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBack') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.alignPassport') : detectedDocumentType === 'ID_FRONT' ? t('identityDocumentCamera.alignIDFront') : t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : t('identityDocumentCamera.readingDocument') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? status === 'SCANNING' ? t('identityDocumentCamera.readingDocument') : t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : nextStep === 'SCAN_ID_BACK' ? status === 'SCANNING' ? t('identityDocumentCamera.readingDocument') : t('identityDocumentCamera.alignIDBackSide') : nextStep === 'COMPLETED' ? t('identityDocumentCamera.scanCompleted') : ''
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: styles.leftZone
       }), /*#__PURE__*/_jsx(View, {
         style: styles.rightZone
-      }), /*#__PURE__*/_jsxs(View, {
+      }), /*#__PURE__*/_jsx(View, {
         style: styles.bottomZone,
-        children: [showDebugImages && currentFaceImage && /*#__PURE__*/_jsxs(View, {
-          style: styles.imageContainer,
-          children: [/*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: `data:image/jpeg;base64,${currentFaceImage}`
-            },
-            style: styles.faceImage
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.imageContainerText,
-            children: "Face"
-          })]
-        }), showDebugImages && currentSecondaryFaceImage && /*#__PURE__*/_jsxs(View, {
-          style: styles.imageContainer,
-          children: [/*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`
-            },
-            style: styles.faceImage
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.imageContainerText,
-            children: "Secondary Face"
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.debugImagesRow,
+          children: [isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
+            style: styles.imageContainer,
+            children: [currentFaceImage ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: `data:image/jpeg;base64,${currentFaceImage}`
+              },
+              style: styles.faceImage
+            }) : /*#__PURE__*/_jsx(View, {
+              style: [styles.faceImage, {
+                backgroundColor: '#333',
+                justifyContent: 'center'
+              }],
+              children: /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: '#666',
+                  fontSize: 10,
+                  textAlign: 'center'
+                },
+                children: "Waiting..."
+              })
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: [styles.imageContainerText, currentFaceImage && {
+                color: '#4CAF50'
+              }],
+              children: `${currentFaceImage ? '✓ ' : ''}Face`
+            })]
+          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
+            style: styles.imageContainer,
+            children: [currentSecondaryFaceImage ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`
+              },
+              style: styles.faceImage
+            }) : /*#__PURE__*/_jsx(View, {
+              style: [styles.faceImage, {
+                backgroundColor: '#333',
+                justifyContent: 'center'
+              }],
+              children: /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: '#666',
+                  fontSize: 10,
+                  textAlign: 'center'
+                },
+                children: "Waiting..."
+              })
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: [styles.imageContainerText, currentSecondaryFaceImage && {
+                color: '#4CAF50'
+              }],
+              children: `${currentSecondaryFaceImage ? '✓ ' : ''}2nd Face`
+            })]
+          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
+            style: styles.imageContainer,
+            children: [_currentHologramMaskImage ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`
+              },
+              style: styles.faceImage
+            }) : /*#__PURE__*/_jsx(View, {
+              style: [styles.faceImage, {
+                backgroundColor: '#333',
+                justifyContent: 'center'
+              }],
+              children: /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: '#666',
+                  fontSize: 10,
+                  textAlign: 'center'
+                },
+                children: "Waiting..."
+              })
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: [styles.imageContainerText, _currentHologramMaskImage && {
+                color: '#4CAF50'
+              }],
+              children: `${_currentHologramMaskImage ? '✓ ' : ''}Mask`
+            })]
+          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
+            style: styles.imageContainer,
+            children: [currentHologramImage ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: `data:image/jpeg;base64,${currentHologramImage}`
+              },
+              style: styles.faceImage
+            }) : latestHologramFaceImage && hologramImageCount > 0 ? /*#__PURE__*/_jsxs(View, {
+              style: {
+                position: 'relative'
+              },
+              children: [/*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: `data:image/jpeg;base64,${latestHologramFaceImage}`
+                },
+                style: [styles.faceImage, {
+                  opacity: 0.7
+                }]
+              }), /*#__PURE__*/_jsx(View, {
+                style: {
+                  position: 'absolute',
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  backgroundColor: 'rgba(0,0,0,0.7)',
+                  padding: 2
+                },
+                children: /*#__PURE__*/_jsxs(TextView, {
+                  style: {
+                    color: '#FFA500',
+                    fontSize: 8,
+                    textAlign: 'center',
+                    fontWeight: 'bold'
+                  },
+                  children: [hologramImageCount, "/", HOLOGRAM_IMAGE_COUNT]
+                })
+              })]
+            }) : /*#__PURE__*/_jsx(View, {
+              style: [styles.faceImage, {
+                backgroundColor: '#333',
+                justifyContent: 'center'
+              }],
+              children: /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: '#666',
+                  fontSize: 10,
+                  textAlign: 'center'
+                },
+                children: "Waiting..."
+              })
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: [styles.imageContainerText, currentHologramImage && {
+                color: '#4CAF50'
+              }, latestHologramFaceImage && !currentHologramImage && {
+                color: '#FFA500'
+              }],
+              children: `${currentHologramImage ? '✓ ' : latestHologramFaceImage ? '⏳ ' : ''}Hologram`
+            })]
+          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
+            style: styles.debugInfoContainer,
+            children: [/*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Step: ${nextStep}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Status: ${status}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Face: ${currentFaceImage ? '✓ CAPTURED' : '✗ WAITING'} ${!faceDetectionEnabled ? '(DISABLED)' : ''}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Hologram: ${currentHologramImage ? '✓ CAPTURED' : `${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT} imgs`} (retry ${hologramDetectionCurrentRetryCount.current}/${HOLOGRAM_DETECTION_RETRY_COUNT})`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `2nd Face: ${currentSecondaryFaceImage ? '✓ CAPTURED' : '✗ WAITING'} (retry ${secondaryFaceDetectionCurrentRetryCount.current}/${SECOND_FACE_DETECTION_RETRY_COUNT})`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Flash: ${isTorchOn ? '🔦 ON' : '🔦 OFF'}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓ OK'}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: styles.debugInfoText,
+              children: `Blur: ${isFrameBlurry ? '⚠️ BLURRY' : '✓ OK'}`
+            })]
           })]
-        }), showDebugImages && _currentHologramMaskImage && /*#__PURE__*/_jsxs(View, {
-          style: styles.imageContainer,
-          children: [/*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`
-            },
-            style: styles.faceImage
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.imageContainerText,
-            children: "Hologram Mask"
-          })]
-        }), showDebugImages && currentHologramImage && /*#__PURE__*/_jsxs(View, {
-          style: styles.imageContainer,
-          children: [/*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: `data:image/jpeg;base64,${currentHologramImage}`
-            },
-            style: styles.faceImage
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.imageContainerText,
-            children: "Hologram"
-          })]
-        }), showDebugImages && /*#__PURE__*/_jsxs(View, {
-          style: styles.debugInfoContainer,
-          children: [/*#__PURE__*/_jsxs(TextView, {
-            style: styles.debugInfoText,
-            children: ["Step: ", nextStep]
-          }), /*#__PURE__*/_jsxs(TextView, {
-            style: styles.debugInfoText,
-            children: ["Status: ", status]
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.debugInfoText,
-            children: `Face: ${currentFaceImage ? '✓' : '✗'} ${!faceDetectionEnabled ? '(DISABLED)' : ''}`
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.debugInfoText,
-            children: `Hologram: ${currentHologramImage ? '✓' : '✗'} (${hologramDetectionCurrentRetryCount.value}/${HOLOGRAM_DETECTION_RETRY_COUNT})`
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: styles.debugInfoText,
-            children: `2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'} (${secondaryFaceDetectionCurrentRetryCount.value}/${SECOND_FACE_DETECTION_RETRY_COUNT})`
-          })]
-        })]
+        })
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.scanArea, {
-          borderColor: status === 'SCANNED' || nextStep === 'COMPLETED' ? '#4CAF50' // Green - success
-          : status === 'INCORRECT' ? '#f44336' // Red - error
-          : status === 'SCANNING' ? '#2196F3' // Blue - processing
-          : isBrightnessLow || isFrameBlurry ? '#FFC107' // Yellow - warning
-          : 'white',
+          borderColor: status === 'SCANNED' || nextStep === 'COMPLETED' ? '#4CAF50' : status === 'INCORRECT' ? '#f44336' : status === 'SCANNING' ? '#2196F3' : isBrightnessLow || isFrameBlurry ? '#FFC107' : 'white',
           borderWidth: status === 'SCANNING' ? 3 : 2
         }],
         children: nextStep === 'COMPLETED' || status === 'SCANNED' ? /*#__PURE__*/_jsx(LottieView, {
@@ -1039,12 +2315,100 @@ const IdentityDocumentCamera = ({
           loop: true,
           autoPlay: true
         }) : null
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: handleFocus,
-        style: styles.focusArea,
-        activeOpacity: 1
+      }), isDebugEnabled() && /*#__PURE__*/_jsxs(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
+        },
+        children: [/*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#FF6B6B',
+            fontSize: 11,
+            fontWeight: 'bold',
+            marginBottom: 6
+          },
+          children: "\uD83D\uDC1B DEBUG MODE"
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Step: ${nextStep}`
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Status: ${status}`
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Doc Type: ${detectedDocumentType}`
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Face: ${currentFaceImage ? '✓' : '✗'}`
+        }), !onlyMRZScan && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextView, {
+            style: {
+              color: '#88D8B0',
+              fontSize: 9,
+              marginBottom: 2
+            },
+            children: `2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'}`
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: {
+              color: '#88D8B0',
+              fontSize: 9,
+              marginBottom: 2
+            },
+            children: `Hologram: ${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT}`
+          })]
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓'}`
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Blur: ${isFrameBlurry ? '⚠️' : '✓'}`
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9,
+            marginBottom: 2
+          },
+          children: `Flash: ${isTorchOn ? '🔦' : '○'}`
+        }), /*#__PURE__*/_jsx(TextView, {
+          style: {
+            color: '#88D8B0',
+            fontSize: 9
+          },
+          children: `Face Detection: ${faceDetectionEnabled ? '✓' : '✗'}`
+        })]
       })]
-    })
+    })]
   });
 };
 const styles = StyleSheet.create({
@@ -1077,14 +2441,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%',
@@ -1115,16 +2471,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',
@@ -1150,12 +2506,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',
@@ -1175,6 +2543,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