@sanctum-key/react-native-sdk 1.0.5 → 1.0.7

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -11,115 +11,65 @@ import { removeDuplicates } from '../../utils/remove-duplicate';
 import { backVerification, checkTemplateType, frontVerification } from '../../modules/api/CardAuthentification';
 import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
 import pathToBase64 from '../../utils/pathToBase64';
-import kycService, { truncateFields } from '../../modules/api/KYCService';
-import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
-import { isMobileWeb } from '../../utils/deviceDetection';
-import { logger } from '../../utils/logger';
-
-
-interface IIDCardPayload {
-  dir: string;
-  file: string;
-  mrz: string;
-  templatePath?: string;
-}
+import { cropByObb, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
 
+interface IIDCardPayload { dir: string; file: string; mrz: string; templatePath?: string; }
 interface IDCardCaptureProps {
   component: TemplateComponent;
   value?: Record<string, IIDCardPayload>;
   onValueChange: (value: Record<string, IIDCardPayload | string>) => void;
   error?: string;
   language?: string;
-  currentSide?: string; // Nouveau prop pour spécifier le côté actuel
+  currentSide?: string;
 }
 
-export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
-  component,
-  value = {},
-  onValueChange,
-  error,
-  language = 'en',
-}) => {
+export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
   const { t, locale } = useI18n();
   const [showCamera, setShowCamera] = useState(false);
   const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
-  // const [cropImageUri, setCropImageUri] = useState<string>('');
   const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front');
   const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
-  const [showQRModal, setShowQRModal] = useState(false);
+  
+  const [isProcessingCapture, setIsProcessingCapture] = useState(false);
+  const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
 
-  // Mapping des types de documents backend vers SDK
   const documentTypeMapping: Record<string, GovernmentDocumentType> = {
-    'nationalId': 'national_id',
-    'passport': 'passport',
-    'driversLicense': 'drivers_licence',
-    'residencePermit': 'permanent_residence',
-    'healthInsuranceCard': 'health_insurance_card',
+    'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence',
+    'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card',
   };
-  // const [imageNaturalSize, setImageNaturalSize] = useState<{ width: number; height: number } | null>(null);
 
   const { actions, state, env } = useTemplateKYCFlowContext();
 
-
-
   const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
-    // console.log("text", text, JSON.stringify(component, null, 2));
-    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) {
-      return text[currentSide][locale] || '';
-    }
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) return text[currentSide][locale] || '';
     return "";
   };
 
-  // Récupérer les données depuis le composant country_selection
   const countrySelectionData = useMemo(() => {
     const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
-    if (countrySelectionComponent) {
-      return state.componentData[countrySelectionComponent.id];
-    }
-    return null;
+    return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null;
   }, [state.template.components, state.componentData]);
 
-  // Extraire selectedDocumentType depuis countrySelectionData
   const selectedDocumentType = useMemo<{ type: GovernmentDocumentType; region: string } | null>(() => {
     if (!countrySelectionData?.documentType) return null;
-
     const backendDocType = countrySelectionData.documentType;
     const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType;
-    const region = countrySelectionData.region || 'root';
-
-    return { type: mappedType, region };
+    return { type: mappedType, region: countrySelectionData.region || 'root' };
   }, [countrySelectionData, documentTypeMapping]);
 
-  // Récupérer countryData pour compatibilité avec le code existant
-  const countryData = useMemo(() => {
-    return countrySelectionData;
-  }, [countrySelectionData]);
-
-// console.log();
+  const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
 
