@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/FileManagementScreen.tsx

@@ -6,74 +6,93 @@ import {
     StyleSheet,
     ScrollView,
     ActivityIndicator,
-    Platform,
     RefreshControl,
-    Dimensions,
-    Modal,
     TextInput,
-    Image, // kept for Image.getSize only
+    Image,
     Animated,
     Easing,
     Alert,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
-import { fontFamilies } from '../styles/fonts';
+import type { FileManagementScreenProps } from '../types/fileManagement';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import type { FileMetadata } from '../../models/interfaces';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
 import Header from '../components/Header';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { GroupedSection } from '../components';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
+import {
+    confirmAction,
+    convertDocumentPickerAssetToFile,
+    formatFileSize,
+    getFileIcon,
+    getSafeDownloadUrl,
+    uploadFileRaw
+} from '../utils/fileManagement';
+import { FileViewer } from '../components/fileManagement/FileViewer';
+import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
+import { UploadPreview } from '../components/fileManagement/UploadPreview';
+import { fileManagementStyles } from '../components/fileManagement/styles';
+import type { OnConfirmFileSelection } from '../types/fileManagement';
+
+// Animated button component for smooth transitions
+const AnimatedButton: React.FC<{
+    isSelected: boolean;
+    onPress: () => void;
+    icon: string;
+    primaryColor: string;
+    textColor: string;
+    style: any;
+}> = ({ isSelected, onPress, icon, primaryColor, textColor, style }) => {
+    const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
 
-// Exporting props & callback types so external callers (e.g. showBottomSheet config objects) can annotate
-export type OnConfirmFileSelection = (files: FileMetadata[]) => void;
-
-export interface FileManagementScreenProps extends BaseScreenProps {
-    userId?: string;
-    // Enable selection mode (acts like a picker). When true, opening a file selects it instead of showing viewer
-    selectMode?: boolean;
-    // Allow selecting multiple files; only used if selectMode is true
-    multiSelect?: boolean;
-    // Callback when a file is selected (single select mode)
-    onSelect?: (file: FileMetadata) => void;
-    // Callback when confirm pressed in multi-select mode
-    onConfirmSelection?: OnConfirmFileSelection;
-    // Initial selected file IDs for multi-select
-    initialSelectedIds?: string[];
-    maxSelection?: number;
-    disabledMimeTypes?: string[];
-    /**
-     * What to do after a single selection (non-multiSelect) is made.
-     * 'close' (default) will dismiss the bottom sheet via onClose.
-     * 'back' will navigate back to the previous screen (e.g., return to AccountSettings without closing sheet).
-     * 'none' will keep the picker open (caller can manually close or navigate).
-     */
-    afterSelect?: 'close' | 'back' | 'none';
-    allowUploadInSelectMode?: boolean;
-    /**
-     * Default visibility for uploaded files in this screen
-     * Useful for third-party apps that want files to be public (e.g., GIF selector)
-     */
-    defaultVisibility?: 'private' | 'public' | 'unlisted';
-    /**
-     * Link context for tracking file usage by third-party apps
-     * When provided, selected files will be linked to this entity
-     */
-    linkContext?: {
-        app: string;           // App identifier (e.g., 'chat-app', 'post-composer')
-        entityType: string;    // Type of entity (e.g., 'message', 'post', 'profile')
-        entityId: string;      // Unique ID of the entity using this file
-        webhookUrl?: string;   // Optional webhook URL to receive file events
-    };
-}
+    useEffect(() => {
+        Animated.timing(animatedValue, {
+            toValue: isSelected ? 1 : 0,
+            duration: 200,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: false,
+        }).start();
+    }, [isSelected, animatedValue]);
+
+    const backgroundColor = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['transparent', primaryColor],
+    });
 
-// Add this helper function near the top (after imports):
-async function uploadFileRaw(file: File | Blob, userId: string, oxyServices: any, visibility?: 'private' | 'public' | 'unlisted') {
-    return await oxyServices.uploadRawFile(file, visibility);
-}
+    const iconColor = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [textColor, '#FFFFFF'],
+    });
+
+    return (
+        <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+            <Animated.View
+                style={[
+                    style,
+                    {
+                        backgroundColor,
+                    },
+                ]}
+            >
+                <Animated.View>
+                    <MaterialCommunityIcons
+                        name={icon as any}
+                        size={16}
+                        color={isSelected ? '#FFFFFF' : textColor}
+                    />
+                </Animated.View>
+            </Animated.View>
+        </TouchableOpacity>
+    );
+};
 
 const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     onClose,
@@ -94,8 +113,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     defaultVisibility = 'private',
     linkContext,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
     const files = useFiles();
+    // Ensure containerWidth is a number (TypeScript guard)
+    const safeContainerWidth: number = typeof containerWidth === 'number' ? containerWidth : 400;
     const uploading = useUploadingStore();
     const uploadProgress = useUploadAggregateProgress();
     const deleting = useDeletingStore();
@@ -109,6 +131,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [fileContent, setFileContent] = useState<string | null>(null);
     const [loadingFileContent, setLoadingFileContent] = useState(false);
     const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
+    const [isPickingDocument, setIsPickingDocument] = useState(false);
     const [viewMode, setViewMode] = useState<'all' | 'photos' | 'videos' | 'documents' | 'audio'>('all');
     const [searchQuery, setSearchQuery] = useState('');
     const [sortBy, setSortBy] = useState<'date' | 'size' | 'name' | 'type'>('date');
@@ -123,7 +146,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } else if (viewMode === 'videos') {
             filteredByMode = files.filter(file => file.contentType.startsWith('video/'));
         } else if (viewMode === 'documents') {
-            filteredByMode = files.filter(file => 
+            filteredByMode = files.filter(file =>
                 file.contentType.includes('pdf') ||
                 file.contentType.includes('document') ||
                 file.contentType.includes('text') ||
@@ -136,7 +159,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } else if (viewMode === 'audio') {
             filteredByMode = files.filter(file => file.contentType.startsWith('audio/'));
         }
-        
+
         let filtered = filteredByMode;
         if (searchQuery.trim()) {
             const query = searchQuery.toLowerCase();
@@ -146,7 +169,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 (file.metadata?.description && file.metadata.description.toLowerCase().includes(query))
             );
         }
-        
+
         // Sort files
         const sorted = [...filtered].sort((a, b) => {
             let comparison = 0;
@@ -163,13 +186,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
             return sortOrder === 'asc' ? comparison : -comparison;
         });
-        
+
         return sorted;
     }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-    const [isDragging, setIsDragging] = useState(false);
     const [photoDimensions, setPhotoDimensions] = useState<{ [key: string]: { width: number, height: number } }>({});
     const [loadingDimensions, setLoadingDimensions] = useState(false);
-    const [hoveredPreview, setHoveredPreview] = useState<string | null>(null);
     const uploadStartRef = useRef<number | null>(null);
     const MIN_BANNER_MS = 600;
     // Selection state
@@ -178,7 +199,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const scrollViewRef = useRef<ScrollView>(null);
     const photoScrollViewRef = useRef<ScrollView>(null);
     const itemRefs = useRef<Map<string, number>>(new Map()); // Track item positions
-    const containerRef = useRef<View>(null); // Ref for drag and drop container
+    const containerRef = useRef<View>(null);
     useEffect(() => {
         if (initialSelectedIds && initialSelectedIds.length) {
             setSelectedIds(new Set(initialSelectedIds));
@@ -205,7 +226,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 // Continue anyway - selection shouldn't fail if visibility update fails
             }
         }
-        
+
         // Track the selected file for scrolling
         setLastSelectedFileId(file.id);
 
@@ -303,56 +324,22 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     }, []);
 
     // Helper to safely request a thumbnail variant only for image mime types.
-    // Prevents backend warnings: "Variant thumb not supported for mime application/pdf".
-    const getSafeDownloadUrl = useCallback(
+    const getSafeDownloadUrlCallback = useCallback(
         (file: FileMetadata, variant: string = 'thumb') => {
-            const isImage = file.contentType.startsWith('image/');
-            const isVideo = file.contentType.startsWith('video/');
-
-            // Prefer explicit variant key if variants metadata present
-            if (file.variants && file.variants.length > 0) {
-                // For videos, try 'poster' regardless of requested variant
-                if (isVideo) {
-                    const poster = file.variants.find(v => v.type === 'poster');
-                    if (poster) return oxyServices.getFileDownloadUrl(file.id, 'poster');
-                }
-                if (isImage) {
-                    const desired = file.variants.find(v => v.type === variant);
-                    if (desired) return oxyServices.getFileDownloadUrl(file.id, variant);
-                }
-            }
-
-            if (isImage) {
-                return oxyServices.getFileDownloadUrl(file.id, variant);
-            }
-            if (isVideo) {
-                // Fallback to poster if backend supports implicit generation
-                try {
-                    return oxyServices.getFileDownloadUrl(file.id, 'poster');
-                } catch {
-                    return oxyServices.getFileDownloadUrl(file.id);
-                }
-            }
-            // Other mime types: no variant
-            return oxyServices.getFileDownloadUrl(file.id);
+            return getSafeDownloadUrl(file, variant, (fileId: string, variant?: string) => oxyServices.getFileDownloadUrl(fileId, variant));
         },
         [oxyServices]
     );
 
-    // Memoize theme-related calculations to prevent unnecessary recalculations
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            isDarkTheme,
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#FFFFFF',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-            primaryColor: '#007AFF',
-            dangerColor: '#FF3B30',
-            successColor: '#34C759',
-        };
-    }, [theme]);
+    // Use centralized theme styles hook for consistency
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const baseThemeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    // FileManagementScreen uses a slightly different light background
+    const themeStyles = useMemo(() => ({
+        ...baseThemeStyles,
+        backgroundColor: baseThemeStyles.isDarkTheme ? baseThemeStyles.backgroundColor : '#f2f2f2',
+    }), [baseThemeStyles]);
 
     // Extract commonly used theme variables
     const backgroundColor = themeStyles.backgroundColor;
@@ -425,7 +412,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     // (removed effect; filteredFiles is memoized)
 