-  // Synchroniser capturedImages avec value quand les données sont chargées (ex: reprise de session)
   useEffect(() => {
     if (value && Object.keys(value).length > 0) {
-      // Vérifier si les données ont changé
-      const valueChanged = JSON.stringify(value) !== JSON.stringify(capturedImages);
-      if (valueChanged) {
-        logger.log("Updating capturedImages from value:", Object.keys(value));
-        logger.log("Value data sample:", truncateFields(value));
+      if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
         const updatedImages = value as Record<string, IIDCardPayload>;
         setCapturedImages(updatedImages);
-        
-        // Si on a des images chargées, mettre à jour silentCaptureResult pour l'affichage
         Object.keys(updatedImages).forEach((side) => {
           const imageData = updatedImages[side];
           if (imageData?.dir) {
             setSilentCaptureResult(prev => ({
-              ...prev,
-              path: imageData.dir,
-              success: true,
-              isAnalyzing: false,
-              mrz: imageData.mrz || '',
-              templatePath: imageData.templatePath || '',
+              ...prev, path: imageData.dir, success: true, isAnalyzing: false, mrz: imageData.mrz || '', templatePath: imageData.templatePath || '',
             }));
           }
         });
@@ -127,129 +77,56 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     }
   }, [value]);
 
-  useEffect(() => {
-    logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
-    if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
-      cropImageWithBBox(capturedImages[currentSide].dir, silentCaptureResult.bbox)?.then((uri) => {
-        // setCropImageUri(uri);
-      });
-    }
-  }, [capturedImages[currentSide]?.dir, silentCaptureResult?.bbox])
-
-
-
   const cameraConfig = useMemo(() => {
     const instructions = selectedDocumentType
       ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
       : getLocalizedText(component.instructions as Record<string, LocalizedText>);
 
     return {
-      aspectRatio: 4 / 3,
-      quality: 0.7, 
-      flashMode: 'auto' as const,
-      cameraType: 'back' as const,
-      autoFocus: 'on', 
-      whiteBalance: 'auto', 
-      allowRetake: true,
-      maxRetakes: 3,
-      overlay: {
-        showGuide: true,
-        guideText: instructions,
-        bbox: {
-          xMin: 20,
-          yMin: 140,
-          xMax: 370,
-          yMax: 340,
-          borderColor: '#2DBD60',
-          borderWidth: 3,
-          cornerRadius: 8
-        }
-      }
+      cameraType: 'back' as const, flashMode: 'auto' as const,
+      overlay: { guideText: instructions, bbox: { xMin: 15, yMin: 20, xMax: 85, yMax: 70, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } }
     };
   }, [selectedDocumentType, locale, component.instructions]);
 
   const retakePicture = (sideToRetake: 'front' | 'back') => {
-    // 1. Turn the camera back on and hide the stepper
-    setShowCamera(true);
+    // Completely wipe all processing states to prevent leakage
+    setIsProcessingCapture(false);
+    setProcessingImagePath(null);
+    setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
+    
+    setShowCamera(true); 
     actions.showCustomStepper(false);
-
-    // 2. WIPE LOCAL STATE: Use functional update to prevent stale closures
-    setCapturedImages((prev) => {
-      const newState = { ...prev };
-      delete newState[sideToRetake]; 
-      return newState;
-    });
-
-    setSilentCaptureResult({
-      path: '',
-      success: false,
-      isAnalyzing: false,
-      error: '',
-      templatePath: '',
-      mrz: '',
-      bbox: undefined,
-    });
-
     
-    if (value) {
-      const newValue = { ...value };
-      delete newValue[sideToRetake]; 
-      onValueChange(newValue);
-    }
+    setCapturedImages((prev) => { const newState = { ...prev }; delete newState[sideToRetake]; return newState; });
+    if (value) { const newValue = { ...value }; delete newValue[sideToRetake]; onValueChange(newValue); }
   };
 
-
-
   const getCurrentSideVerification = (currentSide: string) => {
-    if (!selectedDocumentType || !countryData?.regionMapping) {
-      return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-    }
-
+    if (!selectedDocumentType || !countryData?.regionMapping) return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
     const regionMapping = countryData.regionMapping[selectedDocumentType.type as GovernmentDocumentType];
-    const authMethod: string[] = [];
-    const mrzTypes: string[] = [];
-
+    const authMethod: string[] = []; const mrzTypes: string[] = [];
     const key = selectedDocumentType.region?.trim()?.length > 0 ? selectedDocumentType.region.trim() : 'root';
-
     if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
       regionMapping[key].forEach((item: any) => {
         if (item[currentSide as keyof typeof item]) {
           authMethod.push(item[currentSide as keyof typeof item]);
-          if (item?.mrz_type) {
-            mrzTypes.push(item?.mrz_type);
-          }
+          if (item?.mrz_type) mrzTypes.push(item?.mrz_type);
         }
       });
     }
-
-    logger.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType.region, key }), null, 2));
-
-    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping: regionMapping, key: key };
+    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
   }
 
   const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => {
     if (!mapping || !mapping[selectedDocumentType]) return null;
-
-    // Extraire le nom du fichier depuis le template_path
     const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
-
     if (!fileName) return null;
-
-    // Normaliser en .py
-    const pyName = `${fileName}.py`; // ex: cameroon_id_back_3_1.py
-
-    // Chercher dans la liste
+    const pyName = `${fileName}.py`; 
     const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
-
     return found?.mrz_type || null;
   }
 
-  const getCorrespondingAuthMethod = (
-    templatePath: string,
-    mapping: any,
-    selectedDocumentType: string = "root",
-    side: 'front' | 'back'
-  ) => {
+  const getCorrespondingAuthMethod = (templatePath: string, mapping: any, selectedDocumentType: string = "root", side: 'front' | 'back') => {
     if (!mapping || !mapping[selectedDocumentType]) return null;
     const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
     if (!fileName) return null;
@@ -258,10 +135,56 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     return found?.[side] || null;
   }
 
-  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-    if (silentCaptureResult.isAnalyzing) {
-      return;
+  const autoCapture = async (capturePath: string, verified: ISilentCaptureResult) => {
+    if (isProcessingCapture) return;
+    
+    setIsProcessingCapture(true); 
+    setProcessingImagePath(capturePath);
+
+    try {
+      let imagePathForUpload = capturePath;
+      if (verified.bbox) {
+        try {
+          imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, verified.bbox, 0.15);
+        } catch {
+          imagePathForUpload = capturePath;
+        }
+      }
+
+      const base64 = await pathToBase64(imagePathForUpload);
+      const newImages = {
+        ...capturedImages,
+        [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
+      };
+
+      setCapturedImages(newImages);
+      if (verified.country && verified.documentType) {
+        onValueChange({
+          ...newImages,
+          country: verified.country,
+          documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
+        });
+      }
+
+      setTimeout(() => {
+        setShowCamera(false);
+        actions.showCustomStepper(true);
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
+        setIsProcessingCapture(false);
+        setProcessingImagePath(null); 
+      }, 600);
+
+    } catch (e: any) {
+      showAlert('Error', e?.message || 'Impossible de capturer la photo');
+      setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
+      setIsProcessingCapture(false);
+      setProcessingImagePath(null);
     }
+  };
+
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing || isProcessingCapture) return;
+
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
       let templatePath = silentCaptureResult.templatePath || '';
@@ -269,405 +192,161 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
       let templateResponse: any;
 
       if (!selectedDocumentType) {
-        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' }));
-        return;
+        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' })); return;
       }
 
-      const regionMappings = getCurrentSideVerification(currentSide)
-      // logger.log("regionMappings", JSON.stringify(truncateFields({regionMappings, templatePath}), null, 2));
-      if (templatePath.length === 0) {
-        try {
-          logger.log("checkTemplateType - BEFORE call", {
-            selectedDocumentTypeType: selectedDocumentType?.type,
-            countrySelectionDataDocumentType: countrySelectionData?.documentType,
-            docTypeToSend: selectedDocumentType?.type
-          });
+      const regionMappings = getCurrentSideVerification(currentSide);
+      
+      try {
+        if (templatePath.length === 0) {
           const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide }, env);
           templateResponse = templateType;
-
-          if (templateType.template_path) {
-            templatePath = templateType.template_path;
-            logger.log("templatePath", templatePath);
-            setSilentCaptureResult((prev) => ({ ...prev, templatePath: templatePath }));
-          }
+          if (templateType.template_path) templatePath = templateType.template_path;
+          
           if (templateType.card_obb) {
             const obbConfidence = getObbConfidence((templateType as any).card_obb);
             if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
-              setSilentCaptureResult((prev) => ({
-                ...prev,
-                isAnalyzing: false,
-                success: false,
-                error: t('kyc.idCardCapture.cardNotFullyInFrame'),
-              }));
+              setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
               return;
             }
-            let bbox: IBbox | undefined;
             try {
-              const crop = await cropByObb(result?.path || '', (templateType as any).card_obb);
-              bbox = crop.bbox;
-              templateBbox = bbox;
+              const crop = await cropByObb(result.path, (templateType as any).card_obb);
+              templateBbox = crop.bbox;
             } catch { }
           }
-        } catch (e: any) {
-          logger.log("error checking template type", truncateFields(e));
-          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de vérification du template' }));
-          return; // Return early if checkTemplateType fails
-        }
-      }
-      logger.log("templatePath before verification", templatePath, "currentSide", currentSide);
-      if (currentSide === 'front') {
-        logger.log("frontVerification - BEFORE call", {
-          selectedDocumentTypeType: selectedDocumentType?.type,
-          countrySelectionDataDocumentType: countrySelectionData?.documentType,
-          docTypeToSend: selectedDocumentType?.type
-        });
-        logger.log("Calling frontVerification", { templatePath, selectedDocumentType: selectedDocumentType?.type, regionMappings });
-        console.log("About to call frontVerification", typeof frontVerification);
-        try {
-          const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
-          const resolvedMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '');
-          const mrzType = resolvedMrzType || '';
-          const authMethod = matchedAuthMethod
-            ? regionMappings.authMethod.filter((method) => method === matchedAuthMethod)
-            : regionMappings.authMethod.filter((method) => method !== 'MRZ' && method !== '2D_barcode');
-          console.log("mrzType calculated", mrzType);
-          const verificationParams = {
-            path: result.path,
-            regionMapping: {
-              authMethod,
-              mrzTypes: regionMappings.mrzTypes,
-            },
-            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '',
-            code: countryData?.code || '',
-            currentSide: currentSide,
-            templatePath: templatePath,
-            mrzType: mrzType,
-          };
-          console.log("frontVerification params", verificationParams);
-          console.log("About to call frontVerification function");
-
-          const promise = frontVerification(verificationParams, env);
-          console.log("frontVerification promise created", promise);
-          
-          promise.then((res: any) => {
-            logger.log("front verification result", truncateFields(res));
-            const bbox = res?.bbox || templateBbox;
-            
-            setSilentCaptureResult((prev) => ({
-              ...prev,
-              path: result.path,
-              templatePath: templatePath,
-              bbox: bbox, 
-              success: true,
-              mrz: res?.mrz ? JSON.stringify(res.mrz) : "", 
-              isAnalyzing: false,
-              country: countryData?.code,
-              documentType: selectedDocumentType.type,
-            }));
-            
-            // Stocker le bbox pour ce côté
-            if (bbox && typeof bbox === 'object') {
-              setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
-            }
-
-          }).catch((e: any) => {
-
-          }).catch((e: any) => {
-            console.log("error front verification", e);
-            logger.log("error front verification", truncateFields(e));
-            const isCardNotFullyInFrame =
-              e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
-              e?.message?.includes('entirement') ||
-              e?.message?.includes('fully in frame');
-            const errorMessage = isCardNotFullyInFrame
-              ? t('kyc.idCardCapture.cardNotFullyInFrame')
-              : (e?.message || 'Erreur de détection du MRZ');
-            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
-          });
-        } catch (error: any) {
-          console.log("Error setting up frontVerification call", error);
-          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: error?.message || 'Erreur lors de la configuration de la vérification' }));
         }