-    // Load photo dimensions for justified grid
+    // Load photo dimensions for justified grid - unified approach using Image.getSize
     const loadPhotoDimensions = useCallback(async (photos: FileMetadata[]) => {
         if (photos.length === 0) return;
 
@@ -445,46 +432,25 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             await Promise.all(
                 photosToLoad.map(async (photo) => {
                     try {
-                        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
-
-                        if (Platform.OS === 'web') {
-                            const img = new (window as any).Image();
-                            await new Promise<void>((resolve, reject) => {
-                                img.onload = () => {
-                                    newDimensions[photo.id] = {
-                                        width: img.naturalWidth,
-                                        height: img.naturalHeight
-                                    };
+                        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+
+                        // Unified approach using Image.getSize (works on all platforms)
+                        await new Promise<void>((resolve) => {
+                            Image.getSize(
+                                downloadUrl,
+                                (width: number, height: number) => {
+                                    newDimensions[photo.id] = { width, height };
                                     hasNewDimensions = true;
                                     resolve();
-                                };
-                                img.onerror = () => {
-                                    // Fallback dimensions for failed loads
+                                },
+                                () => {
+                                    // Fallback dimensions
                                     newDimensions[photo.id] = { width: 1, height: 1 };
                                     hasNewDimensions = true;
                                     resolve();
-                                };
-                                img.src = downloadUrl;
-                            });
-                        } else {
-                            // For mobile, use Image.getSize from react-native
-                            await new Promise<void>((resolve) => {
-                                Image.getSize(
-                                    downloadUrl,
-                                    (width: number, height: number) => {
-                                        newDimensions[photo.id] = { width, height };
-                                        hasNewDimensions = true;
-                                        resolve();
-                                    },
-                                    () => {
-                                        // Fallback dimensions
-                                        newDimensions[photo.id] = { width: 1, height: 1 };
-                                        hasNewDimensions = true;
-                                        resolve();
-                                    }
-                                );
-                            });
-                        }
+                                }
+                            );
+                        });
                     } catch (error) {
                         // Fallback dimensions for any errors
                         newDimensions[photo.id] = { width: 1, height: 1 };
@@ -501,7 +467,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } finally {
             setLoadingDimensions(false);
         }
-    }, [oxyServices, photoDimensions]);
+    }, [getSafeDownloadUrlCallback, photoDimensions]);
 
     // Create justified rows from photos with responsive algorithm
     const createJustifiedRows = useCallback((photos: FileMetadata[], containerWidth: number) => {
@@ -518,26 +484,38 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return rows;
     }, []);
 
-    const processFileUploads = async (selectedFiles: File[]) => {
-        if (selectedFiles.length === 0) return;
-        if (!targetUserId) return; // Guard clause to ensure userId is defined
+    const processFileUploads = async (selectedFiles: File[]): Promise<FileMetadata[]> => {
+        if (selectedFiles.length === 0) return [];
+        if (!targetUserId) return []; // Guard clause to ensure userId is defined
+        const uploadedFiles: FileMetadata[] = [];
         try {
             storeSetUploadProgress({ current: 0, total: selectedFiles.length });
             const maxSize = 50 * 1024 * 1024; // 50MB
             const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
             if (oversizedFiles.length > 0) {
-                const fileList = oversizedFiles.map(f => f.name).join('\n');
-                window.alert(`File Size Limit\n\nThe following files are too large (max 50MB):\n${fileList}`);
-                return;
+                const fileList = oversizedFiles.map(f => f.name).join(', ');
+                toast.error(`The following files are too large (max 50MB): ${fileList}`);
+                return [];
             }
             let successCount = 0;
             let failureCount = 0;
             const errors: string[] = [];
             for (let i = 0; i < selectedFiles.length; i++) {
                 storeSetUploadProgress({ current: i + 1, total: selectedFiles.length });
+                const raw = selectedFiles[i];
+                const fileName = raw.name || `file-${i + 1}`;
+                const optimisticId = `temp-${Date.now()}-${i}-${Math.random().toString(36).substr(2, 9)}`; // Unique ID per file
+
                 try {
-                    const raw = selectedFiles[i];
-                    const optimisticId = `temp-${Date.now()}-${i}`;
+                    // Validate file before upload
+                    if (!raw || !raw.name || raw.size === undefined || raw.size <= 0) {
+                        const errorMsg = `Invalid file: ${fileName}`;
+                        console.error('Upload validation failed:', { file: raw, error: errorMsg });
+                        failureCount++;
+                        errors.push(`${fileName}: Invalid file (missing name or size)`);
+                        continue;
+                    }
+
                     const optimisticFile: FileMetadata = {
                         id: optimisticId,
                         filename: raw.name,
@@ -549,7 +527,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         variants: [],
                     };
                     useFileStore.getState().addFile(optimisticFile, { prepend: true });
+
                     const result = await uploadFileRaw(raw, targetUserId, oxyServices, defaultVisibility);
+
                     // Attempt to refresh file list incrementally – fetch single file metadata if API allows
                     if (result?.file || result?.files?.[0]) {
                         const f = result.file || result.files[0];
@@ -566,22 +546,43 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         // Remove optimistic then add real
                         useFileStore.getState().removeFile(optimisticId);
                         useFileStore.getState().addFile(merged, { prepend: true });
+                        uploadedFiles.push(merged);
+                        successCount++;
                     } else {
                         // Fallback: will reconcile on later list refresh
                         useFileStore.getState().updateFile(optimisticId, { metadata: { uploading: false } as any });
+                        console.warn('Upload completed but no file data returned:', { fileName, result });
+                        // Still count as success if upload didn't throw
+                        successCount++;
                     }
-                    successCount++;
                 } catch (error: any) {
                     failureCount++;
-                    errors.push(`${selectedFiles[i].name}: ${error.message || 'Upload failed'}`);
+                    const errorMessage = error.message || error.toString() || 'Upload failed';
+                    const fullError = `${fileName}: ${errorMessage}`;
+                    errors.push(fullError);
+                    console.error('File upload failed:', {
+                        fileName,
+                        fileSize: raw.size,
+                        fileType: raw.type,
+                        error: errorMessage,
+                        stack: error.stack
+                    });
+
+                    // Remove optimistic file on error (use the same optimisticId from above)
+                    useFileStore.getState().removeFile(optimisticId);
                 }
             }
+
+            // Show success/error messages
             if (successCount > 0) {
                 toast.success(`${successCount} file(s) uploaded successfully`);
             }
             if (failureCount > 0) {
-                const errorMessage = `${failureCount} file(s) failed to upload${errors.length > 0 ? ':\n' + errors.slice(0, 3).join('\n') + (errors.length > 3 ? '\n...' : '') : ''}`;
-                toast.error(errorMessage);
+                // Show detailed error message with first few errors
+                const errorDetails = errors.length > 0
+                    ? `\n${errors.slice(0, 3).join('\n')}${errors.length > 3 ? `\n...and ${errors.length - 3} more` : ''}`
+                    : '';
+                toast.error(`${failureCount} file(s) failed to upload${errorDetails}`);
             }
             // Silent background refresh to ensure metadata/variants updated
             setTimeout(() => { loadFiles('silent'); }, 1200);
@@ -590,6 +591,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } finally {
             storeSetUploadProgress(null);
         }
+        return uploadedFiles;
     };
 
     const handleFileSelection = useCallback(async (selectedFiles: File[] | any[]) => {
@@ -597,16 +599,61 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         const processedFiles: Array<{ file: File | Blob; preview?: string; size: number; name: string; type: string }> = [];
 
         for (const file of selectedFiles) {
+            // Validate file has required properties
+            if (!file) {
+                console.error('Invalid file: file is null or undefined');
+                toast.error('Invalid file: file is missing');
+                continue;
+            }
+
+            if (!file.name || typeof file.name !== 'string') {
+                console.error('Invalid file: missing or invalid name property', file);
+                toast.error('Invalid file: missing file name');
+                continue;
+            }
+
+            if (file.size === undefined || file.size === null || isNaN(file.size)) {
+                console.error('Invalid file: missing or invalid size property', file);
+                toast.error(`Invalid file "${file.name || 'unknown'}": missing file size`);
+                continue;
+            }
+
+            if (file.size <= 0) {
+                console.error('Invalid file: file size is zero or negative', file);
+                toast.error(`File "${file.name}" is empty`);
+                continue;
+            }
+
             // Validate file size
             if (file.size > MAX_FILE_SIZE) {
                 toast.error(`"${file.name}" is too large. Maximum file size is ${formatFileSize(MAX_FILE_SIZE)}`);
                 continue;
             }
 
-            // Generate preview for images
+            // Ensure file has a type property
+            const fileType = file.type || 'application/octet-stream';
+
+            // Generate preview for images - unified approach
             let preview: string | undefined;
-            if (file.type.startsWith('image/')) {
-                preview = URL.createObjectURL(file);
+            if (fileType.startsWith('image/')) {
+                // Try to use file URI from expo-document-picker if available (works on all platforms)
+                const fileUri = (file as any).uri;
+                if (fileUri && typeof fileUri === 'string' &&
+                    (fileUri.startsWith('file://') || fileUri.startsWith('content://') ||
+                        fileUri.startsWith('http://') || fileUri.startsWith('https://') ||
+                        fileUri.startsWith('blob:'))) {
+                    preview = fileUri;
+                } else {
+                    // Fallback: create blob URL if possible (works on web)
+                    try {
+                        if (file instanceof File || file instanceof Blob) {
+                            preview = URL.createObjectURL(file);
+                        }
+                    } catch (error: any) {
+                        console.warn('Failed to create preview URL:', error);
+                        // Preview is optional, continue without it
+                    }
+                }
             }
 
             processedFiles.push({
@@ -614,11 +661,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 preview,
                 size: file.size,
                 name: file.name,
-                type: file.type
+                type: fileType
             });
         }
 
-        if (processedFiles.length === 0) return;
+        if (processedFiles.length === 0) {
+            toast.error('No valid files to upload');
+            return;
+        }
 
         // Show preview modal for user to review files before upload
         setPendingFiles(processedFiles);
@@ -636,8 +686,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         try {
             const filesToUpload = pendingFiles.map(pf => pf.file as File);
             storeSetUploadProgress({ current: 0, total: filesToUpload.length });
-            await processFileUploads(filesToUpload);
-            
+            const uploadedFiles = await processFileUploads(filesToUpload);
+
             // Cleanup preview URLs
             pendingFiles.forEach(pf => {
                 if (pf.preview) {
@@ -645,6 +695,31 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 }
             });
             setPendingFiles([]);
+
+            // If in selectMode, automatically select the uploaded file(s)
+            if (selectMode && uploadedFiles.length > 0) {
+                // Wait a bit for the file store to update and ensure file is available
+                setTimeout(() => {
+                    const fileToSelect = uploadedFiles[0];
+                    if (!multiSelect && fileToSelect) {
+                        // Single select mode - directly call onSelect callback
+                        onSelect?.(fileToSelect);
+                        if (afterSelect === 'back') {
+                            goBack?.();
+                        } else if (afterSelect === 'close') {
+                            onClose?.();
+                        }
+                    } else if (multiSelect) {
+                        // Multi-select mode - add all uploaded files to selection
+                        uploadedFiles.forEach(file => {
+                            if (!selectedIds.has(file.id)) {
+                                setSelectedIds(prev => new Set(prev).add(file.id));
+                            }
+                        });
+                    }
+                }, 500);
+            }
+
             endUpload();
         } catch (error: any) {
             toast.error(error.message || 'Failed to upload files');
@@ -675,88 +750,124 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     };
 
+    /**
+     * Handle file upload - opens document picker and processes selected files
+     * Expo 54 compatible - works on web, iOS, and Android
+     */
     const handleFileUpload = async () => {
+        // Prevent concurrent document picker calls
+        if (isPickingDocument) {
+            toast.error('Please wait for the current file selection to complete');
+            return;
+        }
+
         try {
-            if (Platform.OS === 'web') {
-                // Enhanced web file picker
-                const input = document.createElement('input');
-                input.type = 'file';
-                input.multiple = true;
-                input.accept = '*/*';
-                
-                const cancellationTimer = setTimeout(() => {
-                    const state = useFileStore.getState();
-                    if (state.uploading && uploadStartRef.current && !state.uploadProgress) {
-                        endUpload();
-                    }
-                }, 1500);
-
-                input.onchange = async (e: any) => {
-                    clearTimeout(cancellationTimer);
-                    const selectedFiles = Array.from(e.target.files || []) as File[];
-                    if (selectedFiles.length === 0) {
-                        endUpload();
-                        return;
-                    }
-                    await handleFileSelection(selectedFiles);
-                };
+            setIsPickingDocument(true);
+            
+            // Dynamically import expo-document-picker (Expo 54 supports it on all platforms)
+            const DocumentPicker = await import('expo-document-picker').catch(() => null);
 
-                input.click();
-            } else {
-                // Mobile file picker with expo-document-picker
-                try {
-                    // Dynamically import to avoid breaking if not installed
-                    const DocumentPicker = await import('expo-document-picker').catch(() => null);
-                    
-                    if (!DocumentPicker) {
-                        toast.error('File picker not available. Please install expo-document-picker');
-                        return;
-                    }
+            if (!DocumentPicker || !DocumentPicker.getDocumentAsync) {
+                toast.error('File picker not available. Please install expo-document-picker');
+                return;
+            }
 
-                    const result = await DocumentPicker.getDocumentAsync({
-                        type: '*/*',
-                        multiple: true,
-                        copyToCacheDirectory: true,
-                    });
+            // Use getDocumentAsync directly - it will handle platform availability
+            const result = await DocumentPicker.getDocumentAsync({
+                type: '*/*',
+                multiple: true,
+                copyToCacheDirectory: true,
+            });
 
-                    if (result.canceled) {
-                        return;
-                    }
+            if (result.canceled) {
+                setIsPickingDocument(false);
+                return;
+            }
+
+            if (!result.assets || result.assets.length === 0) {
+                setIsPickingDocument(false);
+                toast.error('No files were selected');
+                return;
+            }
+
+            // Convert expo document picker results to File-like objects
+            // According to Expo 54 docs, expo-document-picker returns assets with:
+            // - uri: file URI (file://, content://, or blob URL)
+            // - name: file name
+            // - size: file size in bytes
+            // - mimeType: MIME type of the file
+            // - file: (optional) native File object (usually only on web)
+            const files: File[] = [];
+            const errors: string[] = [];
 
-                    // Convert expo document picker results to File-like objects
-                    const files: File[] = [];
-                    for (const doc of result.assets) {
-                        if (doc.file) {
-                            // expo-document-picker provides a File-like object
-                            files.push(doc.file as File);
-                        } else if (doc.uri) {
-                            // Fallback: fetch and create Blob
-                            const response = await fetch(doc.uri);
-                            const blob = await response.blob();
-                            const file = new File([blob], doc.name || 'file', { type: doc.mimeType || 'application/octet-stream' });
-                            files.push(file);
+            // Process files in parallel for better performance
+            // This allows multiple files to be converted simultaneously
+            const conversionPromises = result.assets.map((doc, index) =>
+                convertDocumentPickerAssetToFile(doc, index)
+                    .then((file) => {
+                        if (file) {
+                            // Validate file has required properties before adding
+                            if (!file.name || file.size === undefined) {
+                                errors.push(`File "${doc.name || 'file'}" is invalid: missing required properties`);
+                                return null;
+                            }
+                            return file;
                         }
-                    }
+                        return null;
+                    })
+                    .catch((error: any) => {
+                        errors.push(`File "${doc.name || 'file'}": ${error.message || 'Failed to process'}`);
+                        return null;
+                    })
+            );
 
-                    if (files.length > 0) {
-                        await handleFileSelection(files);
-                    }
-                } catch (error: any) {
-                    if (error.message?.includes('expo-document-picker')) {
-                        toast.error('File picker not available. Please install expo-document-picker');
-                    } else {
-                        toast.error(error.message || 'Failed to select files');
-                    }
+            const convertedFiles = await Promise.all(conversionPromises);
+
+            // Filter out null values
+            for (const file of convertedFiles) {
+                if (file) {
+                    files.push(file);
                 }
             }
+
+            // Show errors if any
+            if (errors.length > 0) {
+                const errorMessage = errors.slice(0, 3).join('\n') + (errors.length > 3 ? `\n...and ${errors.length - 3} more` : '');
+                toast.error(`Failed to load some files:\n${errorMessage}`);
+            }
+
+            // Process successfully converted files
+            if (files.length > 0) {
+                await handleFileSelection(files);
+            } else {
+                // Files were selected but none could be converted
+                toast.error('No files could be processed. Please try selecting files again.');
+            }
         } catch (error: any) {
-            toast.error(error.message || 'Failed to open file picker');
+            console.error('File upload error:', error);
+            if (error.message?.includes('expo-document-picker') || error.message?.includes('Different document picking in progress')) {
+                if (error.message?.includes('Different document picking in progress')) {
+                    toast.error('Please wait for the current file selection to complete');
+                } else {
+                    toast.error('File picker not available. Please install expo-document-picker');
+                }
+            } else {
+                toast.error(error.message || 'Failed to select files');
+            }
+        } finally {
+            // Always reset the picking state, even if there was an error
+            setIsPickingDocument(false);
         }
     };
 
     const handleFileDelete = async (fileId: string, filename: string) => {
-        // Use web-compatible confirmation dialog
-        const confirmed = window.confirm(`Are you sure you want to delete "${filename}"? This action cannot be undone.`);
+        // Use platform-aware confirmation dialog
+        const confirmed = await confirmAction(
+            `Are you sure you want to delete "${filename}"? This action cannot be undone.`,
+            'Delete File',
+            'Delete',
+            'Cancel'
+        );
 
         if (!confirmed) {
             return;
@@ -792,17 +903,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const handleBulkDelete = useCallback(async () => {
         if (selectedIds.size === 0) return;
-        
+
         const fileMap: Record<string, FileMetadata> = {};
         files.forEach(f => { fileMap[f.id] = f; });
         const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
-        
-        const confirmed = window.confirm(
-            `Are you sure you want to delete ${selectedFiles.length} file(s)? This action cannot be undone.`
+
+        const confirmed = await confirmAction(
+            `Are you sure you want to delete ${selectedFiles.length} file(s)? This action cannot be undone.`,
+            'Delete Files',
+            'Delete',
+            'Cancel'
         );
-        
+
         if (!confirmed) return;
-        
+
         try {
             const deletePromises = Array.from(selectedIds).map(async (fileId) => {
                 try {
@@ -813,18 +927,18 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     return { success: false, fileId, error };
                 }
             });
-            
+
             const results = await Promise.allSettled(deletePromises);
             const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
             const failed = results.length - successful;
-            
+
             if (successful > 0) {
                 toast.success(`${successful} file(s) deleted successfully`);
             }
             if (failed > 0) {
                 toast.error(`${failed} file(s) failed to delete`);
             }
-            
+
             setSelectedIds(new Set());
             setTimeout(() => loadFiles('silent'), 800);
         } catch (error: any) {
@@ -834,7 +948,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const handleBulkVisibilityChange = useCallback(async (visibility: 'private' | 'public' | 'unlisted') => {
         if (selectedIds.size === 0) return;
-        
+
         try {
             const updatePromises = Array.from(selectedIds).map(async (fileId) => {
                 try {
@@ -844,11 +958,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     return { success: false, fileId, error };
                 }
             });
-            
+
             const results = await Promise.allSettled(updatePromises);
             const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
             const failed = results.length - successful;
-            
+
             if (successful > 0) {
                 toast.success(`${successful} file(s) visibility updated to ${visibility}`);
                 // Update file metadata in store
@@ -861,87 +975,24 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             if (failed > 0) {
                 toast.error(`${failed} file(s) failed to update visibility`);
             }
-            
+
             setTimeout(() => loadFiles('silent'), 800);
         } catch (error: any) {
             toast.error(error.message || 'Failed to update visibility');
         }
     }, [selectedIds, oxyServices, files, loadFiles]);
 
-    // Global drag listeners (web) - attach to document for reliable drag and drop
-    useEffect(() => {
-        if (Platform.OS !== 'web' || user?.id !== targetUserId) return;
-        
-        let dragCounter = 0; // Track drag enter/leave to handle nested elements
-        
-        const onDragEnter = (e: DragEvent) => {
-            dragCounter++;
-            if (e?.dataTransfer?.types?.includes('Files')) {
-                e.preventDefault();
-                e.stopPropagation();
-                setIsDragging(true);
-            }
-        };
-        
-        const onDragOver = (e: DragEvent) => {
-            if (e?.dataTransfer?.types?.includes('Files')) {
-                e.preventDefault();
-                e.stopPropagation();
-                // Keep dragging state true while over document
-                setIsDragging(true);
-            }
-        };
-        
-        const onDrop = async (e: DragEvent) => {
-            dragCounter = 0;
-            setIsDragging(false);
-            
-            if (e?.dataTransfer?.files?.length) {
-                e.preventDefault();
-                e.stopPropagation();
-                
-                try {
-                    const files = Array.from(e.dataTransfer.files) as File[];
-                    if (files.length > 0) {
-                        await handleFileSelection(files);
-                    }
-                } catch (error: any) {
-                    toast.error(error.message || 'Failed to upload files');
-                }
-            }
-        };
-        
-        const onDragLeave = (e: DragEvent) => {
-            dragCounter--;
-            // Only hide drag overlay if we're actually leaving the document (drag counter reaches 0)
-            if (dragCounter === 0) {
-                setIsDragging(false);
-            }
-        };
-        
-        // Attach to document for global drag detection
-        document.addEventListener('dragenter', onDragEnter, false);
-        document.addEventListener('dragover', onDragOver, false);
-        document.addEventListener('drop', onDrop, false);
-        document.addEventListener('dragleave', onDragLeave, false);
-        
-        return () => {
-            document.removeEventListener('dragenter', onDragEnter, false);
-            document.removeEventListener('dragover', onDragOver, false);
-            document.removeEventListener('drop', onDrop, false);
-            document.removeEventListener('dragleave', onDragLeave, false);
-        };
-    }, [user?.id, targetUserId, handleFileSelection]);
-
-
+    // Unified download function - works on all platforms
     const handleFileDownload = async (fileId: string, filename: string) => {
         try {
-            if (Platform.OS === 'web') {
-                // Use the public download URL method
-                const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
+            // Try to use the download URL with a simple approach
+            // On web, this creates a download link. On mobile, it opens the URL.
+            const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
 
+            // For web platforms, use link download
+            if (typeof window !== 'undefined' && window.document) {
                 try {
-                    // Method 1: Try simple link download first
+                    // Try simple link download first
                     const link = document.createElement('a');
                     link.href = downloadUrl;
                     link.download = filename;
@@ -949,13 +1000,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     document.body.appendChild(link);
                     link.click();
                     document.body.removeChild(link);
-
                     toast.success('File download started');
                 } catch (linkError) {
-
-                    // Method 2: Fallback to authenticated download
+                    // Fallback to authenticated download
                     const blob = await oxyServices.getFileContentAsBlob(fileId);
-                    const url = window.URL.createObjectURL(blob);
+                    const url = URL.createObjectURL(blob);
 
                     const link = document.createElement('a');
                     link.href = url;
@@ -965,36 +1014,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     document.body.removeChild(link);
 
                     // Clean up the blob URL
-                    window.URL.revokeObjectURL(url);
-
+                    URL.revokeObjectURL(url);
                     toast.success('File downloaded successfully');
                 }
             } else {
-                toast.info('File download not implemented for mobile yet');
+                // For mobile, open the URL (user can save from browser)
+                // Note: This is a simplified approach - for full mobile support,
+                // consider using expo-file-system or react-native-fs
+                toast.info('Please use your browser to download the file');
             }
         } catch (error: any) {
             toast.error(error.message || 'Failed to download file');
         }
     };
 
-    const formatFileSize = (bytes: number): string => {
-        if (bytes === 0) return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    };
-
-    const getFileIcon = (contentType: string): string => {
-        if (contentType.startsWith('image/')) return 'image';
-        if (contentType.startsWith('video/')) return 'videocam';
-        if (contentType.startsWith('audio/')) return 'musical-notes';
-        if (contentType.includes('pdf')) return 'document-text';
-        if (contentType.includes('word') || contentType.includes('doc')) return 'document';
-        if (contentType.includes('excel') || contentType.includes('sheet')) return 'grid';
-        if (contentType.includes('zip') || contentType.includes('archive')) return 'archive';
-        return 'document-outline';
-    };
 
     const handleFileOpen = async (file: FileMetadata) => {
         if (selectMode) {
@@ -1061,24 +1094,24 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     };
 
     const renderSimplePhotoItem = useCallback((photo: FileMetadata, index: number) => {
-        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
+        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
-        if (containerWidth > 768) itemsPerRow = 4; // Desktop/tablet
-        else if (containerWidth > 480) itemsPerRow = 3; // Large mobile
+        if (safeContainerWidth > 768) itemsPerRow = 4; // Desktop/tablet
+        else if (safeContainerWidth > 480) itemsPerRow = 3; // Large mobile
 
         // Account for the photoScrollContainer padding (16px on each side = 32px total)
         const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
         const gaps = (itemsPerRow - 1) * 4; // Gap between items (4px)
-        const availableWidth = containerWidth - scrollContainerPadding;
+        const availableWidth = safeContainerWidth - scrollContainerPadding;
         const itemWidth = (availableWidth - gaps) / itemsPerRow;
 
         return (
             <TouchableOpacity
                 key={photo.id}
                 style={[
-                    styles.simplePhotoItem,
+                    fileManagementStyles.simplePhotoItem,
                     {
                         width: itemWidth,
                         height: itemWidth,
@@ -1089,10 +1122,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 onPress={() => handleFileOpen(photo)}
                 activeOpacity={0.8}
             >
-                <View style={styles.simplePhotoContainer}>
+                <View style={fileManagementStyles.simplePhotoContainer}>
                     <ExpoImage
                         source={{ uri: downloadUrl }}
-                        style={styles.simplePhotoImage}
+                        style={fileManagementStyles.simplePhotoImage}
                         contentFit="cover"
                         transition={120}
                         cachePolicy="memory-disk"
@@ -1102,23 +1135,23 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         accessibilityLabel={photo.filename}
                     />
                     {selectMode && (
-                        <View style={styles.selectionBadge}>
+                        <View style={fileManagementStyles.selectionBadge}>
                             <Ionicons name={selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline'} size={20} color={selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor} />
                         </View>
                     )}
                 </View>
             </TouchableOpacity>
         );
-    }, [oxyServices, containerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
+    }, [oxyServices, safeContainerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
 
     const renderJustifiedPhotoItem = useCallback((photo: FileMetadata, width: number, height: number, isLast: boolean) => {
-        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
+        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
 
         return (
             <TouchableOpacity
                 key={photo.id}
                 style={[
-                    styles.justifiedPhotoItem,
+                    fileManagementStyles.justifiedPhotoItem,
                     {
                         width,
                         height,
@@ -1129,10 +1162,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 onPress={() => handleFileOpen(photo)}
                 activeOpacity={0.8}
             >
-                <View style={styles.justifiedPhotoContainer}>
+                <View style={fileManagementStyles.justifiedPhotoContainer}>
                     <ExpoImage
                         source={{ uri: downloadUrl }}
-                        style={styles.justifiedPhotoImage}
+                        style={fileManagementStyles.justifiedPhotoImage}
                         contentFit="cover"
                         transition={120}
                         cachePolicy="memory-disk"
@@ -1142,7 +1175,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         accessibilityLabel={photo.filename}
                     />
                     {selectMode && (
-                        <View style={styles.selectionBadge}>
+                        <View style={fileManagementStyles.selectionBadge}>
                             <Ionicons name={selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline'} size={20} color={selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor} />
                         </View>
                     )}
@@ -1173,26 +1206,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return (
             <View
                 key={file.id}
-                style={[styles.fileItem, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }, selectMode && selectedIds.has(file.id) && { borderColor: themeStyles.primaryColor, borderWidth: 2 }]}
+                style={[fileManagementStyles.fileItem, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }, selectMode && selectedIds.has(file.id) && { borderColor: themeStyles.primaryColor, borderWidth: 2 }]}
             >
                 <TouchableOpacity
-                    style={styles.fileContent}
+                    style={fileManagementStyles.fileContent}
                     onPress={() => handleFileOpen(file)}
                 >
                     {/* Preview Thumbnail */}
-                    <View style={styles.filePreviewContainer}>
+                    <View style={fileManagementStyles.filePreviewContainer}>
                         {hasPreview ? (
-                            <View
-                                style={styles.filePreview}
-                                {...(Platform.OS === 'web' && {
-                                    onMouseEnter: () => setHoveredPreview(file.id),
-                                    onMouseLeave: () => setHoveredPreview(null),
-                                })}
-                            >
+                            <View style={fileManagementStyles.filePreview}>
                                 {isImage && (
                                     <ExpoImage
-                                        source={{ uri: getSafeDownloadUrl(file, 'thumb') }}
-                                        style={styles.previewImage}
+                                        source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                        style={fileManagementStyles.previewImage}
                                         contentFit="cover"
                                         transition={120}
                                         cachePolicy="memory-disk"
@@ -1203,16 +1230,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     />
                                 )}
                                 {isPDF && (
-                                    <View style={styles.pdfPreview}>
+                                    <View style={fileManagementStyles.pdfPreview}>
                                         <Ionicons name="document" size={32} color={themeStyles.primaryColor} />
-                                        <Text style={[styles.pdfLabel, { color: themeStyles.primaryColor }]}>PDF</Text>
+                                        <Text style={[fileManagementStyles.pdfLabel, { color: themeStyles.primaryColor }]}>PDF</Text>
                                     </View>
                                 )}
                                 {isVideo && (
-                                    <View style={styles.videoPreviewWrapper}>
+                                    <View style={fileManagementStyles.videoPreviewWrapper}>
                                         <ExpoImage
-                                            source={{ uri: getSafeDownloadUrl(file, 'thumb') }}
-                                            style={styles.videoPosterImage}
+                                            source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                            style={fileManagementStyles.videoPosterImage}
                                             contentFit="cover"
                                             transition={120}
                                             cachePolicy="memory-disk"
@@ -1221,15 +1248,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                             }}
                                             accessibilityLabel={file.filename + ' video thumbnail'}
                                         />
-                                        <View style={styles.videoOverlay}>
+                                        <View style={fileManagementStyles.videoOverlay}>
                                             <Ionicons name="play" size={24} color="#FFFFFF" />
                                         </View>
                                     </View>
                                 )}
                                 {/* Fallback icon (hidden by default for images) */}
                                 <View
-                                    style={[styles.fallbackIcon, { display: isImage ? 'none' : 'flex' }]}
-                                    {...(Platform.OS === 'web' && { 'data-fallback': 'true' })}
+                                    style={[fileManagementStyles.fallbackIcon, { display: isImage ? 'none' : 'flex' }]}
                                 >
                                     <Ionicons
                                         name={getFileIcon(file.contentType) as any}
@@ -1238,20 +1264,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     />
                                 </View>
 
-                                {/* Preview overlay for hover effect */}
-                                {!selectMode && Platform.OS === 'web' && hoveredPreview === file.id && isImage && (
-                                    <View style={styles.previewOverlay}>
-                                        <Ionicons name="eye" size={24} color="#FFFFFF" />
-                                    </View>
-                                )}
                                 {selectMode && (
-                                    <View style={styles.selectionBadge}>
+                                    <View style={fileManagementStyles.selectionBadge}>
                                         <Ionicons name={selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline'} size={22} color={selectedIds.has(file.id) ? themeStyles.primaryColor : themeStyles.textColor} />
                                     </View>
                                 )}
                             </View>
                         ) : (
-                            <View style={styles.fileIconContainer}>
+                            <View style={fileManagementStyles.fileIconContainer}>
                                 <Ionicons
                                     name={getFileIcon(file.contentType) as any}
                                     size={32}
@@ -1261,16 +1281,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         )}
                     </View>
 
-                    <View style={styles.fileInfo}>
-                        <Text style={[styles.fileName, { color: themeStyles.textColor }]} numberOfLines={1}>
+                    <View style={fileManagementStyles.fileInfo}>
+                        <Text style={[fileManagementStyles.fileName, { color: themeStyles.textColor }]} numberOfLines={1}>
                             {file.filename}
                         </Text>
-                        <Text style={[styles.fileDetails, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[fileManagementStyles.fileDetails, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                             {formatFileSize(file.length)} • {new Date(file.uploadDate).toLocaleDateString()}
                         </Text>
                         {file.metadata?.description && (
                             <Text
-                                style={[styles.fileDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888' }]}
+                                style={[fileManagementStyles.fileDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888' }]}
                                 numberOfLines={2}
                             >
                                 {file.metadata.description}
@@ -1280,11 +1300,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </TouchableOpacity>
 
                 {!selectMode && (
-                    <View style={styles.fileActions}>
+                    <View style={fileManagementStyles.fileActions}>
                         {/* Preview button for supported files */}
                         {hasPreview && (
                             <TouchableOpacity
-                                style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                                style={[fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
                                 onPress={() => handleFileOpen(file)}
                             >
                                 <Ionicons name="eye" size={20} color={themeStyles.primaryColor} />
@@ -1292,7 +1312,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         )}
 
                         <TouchableOpacity
-                            style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                            style={[fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
                             onPress={() => handleFileDownload(file.id, file.filename)}
                         >
                             <Ionicons name="download" size={20} color={themeStyles.primaryColor} />
@@ -1300,7 +1320,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                         {/* Always show delete button for debugging */}
                         <TouchableOpacity
-                            style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }]}
+                            style={[fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }]}
                             onPress={() => {
                                 handleFileDelete(file.id, file.filename);
                             }}
@@ -1322,86 +1342,133 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const groupedFileItems = useMemo(() => {
         // filteredFiles is already sorted, so just use it directly
         const sortedFiles = filteredFiles;
-        
+
         // Store file positions for scrolling
         sortedFiles.forEach((file, index) => {
             itemRefs.current.set(file.id, index);
         });
-        
+
         return sortedFiles.map((file) => {
-                const isImage = file.contentType.startsWith('image/');
-                const isVideo = file.contentType.startsWith('video/');
-                const hasPreview = isImage || isVideo;
-                const previewUrl = hasPreview ? (isVideo ? getSafeDownloadUrl(file, 'poster') : getSafeDownloadUrl(file, 'thumb')) : undefined;
-                const isSelected = selectedIds.has(file.id);
-                return {
-                    id: file.id,
-                    image: previewUrl,
-                    imageSize: 44,
-                    icon: !previewUrl ? getFileIcon(file.contentType) : undefined,
-                    iconColor: themeStyles.primaryColor,
-                    title: file.filename,
-                    subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
-                    theme: theme as 'light' | 'dark',
-                    onPress: () => {
-                        // Support selection in regular mode with long press or if already selecting
-                        if (!selectMode && selectedIds.size > 0) {
-                            // If already in selection mode (some files selected), toggle selection
-                            toggleSelect(file);
-                        } else {
-                            handleFileOpen(file);
-                        }
-                    },
-                    onLongPress: !selectMode ? () => {
-                        // Enable selection mode on long press
-                        if (selectedIds.size === 0) {
-                            setSelectedIds(new Set([file.id]));
-                        } else {
-                            toggleSelect(file);
-                        }
-                    } : undefined,
-                    showChevron: false,
-                    dense: true,
-                    multiRow: !!file.metadata?.description,
-                    selected: (selectMode || selectedIds.size > 0) && isSelected,
-                    // Hide action buttons when selecting (in selectMode or bulk operations mode)
-                    customContent: (!selectMode && selectedIds.size === 0) ? (
-                        <View style={styles.groupedActions}>
-                            {(isImage || isVideo || file.contentType.includes('pdf')) && (
-                                <TouchableOpacity
-                                    style={[styles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
-                                    onPress={() => handleFileOpen(file)}
-                                >
-                                    <Ionicons name="eye" size={18} color={themeStyles.primaryColor} />
-                                </TouchableOpacity>
-                            )}
-                            <TouchableOpacity
-                                style={[styles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
-                                onPress={() => handleFileDownload(file.id, file.filename)}
-                            >
-                                <Ionicons name="download" size={18} color={themeStyles.primaryColor} />
-                            </TouchableOpacity>
+            const isImage = file.contentType.startsWith('image/');
+            const isPDF = file.contentType.includes('pdf');
+            const isVideo = file.contentType.startsWith('video/');
+            const hasPreview = isImage || isPDF || isVideo;
+            const isSelected = selectedIds.has(file.id);
+
+            // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
+            let customIcon: React.ReactNode | undefined;
+            if (hasPreview) {
+                if (isImage) {
+                    customIcon = (
+                        <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
+                            <ExpoImage
+                                source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                style={{ width: 36, height: 36 }}
+                                contentFit="cover"
+                                transition={120}
+                                cachePolicy="memory-disk"
+                                onError={() => {
+                                    // Image preview failed to load - will fallback to icon
+                                }}
+                                accessibilityLabel={file.filename}
+                            />
+                        </View>
+                    );
+                } else if (isVideo) {
+                    customIcon = (
+                        <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }}>
+                            <ExpoImage
+                                source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                style={{ width: 36, height: 36 }}
+                                contentFit="cover"
+                                transition={120}
+                                cachePolicy="memory-disk"
+                                onError={(_: any) => {
+                                    // If thumbnail not available, we still show icon overlay
+                                }}
+                                accessibilityLabel={file.filename + ' video thumbnail'}
+                            />
+                            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.25)' }}>
+                                <Ionicons name="play" size={16} color="#FFFFFF" />
+                            </View>
+                        </View>
+                    );
+                } else if (isPDF) {
+                    customIcon = (
+                        <View style={{ width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF6B6B20' }}>
+                            <Ionicons name="document" size={20} color={themeStyles.primaryColor} />
+                        </View>
+                    );
+                }
+            }
+
+            return {
+                id: file.id,
+                customIcon: customIcon,
+                icon: !hasPreview ? getFileIcon(file.contentType) : undefined,
+                iconColor: themeStyles.primaryColor,
+                title: file.filename,
+                subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
+                theme: theme as 'light' | 'dark',
+                onPress: () => {
+                    // Support selection in regular mode with long press or if already selecting
+                    if (!selectMode && selectedIds.size > 0) {
+                        // If already in selection mode (some files selected), toggle selection
+                        toggleSelect(file);
+                    } else {
+                        handleFileOpen(file);
+                    }
+                },
+                onLongPress: !selectMode ? () => {
+                    // Enable selection mode on long press
+                    if (selectedIds.size === 0) {
+                        setSelectedIds(new Set([file.id]));
+                    } else {
+                        toggleSelect(file);
+                    }
+                } : undefined,
+                showChevron: false,
+                dense: true,
+                multiRow: !!file.metadata?.description,
+                selected: (selectMode || selectedIds.size > 0) && isSelected,
+                // Hide action buttons when selecting (in selectMode or bulk operations mode)
+                customContent: (!selectMode && selectedIds.size === 0) ? (
+                    <View style={fileManagementStyles.groupedActions}>
+                        {(isImage || isVideo || file.contentType.includes('pdf')) && (
                             <TouchableOpacity
-                                style={[styles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }]}
-                                onPress={() => handleFileDelete(file.id, file.filename)}
-                                disabled={deleting === file.id}
+                                style={[fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                                onPress={() => handleFileOpen(file)}
                             >
-                                {deleting === file.id ? (
-                                    <ActivityIndicator size="small" color={themeStyles.dangerColor} />
-                                ) : (
-                                    <Ionicons name="trash" size={18} color={themeStyles.dangerColor} />
-                                )}
+                                <Ionicons name="eye" size={18} color={themeStyles.primaryColor} />
                             </TouchableOpacity>
-                        </View>
-                    ) : undefined,
-                    customContentBelow: file.metadata?.description ? (
-                        <Text style={[styles.groupedDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666' }]} numberOfLines={2}>
-                            {file.metadata.description}
-                        </Text>
-                    ) : undefined,
-                } as any;
-            });
-    }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl, selectMode, selectedIds]);
+                        )}
+                        <TouchableOpacity
+                            style={[fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                            onPress={() => handleFileDownload(file.id, file.filename)}
+                        >
+                            <Ionicons name="download" size={18} color={themeStyles.primaryColor} />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={[fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }]}
+                            onPress={() => handleFileDelete(file.id, file.filename)}
+                            disabled={deleting === file.id}
+                        >
+                            {deleting === file.id ? (
+                                <ActivityIndicator size="small" color={themeStyles.dangerColor} />
+                            ) : (
+                                <Ionicons name="trash" size={18} color={themeStyles.dangerColor} />
+                            )}
+                        </TouchableOpacity>
+                    </View>
+                ) : undefined,
+                customContentBelow: file.metadata?.description ? (
+                    <Text style={[fileManagementStyles.groupedDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666' }]} numberOfLines={2}>
+                        {file.metadata.description}
+                    </Text>
+                ) : undefined,
+            } as any;
+        });
+    }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
 
     // Scroll to selected file after selection
     useEffect(() => {
@@ -1409,7 +1476,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             if (viewMode === 'all' && scrollViewRef.current) {
                 // Find the index of the selected file
                 const itemIndex = itemRefs.current.get(lastSelectedFileId);
-                
+
                 if (itemIndex !== undefined && itemIndex >= 0) {
                     // Estimate item height (GroupedItem with dense mode is approximately 60-70px)
                     // Account for description rows which add extra height
@@ -1417,7 +1484,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     const descriptionHeight = 30; // Approximate height for description
                     // Use filteredFiles which is already sorted according to user's selection
                     const sortedFiles = filteredFiles;
-                    
+
                     // Calculate total height up to this item
                     let scrollPosition = 0;
                     for (let i = 0; i <= itemIndex && i < sortedFiles.length; i++) {
@@ -1427,11 +1494,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             scrollPosition += descriptionHeight;
                         }
                     }
-                    
+
                     // Add header, controls, search, and stats height (approximately 250px)
                     const headerHeight = 250;
                     const finalScrollPosition = headerHeight + scrollPosition - 150; // Offset to show item near top
-                    
+
                     // Use requestAnimationFrame to ensure DOM is updated before scrolling
                     requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
@@ -1446,24 +1513,24 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 // For photo grid, find the photo index
                 const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
                 const photoIndex = photos.findIndex(p => p.id === lastSelectedFileId);
-                
+
                 if (photoIndex >= 0) {
                     // Estimate photo item height based on grid layout
                     // Calculate items per row
                     let itemsPerRow = 3;
-                    if (containerWidth > 768) itemsPerRow = 6;
-                    else if (containerWidth > 480) itemsPerRow = 4;
-                    
+                    if (safeContainerWidth > 768) itemsPerRow = 6;
+                    else if (safeContainerWidth > 480) itemsPerRow = 4;
+
                     const scrollContainerPadding = 32;
                     const gaps = (itemsPerRow - 1) * 4;
-                    const availableWidth = containerWidth - scrollContainerPadding;
+                    const availableWidth = safeContainerWidth - scrollContainerPadding;
                     const itemWidth = (availableWidth - gaps) / itemsPerRow;
-                    
+
                     // Calculate row and approximate scroll position
                     const row = Math.floor(photoIndex / itemsPerRow);
                     const headerHeight = 250;
                     const finalScrollPosition = headerHeight + (row * (itemWidth + 4)) - 150;
-                    
+
                     // Use requestAnimationFrame to ensure DOM is updated before scrolling
                     requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
@@ -1476,7 +1543,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 }
             }
         }
-    }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, containerWidth]);
+    }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, safeContainerWidth]);
 
     // Clear selected file ID after scroll animation completes
     useEffect(() => {
@@ -1484,30 +1551,30 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             const timeoutId = setTimeout(() => {
                 setLastSelectedFileId(null);
             }, 600); // Allow time for scroll animation to complete
-            
+
             return () => clearTimeout(timeoutId);
         }
     }, [lastSelectedFileId]);
 
     const renderPhotoItem = (photo: FileMetadata, index: number) => {
-        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
+        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
-        if (containerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
-        else if (containerWidth > 480) itemsPerRow = 4; // Large mobile
+        if (safeContainerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
+        else if (safeContainerWidth > 480) itemsPerRow = 4; // Large mobile
 
         // Account for the photoScrollContainer padding (16px on each side = 32px total)
         const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
         const gaps = (itemsPerRow - 1) * 4; // Gap between items
-        const availableWidth = containerWidth - scrollContainerPadding;
+        const availableWidth = safeContainerWidth - scrollContainerPadding;
         const itemWidth = (availableWidth - gaps) / itemsPerRow;
 
         return (
             <TouchableOpacity
                 key={photo.id}
                 style={[
-                    styles.photoItem,
+                    fileManagementStyles.photoItem,
                     {
                         width: itemWidth,
                         height: itemWidth,
@@ -1516,10 +1583,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 onPress={() => handleFileOpen(photo)}
                 activeOpacity={0.8}
             >
-                <View style={styles.photoContainer}>
+                <View style={fileManagementStyles.photoContainer}>
                     <ExpoImage
                         source={{ uri: downloadUrl }}
-                        style={styles.photoImage}
+                        style={fileManagementStyles.photoImage}
                         contentFit="cover"
                         transition={120}
                         cachePolicy="memory-disk"
@@ -1538,26 +1605,28 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
         if (photos.length === 0) {
             return (
-                <View style={styles.emptyState}>
+                <View style={fileManagementStyles.emptyState}>
                     <Ionicons name="images-outline" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
-                    <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Photos Yet</Text>
-                    <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}> {
+                    <Text style={[fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }]}>No Photos Yet</Text>
+                    <Text style={[fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}> {
                         user?.id === targetUserId
-                            ? `Upload photos to get started. You can select multiple photos at once${Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}`
+                            ? `Upload photos to get started. You can select multiple photos at once.`
                             : "This user hasn't uploaded any photos yet"
                     } </Text>
                     {user?.id === targetUserId && (
                         <TouchableOpacity
-                            style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
+                            style={[fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
                             onPress={handleFileUpload}
-                            disabled={uploading}
+                            disabled={uploading || isPickingDocument}
                         >
                             {uploading ? (
                                 <ActivityIndicator size="small" color="#FFFFFF" />
+                            ) : isPickingDocument ? (
+                                <ActivityIndicator size="small" color="#FFFFFF" />
                             ) : (
                                 <>
                                     <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                                    <Text style={styles.emptyStateButtonText}>Upload Photos</Text>
+                                    <Text style={fileManagementStyles.emptyStateButtonText}>Upload Photos</Text>
                                 </>
                             )}
                         </TouchableOpacity>
@@ -1569,8 +1638,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return (
             <ScrollView
                 ref={photoScrollViewRef}
-                style={styles.scrollView}
-                contentContainerStyle={styles.photoScrollContainer}
+                style={fileManagementStyles.scrollView}
+                contentContainerStyle={fileManagementStyles.photoScrollContainer}
                 refreshControl={
                     <RefreshControl
                         refreshing={refreshing}
@@ -1589,9 +1658,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 scrollEventThrottle={250}
             >
                 {loadingDimensions && (
-                    <View style={styles.dimensionsLoadingIndicator}>
+                    <View style={fileManagementStyles.dimensionsLoadingIndicator}>
                         <ActivityIndicator size="small" color={themeStyles.primaryColor} />
-                        <Text style={[styles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>Loading photo layout...</Text>
+                        <Text style={[fileManagementStyles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>Loading photo layout...</Text>
                     </View>
                 )}
 
@@ -1603,7 +1672,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     renderJustifiedPhotoItem={renderJustifiedPhotoItem}
                     renderSimplePhotoItem={renderPhotoItem}
                     textColor={themeStyles.textColor}
-                    containerWidth={containerWidth}
+                    containerWidth={safeContainerWidth}
                 />
             </ScrollView>
         );
@@ -1622,417 +1691,37 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         createJustifiedRows,
         renderJustifiedPhotoItem,
         renderPhotoItem,
-        containerWidth
+        safeContainerWidth
     ]);
 
     // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
 
-    const renderFileDetailsModal = () => {
-        const backgroundColor = themeStyles.backgroundColor;
-        const borderColor = themeStyles.borderColor;
-
-        return (
-            <Modal
-                visible={showFileDetails}
-                animationType="slide"
-                presentationStyle="pageSheet"
-                onRequestClose={() => setShowFileDetails(false)}
-            >
-                <View style={[styles.modalContainer, { backgroundColor }]}>
-                    <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
-                        <TouchableOpacity
-                            style={styles.modalCloseButton}
-                            onPress={() => setShowFileDetails(false)}
-                        >
-                            <Ionicons name="close" size={24} color={themeStyles.textColor} />
-                        </TouchableOpacity>
-                        <Text style={[styles.modalTitle, { color: themeStyles.textColor }]}>File Details</Text>
-                        <View style={styles.modalPlaceholder} />
-                    </View>
-
-                    {selectedFile && (
-                        <ScrollView style={styles.modalContent}>
-                            <View style={[styles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
-                                <View style={styles.fileDetailIcon}>
-                                    <Ionicons
-                                        name={getFileIcon(selectedFile.contentType) as any}
-                                        size={64}
-                                        color={themeStyles.primaryColor}
-                                    />
-                                </View>
-
-                                <Text style={[styles.fileDetailName, { color: themeStyles.textColor }]}>
-                                    {selectedFile.filename}
-                                </Text>
-
-                                <View style={styles.fileDetailInfo}>
-                                    <View style={styles.detailRow}>
-                                        <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                            Size:
-                                        </Text>
-                                        <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                            {formatFileSize(selectedFile.length)}
-                                        </Text>
-                                    </View>
-
-                                    <View style={styles.detailRow}>
-                                        <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                            Type:
-                                        </Text>
-                                        <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                            {selectedFile.contentType}
-                                        </Text>
-                                    </View>
-
-                                    <View style={styles.detailRow}>
-                                        <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                            Uploaded:
-                                        </Text>
-                                        <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                            {new Date(selectedFile.uploadDate).toLocaleString()}
-                                        </Text>
-                                    </View>
-
-                                    {selectedFile.metadata?.description && (
-                                        <View style={styles.detailRow}>
-                                            <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                                Description:
-                                            </Text>
-                                            <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                                {selectedFile.metadata.description}
-                                            </Text>
-                                        </View>
-                                    )}
-                                </View>
-
-                                <View style={styles.modalActions}>
-                                    <TouchableOpacity
-                                        style={[styles.modalActionButton, { backgroundColor: themeStyles.primaryColor }]}
-                                        onPress={() => {
-                                            handleFileDownload(selectedFile.id, selectedFile.filename);
-                                            setShowFileDetails(false);
-                                        }}
-                                    >
-                                        <Ionicons name="download" size={20} color="#FFFFFF" />
-                                        <Text style={styles.modalActionText}>Download</Text>
-                                    </TouchableOpacity>
-
-                                    {(user?.id === targetUserId) && (
-                                        <TouchableOpacity
-                                            style={[styles.modalActionButton, { backgroundColor: themeStyles.dangerColor }]}
-                                            onPress={() => {
-                                                setShowFileDetails(false);
-                                                handleFileDelete(selectedFile.id, selectedFile.filename);
-                                            }}
-                                        >
-                                            <Ionicons name="trash" size={20} color="#FFFFFF" />
-                                            <Text style={styles.modalActionText}>Delete</Text>
-                                        </TouchableOpacity>
-                                    )}
-                                </View>
-                            </View>
-                        </ScrollView>
-                    )}
-                </View>
-            </Modal>
-        );
-    };
-
-    const renderFileViewer = () => {
-        if (!openedFile) return null;
-
-        const backgroundColor = themeStyles.backgroundColor;
-        const borderColor = themeStyles.borderColor;
-
-        const isImage = openedFile.contentType.startsWith('image/');
-        const isText = openedFile.contentType.startsWith('text/') ||
-            openedFile.contentType.includes('json') ||
-            openedFile.contentType.includes('xml') ||
-            openedFile.contentType.includes('javascript') ||
-            openedFile.contentType.includes('typescript');
-        const isPDF = openedFile.contentType.includes('pdf');
-        const isVideo = openedFile.contentType.startsWith('video/');
-        const isAudio = openedFile.contentType.startsWith('audio/');
-
-        return (
-            <View style={[styles.fileViewerContainer, { backgroundColor }]}>
-                {/* File Viewer Header */}
-                <View style={[styles.fileViewerHeader, { borderBottomColor: borderColor }]}>
-                    <TouchableOpacity
-                        style={styles.backButton}
-                        onPress={handleCloseFile}
-                    >
-                        <Ionicons name="arrow-back" size={24} color={themeStyles.textColor} />
-                    </TouchableOpacity>
-                    <View style={styles.fileViewerTitleContainer}>
-                        <Text style={[styles.fileViewerTitle, { color: themeStyles.textColor }]} numberOfLines={1}>
-                            {openedFile.filename}
-                        </Text>
-                        <Text style={[styles.fileViewerSubtitle, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            {formatFileSize(openedFile.length)} • {openedFile.contentType}
-                        </Text>
-                    </View>
-                    <View style={styles.fileViewerActions}>
-                        <TouchableOpacity
-                            style={[styles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
-                            onPress={() => handleFileDownload(openedFile.id, openedFile.filename)}
-                        >
-                            <Ionicons name="download" size={20} color={themeStyles.primaryColor} />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={[
-                                styles.actionButton,
-                                {
-                                    backgroundColor: showFileDetailsInViewer
-                                        ? themeStyles.primaryColor
-                                        : (themeStyles.isDarkTheme ? '#333333' : '#F0F0F0')
-                                }
-                            ]}
-                            onPress={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
-                        >
-                            <Ionicons
-                                name={showFileDetailsInViewer ? "chevron-up" : "information-circle"}
-                                size={20}
-                                color={showFileDetailsInViewer ? "#FFFFFF" : themeStyles.primaryColor}
-                            />
-                        </TouchableOpacity>
-                    </View>
-                </View>
-
-                {/* File Details Section */}
-                {showFileDetailsInViewer && (
-                    <View style={[styles.fileDetailsSection, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
-                        <View style={styles.fileDetailsSectionHeader}>
-                            <Text style={[styles.fileDetailsSectionTitle, { color: themeStyles.textColor }]}>
-                                File Details
-                            </Text>
-                            <TouchableOpacity
-                                style={styles.fileDetailsSectionToggle}
-                                onPress={() => setShowFileDetailsInViewer(false)}
-                            >
-                                <Ionicons name="chevron-up" size={20} color={themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'} />
-                            </TouchableOpacity>
-                        </View>
-
-                        <View style={styles.fileDetailInfo}>
-                            <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    File Name:
-                                </Text>
-                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                    {openedFile.filename}
-                                </Text>
-                            </View>
-
-                            <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    Size:
-                                </Text>
-                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                    {formatFileSize(openedFile.length)}
-                                </Text>
-                            </View>
-
-                            <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    Type:
-                                </Text>
-                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                    {openedFile.contentType}
-                                </Text>
-                            </View>
-
-                            <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    Uploaded:
-                                </Text>
-                                <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                    {new Date(openedFile.uploadDate).toLocaleString()}
-                                </Text>
-                            </View>
-
-                            {openedFile.metadata?.description && (
-                                <View style={styles.detailRow}>
-                                    <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                        Description:
-                                    </Text>
-                                    <Text style={[styles.detailValue, { color: themeStyles.textColor }]}>
-                                        {openedFile.metadata.description}
-                                    </Text>
-                                </View>
-                            )}
-
-                            <View style={styles.detailRow}>
-                                <Text style={[styles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    File ID:
-                                </Text>
-                                <Text style={[styles.detailValue, { color: themeStyles.textColor, fontSize: 12, fontFamily: Platform.OS === 'web' ? 'monospace' : 'Courier' }]}>
-                                    {openedFile.id}
-                                </Text>
-                            </View>
-                        </View>
-
-                        <View style={styles.fileDetailsActions}>
-                            <TouchableOpacity
-                                style={[styles.fileDetailsActionButton, { backgroundColor: themeStyles.primaryColor }]}
-                                onPress={() => handleFileDownload(openedFile.id, openedFile.filename)}
-                            >
-                                <Ionicons name="download" size={16} color="#FFFFFF" />
-                                <Text style={styles.fileDetailsActionText}>Download</Text>
-                            </TouchableOpacity>
-
-                            {(user?.id === targetUserId) && (
-                                <TouchableOpacity
-                                    style={[styles.fileDetailsActionButton, { backgroundColor: themeStyles.dangerColor }]}
-                                    onPress={() => {
-                                        handleCloseFile();
-                                        handleFileDelete(openedFile.id, openedFile.filename);
-                                    }}
-                                >
-                                    <Ionicons name="trash" size={16} color="#FFFFFF" />
-                                    <Text style={styles.fileDetailsActionText}>Delete</Text>
-                                </TouchableOpacity>
-                            )}
-                        </View>
-                    </View>
-                )}
 
-                {/* File Content */}
-                <ScrollView
-                    style={[
-                        styles.fileViewerContent,
-                        showFileDetailsInViewer && styles.fileViewerContentWithDetails
-                    ]}
-                    contentContainerStyle={styles.fileViewerContentContainer}
-                >
-                    {loadingFileContent ? (
-                        <View style={styles.fileViewerLoading}>
-                            <ActivityIndicator size="large" color={themeStyles.primaryColor} />
-                            <Text style={[styles.fileViewerLoadingText, { color: themeStyles.textColor }]}>
-                                Loading file content...
-                            </Text>
-                        </View>
-                    ) : isImage && fileContent ? (
-                        <View style={styles.imageContainer}>
-                            <ExpoImage
-                                source={{ uri: fileContent }}
-                                style={{ width: '100%', height: 400, borderRadius: 8 }}
-                                contentFit="contain"
-                                transition={120}
-                                cachePolicy="memory-disk"
-                                onError={() => {
-                                    // Image failed to load
-                                }}
-                                accessibilityLabel={openedFile.filename}
-                            />
-                        </View>
-                    ) : isText && fileContent ? (
-                        <View style={[styles.textContainer, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
-                            <ScrollView style={{ flex: 1 }} nestedScrollEnabled>
-                                <Text style={[styles.textContent, { color: themeStyles.textColor }]}>
-                                    {fileContent}
-                                </Text>
-                            </ScrollView>
-                        </View>
-                    ) : isPDF && fileContent && Platform.OS === 'web' ? (
-                        <View style={styles.pdfContainer}>
-                            <iframe
-                                src={fileContent}
-                                width="100%"
-                                height="600px"
-                                style={{ border: 'none', borderRadius: 8 }}
-                                title={openedFile.filename}
-                            />
-                        </View>
-                    ) : isVideo && fileContent ? (
-                        <View style={styles.mediaContainer}>
-                            {Platform.OS === 'web' ? (
-                                <video
-                                    controls
-                                    style={{
-                                        width: '100%',
-                                        maxHeight: '70vh',
-                                        borderRadius: 8,
-                                    }}
-                                >
-                                    <source src={fileContent} type={openedFile.contentType} />
-                                    Your browser does not support the video tag.
-                                </video>
-                            ) : (
-                                <Text style={[styles.unsupportedText, { color: themeStyles.textColor }]}>
-                                    Video playback not supported on mobile
-                                </Text>
-                            )}
-                        </View>
-                    ) : isAudio && fileContent ? (
-                        <View style={styles.mediaContainer}>
-                            {Platform.OS === 'web' ? (
-                                <audio
-                                    controls
-                                    style={{
-                                        width: '100%',
-                                        borderRadius: 8,
-                                    }}
-                                >
-                                    <source src={fileContent} type={openedFile.contentType} />
-                                    Your browser does not support the audio tag.
-                                </audio>
-                            ) : (
-                                <Text style={[styles.unsupportedText, { color: themeStyles.textColor }]}>
-                                    Audio playback not supported on mobile
-                                </Text>
-                            )}
-                        </View>
-                    ) : (
-                        <View style={styles.unsupportedFileContainer}>
-                            <Ionicons
-                                name={getFileIcon(openedFile.contentType) as any}
-                                size={64}
-                                color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'}
-                            />
-                            <Text style={[styles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
-                                Preview Not Available
-                            </Text>
-                            <Text style={[styles.unsupportedFileDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                This file type cannot be previewed in the browser.{'\n'}
-                                Download the file to view its contents.
-                            </Text>
-                            <TouchableOpacity
-                                style={[styles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
-                                onPress={() => handleFileDownload(openedFile.id, openedFile.filename)}
-                            >
-                                <Ionicons name="download" size={20} color="#FFFFFF" />
-                                <Text style={styles.downloadButtonText}>Download File</Text>
-                            </TouchableOpacity>
-                        </View>
-                    )}
-                </ScrollView>
-            </View>
-        );
-    };
 
     const renderEmptyState = () => (
-        <View style={styles.emptyState}>
+        <View style={fileManagementStyles.emptyState}>
             <Ionicons name="folder-open-outline" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
-            <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Files Yet</Text>
-            <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+            <Text style={[fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }]}>No Files Yet</Text>
+            <Text style={[fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                 {user?.id === targetUserId
-                    ? `Upload files to get started. You can select multiple files at once${Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}`
+                    ? `Upload files to get started. You can select multiple files at once.`
                     : "This user hasn't uploaded any files yet"
                 }
             </Text>
             {user?.id === targetUserId && (
                 <TouchableOpacity
-                    style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
+                    style={[fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
                     onPress={handleFileUpload}
-                    disabled={uploading}
+                    disabled={uploading || isPickingDocument}
                 >
                     {uploading ? (
                         <ActivityIndicator size="small" color="#FFFFFF" />
+                    ) : isPickingDocument ? (
+                        <ActivityIndicator size="small" color="#FFFFFF" />
                     ) : (
                         <>
                             <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                            <Text style={styles.emptyStateButtonText}>Upload Files</Text>
+                            <Text style={fileManagementStyles.emptyStateButtonText}>Upload Files</Text>
                         </>
                     )}
                 </TouchableOpacity>
@@ -2043,7 +1732,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     // Professional Skeleton Loading Component with Advanced Shimmer Effect
     const SkeletonLoader = React.memo(() => {
         const shimmerAnim = useRef(new Animated.Value(0)).current;
-        const skeletonContainerWidth = containerWidth || 400;
+        const skeletonContainerWidth = safeContainerWidth;
 
         useEffect(() => {
             const shimmer = Animated.loop(
@@ -2070,7 +1759,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay],
             });
 
-        return (
+            return (
                 <View
                     style={[
                         {
@@ -2110,8 +1799,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             style={{
                                 width: skeletonContainerWidth,
                                 height: '100%',
-                                backgroundColor: themeStyles.isDarkTheme 
-                                    ? 'rgba(255, 255, 255, 0.08)' 
+                                backgroundColor: themeStyles.isDarkTheme
+                                    ? 'rgba(255, 255, 255, 0.08)'
                                     : 'rgba(255, 255, 255, 0.8)',
                                 shadowColor: themeStyles.isDarkTheme ? '#000' : '#FFF',
                                 shadowOffset: { width: 0, height: 0 },
@@ -2120,8 +1809,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             }}
                         />
                     </Animated.View>
-            </View>
-        );
+                </View>
+            );
         };
 
         // Skeleton file item matching GroupedSection structure
@@ -2141,18 +1830,18 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             >
                 {/* Icon/Image skeleton */}
                 <SkeletonBox width={44} height={44} borderRadius={8} delay={index * 50} />
-                
+
                 {/* Content skeleton */}
                 <View style={{ flex: 1, marginLeft: 12, justifyContent: 'center' }}>
-                    <SkeletonBox 
-                        width={index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%'} 
-                        height={16} 
-                        style={{ marginBottom: 8 }} 
+                    <SkeletonBox
+                        width={index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%'}
+                        height={16}
+                        style={{ marginBottom: 8 }}
                         delay={index * 50 + 20}
                     />
-                    <SkeletonBox 
-                        width={index % 2 === 0 ? '50%' : '60%'} 
-                        height={12} 
+                    <SkeletonBox
+                        width={index % 2 === 0 ? '50%' : '60%'}
+                        height={12}
                         delay={index * 50 + 40}
                     />
                 </View>
@@ -2160,11 +1849,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         );
 
         return (
-            <View style={[styles.container, { backgroundColor }]}>
+            <View style={[fileManagementStyles.container, { backgroundColor }]}>
                 {/* Header Skeleton */}
-                <View style={[styles.header, { borderBottomColor: themeStyles.borderColor, borderBottomWidth: StyleSheet.hairlineWidth }]}>
+                <View style={[fileManagementStyles.header, { borderBottomColor: themeStyles.borderColor, borderBottomWidth: StyleSheet.hairlineWidth }]}>
                     <SkeletonBox width={44} height={44} borderRadius={12} />
-                    <View style={[styles.headerTitleContainer, { flex: 1 }]}>
+                    <View style={[fileManagementStyles.headerTitleContainer, { flex: 1 }]}>
                         <SkeletonBox width={140} height={20} style={{ marginBottom: 6 }} />
                         <SkeletonBox width={100} height={14} />
                     </View>
@@ -2172,28 +1861,24 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
 
                 {/* Controls Bar Skeleton */}
-                <View style={styles.controlsBar}>
+                <View style={fileManagementStyles.controlsBar}>
                     <SkeletonBox width={100} height={36} borderRadius={18} />
                     <SkeletonBox width={44} height={44} borderRadius={22} />
                 </View>
 
                 {/* Search Bar Skeleton */}
-                <View style={[styles.searchContainer, { 
-                    backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
-                    borderColor: themeStyles.borderColor,
-                    borderWidth: StyleSheet.hairlineWidth,
+                <View style={[fileManagementStyles.searchContainer, {
+                    backgroundColor: themeStyles.colors.card,
                 }]}>
                     <SkeletonBox width="100%" height={44} borderRadius={12} />
                 </View>
 
                 {/* Stats Container Skeleton */}
-                <View style={[styles.statsContainer, { 
-                    backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
-                    borderColor: themeStyles.borderColor,
-                    borderWidth: StyleSheet.hairlineWidth,
+                <View style={[fileManagementStyles.statsContainer, {
+                    backgroundColor: themeStyles.colors.card,
                 }]}>
                     {[1, 2, 3].map((i) => (
-                        <View key={i} style={styles.statItem}>
+                        <View key={i} style={fileManagementStyles.statItem}>
                             <SkeletonBox width={50} height={20} style={{ marginBottom: 4 }} delay={i * 30} />
                             <SkeletonBox width={40} height={14} delay={i * 30 + 15} />
                         </View>
@@ -2201,16 +1886,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
 
                 {/* File List Skeleton - Matching GroupedSection */}
-                <ScrollView 
-                    style={styles.scrollView} 
-                    contentContainerStyle={styles.scrollContainer}
+                <ScrollView
+                    style={fileManagementStyles.scrollView}
+                    contentContainerStyle={fileManagementStyles.scrollContainer}
                     showsVerticalScrollIndicator={false}
                 >
                     <View style={{
-                        backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
-                        borderRadius: 12,
+                        backgroundColor: themeStyles.colors.card,
+                        borderRadius: 18,
                         overflow: 'hidden',
-                        marginHorizontal: 16,
                         marginTop: 8,
                     }}>
                         {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
@@ -2230,20 +1914,59 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     if (!selectMode && openedFile) {
         return (
             <>
-                {renderFileViewer()}
-                {renderFileDetailsModal()}
+                <FileViewer
+                    file={openedFile}
+                    fileContent={fileContent}
+                    loadingFileContent={loadingFileContent}
+                    showFileDetailsInViewer={showFileDetailsInViewer}
+                    onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
+                    onClose={handleCloseFile}
+                    onDownload={handleFileDownload}
+                    onDelete={handleFileDelete}
+                    themeStyles={themeStyles}
+                    isOwner={user?.id === targetUserId}
+                />
+                <FileDetailsModal
+                    visible={showFileDetails}
+                    file={selectedFile}
+                    onClose={() => setShowFileDetails(false)}
+                    onDownload={handleFileDownload}
+                    onDelete={handleFileDelete}
+                    themeStyles={themeStyles}
+                    isOwner={user?.id === targetUserId}
+                />
             </>
         );
     }
 
+    // If upload preview is showing, render it inline instead of the file list
+    if (showUploadPreview) {
+        return (
+            <View style={fileManagementStyles.container}>
+                <Header
+                    title="Review Files"
+                    subtitle={`${pendingFiles.length} file${pendingFiles.length !== 1 ? 's' : ''} ready to upload`}
+                    onBack={handleCancelUpload}
+                    showBackButton
+                    variant="minimal"
+                    elevation="none"
+                    titleAlignment="left"
+                />
+                <UploadPreview
+                    visible={true}
+                    pendingFiles={pendingFiles}
+                    onConfirm={handleConfirmUpload}
+                    onCancel={handleCancelUpload}
+                    onRemoveFile={removePendingFile}
+                    themeStyles={themeStyles}
+                    inline={true}
+                />
+            </View>
+        );
+    }
+
     return (
-        <View
-            ref={containerRef}
-            style={[
-                styles.container,
-                isDragging && Platform.OS === 'web' && styles.dragOverlay
-            ]}
-        >
+        <View style={fileManagementStyles.container}>
             <Header
                 title={selectMode ? (multiSelect ? `${selectedIds.size}${maxSelection ? '/' + maxSelection : ''} Selected` : 'Select a File') : (viewMode === 'photos' ? 'Photos' : 'File Management')}
                 subtitle={selectMode ? (multiSelect ? `${filteredFiles.length} available` : 'Tap to select') : `${filteredFiles.length} ${filteredFiles.length === 1 ? 'item' : 'items'}`}
@@ -2292,98 +2015,70 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     }
                 ] : undefined}
                 onBack={onClose || goBack}
-                theme={theme}
+
                 showBackButton
                 variant="minimal"
                 elevation="none"
                 titleAlignment="left"
             />
 
-            <View style={styles.controlsBar}>
-                <ScrollView 
-                    horizontal 
+            <View style={fileManagementStyles.controlsBar}>
+                <ScrollView
+                    horizontal
                     showsHorizontalScrollIndicator={false}
-                    style={styles.viewModeScroll}
+                    style={fileManagementStyles.viewModeScroll}
                 >
                     <View style={[
-                        styles.viewModeToggle,
+                        fileManagementStyles.viewModeToggle,
                         {
-                            backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
-                            borderWidth: 1,
-                            borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA',
+                            backgroundColor: themeStyles.colors.card,
                         }
                     ]}>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'all' && { backgroundColor: themeStyles.primaryColor }
-                            ]}
+                        <AnimatedButton
+                            isSelected={viewMode === 'all'}
                             onPress={() => setViewMode('all')}
-                        >
-                            <Ionicons
-                                name="folder"
-                                size={18}
-                                color={viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'photos' && { backgroundColor: themeStyles.primaryColor }
-                            ]}
+                            icon={viewMode === 'all' ? 'folder' : 'folder-outline'}
+                            primaryColor={themeStyles.primaryColor}
+                            textColor={themeStyles.textColor}
+                            style={fileManagementStyles.viewModeButton}
+                        />
+                        <AnimatedButton
+                            isSelected={viewMode === 'photos'}
                             onPress={() => setViewMode('photos')}
-                        >
-                            <Ionicons
-                                name="images"
-                                size={18}
-                                color={viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'videos' && { backgroundColor: themeStyles.primaryColor }
-                            ]}
+                            icon={viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline'}
+                            primaryColor={themeStyles.primaryColor}
+                            textColor={themeStyles.textColor}
+                            style={fileManagementStyles.viewModeButton}
+                        />
+                        <AnimatedButton
+                            isSelected={viewMode === 'videos'}
                             onPress={() => setViewMode('videos')}
-                        >
-                            <Ionicons
-                                name="videocam"
-                                size={18}
-                                color={viewMode === 'videos' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'documents' && { backgroundColor: themeStyles.primaryColor }
-                            ]}
+                            icon={viewMode === 'videos' ? 'video' : 'video-outline'}
+                            primaryColor={themeStyles.primaryColor}
+                            textColor={themeStyles.textColor}
+                            style={fileManagementStyles.viewModeButton}
+                        />
+                        <AnimatedButton
+                            isSelected={viewMode === 'documents'}
                             onPress={() => setViewMode('documents')}
-                        >
-                            <Ionicons
-                                name="document-text"
-                                size={18}
-                                color={viewMode === 'documents' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'audio' && { backgroundColor: themeStyles.primaryColor }
-                            ]}
+                            icon={viewMode === 'documents' ? 'file-document' : 'file-document-outline'}
+                            primaryColor={themeStyles.primaryColor}
+                            textColor={themeStyles.textColor}
+                            style={fileManagementStyles.viewModeButton}
+                        />
+                        <AnimatedButton
+                            isSelected={viewMode === 'audio'}
                             onPress={() => setViewMode('audio')}
-                        >
-                            <Ionicons
-                                name="musical-notes"
-                                size={18}
-                                color={viewMode === 'audio' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
+                            icon={viewMode === 'audio' ? 'music-note' : 'music-note-outline'}
+                            primaryColor={themeStyles.primaryColor}
+                            textColor={themeStyles.textColor}
+                            style={fileManagementStyles.viewModeButton}
+                        />
                     </View>
                 </ScrollView>
                 <TouchableOpacity
-                    style={[styles.sortButton, { 
-                        backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
-                        borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA',
+                    style={[fileManagementStyles.sortButton, {
+                        backgroundColor: themeStyles.colors.card,
                     }]}
                     onPress={() => {
                         // Cycle through sort options: date -> size -> name -> type -> date
@@ -2397,37 +2092,38 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         }
                     }}
                 >
-                    <Ionicons
-                        name={sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'}
-                        size={18}
-                        color={themeStyles.textColor}
-                    />
-                    <Ionicons
+                    <MaterialCommunityIcons
                         name={
                             sortBy === 'date' ? 'calendar' :
-                            sortBy === 'size' ? 'resize' :
-                            sortBy === 'name' ? 'text' : 'document'
+                                sortBy === 'size' ? 'sort-numeric-variant' :
+                                    sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline'
                         }
                         size={16}
                         color={themeStyles.textColor}
-                        style={{ marginLeft: 4 }}
+                    />
+                    <MaterialCommunityIcons
+                        name={sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'}
+                        size={14}
+                        color={themeStyles.colors.secondaryText}
                     />
                 </TouchableOpacity>
                 {user?.id === targetUserId && (!selectMode || (selectMode && allowUploadInSelectMode)) && (
                     <TouchableOpacity
-                        style={[styles.uploadButton, { backgroundColor: themeStyles.primaryColor }]}
+                        style={[fileManagementStyles.uploadButton, { backgroundColor: themeStyles.primaryColor }]}
                         onPress={handleFileUpload}
-                        disabled={uploading}
+                        disabled={uploading || isPickingDocument}
                     >
                         {uploading ? (
-                            <View style={styles.uploadProgress}>
+                            <View style={fileManagementStyles.uploadProgress}>
                                 <ActivityIndicator size="small" color="#FFFFFF" />
                                 {uploadProgress && (
-                                    <Text style={styles.uploadProgressText}>
+                                    <Text style={fileManagementStyles.uploadProgressText}>
                                         {uploadProgress.current}/{uploadProgress.total}
                                     </Text>
                                 )}
                             </View>
+                        ) : isPickingDocument ? (
+                            <ActivityIndicator size="small" color="#FFFFFF" />
                         ) : (
                             <Ionicons name="add" size={22} color="#FFFFFF" />
                         )}
@@ -2438,26 +2134,25 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             {/* Search Bar */}
             {files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && (
                 <View style={[
-                    styles.searchContainer,
+                    fileManagementStyles.searchContainer,
                     {
-                        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-                        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+                        backgroundColor: themeStyles.colors.card,
                     }
                 ]}>
-                    <Ionicons name="search" size={22} color={themeStyles.isDarkTheme ? '#888888' : '#666666'} />
+                    <Ionicons name="search" size={22} color={themeStyles.colors.icon} />
                     <TextInput
-                        style={[styles.searchInput, { color: themeStyles.textColor }]}
+                        style={[fileManagementStyles.searchInput, { color: themeStyles.textColor }]}
                         placeholder={viewMode === 'photos' ? 'Search photos...' : 'Search files...'}
-                        placeholderTextColor={themeStyles.isDarkTheme ? '#888888' : '#999999'}
+                        placeholderTextColor={themeStyles.colors.secondaryText}
                         value={searchQuery}
                         onChangeText={setSearchQuery}
                     />
                     {searchQuery.length > 0 && (
                         <TouchableOpacity
                             onPress={() => setSearchQuery('')}
-                            style={styles.searchClearButton}
+                            style={fileManagementStyles.searchClearButton}
                         >
-                            <Ionicons name="close-circle" size={22} color={themeStyles.isDarkTheme ? '#888888' : '#666666'} />
+                            <Ionicons name="close-circle" size={22} color={themeStyles.colors.icon} />
                         </TouchableOpacity>
                     )}
                 </View>
@@ -2466,30 +2161,29 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             {/* File Stats */}
             {files.length > 0 && (
                 <View style={[
-                    styles.statsContainer,
+                    fileManagementStyles.statsContainer,
                     {
-                        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-                        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+                        backgroundColor: themeStyles.colors.card,
                     }
                 ]}>
-                    <View style={styles.statItem}>
-                        <Text style={[styles.statValue, { color: themeStyles.textColor }]}>{filteredFiles.length}</Text>
-                        <Text style={[styles.statLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <View style={fileManagementStyles.statItem}>
+                        <Text style={[fileManagementStyles.statValue, { color: themeStyles.textColor }]}>{filteredFiles.length}</Text>
+                        <Text style={[fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }]}>
                             {searchQuery.length > 0 ? 'Found' : (filteredFiles.length === 1 ? (viewMode === 'photos' ? 'Photo' : 'File') : (viewMode === 'photos' ? 'Photos' : 'Files'))}
                         </Text>
                     </View>
-                    <View style={styles.statItem}>
-                        <Text style={[styles.statValue, { color: themeStyles.textColor }]}>
+                    <View style={fileManagementStyles.statItem}>
+                        <Text style={[fileManagementStyles.statValue, { color: themeStyles.textColor }]}>
                             {formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))}
                         </Text>
-                        <Text style={[styles.statLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }]}>
                             {searchQuery.length > 0 ? 'Size' : 'Total Size'}
                         </Text>
                     </View>
                     {searchQuery.length > 0 && (
-                        <View style={styles.statItem}>
-                            <Text style={[styles.statValue, { color: themeStyles.textColor }]}>{files.length}</Text>
-                            <Text style={[styles.statLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <View style={fileManagementStyles.statItem}>
+                            <Text style={[fileManagementStyles.statValue, { color: themeStyles.textColor }]}>{files.length}</Text>
+                            <Text style={[fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }]}>
                                 Total
                             </Text>
                         </View>
@@ -2503,8 +2197,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             ) : (
                 <ScrollView
                     ref={scrollViewRef}
-                    style={styles.scrollView}
-                    contentContainerStyle={styles.scrollContainer}
+                    style={fileManagementStyles.scrollView}
+                    contentContainerStyle={fileManagementStyles.scrollContainer}
                     refreshControl={
                         <RefreshControl
                             refreshing={refreshing}
@@ -2522,27 +2216,27 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     scrollEventThrottle={250}
                 >
                     {filteredFiles.length === 0 && searchQuery.length > 0 ? (
-                        <View style={styles.emptyState}>
+                        <View style={fileManagementStyles.emptyState}>
                             <Ionicons name="search" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
-                            <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Results Found</Text>
-                            <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                            <Text style={[fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }]}>No Results Found</Text>
+                            <Text style={[fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                 No files match your search for "{searchQuery}"
                             </Text>
                             <TouchableOpacity
-                                style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
+                                style={[fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
                                 onPress={() => setSearchQuery('')}
                             >
                                 <Ionicons name="refresh" size={20} color="#FFFFFF" />
-                                <Text style={styles.emptyStateButtonText}>Clear Search</Text>
+                                <Text style={fileManagementStyles.emptyStateButtonText}>Clear Search</Text>
                             </TouchableOpacity>
                         </View>
                     ) : filteredFiles.length === 0 ? renderEmptyState() : (
                         <>
-                            <GroupedSection items={groupedFileItems} theme={theme as 'light' | 'dark'} />
+                            <GroupedSection items={groupedFileItems} />
                             {paging.loadingMore && (
-                                <View style={styles.loadingMoreBar}>
+                                <View style={fileManagementStyles.loadingMoreBar}>
                                     <ActivityIndicator size="small" color={themeStyles.primaryColor} />
-                                    <Text style={[styles.loadingMoreText, { color: themeStyles.textColor }]}>Loading more...</Text>
+                                    <Text style={[fileManagementStyles.loadingMoreText, { color: themeStyles.textColor }]}>Loading more...</Text>
                                 </View>
                             )}
                         </>
@@ -2550,1008 +2244,52 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </ScrollView>
             )}
 
-            {!selectMode && renderFileDetailsModal()}
+            {!selectMode && (
+                <FileDetailsModal
+                    visible={showFileDetails}
+                    file={selectedFile}
+                    onClose={() => setShowFileDetails(false)}
+                    onDownload={handleFileDownload}
+                    onDelete={handleFileDelete}
+                    themeStyles={themeStyles}
+                    isOwner={user?.id === targetUserId}
+                />
+            )}
 
-            {/* Uploading banner overlay */}
+            {/* Uploading banner overlay with progress */}
             {!selectMode && uploading && (
-                <View style={[styles.uploadBannerContainer, { pointerEvents: 'none' }]}>
-                    <View style={[styles.uploadBanner, { backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE', borderColor: themeStyles.borderColor }]}>
+                <View style={[fileManagementStyles.uploadBannerContainer, { pointerEvents: 'none' }]}>
+                    <View style={[fileManagementStyles.uploadBanner, { backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE', borderColor: themeStyles.borderColor }]}>
                         <Ionicons name="cloud-upload" size={18} color={themeStyles.primaryColor} />
-                        <Text style={[styles.uploadBannerText, { color: themeStyles.textColor }]}>Uploading{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}</Text>
-                        <View style={styles.uploadBannerDots}>
-                            {[0, 1, 2].map(i => (
-                                <View key={i} style={[styles.dot, { opacity: ((Date.now() / 400 + i) % 3) < 1 ? 1 : 0.25 }]} />
-                            ))}
+                        <View style={fileManagementStyles.uploadBannerContent}>
+                            <Text style={[fileManagementStyles.uploadBannerText, { color: themeStyles.textColor }]}>
+                                Uploading{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}
+                            </Text>
+                            {uploadProgress && uploadProgress.total > 0 && (
+                                <View style={[fileManagementStyles.uploadProgressBarContainer, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }]}>
+                                    <View
+                                        style={[
+                                            fileManagementStyles.uploadProgressBar,
+                                            {
+                                                width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
+                                                backgroundColor: themeStyles.primaryColor
+                                            }
+                                        ]}
+                                    />
+                                </View>
+                            )}
                         </View>
+                        <ActivityIndicator size="small" color={themeStyles.primaryColor} />
                     </View>
                 </View>
             )}
 
             {/* Selection bar removed; actions are now in header */}
             {/* Global loadingMore bar removed; now inline in scroll areas */}
-
-            {/* Drag and Drop Overlay - Enhanced */}
-            {isDragging && Platform.OS === 'web' && (
-                <View style={styles.dragDropOverlay}>
-                    <View style={[styles.dragDropContent, {
-                        backgroundColor: themeStyles.isDarkTheme ? 'rgba(30, 30, 30, 0.98)' : 'rgba(255, 255, 255, 0.98)',
-                        borderColor: themeStyles.primaryColor,
-                    }]}>
-                        <View style={[styles.dragDropIconContainer, { backgroundColor: `${themeStyles.primaryColor}15` }]}>
-                            <Ionicons name="cloud-upload" size={64} color={themeStyles.primaryColor} />
-                        </View>
-                        <Text style={[styles.dragDropTitle, { color: themeStyles.primaryColor }]}>
-                            Drop files to upload
-                        </Text>
-                        <Text style={[styles.dragDropSubtitle, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            Release to upload multiple files
-                        </Text>
-                    </View>
-                </View>
-            )}
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    selectionBadge: {
-        position: 'absolute',
-        top: 4,
-        right: 4,
-        backgroundColor: 'rgba(0,0,0,0.4)',
-        borderRadius: 12,
-        padding: 2,
-    },
-    selectionBar: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        padding: 12,
-        backgroundColor: 'rgba(0,0,0,0.55)',
-        gap: 12,
-    },
-    selectionBarButton: {
-        flex: 1,
-        paddingVertical: 14,
-        borderRadius: 10,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    selectionBarButtonText: {
-        color: '#FFFFFF',
-        fontSize: 15,
-        fontWeight: '600',
-    },
-    loadingMoreBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        gap: 8,
-    },
-    loadingMoreText: {
-        fontSize: 13,
-        fontWeight: '500',
-    },
-    dragOverlay: {
-        backgroundColor: 'rgba(0, 122, 255, 0.06)',
-        borderWidth: 1,
-        borderColor: '#66AFFF',
-        borderStyle: 'dashed',
-    },
-    centerContent: {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-        position: 'relative',
-    },
-    backButton: {
-        padding: 12,
-        borderRadius: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: 44,
-        minHeight: 44,
-    },
-    headerTitleContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginHorizontal: 16,
-    },
-    headerTitle: {
-        fontSize: 22,
-        fontWeight: '700',
-        fontFamily: fontFamilies.phuduBold,
-        letterSpacing: -0.5,
-        lineHeight: 28,
-    },
-    headerSubtitle: {
-        fontSize: 13,
-        fontWeight: '500',
-        fontFamily: fontFamilies.phuduMedium,
-        marginTop: 2,
-        letterSpacing: 0.2,
-    },
-    uploadButton: {
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    uploadProgress: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    uploadProgressText: {
-        color: '#FFFFFF',
-        fontSize: 10,
-        fontWeight: '600',
-        marginTop: 2,
-    },
-    uploadBannerContainer: {
-        position: 'absolute',
-        top: 72, // below header
-        left: 0,
-        right: 0,
-        alignItems: 'center',
-        zIndex: 50,
-    },
-    uploadBanner: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 14,
-        paddingVertical: 8,
-        borderRadius: 24,
-        gap: 8,
-        borderWidth: 1,
-        shadowColor: '#000',
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 2,
-    },
-    uploadBannerText: {
-        fontSize: 13,
-        fontWeight: '500',
-    },
-    uploadBannerDots: {
-        flexDirection: 'row',
-        gap: 4,
-        marginLeft: 2,
-    },
-    dot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: '#007AFF',
-    },
-    searchContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        marginHorizontal: 16,
-        marginTop: 12,
-        borderRadius: 10,
-        borderWidth: 1,
-        gap: 10,
-    },
-    searchInput: {
-        flex: 1,
-        fontSize: 16,
-        fontFamily: fontFamilies.phudu,
-        lineHeight: 20,
-    },
-    searchClearButton: {
-        padding: 4,
-        borderRadius: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    searchIcon: {
-        marginRight: 8,
-    },
-    statsContainer: {
-        flexDirection: 'row',
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        marginHorizontal: 16,
-        marginTop: 12,
-        borderRadius: 10,
-        borderWidth: 1,
-    },
-    statItem: {
-        flex: 1,
-        alignItems: 'center',
-        paddingVertical: 4,
-    },
-    statValue: {
-        fontSize: 20,
-        fontWeight: '800',
-        fontFamily: fontFamilies.phuduBold,
-        letterSpacing: -0.5,
-        lineHeight: 24,
-    },
-    statLabel: {
-        fontSize: 12,
-        fontWeight: '500',
-        fontFamily: fontFamilies.phuduMedium,
-        marginTop: 2,
-        letterSpacing: 0.2,
-    },
-    scrollView: {
-        flex: 1,
-        backgroundColor: '#e5f1ff',
-    },
-    scrollContainer: {
-        padding: 12,
-    },
-    fileItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 10,
-        marginBottom: 8,
-        borderRadius: 10,
-        borderWidth: 1,
-    },
-    fileContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flex: 1,
-    },
-    fileIconContainer: {
-        width: 50,
-        height: 50,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: 12,
-    },
-    filePreviewContainer: {
-        width: 52,
-        height: 52,
-        marginRight: 10,
-    },
-    filePreview: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 8,
-        backgroundColor: 'transparent',
-        alignItems: 'center',
-        justifyContent: 'center',
-        overflow: 'hidden',
-        position: 'relative',
-    },
-    previewImage: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 8,
-    },
-    pdfPreview: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-        backgroundColor: '#FF6B6B20',
-    },
-    pdfLabel: {
-        fontSize: 8,
-        fontWeight: 'bold',
-        marginTop: 2,
-    },
-    videoPreview: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-        backgroundColor: '#4ECDC420',
-    },
-    videoLabel: {
-        fontSize: 8,
-        fontWeight: 'bold',
-        marginTop: 2,
-    },
-    fallbackIcon: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'transparent',
-        borderRadius: 8,
-    },
-    previewOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.25)',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 8,
-    },
-    groupedActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginLeft: 12,
-    },
-    groupedActionBtn: {
-        width: 34,
-        height: 34,
-        borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    groupedDescription: {
-        fontSize: 12,
-        lineHeight: 16,
-        marginTop: 6,
-    },
-    videoPreviewWrapper: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 8,
-        overflow: 'hidden',
-        backgroundColor: '#000000',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    videoPosterImage: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: '100%',
-        height: '100%',
-    },
-    videoOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(0,0,0,0.25)',
-    },
-    fileInfo: {
-        flex: 1,
-    },
-    fileName: {
-        fontSize: 16,
-        fontWeight: '600',
-        marginBottom: 4,
-    },
-    fileDetails: {
-        fontSize: 14,
-        marginBottom: 2,
-    },
-    fileDescription: {
-        fontSize: 12,
-        fontStyle: 'italic',
-    },
-    fileActions: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    actionButton: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 1,
-        borderColor: '#E0E0E0',
-        backgroundColor: 'transparent',
-    },
-    emptyState: {
-        alignItems: 'center',
-        paddingVertical: 40,
-        paddingHorizontal: 24,
-    },
-    emptyStateTitle: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
-        marginTop: 16,
-        marginBottom: 8,
-    },
-    emptyStateDescription: {
-        fontSize: 16,
-        textAlign: 'center',
-        lineHeight: 24,
-        marginBottom: 32,
-    },
-    emptyStateButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 24,
-        paddingVertical: 12,
-        borderRadius: 24,
-        gap: 8,
-    },
-    emptyStateButtonText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    loadingText: {
-        fontSize: 16,
-        marginTop: 16,
-    },
-
-    // Modal styles
-    modalContainer: {
-        flex: 1,
-    },
-    modalHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-    },
-    modalCloseButton: {
-        padding: 8,
-    },
-    modalTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-    },
-    modalPlaceholder: {
-        width: 40,
-    },
-    modalContent: {
-        flex: 1,
-        padding: 16,
-    },
-    fileDetailCard: {
-        padding: 18,
-        borderRadius: 14,
-        borderWidth: 1,
-        alignItems: 'center',
-    },
-    fileDetailIcon: {
-        marginBottom: 16,
-    },
-    fileDetailName: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
-        textAlign: 'center',
-        marginBottom: 24,
-    },
-    fileDetailInfo: {
-        width: '100%',
-        marginBottom: 32,
-    },
-    detailRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        marginBottom: 12,
-        flexWrap: 'wrap',
-    },
-    detailLabel: {
-        fontSize: 16,
-        fontWeight: '500',
-        flex: 1,
-        minWidth: 100,
-    },
-    detailValue: {
-        fontSize: 16,
-        flex: 2,
-        textAlign: 'right',
-    },
-    modalActions: {
-        flexDirection: 'row',
-        gap: 12,
-        width: '100%',
-    },
-    modalActionButton: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 16,
-        borderRadius: 12,
-        gap: 8,
-    },
-    modalActionText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-
-    // Drag and Drop styles - Enhanced
-    dragDropOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 1000,
-    },
-    dragDropContent: {
-        alignItems: 'center',
-        padding: 32,
-        borderRadius: 20,
-        borderWidth: 3,
-        borderStyle: 'dashed',
-        minWidth: 280,
-        shadowColor: '#000',
-        shadowOpacity: 0.3,
-        shadowRadius: 20,
-        shadowOffset: { width: 0, height: 10 },
-        elevation: 10,
-    },
-    dragDropIconContainer: {
-        padding: 24,
-        borderRadius: 50,
-        marginBottom: 16,
-    },
-    dragDropTitle: {
-        fontSize: 24,
-        fontWeight: '700',
-        fontFamily: fontFamilies.phuduBold,
-        marginBottom: 8,
-    },
-    dragDropSubtitle: {
-        fontSize: 16,
-        fontWeight: '500',
-        fontFamily: fontFamilies.phuduMedium,
-    },
-    // Upload Preview Modal styles
-    uploadPreviewContainer: {
-        flex: 1,
-    },
-    uploadPreviewHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-        borderBottomWidth: 1,
-    },
-    uploadPreviewTitle: {
-        fontSize: 20,
-        fontWeight: '700',
-        fontFamily: fontFamilies.phuduBold,
-    },
-    uploadPreviewList: {
-        flex: 1,
-        padding: 16,
-    },
-    uploadPreviewItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 12,
-        borderRadius: 12,
-        borderWidth: 1,
-        marginBottom: 12,
-        gap: 12,
-    },
-    uploadPreviewThumbnail: {
-        width: 60,
-        height: 60,
-        borderRadius: 8,
-    },
-    uploadPreviewIconContainer: {
-        width: 60,
-        height: 60,
-        borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    uploadPreviewInfo: {
-        flex: 1,
-        minWidth: 0,
-    },
-    uploadPreviewName: {
-        fontSize: 16,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-        marginBottom: 4,
-    },
-    uploadPreviewMeta: {
-        fontSize: 13,
-        fontFamily: fontFamilies.phudu,
-    },
-    uploadPreviewRemove: {
-        padding: 4,
-    },
-    uploadPreviewFooter: {
-        padding: 16,
-        borderTopWidth: 1,
-    },
-    uploadPreviewStats: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 16,
-    },
-    uploadPreviewStatsText: {
-        fontSize: 15,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-    },
-    uploadPreviewActions: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    uploadPreviewCancelButton: {
-        flex: 1,
-        paddingVertical: 14,
-        borderRadius: 12,
-        borderWidth: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    uploadPreviewCancelText: {
-        fontSize: 16,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-    },
-    uploadPreviewConfirmButton: {
-        flex: 2,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 14,
-        borderRadius: 12,
-        gap: 8,
-    },
-    uploadPreviewConfirmText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-    },
-
-    // File Viewer styles
-    fileViewerContainer: {
-        flex: 1,
-    },
-    fileViewerHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-    },
-    fileViewerTitleContainer: {
-        flex: 1,
-        marginHorizontal: 16,
-    },
-    fileViewerTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-        marginBottom: 2,
-    },
-    fileViewerSubtitle: {
-        fontSize: 14,
-    },
-    fileViewerActions: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    fileViewerContent: {
-        flex: 1,
-    },
-    fileViewerContentWithDetails: {
-        paddingBottom: 20,
-    },
-    fileViewerContentContainer: {
-        flexGrow: 1,
-        padding: 14,
-    },
-    fileViewerLoading: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    fileViewerLoadingText: {
-        fontSize: 16,
-        marginTop: 16,
-    },
-    imageContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 1,
-    },
-    textContainer: {
-        flex: 1,
-        borderRadius: 10,
-        borderWidth: 1,
-        padding: 12,
-        minHeight: 180,
-        maxHeight: '80%',
-    },
-    textContent: {
-        fontSize: 14,
-        fontFamily: Platform.OS === 'web' ? 'monospace' : 'Courier',
-        lineHeight: 20,
-    },
-    unsupportedFileContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 40,
-        paddingHorizontal: 24,
-    },
-    unsupportedFileTitle: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
-        marginTop: 16,
-        marginBottom: 8,
-        textAlign: 'center',
-    },
-    unsupportedFileDescription: {
-        fontSize: 16,
-        textAlign: 'center',
-        lineHeight: 24,
-        marginBottom: 32,
-    },
-    downloadButtonLarge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 18,
-        paddingVertical: 12,
-        borderRadius: 20,
-        gap: 8,
-    },
-    downloadButtonText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    pdfContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    mediaContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 20,
-    },
-    unsupportedText: {
-        fontSize: 16,
-        textAlign: 'center',
-        fontStyle: 'italic',
-    },
-
-    // File Details in Viewer styles
-    fileDetailsSection: {
-        margin: 12,
-        marginTop: 0,
-        padding: 14,
-        borderRadius: 10,
-        borderWidth: 1,
-    },
-    fileDetailsSectionTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-        flex: 1,
-    },
-    fileDetailsSectionHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 16,
-    },
-    fileDetailsSectionToggle: {
-        padding: 4,
-    },
-    fileDetailsActions: {
-        flexDirection: 'row',
-        gap: 12,
-        marginTop: 16,
-    },
-    fileDetailsActionButton: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        borderRadius: 8,
-        gap: 6,
-    },
-    fileDetailsActionText: {
-        color: '#FFFFFF',
-        fontSize: 14,
-        fontWeight: '600',
-    },
-
-    // Header styles
-    headerActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 16,
-    },
-    controlsBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingTop: 8,
-        paddingBottom: 4,
-        gap: 12,
-    },
-    viewModeScroll: {
-        flex: 1,
-        maxWidth: '80%',
-    },
-    viewModeToggle: {
-        flexDirection: 'row',
-        borderRadius: 24,
-        padding: 3,
-        overflow: 'hidden',
-    },
-    viewModeButton: {
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        borderRadius: 20,
-        minWidth: 44,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginHorizontal: 1,
-    },
-    sortButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 10,
-        borderRadius: 20,
-        borderWidth: 1,
-        minWidth: 44,
-    },
-
-    // Photo Grid styles
-    photoScrollContainer: {
-        padding: 10,
-    },
-    photoDateSection: {
-        marginBottom: 16,
-    },
-    photoDateHeader: {
-        fontSize: 16,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-        marginBottom: 8,
-        paddingHorizontal: 2,
-    },
-    photoGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 4,
-        justifyContent: 'flex-start',
-    },
-    photoItem: {
-        borderRadius: 8,
-        overflow: 'hidden',
-    },
-    photoContainer: {
-        width: '100%',
-        height: '100%',
-        position: 'relative',
-        borderRadius: 8,
-        overflow: 'hidden',
-    },
-    photoImage: {
-        width: '100%',
-        height: '100%',
-    },
-
-    // Justified Grid styles
-    dimensionsLoadingIndicator: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 16,
-        gap: 8,
-    },
-    dimensionsLoadingText: {
-        fontSize: 14,
-        fontStyle: 'italic',
-    },
-    justifiedPhotoGrid: {
-        gap: 4,
-    },
-    justifiedPhotoRow: {
-        flexDirection: 'row',
-    },
-    justifiedPhotoItem: {
-        borderRadius: 6,
-        overflow: 'hidden',
-        position: 'relative',
-    },
-    justifiedPhotoContainer: {
-        width: '100%',
-        height: '100%',
-        position: 'relative',
-        borderRadius: 6,
-        overflow: 'hidden',
-        backgroundColor: 'transparent',
-    },
-    justifiedPhotoImage: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 6,
-    },
-
-    // Simple Photo Grid styles  
-    simplePhotoItem: {
-        borderRadius: 8,
-        overflow: 'hidden',
-        backgroundColor: 'transparent',
-    },
-    simplePhotoContainer: {
-        width: '100%',
-        height: '100%',
-        position: 'relative',
-        borderRadius: 8,
-        overflow: 'hidden',
-    },
-    simplePhotoImage: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 8,
-    },
-
-    // Loading skeleton styles
-    photoSkeletonGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 4,
-        marginTop: 20,
-    },
-    photoSkeletonItem: {
-        width: '32%',
-        aspectRatio: 1,
-        borderRadius: 8,
-        marginBottom: 4,
-    },
-    skeletonFileItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-        gap: 12,
-    },
-    skeletonFileInfo: {
-        flex: 1,
-        justifyContent: 'center',
-    },
-});
+// Styles have been moved to components/fileManagement/styles.ts
 
 export default FileManagementScreen;