-      } else {
-        const backRegionMappings = getCurrentSideVerification(currentSide);
-        logger.log("Calling backVerification", { templatePath, selectedDocumentType: selectedDocumentType.type, backRegionMappings });
-        const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '', 'back');
-        const backMrzType = getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '';
-        
-        backVerification({
-          path: result.path,
-          regionMapping: {
-            authMethod: matchedBackAuthMethod
-              ? backRegionMappings.authMethod.filter((method) => method === matchedBackAuthMethod)
-              : backRegionMappings.authMethod.filter((method) => method !== 'MRZ' && method !== '2D_barcode'),
-            mrzTypes: backRegionMappings.mrzTypes,
-          },
-          selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '',
-          code: countryData?.code || '',
-          currentSide: currentSide,
-          templatePath: templatePath,
-          mrzType: backMrzType,
-          templateResponse,
-        }, env).then((res: any) => { 
-          logger.log("back verification result", truncateFields(res));
-          const bbox = res?.bbox || templateBbox;
-          
-          setSilentCaptureResult((prev) => ({
-            ...prev, 
-            path: result.path, 
-            bbox: bbox,
-            success: true, 
-            mrz: res?.mrz ? JSON.stringify(res.mrz) : "", 
-            isAnalyzing: false,
-            country: countryData?.code,
-            documentType: selectedDocumentType.type,
-          }));
-          
-          // Stocker le bbox pour ce côté
-          if (bbox && typeof bbox === 'object') {
-            setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
-          }
-        }).catch((e: any) => {
-          logger.log("error back verification", truncateFields(e));
-          const isCardNotFullyInFrame =
-            e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
-            e?.message?.includes('entirement') ||
-            e?.message?.includes('fully in frame');
-          const errorMessage = isCardNotFullyInFrame
-            ? t('kyc.idCardCapture.cardNotFullyInFrame')
-            : (e?.message || 'Erreur de détection du MRZ');
-          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
-        });
-      }
 
-    }
-  }
-
-  const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-    if (silentCaptureResult.path) {
-      let imagePathForUpload = silentCaptureResult.path;
-      if (silentCaptureResult.bbox) {
-        try {
-          imagePathForUpload = await cropImageWithBBoxWithTolerance(silentCaptureResult.path, silentCaptureResult.bbox, 0.05);
-        } catch (error) {
-          imagePathForUpload = silentCaptureResult.path;
+        let verificationRes: any;
+        if (currentSide === 'front') {
+          const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
+          const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+          verificationRes = await frontVerification({ path: result.path, regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: countryData?.code || '', currentSide, templatePath, mrzType }, env);
+        } else {
+          const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
+          const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+          verificationRes = await backVerification({ path: result.path, regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse }, env);
         }
-      }
 
-      const base64 = await pathToBase64(imagePathForUpload);
+        const bbox = verificationRes?.bbox || templateBbox;
+        const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
+        
+        const verifiedResult: ISilentCaptureResult = { path: result.path, templatePath, bbox, success: true, mrz, isAnalyzing: false, country: countryData?.code, documentType: selectedDocumentType.type };
+        setSilentCaptureResult(verifiedResult);
+        if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
+        
+        await autoCapture(result.path, verifiedResult);
 
-      // ✅ FIX: Use 'imagePathForUpload' (the cropped image) for the local display directory!
-      const newImages = { 
-          ...capturedImages, 
-          [currentSide]: { 
-              dir: imagePathForUpload, // <--- CHANGED THIS LINE
-              file: base64, 
-              mrz: silentCaptureResult.mrz || "", 
-              templatePath: silentCaptureResult.templatePath 
-          } 
-      };
-      
-      setCapturedImages(newImages);
-      
-      if (silentCaptureResult.country && silentCaptureResult.documentType) {
-        onValueChange({
-          ...newImages,
-          country: silentCaptureResult.country,
-          documentType: GovernmentDocumentTypeBackend[silentCaptureResult.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
-        });
+      } catch (error: any) {
+        const isCardNotFullyInFrame = error?.message === 'CARD_NOT_FULLY_IN_FRAME' || error?.message?.includes('entirement');
+        const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (error?.message || 'Erreur de détection');
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: errorMessage }));
       }
-      setShowCamera(false);
-      actions.showCustomStepper(true);
-    } else {
-      showAlert('Erreur', result.error || 'Impossible de prendre la photo');
     }
   };
 
   const handleError = (event: { message: string }) => {
-    showAlert('Erreur', event.message);
-    setShowCamera(false);
-  };
-
-  useEffect(() => {
-    actions.showCustomStepper(!showCamera);
-  }, [showCamera]);
-
-  // Cross-device polling logic
-  useEffect(() => {
-    if (!showQRModal || !state.session.session_id) return;
-
-    const pollInterval = setInterval(async () => {
-      try {
-        const result = await kycService.getVerificationResult(state.session.session_id);
-        const sessionData = result[state.session.session_id]?.data;
-
-        if (sessionData) {
-          // Check if verification is completed or if we have ID card data
-          // Since the requirement is "verification restarts", we might look for overall completion
-          // or we could check if user_data is populated.
-          // For now, let's assume if status is not PENDING/INITIALIZED it might be done.
-          // Or simplier: if the mobile flow completes, the session status updates.
-          logger.log('Polling result:', truncateFields(sessionData));
-
-          if (sessionData.verification_status === 'completed' || sessionData.verification_status === 'approved' || sessionData.verification_status === 'review') {
-            clearInterval(pollInterval);
-            setShowQRModal(false);
-            actions.submitVerification(); // Or handleComplete
-          }
-        }
-      } catch (error) {
-        console.error('Polling error:', error);
-      }
-    }, 5000);
-
-    return () => clearInterval(pollInterval);
-  }, [showQRModal, state.session.session_id, actions]);
-
-  const getQrCodeUrl = (): string => {
-    // Only available on web platform
-    if (Platform.OS !== 'web') return '';
-    if (typeof window === 'undefined' || !window.location || !window.location.href) return '';
-    
-    try {
-      const currentUrl = new URL(window.location.href);
-      if (!currentUrl.searchParams.has('kyc_id') && state.session.session_id) {
-        currentUrl.searchParams.set('kyc_id', state.session.session_id);
-      }
-      currentUrl.searchParams.set('component_index', String(state.currentComponentIndex));
-      if (countrySelectionData?.code) {
-        currentUrl.searchParams.set('country', countrySelectionData.code);
-        if (countrySelectionData.documentType) currentUrl.searchParams.set('document_type', countrySelectionData.documentType);
-        if (countrySelectionData.region) currentUrl.searchParams.set('region', countrySelectionData.region);
-      }
-      return `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(currentUrl.toString())}`;
-    } catch (error) {
-      console.warn('Error generating QR code URL:', error);
-      return '';
-    }
+    showAlert('Erreur', event.message); setShowCamera(false); setIsProcessingCapture(false);
   };
 
+  useEffect(() => { actions.showCustomStepper(!showCamera); }, [showCamera]);
 
-
-
-
-
-
-  // En reprise sur un autre appareil: afficher un chargement tant que les données de session ne sont pas restaurées
-  const isResumingSession = Boolean(state.session.session_id && state.currentComponentIndex > 0);
-  const sessionDataRestored = state.session.sessionDataRestored !== false;
-  if (isResumingSession && !sessionDataRestored && (!countrySelectionData || !selectedDocumentType)) {
-    return (
-      <View style={styles.root}>
-        <View style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
-          <ActivityIndicator size="large" color="#2DBD60" />
-          <Text style={[styles.description, { marginTop: 16 }]}>
-            {state.currentLanguage === 'en' ? 'Loading your session...' : 'Chargement de votre session...'}
-          </Text>
-        </View>
-      </View>
-    );
-  }
-
-  // Vérifier si les données sont disponibles, sinon afficher un message d'erreur
   if (!countrySelectionData || !selectedDocumentType) {
     return (
       <View style={styles.root}>
         <View style={styles.container}>
           <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
           <Text style={styles.description}>
-            {state.currentLanguage === "en"
-              ? "Please complete the country and document selection first."
-              : "Veuillez d'abord compléter la sélection du pays et du document."}
+            {state.currentLanguage === "en" ? "Please complete the country and document selection first." : "Veuillez d'abord compléter la sélection du pays et du document."}
           </Text>
-          {error && (
-            <Text style={styles.errorText}>{error}</Text>
-          )}
         </View>
       </View>
     );
   }
 
-
-
+  // --- CAMERA RENDER ---
   if (showCamera) {
+    const isBusy = isProcessingCapture; 
+
     return (
       <View style={styles.cameraContainer}>
         <EnhancedCameraView
+          key={currentSide} // 🚨 BUG FIX: Forces the camera instance to completely reset when switching sides
           showCamera={true}
+          isProcessing={isBusy}
           cameraType={cameraConfig.cameraType}
           style={styles.camera}
-          onCapture={handleCapture}
           onError={handleError}
-          onClose={() => setShowCamera(false)}
-          quality="high"
-          showCaptureButton={true}
-          showSwitchCamera={true}
           onSilentCapture={handleSilentCapture}
           silentCaptureResult={silentCaptureResult}
-          captureStabilizationDelayMs={3000}
-          enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
           overlayComponent={
-            <IdCardOverlay
-              xMin={cameraConfig.overlay.bbox.xMin}
-              yMin={cameraConfig.overlay.bbox.yMin}
-              xMax={cameraConfig.overlay.bbox.xMax}
-              yMax={cameraConfig.overlay.bbox.yMax}
-              instructions={cameraConfig.overlay.guideText}
-              cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
-              isSuccess={silentCaptureResult.success}
-              language={state.currentLanguage}
-              stepperProps={{
-                back: () => {
-                  if (currentSide === 'back') {
-                    setCurrentSide('front');
-                    setShowCamera(false);
-                    // Si une image front existe, on la restaure pour l'afficher
-                    if (capturedImages['front']?.dir) {
-                      // Restaurer l'état de capture du front pour afficher l'image
-                      const frontImage = capturedImages['front'];
-                      const frontBbox = bboxBySide['front'];
-                      setSilentCaptureResult((prev) => ({
-                        path: frontImage.dir,
-                        success: true,
-                        isAnalyzing: false,
-                        error: '',
-                        mrz: frontImage.mrz || '',
-                        templatePath: frontImage.templatePath || '',
-                        country: silentCaptureResult.country,
-                        documentType: silentCaptureResult.documentType,
-                        bbox: frontBbox // Restaurer le bbox pour recalculer le cropImageUri
-                      }));
-                    } else {
-                      // Pas d'image front, on réinitialise
-                      setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
-                    }
-                  } else {
-                    // Retour au composant précédent (country_selection)
-                    actions.previousComponent();
-                  }
-                },
-                selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
-                step: state.currentComponentIndex + 1,
-                totalSteps: state.template.components.length,
-                side: currentSide,
-              }}
-            />
+            <>
+              {!isBusy && silentCaptureResult.isAnalyzing && (
+                 <View style={styles.topAnalyzingPillContainer}>
+                    <View style={styles.topAnalyzingPill}>
+                      <ActivityIndicator size="small" color="white" />
+                      <Text style={styles.analyzingPillText}>
+                         {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
+                      </Text>
+                    </View>
+                 </View>
+              )}
+
+              {isBusy && (
+                <View style={StyleSheet.absoluteFillObject}>
+                  {processingImagePath && (
+                    <Image 
+                      source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} 
+                      style={StyleSheet.absoluteFillObject} 
+                      resizeMode="cover" 
+                    />
+                  )}
+                  <View style={styles.processingOverlay}>
+                    <ActivityIndicator size="large" color="#2DBD60" />
+                    <Text style={styles.processingText}>
+                      {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
+                    </Text>
+                  </View>
+                </View>
+              )}
+
+              <IdCardOverlay
+                xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
+                instructions={cameraConfig.overlay.guideText}
+                cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+                isSuccess={silentCaptureResult.success}
+                language={state.currentLanguage}
+                stepperProps={{
+                  back: () => {
+                    if (currentSide === 'back') {
+                      setCurrentSide('front'); 
+                      setShowCamera(false);
+                      // 🚨 Clean up any residual state when going backwards
+                      setIsProcessingCapture(false);
+                      setProcessingImagePath(null);
+                      
+                      if (capturedImages['front']?.dir) {
+                        const frontImage = capturedImages['front'];
+                        setSilentCaptureResult((prev) => ({ ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front'] }));
+                      } else { setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' })); }
+                    } else { actions.previousComponent(); }
+                  },
+                  selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
+                  step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
+                }}
+              />
+            </>
           }
         />
         
-        {silentCaptureResult.error ? (
+        {silentCaptureResult.error && !isBusy ? (
           <View style={styles.floatingErrorBanner}>
-            <Text style={styles.floatingErrorText}>
-              {silentCaptureResult.error}
-            </Text>
+            <Text style={styles.floatingErrorText}>{silentCaptureResult.error}</Text>
           </View>
         ) : null}
-
       </View>
     );
   }
 
-
   return (
     <View style={styles.root}>
       <View style={styles.previewContainer}>
@@ -679,401 +358,82 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
               {getLocalizedText(component.instructions)}
             </Text>
-
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
+              
               {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (
-              <View style={{ 
-                backgroundColor: '#FF9500', 
-                padding: 12, 
-                borderRadius: 8, 
-                width: '100%',
-                shadowColor: '#000',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.2,
-                shadowRadius: 4,
-                elevation: 4
-              }}>
-                <Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 }}>
-                  {state.currentLanguage === "en" 
-                    ? "Move the document closer to the camera." 
-                    : "Veuillez rapprocher le document de la caméra."}
-                </Text>
-              </View>
-            )}
+                <View style={styles.warningBanner}>
+                  <Text style={styles.warningText}>
+                    {state.currentLanguage === "en" ? "Move the document closer to the camera and place it on a flat surface." : "Veuillez rapprocher le document de la caméra et le poser à plat."}
+                  </Text>
+                </View>
+              )}
 
-            <View
-                style={{
-                  width: '100%',
-                  height: 200,
-                  borderRadius: 12,
-                  padding: 1,
-                  overflow: 'hidden',
-                  shadowColor: '#000',
-                  shadowOffset: { width: 0, height: 4 },
-                  shadowOpacity: 0.18,
-                  shadowRadius: 8,
-                  elevation: 8,
-                  backgroundColor: '#000', 
-                }}
-              >
+              <View style={styles.imagePreviewWrapper}>
                 {capturedImages[currentSide]?.dir ? (
-                  <Image
-                    source={{ uri: capturedImages[currentSide].dir }}
-                    style={{
-                      width: '100%',
-                      height: '100%', 
-                      borderRadius: 12,
-                      resizeMode: 'contain', 
-                    }}
-                  />
+                  <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} />
                 ) : silentCaptureResult.path ? (
-                  <Image
-                    source={{ uri: silentCaptureResult.path }}
-                    style={{
-                      width: '100%',
-                      height: '100%',
-                      borderRadius: 12,
-                      resizeMode: 'contain', 
-                    }}
-                  />
+                  <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} />
                 ) : null}
               </View>
-              {/* Capture button si aucune image n'a été capturée */}
+
               {!capturedImages[currentSide]?.dir && (
                 <Button
-                  title={state.currentLanguage === "en" ? "Take Photo" : "Prendre une photo"}
-                  onPress={() => {
-                    setShowCamera(true);
-                    actions.showCustomStepper(false);
-                  }}
-                  variant="primary"
-                  size="large"
-                  fullWidth
+                  title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
+                  onPress={() => { setShowCamera(true); actions.showCustomStepper(false); }}
+                  variant="primary" size="large" fullWidth
                 />
               )}
-              {/* retake button si une image a été capturée */}
+
               {capturedImages[currentSide]?.dir && (
                 <>
-                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => {
-                    retakePicture(currentSide);
-                  }}
-                    variant="outline"
-                    size="medium"
-                    fullWidth
-                  />
+                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth />
                   <Button title={t('common.next')} onPress={() => {
-                    if (!selectedDocumentType) {
-                      showAlert('Error', 'Document type not selected');
-                      return;
+                    if (!selectedDocumentType) { showAlert('Error', 'Document type not selected'); return; }
+                    
+                    // 🚨 BUG FIX: Clear all state before moving forward
+                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') { 
+                        actions.nextComponent(); 
+                    } else { 
+                        setShowCamera(true); 
+                        setCurrentSide('back'); 
+                        setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '' }); 
+                        setIsProcessingCapture(false);
+                        setProcessingImagePath(null);
                     }
-                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
-                      actions.nextComponent();
-                      return;
-                    } else {
-                      setShowCamera(true);
-                      setCurrentSide('back');
-                      setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
-                      // setCropImageUri('');
-                    }
-                  }}
-                    variant="primary"
-                    size="large"
-                    fullWidth
-                  />
+                  }} variant="primary" size="large" fullWidth />
                 </>
               )}
             </View>
           </View>
         </ScrollView>
-
-
-
-        {error && (
-          <Text style={styles.errorText}>{error}</Text>
-        )}
-
-        {/* Cross-Device / Continue on Phone Button (Web Only) */}
-        {Platform.OS === 'web' && !isMobileWeb() && !capturedImages[currentSide]?.dir && (
-          <Button title={t('kyc.idCardCapture.continueOnPhone')} onPress={() => { setShowQRModal(true) }} />
-        )}
-
-        {/* QR Code Modal - Web Only */}
-        {Platform.OS === 'web' && (
-          <Modal
-            visible={showQRModal}
-            transparent={true}
-            animationType="fade"
-            onRequestClose={() => setShowQRModal(false)}
-          >
-            <View style={styles.modalOverlay}>
-              <View style={styles.modalContent}>
-                <Text style={styles.modalTitle}>
-                  {t('kyc.idCardCapture.continueOnMobile')}
-                </Text>
-                <Text style={styles.modalDescription}>
-                  {t('kyc.idCardCapture.scanQrCode')}
-                </Text>
-
-                {showQRModal && getQrCodeUrl() ? (
-                  <Image
-                    source={{ uri: getQrCodeUrl() }}
-                    style={styles.qrCodeImage}
-                  />
-                ) : null}
-
-                <TouchableOpacity
-                  style={styles.closeButton}
-                  onPress={() => setShowQRModal(false)}
-                >
-                  <Text style={styles.closeButtonText}>
-                    {t('common.close')}
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </Modal>
-        )}
-
       </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    maxWidth: 760,
-    width: '100%',
-  },
-  container: {
-    backgroundColor: 'white',
-    margin: 10,
-    borderRadius: 10,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    // shadow
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.35,
-    shadowRadius: 4.84,
-    elevation: 10,
-    // padding: 16,
-  },
-  cameraContainer: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  previewContainer: {
-    width: '95%',
-    backgroundColor: 'white',
-    margin: 10,
-    borderRadius: 10,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-  },
-  previewItemContainer: {
-
-    // marginBottom: 24,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontSize: 18,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  sideInfo: {
-    fontSize: 14,
-    color: '#888',
-    textAlign: 'center',
-    marginBottom: 16,
-    fontStyle: 'italic',
-  },
-  description: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 24,
-    lineHeight: 22,
-  },
-  sidesContainer: {
-    flex: 1,
-  },
-  sideContainer: {
-    marginBottom: 24,
-  },
-  sideTitle: {
-    fontSize: 25,
-    fontWeight: 'bold',
-    color: '#000',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
-  captureButton: {
-    borderWidth: 2,
-    borderColor: '#2DBD60',
-    borderStyle: 'dashed',
-    borderRadius: 12,
-    padding: 32,
-    alignItems: 'center',
-    backgroundColor: '#f0f9f0',
-  },
-  captureIcon: {
-    fontSize: 48,
-    marginBottom: 16,
-  },
-  captureText: {
-    fontSize: 16,
-    color: '#2DBD60',
-    fontWeight: '600',
-  },
-  capturedImageContainer: {
-    position: 'relative',
-  },
-  capturedImage: {
-    width: '100%',
-    height: 200,
-    borderRadius: 12,
-    resizeMode: 'contain',
-    backgroundColor: '#f0f0f0',
-  },
-  retakeButton: {
-    position: 'absolute',
-    top: 8,
-    right: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 6,
-  },
-  retakeButtonText: {
-    color: 'white',
-    fontSize: 12,
-    fontWeight: '600',
-  },
+  root: { flex: 1, maxWidth: 760, width: '100%' },
+  container: { backgroundColor: 'white', margin: 10, borderRadius: 10, paddingVertical: 16, paddingHorizontal: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.35, shadowRadius: 4.84, elevation: 10 },
+  cameraContainer: { flex: 1, width: '100%', height: '100%' },
+  previewContainer: { width: '95%', backgroundColor: 'white', margin: 10, borderRadius: 10, paddingVertical: 16, paddingHorizontal: 16 },
+  previewItemContainer: {},
+  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
+  description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
+  sideContainer: { marginBottom: 24 },
+  sideTitle: { fontSize: 25, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
+  imagePreviewWrapper: { width: '100%', height: 200, borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#000' },
+  previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'contain' },
+  floatingErrorBanner: { position: 'absolute', top: 60, left: '10%', right: '10%', backgroundColor: 'rgba(220, 38, 38, 0.95)', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8, zIndex: 100 },
+  floatingErrorText: { color: 'white', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+  processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
+  processingText: { color: '#FFF', fontSize: 18, fontWeight: 'bold', marginTop: 16, textAlign: 'center' },
+  warningBanner: { backgroundColor: '#FF9500', padding: 12, borderRadius: 8, width: '100%', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4, elevation: 4 },
+  warningText: { color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 },
+  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+  topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
+  topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
+  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
   camera: {
     flex: 1,
   },
-  completionContainer: {
-    marginTop: 24,
-    alignItems: 'center',
-  },
-  completionText: {
-    fontSize: 16,
-    color: '#2DBD60',
-    fontWeight: '600',
-    marginBottom: 16,
-  },
-  primaryButton: {
-    paddingHorizontal: 32,
-    paddingVertical: 16,
-    borderRadius: 8,
-    // minWidth: 120,
-    alignItems: 'center',
-    backgroundColor: '#2DBD60',
-  },
-  primaryButtonText: {
-    color: 'white',
-    fontWeight: '600',
-    fontSize: 16,
-  },
-  errorText: {
-    color: '#dc2626',
-    fontSize: 14,
-    marginTop: 8,
-    textAlign: 'center',
-  },
-  crossDeviceButton: {
-    marginTop: 16,
-    padding: 12,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#2DBD60',
-    borderRadius: 8,
-    backgroundColor: '#f0f9f0',
-  },
-  crossDeviceText: {
-    color: '#2DBD60',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 24,
-    alignItems: 'center',
-    width: '90%',
-    maxWidth: 340,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  modalTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 12,
-    color: '#333',
-  },
-  modalDescription: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 20,
-    lineHeight: 22,
-  },
-  qrCodeImage: {
-    width: 200,
-    height: 200,
-    marginBottom: 20,
-  },
-  closeButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-  },
-  closeButtonText: {
-    fontSize: 16,
-    color: '#666',
-    fontWeight: '600',
-  },
-  floatingErrorBanner: {
-    position: 'absolute',
-    top: 60, // Pushes it down slightly from the very top of the screen
-    left: '10%',
-    right: '10%',
-    backgroundColor: 'rgba(220, 38, 38, 0.95)', // Bright red
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 5,
-    elevation: 8,
-    zIndex: 100,
-  },
-  floatingErrorText: {
-    color: 'white',
-    fontSize: 14,
-    fontWeight: '700',
-    textAlign: 'center',
-  },
-}); 
+});