@oxyhq/services 5.16.22 → 5.16.23

package/lib/module/ui/screens/FileManagementScreen.js

@@ -1,2327 +0,0 @@
-"use strict";
-
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, Alert } from 'react-native';
-import { Image as ExpoImage } from 'expo-image';
-// Lazy load expo-document-picker (optional dependency)
-// This allows the screen to work even if expo-document-picker is not installed
-let DocumentPicker = null;
-const loadDocumentPicker = async () => {
-  if (DocumentPicker) return DocumentPicker;
-  try {
-    DocumentPicker = await import('expo-document-picker');
-    return DocumentPicker;
-  } catch (error) {
-    throw new Error('expo-document-picker is not installed. Please install it: npx expo install expo-document-picker');
-  }
-};
-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 { 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 { useUploadFile } from '../hooks/mutations/useAccountMutations';
-import { confirmAction, convertDocumentPickerAssetToFile, formatFileSize, getFileIcon, getSafeDownloadUrl } 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Animated button component for smooth transitions
-const AnimatedButton = ({
-  isSelected,
-  onPress,
-  icon,
-  primaryColor,
-  textColor,
-  style
-}) => {
-  const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
-  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]
-  });
-  const iconColor = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [textColor, '#FFFFFF']
-  });
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    onPress: onPress,
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [style, {
-        backgroundColor
-      }],
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: icon,
-          size: 16,
-          color: isSelected ? '#FFFFFF' : textColor
-        })
-      })
-    })
-  });
-};
-const FileManagementScreen = ({
-  onClose,
-  theme,
-  goBack,
-  navigate,
-  userId,
-  containerWidth = 400,
-  // Fallback for when not provided by the router
-  selectMode = false,
-  multiSelect = false,
-  onSelect,
-  onConfirmSelection,
-  initialSelectedIds = [],
-  maxSelection,
-  disabledMimeTypes = [],
-  afterSelect = 'close',
-  allowUploadInSelectMode = true,
-  defaultVisibility = 'private',
-  linkContext
-}) => {
-  // Use useOxy() hook for OxyContext values
-  const {
-    user,
-    oxyServices
-  } = useOxy();
-  const uploadFileMutation = useUploadFile();
-  const files = useFiles();
-  // Ensure containerWidth is a number (TypeScript guard)
-  const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
-  const uploading = useUploadingStore();
-  const uploadProgress = useUploadAggregateProgress();
-  const deleting = useDeletingStore();
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [paging, setPaging] = useState({
-    offset: 0,
-    limit: 40,
-    total: 0,
-    hasMore: true,
-    loadingMore: false
-  });
-  const [selectedFile, setSelectedFile] = useState(null);
-  const [showFileDetails, setShowFileDetails] = useState(false);
-  // In selectMode we never open the detailed viewer
-  const [openedFile, setOpenedFile] = useState(null);
-  const [fileContent, setFileContent] = useState(null);
-  const [loadingFileContent, setLoadingFileContent] = useState(false);
-  const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
-  const [isPickingDocument, setIsPickingDocument] = useState(false);
-  const [viewMode, setViewMode] = useState('all');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState('date');
-  const [sortOrder, setSortOrder] = useState('desc');
-  const [pendingFiles, setPendingFiles] = useState([]);
-  const [showUploadPreview, setShowUploadPreview] = useState(false);
-  // Derived filtered and sorted files (avoid setState loops)
-  const filteredFiles = useMemo(() => {
-    let filteredByMode = files;
-    if (viewMode === 'photos') {
-      filteredByMode = files.filter(file => file.contentType.startsWith('image/'));
-    } else if (viewMode === 'videos') {
-      filteredByMode = files.filter(file => file.contentType.startsWith('video/'));
-    } else if (viewMode === 'documents') {
-      filteredByMode = files.filter(file => file.contentType.includes('pdf') || file.contentType.includes('document') || file.contentType.includes('text') || file.contentType.includes('msword') || file.contentType.includes('excel') || file.contentType.includes('spreadsheet') || file.contentType.includes('presentation') || file.contentType.includes('powerpoint'));
-    } else if (viewMode === 'audio') {
-      filteredByMode = files.filter(file => file.contentType.startsWith('audio/'));
-    }
-    let filtered = filteredByMode;
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      filtered = filteredByMode.filter(file => file.filename.toLowerCase().includes(query) || file.contentType.toLowerCase().includes(query) || file.metadata?.description && file.metadata.description.toLowerCase().includes(query));
-    }
-
-    // Sort files
-    const sorted = [...filtered].sort((a, b) => {
-      let comparison = 0;
-      if (sortBy === 'date') {
-        const dateA = new Date(a.uploadDate || 0).getTime();
-        const dateB = new Date(b.uploadDate || 0).getTime();
-        comparison = dateA - dateB;
-      } else if (sortBy === 'size') {
-        comparison = (a.length || 0) - (b.length || 0);
-      } else if (sortBy === 'name') {
-        comparison = (a.filename || '').localeCompare(b.filename || '');
-      } else if (sortBy === 'type') {
-        comparison = (a.contentType || '').localeCompare(b.contentType || '');
-      }
-      return sortOrder === 'asc' ? comparison : -comparison;
-    });
-    return sorted;
-  }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-  const [photoDimensions, setPhotoDimensions] = useState({});
-  const [loadingDimensions, setLoadingDimensions] = useState(false);
-  const uploadStartRef = useRef(null);
-  const MIN_BANNER_MS = 600;
-  // Selection state
-  const [selectedIds, setSelectedIds] = useState(new Set(initialSelectedIds));
-  const [lastSelectedFileId, setLastSelectedFileId] = useState(null);
-  const scrollViewRef = useRef(null);
-  const photoScrollViewRef = useRef(null);
-  const itemRefs = useRef(new Map()); // Track item positions
-  const containerRef = useRef(null);
-  useEffect(() => {
-    if (initialSelectedIds && initialSelectedIds.length) {
-      setSelectedIds(new Set(initialSelectedIds));
-    }
-  }, [initialSelectedIds]);
-  const toggleSelect = useCallback(async file => {
-    // Allow selection in regular mode for bulk operations
-    // if (!selectMode) return;
-    if (disabledMimeTypes.length) {
-      const blocked = disabledMimeTypes.some(mt => file.contentType === mt || file.contentType.startsWith(mt.endsWith('/') ? mt : mt + '/'));
-      if (blocked) {
-        toast.error('This file type cannot be selected');
-        return;
-      }
-    }
-
-    // Update file visibility if it differs from defaultVisibility
-    const fileVisibility = file.metadata?.visibility || 'private';
-    if (fileVisibility !== defaultVisibility) {
-      try {
-        await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
-      } catch (error) {
-        // Continue anyway - selection shouldn't fail if visibility update fails
-      }
-    }
-
-    // Track the selected file for scrolling
-    setLastSelectedFileId(file.id);
-
-    // Link file to entity if linkContext is provided
-    if (linkContext) {
-      try {
-        await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
-      } catch (error) {
-        // Continue anyway - selection shouldn't fail if linking fails
-      }
-    }
-    if (!multiSelect) {
-      onSelect?.(file);
-      if (afterSelect === 'back') {
-        goBack?.();
-      } else if (afterSelect === 'close') {
-        onClose?.();
-      }
-      return;
-    }
-    setSelectedIds(prev => {
-      const next = new Set(prev);
-      const already = next.has(file.id);
-      if (!already) {
-        if (maxSelection && next.size >= maxSelection) {
-          toast.error(`You can select up to ${maxSelection}`);
-          return prev;
-        }
-        next.add(file.id);
-      } else {
-        next.delete(file.id);
-      }
-      return next;
-    });
-  }, [selectMode, multiSelect, onSelect, onClose, goBack, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
-  const confirmMultiSelection = useCallback(async () => {
-    if (!selectMode || !multiSelect) return;
-    const map = {};
-    files.forEach(f => {
-      map[f.id] = f;
-    });
-    const chosen = Array.from(selectedIds).map(id => map[id]).filter(Boolean);
-
-    // Update visibility and link files if needed
-    const updatePromises = chosen.map(async file => {
-      // Update visibility if needed
-      const fileVisibility = file.metadata?.visibility || 'private';
-      if (fileVisibility !== defaultVisibility) {
-        try {
-          await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
-        } catch (error) {
-          // Visibility update failed, continue with selection
-        }
-      }
-
-      // Link file to entity if linkContext provided
-      if (linkContext) {
-        try {
-          await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
-        } catch (error) {
-          // File linking failed, continue with selection
-        }
-      }
-    });
-
-    // Wait for all updates (but don't block on failures)
-    await Promise.allSettled(updatePromises);
-    onConfirmSelection?.(chosen);
-    onClose?.();
-  }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
-  const endUpload = useCallback(() => {
-    const started = uploadStartRef.current;
-    const elapsed = started ? Date.now() - started : MIN_BANNER_MS;
-    const remaining = elapsed < MIN_BANNER_MS ? MIN_BANNER_MS - elapsed : 0;
-    setTimeout(() => {
-      useFileStore.getState().setUploading(false);
-      uploadStartRef.current = null;
-    }, remaining);
-  }, []);
-
-  // Helper to safely request a thumbnail variant only for image mime types.
-  const getSafeDownloadUrlCallback = useCallback((file, variant = 'thumb') => {
-    return getSafeDownloadUrl(file, variant, (fileId, variant) => oxyServices.getFileDownloadUrl(fileId, variant));
-  }, [oxyServices]);
-
-  // 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;
-  const borderColor = themeStyles.borderColor;
-  const targetUserId = userId || user?.id;
-  const storeSetUploading = useFileStore(s => s.setUploading);
-  const storeSetUploadProgress = useFileStore(s => s.setUploadProgress);
-  const storeSetDeleting = useFileStore(s => s.setDeleting);
-  const loadFiles = useCallback(async (mode = 'initial') => {
-    if (!targetUserId) return;
-    try {
-      if (mode === 'refresh') {
-        setRefreshing(true);
-      } else if (mode === 'initial') {
-        setLoading(true);
-        setPaging(p => ({
-          ...p,
-          offset: 0,
-          hasMore: true
-        }));
-      } else if (mode === 'more') {
-        // Prevent duplicate fetches
-        setPaging(p => ({
-          ...p,
-          loadingMore: true
-        }));
-      }
-      const currentPaging = mode === 'more' ? prevPagingRef.current ?? paging : paging;
-      const effectiveOffset = mode === 'more' ? currentPaging.offset + currentPaging.limit : 0;
-      const response = await oxyServices.listUserFiles(currentPaging.limit, effectiveOffset);
-      const assets = (response.files || []).map(f => ({
-        id: f.id,
-        filename: f.originalName || f.sha256,
-        contentType: f.mime,
-        length: f.size,
-        chunkSize: 0,
-        uploadDate: f.createdAt,
-        metadata: f.metadata || {},
-        variants: f.variants || []
-      }));
-      if (mode === 'more') {
-        // append
-        useFileStore.getState().setFiles(assets, {
-          merge: true
-        });
-        setPaging(p => ({
-          ...p,
-          offset: effectiveOffset,
-          total: response.total || effectiveOffset + assets.length,
-          hasMore: response.hasMore,
-          loadingMore: false
-        }));
-      } else {
-        useFileStore.getState().setFiles(assets, {
-          merge: false
-        });
-        setPaging(p => ({
-          ...p,
-          offset: 0,
-          total: response.total || assets.length,
-          hasMore: response.hasMore,
-          loadingMore: false
-        }));
-      }
-    } catch (error) {
-      toast.error(error.message || 'Failed to load files');
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-      setPaging(p => ({
-        ...p,
-        loadingMore: false
-      }));
-    }
-  }, [targetUserId, oxyServices, paging]);
-
-  // Keep a ref to avoid stale closure when calculating next offset
-  const prevPagingRef = useRef(paging);
-  useEffect(() => {
-    prevPagingRef.current = paging;
-  }, [paging]);
-
-  // (removed effect; filteredFiles is memoized)
-
-  // Load photo dimensions for justified grid - unified approach using Image.getSize
-  const loadPhotoDimensions = useCallback(async photos => {
-    if (photos.length === 0) return;
-    setLoadingDimensions(true);
-    const newDimensions = {
-      ...photoDimensions
-    };
-    let hasNewDimensions = false;
-
-    // Only load dimensions for photos we don't have yet
-    const photosToLoad = photos.filter(photo => !newDimensions[photo.id]);
-    if (photosToLoad.length === 0) {
-      setLoadingDimensions(false);
-      return;
-    }
-    try {
-      await Promise.all(photosToLoad.map(async photo => {
-        try {
-          const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-
-          // Unified approach using Image.getSize (works on all platforms)
-          await new Promise(resolve => {
-            Image.getSize(downloadUrl, (width, height) => {
-              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
-          };
-          hasNewDimensions = true;
-        }
-      }));
-      if (hasNewDimensions) {
-        setPhotoDimensions(newDimensions);
-      }
-    } catch (error) {
-      // Photo dimensions loading failed, continue without dimensions
-    } finally {
-      setLoadingDimensions(false);
-    }
-  }, [getSafeDownloadUrlCallback, photoDimensions]);
-
-  // Create justified rows from photos with responsive algorithm
-  const createJustifiedRows = useCallback((photos, containerWidth) => {
-    if (photos.length === 0) return [];
-    const rows = [];
-    const photosPerRow = 3; // Fixed 3 photos per row for consistency
-
-    for (let i = 0; i < photos.length; i += photosPerRow) {
-      const rowPhotos = photos.slice(i, i + photosPerRow);
-      rows.push(rowPhotos);
-    }
-    return rows;
-  }, []);
-  const processFileUploads = async selectedFiles => {
-    if (selectedFiles.length === 0) return [];
-    if (!targetUserId) return []; // Guard clause to ensure userId is defined
-    const uploadedFiles = [];
-    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(', ');
-        toast.error(`The following files are too large (max 50MB): ${fileList}`);
-        return [];
-      }
-      let successCount = 0;
-      let failureCount = 0;
-      const errors = [];
-      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 {
-          // 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 = {
-            id: optimisticId,
-            filename: raw.name,
-            contentType: raw.type || 'application/octet-stream',
-            length: raw.size,
-            chunkSize: 0,
-            uploadDate: new Date().toISOString(),
-            metadata: {
-              uploading: true
-            },
-            variants: []
-          };
-          useFileStore.getState().addFile(optimisticFile, {
-            prepend: true
-          });
-
-          // Use the mutation hook with authentication handling
-          const result = await uploadFileMutation.mutateAsync({
-            file: raw,
-            visibility: 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];
-            const merged = {
-              id: f.id,
-              filename: f.originalName || f.sha256 || raw.name,
-              contentType: f.mime || raw.type || 'application/octet-stream',
-              length: f.size || raw.size,
-              chunkSize: 0,
-              uploadDate: f.createdAt || new Date().toISOString(),
-              metadata: f.metadata || {},
-              variants: f.variants || []
-            };
-            // 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
-              }
-            });
-            console.warn('Upload completed but no file data returned:', {
-              fileName,
-              result
-            });
-            // Still count as success if upload didn't throw
-            successCount++;
-          }
-        } catch (error) {
-          failureCount++;
-          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) {
-        // 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);
-    } catch (error) {
-      toast.error(error.message || 'Failed to upload files');
-    } finally {
-      storeSetUploadProgress(null);
-    }
-    return uploadedFiles;
-  };
-  const handleFileSelection = useCallback(async selectedFiles => {
-    const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
-    const processedFiles = [];
-    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;
-      }
-
-      // Ensure file has a type property
-      const fileType = file.type || 'application/octet-stream';
-
-      // Generate preview for images - unified approach
-      let preview;
-      if (fileType.startsWith('image/')) {
-        // Try to use file URI from expo-document-picker if available (works on all platforms)
-        const fileUri = file.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) {
-            console.warn('Failed to create preview URL:', error);
-            // Preview is optional, continue without it
-          }
-        }
-      }
-      processedFiles.push({
-        file,
-        preview,
-        size: file.size,
-        name: file.name,
-        type: fileType
-      });
-    }
-    if (processedFiles.length === 0) {
-      toast.error('No valid files to upload');
-      return;
-    }
-
-    // Show preview modal for user to review files before upload
-    setPendingFiles(processedFiles);
-    setShowUploadPreview(true);
-  }, []);
-  const handleConfirmUpload = async () => {
-    if (pendingFiles.length === 0) return;
-    setShowUploadPreview(false);
-    uploadStartRef.current = Date.now();
-    storeSetUploading(true);
-    storeSetUploadProgress(null);
-    try {
-      const filesToUpload = pendingFiles.map(pf => pf.file);
-      storeSetUploadProgress({
-        current: 0,
-        total: filesToUpload.length
-      });
-      const uploadedFiles = await processFileUploads(filesToUpload);
-
-      // Cleanup preview URLs
-      pendingFiles.forEach(pf => {
-        if (pf.preview) {
-          URL.revokeObjectURL(pf.preview);
-        }
-      });
-      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) {
-      toast.error(error.message || 'Failed to upload files');
-      endUpload();
-    }
-  };
-  const handleCancelUpload = () => {
-    // Cleanup preview URLs
-    pendingFiles.forEach(pf => {
-      if (pf.preview) {
-        URL.revokeObjectURL(pf.preview);
-      }
-    });
-    setPendingFiles([]);
-    setShowUploadPreview(false);
-  };
-  const removePendingFile = index => {
-    const file = pendingFiles[index];
-    if (file.preview) {
-      URL.revokeObjectURL(file.preview);
-    }
-    const updated = pendingFiles.filter((_, i) => i !== index);
-    setPendingFiles(updated);
-    if (updated.length === 0) {
-      setShowUploadPreview(false);
-    }
-  };
-
-  /**
-   * 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 {
-      setIsPickingDocument(true);
-
-      // Lazy load expo-document-picker
-      const picker = await loadDocumentPicker();
-
-      // Use expo-document-picker (works on all platforms including web)
-      // On web, it uses the native file input and provides File objects directly
-      const result = await picker.getDocumentAsync({
-        type: '*/*',
-        multiple: true,
-        copyToCacheDirectory: true
-      });
-      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 = [];
-      const errors = [];
-
-      // 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 => {
-        errors.push(`File "${doc.name || 'file'}": ${error.message || 'Failed to process'}`);
-        return null;
-      }));
-      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) {
-      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, filename) => {
-    // 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;
-    }
-    try {
-      storeSetDeleting(fileId);
-      await oxyServices.deleteFile(fileId);
-      toast.success('File deleted successfully');
-
-      // Reload files after successful deletion
-      // Optimistic remove
-      useFileStore.getState().removeFile(fileId);
-      // Silent background reconcile
-      setTimeout(() => loadFiles('silent'), 800);
-    } catch (error) {
-      // Provide specific error messages
-      if (error.message?.includes('File not found') || error.message?.includes('404')) {
-        toast.error('File not found. It may have already been deleted.');
-        // Still reload files to refresh the list
-        setTimeout(() => loadFiles('silent'), 800);
-      } else if (error.message?.includes('permission') || error.message?.includes('403')) {
-        toast.error('You do not have permission to delete this file.');
-      } else {
-        toast.error(error.message || 'Failed to delete file');
-      }
-    } finally {
-      storeSetDeleting(null);
-    }
-  };
-  const handleBulkDelete = useCallback(async () => {
-    if (selectedIds.size === 0) return;
-    const fileMap = {};
-    files.forEach(f => {
-      fileMap[f.id] = f;
-    });
-    const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
-    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 {
-          await oxyServices.deleteFile(fileId);
-          useFileStore.getState().removeFile(fileId);
-          return {
-            success: true,
-            fileId
-          };
-        } catch (error) {
-          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) {
-      toast.error(error.message || 'Failed to delete files');
-    }
-  }, [selectedIds, files, oxyServices, loadFiles]);
-  const handleBulkVisibilityChange = useCallback(async visibility => {
-    if (selectedIds.size === 0) return;
-    try {
-      const updatePromises = Array.from(selectedIds).map(async fileId => {
-        try {
-          await oxyServices.assetUpdateVisibility(fileId, visibility);
-          return {
-            success: true,
-            fileId
-          };
-        } catch (error) {
-          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
-        Array.from(selectedIds).forEach(fileId => {
-          useFileStore.getState().updateFile(fileId, {
-            metadata: {
-              ...files.find(f => f.id === fileId)?.metadata,
-              visibility
-            }
-          });
-        });
-      }
-      if (failed > 0) {
-        toast.error(`${failed} file(s) failed to update visibility`);
-      }
-      setTimeout(() => loadFiles('silent'), 800);
-    } catch (error) {
-      toast.error(error.message || 'Failed to update visibility');
-    }
-  }, [selectedIds, oxyServices, files, loadFiles]);
-
-  // Unified download function - works on all platforms
-  const handleFileDownload = async (fileId, filename) => {
-    try {
-      // 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 {
-          // Try simple link download first
-          const link = document.createElement('a');
-          link.href = downloadUrl;
-          link.download = filename;
-          link.target = '_blank';
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-          toast.success('File download started');
-        } catch (linkError) {
-          // Fallback to authenticated download
-          const blob = await oxyServices.getFileContentAsBlob(fileId);
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = filename;
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-
-          // Clean up the blob URL
-          URL.revokeObjectURL(url);
-          toast.success('File downloaded successfully');
-        }
-      } else {
-        // 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) {
-      toast.error(error.message || 'Failed to download file');
-    }
-  };
-  const handleFileOpen = async file => {
-    if (selectMode) {
-      toggleSelect(file);
-      return;
-    }
-    try {
-      setLoadingFileContent(true);
-      setOpenedFile(file);
-
-      // For text files, images, and other viewable content, try to load the content
-      if (file.contentType.startsWith('text/') || file.contentType.includes('json') || file.contentType.includes('xml') || file.contentType.includes('javascript') || file.contentType.includes('typescript') || file.contentType.startsWith('image/') || file.contentType.includes('pdf') || file.contentType.startsWith('video/') || file.contentType.startsWith('audio/')) {
-        try {
-          if (file.contentType.startsWith('image/') || file.contentType.includes('pdf') || file.contentType.startsWith('video/') || file.contentType.startsWith('audio/')) {
-            // For images, PDFs, videos, and audio, we'll use the URL directly
-            const downloadUrl = oxyServices.getFileDownloadUrl(file.id);
-            setFileContent(downloadUrl);
-          } else {
-            // For text files, get the content using authenticated request
-            const content = await oxyServices.getFileContentAsText(file.id);
-            setFileContent(content);
-          }
-        } catch (error) {
-          if (error.message?.includes('404') || error.message?.includes('not found')) {
-            toast.error('File not found. It may have been deleted.');
-          } else {
-            toast.error('Failed to load file content');
-          }
-          setFileContent(null);
-        }
-      } else {
-        // For non-viewable files, don't load content
-        setFileContent(null);
-      }
-    } catch (error) {
-      toast.error(error.message || 'Failed to open file');
-    } finally {
-      setLoadingFileContent(false);
-    }
-  };
-  const handleCloseFile = () => {
-    setOpenedFile(null);
-    setFileContent(null);
-    setShowFileDetailsInViewer(false);
-    // Don't reset view mode when closing a file
-  };
-  const showFileDetailsModal = file => {
-    setSelectedFile(file);
-    setShowFileDetails(true);
-  };
-  const renderSimplePhotoItem = useCallback((photo, index) => {
-    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-
-    // Calculate photo item width based on actual container size from bottom sheet
-    let itemsPerRow = 3; // Default for 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 = safeContainerWidth - scrollContainerPadding;
-    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.simplePhotoItem, {
-        width: itemWidth,
-        height: itemWidth,
-        marginRight: (index + 1) % itemsPerRow === 0 ? 0 : 4,
-        ...(selectMode && selectedIds.has(photo.id) ? {
-          borderWidth: 2,
-          borderColor: themeStyles.primaryColor
-        } : {})
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.simplePhotoContainer,
-        children: [/*#__PURE__*/_jsx(ExpoImage, {
-          source: {
-            uri: downloadUrl
-          },
-          style: fileManagementStyles.simplePhotoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Photo failed to load, will show placeholder
-          },
-          accessibilityLabel: photo.filename
-        }), selectMode && /*#__PURE__*/_jsx(View, {
-          style: fileManagementStyles.selectionBadge,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
-            size: 20,
-            color: selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor
-          })
-        })]
-      })
-    }, photo.id);
-  }, [oxyServices, safeContainerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
-  const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
-    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.justifiedPhotoItem, {
-        width,
-        height,
-        ...(selectMode && selectedIds.has(photo.id) ? {
-          borderWidth: 2,
-          borderColor: themeStyles.primaryColor
-        } : {}),
-        ...(selectMode && multiSelect && selectedIds.size > 0 && !selectedIds.has(photo.id) ? {
-          opacity: 0.4
-        } : {})
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.justifiedPhotoContainer,
-        children: [/*#__PURE__*/_jsx(ExpoImage, {
-          source: {
-            uri: downloadUrl
-          },
-          style: fileManagementStyles.justifiedPhotoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Photo failed to load, will show placeholder
-          },
-          accessibilityLabel: photo.filename
-        }), selectMode && /*#__PURE__*/_jsx(View, {
-          style: fileManagementStyles.selectionBadge,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
-            size: 20,
-            color: selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor
-          })
-        })]
-      })
-    }, photo.id);
-  }, [oxyServices, selectMode, selectedIds, multiSelect, themeStyles.primaryColor, themeStyles.textColor]);
-
-  // Run initial load once per targetUserId change to avoid accidental loops
-  const lastLoadedFor = useRef(undefined);
-  useEffect(() => {
-    const key = targetUserId || 'anonymous';
-    if (lastLoadedFor.current !== key) {
-      lastLoadedFor.current = key;
-      loadFiles('initial');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [targetUserId]);
-  const renderFileItem = file => {
-    const isImage = file.contentType.startsWith('image/');
-    const isPDF = file.contentType.includes('pdf');
-    const isVideo = file.contentType.startsWith('video/');
-    const isAudio = file.contentType.startsWith('audio/');
-    const hasPreview = isImage || isPDF || isVideo;
-    const borderColor = themeStyles.borderColor;
-    return /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.fileItem, {
-        backgroundColor: themeStyles.secondaryBackgroundColor,
-        borderColor
-      }, selectMode && selectedIds.has(file.id) && {
-        borderColor: themeStyles.primaryColor,
-        borderWidth: 2
-      }],
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: fileManagementStyles.fileContent,
-        onPress: () => handleFileOpen(file),
-        children: [/*#__PURE__*/_jsx(View, {
-          style: fileManagementStyles.filePreviewContainer,
-          children: hasPreview ? /*#__PURE__*/_jsxs(View, {
-            style: fileManagementStyles.filePreview,
-            children: [isImage && /*#__PURE__*/_jsx(ExpoImage, {
-              source: {
-                uri: getSafeDownloadUrlCallback(file, 'thumb')
-              },
-              style: fileManagementStyles.previewImage,
-              contentFit: "cover",
-              transition: 120,
-              cachePolicy: "memory-disk",
-              onError: () => {
-                // Image preview failed to load
-              },
-              accessibilityLabel: file.filename
-            }), isPDF && /*#__PURE__*/_jsxs(View, {
-              style: fileManagementStyles.pdfPreview,
-              children: [/*#__PURE__*/_jsx(Ionicons, {
-                name: "document",
-                size: 32,
-                color: themeStyles.primaryColor
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [fileManagementStyles.pdfLabel, {
-                  color: themeStyles.primaryColor
-                }],
-                children: "PDF"
-              })]
-            }), isVideo && /*#__PURE__*/_jsxs(View, {
-              style: fileManagementStyles.videoPreviewWrapper,
-              children: [/*#__PURE__*/_jsx(ExpoImage, {
-                source: {
-                  uri: getSafeDownloadUrlCallback(file, 'thumb')
-                },
-                style: fileManagementStyles.videoPosterImage,
-                contentFit: "cover",
-                transition: 120,
-                cachePolicy: "memory-disk",
-                onError: _ => {
-                  // If thumbnail not available, we still show icon overlay
-                },
-                accessibilityLabel: file.filename + ' video thumbnail'
-              }), /*#__PURE__*/_jsx(View, {
-                style: fileManagementStyles.videoOverlay,
-                children: /*#__PURE__*/_jsx(Ionicons, {
-                  name: "play",
-                  size: 24,
-                  color: "#FFFFFF"
-                })
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: [fileManagementStyles.fallbackIcon, {
-                display: isImage ? 'none' : 'flex'
-              }],
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: getFileIcon(file.contentType),
-                size: 32,
-                color: themeStyles.primaryColor
-              })
-            }), selectMode && /*#__PURE__*/_jsx(View, {
-              style: fileManagementStyles.selectionBadge,
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline',
-                size: 22,
-                color: selectedIds.has(file.id) ? themeStyles.primaryColor : themeStyles.textColor
-              })
-            })]
-          }) : /*#__PURE__*/_jsx(View, {
-            style: fileManagementStyles.fileIconContainer,
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: getFileIcon(file.contentType),
-              size: 32,
-              color: themeStyles.primaryColor
-            })
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.fileInfo,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [fileManagementStyles.fileName, {
-              color: themeStyles.textColor
-            }],
-            numberOfLines: 1,
-            children: file.filename
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: [fileManagementStyles.fileDetails, {
-              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-            }],
-            children: [formatFileSize(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()]
-          }), file.metadata?.description && /*#__PURE__*/_jsx(Text, {
-            style: [fileManagementStyles.fileDescription, {
-              color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888'
-            }],
-            numberOfLines: 2,
-            children: file.metadata.description
-          })]
-        })]
-      }), !selectMode && /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.fileActions,
-        children: [hasPreview && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.actionButton, {
-            backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
-          }],
-          onPress: () => handleFileOpen(file),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "eye",
-            size: 20,
-            color: themeStyles.primaryColor
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.actionButton, {
-            backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
-          }],
-          onPress: () => handleFileDownload(file.id, file.filename),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "download",
-            size: 20,
-            color: themeStyles.primaryColor
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.actionButton, {
-            backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE'
-          }],
-          onPress: () => {
-            handleFileDelete(file.id, file.filename);
-          },
-          disabled: deleting === file.id,
-          children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: themeStyles.dangerColor
-          }) : /*#__PURE__*/_jsx(Ionicons, {
-            name: "trash",
-            size: 20,
-            color: themeStyles.dangerColor
-          })
-        })]
-      })]
-    }, file.id);
-  };
-
-  // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
-  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 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;
-      if (hasPreview) {
-        if (isImage) {
-          customIcon = /*#__PURE__*/_jsx(View, {
-            style: {
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              overflow: 'hidden'
-            },
-            children: /*#__PURE__*/_jsx(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
-            })
-          });
-        } else if (isVideo) {
-          customIcon = /*#__PURE__*/_jsxs(View, {
-            style: {
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              overflow: 'hidden',
-              backgroundColor: '#000000',
-              position: 'relative'
-            },
-            children: [/*#__PURE__*/_jsx(ExpoImage, {
-              source: {
-                uri: getSafeDownloadUrlCallback(file, 'thumb')
-              },
-              style: {
-                width: 36,
-                height: 36
-              },
-              contentFit: "cover",
-              transition: 120,
-              cachePolicy: "memory-disk",
-              onError: _ => {
-                // If thumbnail not available, we still show icon overlay
-              },
-              accessibilityLabel: file.filename + ' video thumbnail'
-            }), /*#__PURE__*/_jsx(View, {
-              style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: 'rgba(0,0,0,0.25)'
-              },
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: "play",
-                size: 16,
-                color: "#FFFFFF"
-              })
-            })]
-          });
-        } else if (isPDF) {
-          customIcon = /*#__PURE__*/_jsx(View, {
-            style: {
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: '#FF6B6B20'
-            },
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "document",
-              size: 20,
-              color: themeStyles.primaryColor
-            })
-          });
-        }
-      }
-      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,
-        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 ? /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.groupedActions,
-          children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [fileManagementStyles.groupedActionBtn, {
-              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
-            }],
-            onPress: () => handleFileOpen(file),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "eye",
-              size: 18,
-              color: themeStyles.primaryColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [fileManagementStyles.groupedActionBtn, {
-              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
-            }],
-            onPress: () => handleFileDownload(file.id, file.filename),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "download",
-              size: 18,
-              color: themeStyles.primaryColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [fileManagementStyles.groupedActionBtn, {
-              backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE'
-            }],
-            onPress: () => handleFileDelete(file.id, file.filename),
-            disabled: deleting === file.id,
-            children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: themeStyles.dangerColor
-            }) : /*#__PURE__*/_jsx(Ionicons, {
-              name: "trash",
-              size: 18,
-              color: themeStyles.dangerColor
-            })
-          })]
-        }) : undefined,
-        customContentBelow: file.metadata?.description ? /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.groupedDescription, {
-            color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666'
-          }],
-          numberOfLines: 2,
-          children: file.metadata.description
-        }) : undefined
-      };
-    });
-  }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
-
-  // Scroll to selected file after selection
-  useEffect(() => {
-    if (lastSelectedFileId && selectMode) {
-      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
-          const baseItemHeight = 65;
-          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++) {
-            const file = sortedFiles[i];
-            scrollPosition += baseItemHeight;
-            if (file.metadata?.description) {
-              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(() => {
-              scrollViewRef.current?.scrollTo({
-                y: Math.max(0, finalScrollPosition),
-                animated: true
-              });
-            });
-          });
-        }
-      } else if (viewMode === 'photos' && photoScrollViewRef.current) {
-        // 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 (safeContainerWidth > 768) itemsPerRow = 6;else if (safeContainerWidth > 480) itemsPerRow = 4;
-          const scrollContainerPadding = 32;
-          const gaps = (itemsPerRow - 1) * 4;
-          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(() => {
-              photoScrollViewRef.current?.scrollTo({
-                y: Math.max(0, finalScrollPosition),
-                animated: true
-              });
-            });
-          });
-        }
-      }
-    }
-  }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, safeContainerWidth]);
-
-  // Clear selected file ID after scroll animation completes
-  useEffect(() => {
-    if (lastSelectedFileId && scrollViewRef.current) {
-      const timeoutId = setTimeout(() => {
-        setLastSelectedFileId(null);
-      }, 600); // Allow time for scroll animation to complete
-
-      return () => clearTimeout(timeoutId);
-    }
-  }, [lastSelectedFileId]);
-  const renderPhotoItem = (photo, index) => {
-    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-
-    // Calculate photo item width based on actual container size from bottom sheet
-    let itemsPerRow = 3; // Default for 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 = safeContainerWidth - scrollContainerPadding;
-    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.photoItem, {
-        width: itemWidth,
-        height: itemWidth
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsx(View, {
-        style: fileManagementStyles.photoContainer,
-        children: /*#__PURE__*/_jsx(ExpoImage, {
-          source: {
-            uri: downloadUrl
-          },
-          style: fileManagementStyles.photoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Image preview failed to load
-          },
-          accessibilityLabel: photo.filename
-        })
-      })
-    }, photo.id);
-  };
-  const renderPhotoGrid = useCallback(() => {
-    const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
-    if (photos.length === 0) {
-      return /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.emptyState,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "images-outline",
-          size: 64,
-          color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.emptyStateTitle, {
-            color: themeStyles.textColor
-          }],
-          children: "No Photos Yet"
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [fileManagementStyles.emptyStateDescription, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: [" ", user?.id === targetUserId ? `Upload photos to get started. You can select multiple photos at once.` : "This user hasn't uploaded any photos yet", " "]
-        }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.emptyStateButton, {
-            backgroundColor: themeStyles.primaryColor
-          }],
-          onPress: handleFileUpload,
-          disabled: uploading || isPickingDocument,
-          children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "cloud-upload",
-              size: 20,
-              color: "#FFFFFF"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: fileManagementStyles.emptyStateButtonText,
-              children: "Upload Photos"
-            })]
-          })
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsxs(ScrollView, {
-      ref: photoScrollViewRef,
-      style: fileManagementStyles.scrollView,
-      contentContainerStyle: fileManagementStyles.photoScrollContainer,
-      refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
-        refreshing: refreshing,
-        onRefresh: () => loadFiles('refresh'),
-        tintColor: themeStyles.primaryColor
-      }),
-      showsVerticalScrollIndicator: false,
-      onScroll: ({
-        nativeEvent
-      }) => {
-        const {
-          layoutMeasurement,
-          contentOffset,
-          contentSize
-        } = nativeEvent;
-        const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-          loadFiles('more');
-        }
-      },
-      scrollEventThrottle: 250,
-      children: [loadingDimensions && /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.dimensionsLoadingIndicator,
-        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: themeStyles.primaryColor
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.dimensionsLoadingText, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: "Loading photo layout..."
-        })]
-      }), /*#__PURE__*/_jsx(JustifiedPhotoGrid, {
-        photos: photos,
-        photoDimensions: photoDimensions,
-        loadPhotoDimensions: loadPhotoDimensions,
-        createJustifiedRows: createJustifiedRows,
-        renderJustifiedPhotoItem: renderJustifiedPhotoItem,
-        renderSimplePhotoItem: renderPhotoItem,
-        textColor: themeStyles.textColor,
-        containerWidth: safeContainerWidth
-      })]
-    });
-  }, [filteredFiles, themeStyles, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, renderPhotoItem, safeContainerWidth]);
-
-  // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
-
-  const renderEmptyState = () => /*#__PURE__*/_jsxs(View, {
-    style: fileManagementStyles.emptyState,
-    children: [/*#__PURE__*/_jsx(Ionicons, {
-      name: "folder-open-outline",
-      size: 64,
-      color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [fileManagementStyles.emptyStateTitle, {
-        color: themeStyles.textColor
-      }],
-      children: "No Files Yet"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [fileManagementStyles.emptyStateDescription, {
-        color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-      }],
-      children: user?.id === targetUserId ? `Upload files to get started. You can select multiple files at once.` : "This user hasn't uploaded any files yet"
-    }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.emptyStateButton, {
-        backgroundColor: themeStyles.primaryColor
-      }],
-      onPress: handleFileUpload,
-      disabled: uploading || isPickingDocument,
-      children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: "#FFFFFF"
-      }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: "#FFFFFF"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "cloud-upload",
-          size: 20,
-          color: "#FFFFFF"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: fileManagementStyles.emptyStateButtonText,
-          children: "Upload Files"
-        })]
-      })
-    })]
-  });
-
-  // Professional Skeleton Loading Component with Advanced Shimmer Effect
-  const SkeletonLoader = /*#__PURE__*/React.memo(() => {
-    const shimmerAnim = useRef(new Animated.Value(0)).current;
-    const skeletonContainerWidth = safeContainerWidth;
-    useEffect(() => {
-      const shimmer = Animated.loop(Animated.timing(shimmerAnim, {
-        toValue: 1,
-        duration: 2000,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }));
-      shimmer.start();
-      return () => shimmer.stop();
-    }, [shimmerAnim]);
-
-    // Create a sweeping shimmer effect
-    const shimmerTranslateX = shimmerAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-skeletonContainerWidth * 2, skeletonContainerWidth * 2]
-    });
-    const SkeletonBox = ({
-      width,
-      height,
-      borderRadius = 8,
-      style,
-      delay = 0
-    }) => {
-      const delayedTranslateX = shimmerAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay]
-      });
-      return /*#__PURE__*/_jsxs(View, {
-        style: [{
-          width,
-          height,
-          borderRadius,
-          backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
-          overflow: 'hidden',
-          position: 'relative'
-        }, style],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5'
-          }
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            transform: [{
-              translateX: delayedTranslateX
-            }]
-          },
-          children: /*#__PURE__*/_jsx(View, {
-            style: {
-              width: skeletonContainerWidth,
-              height: '100%',
-              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
-              },
-              shadowOpacity: 0.3,
-              shadowRadius: 10
-            }
-          })
-        })]
-      });
-    };
-
-    // Skeleton file item matching GroupedSection structure
-    const SkeletonFileItem = ({
-      index
-    }) => /*#__PURE__*/_jsxs(View, {
-      style: [{
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: themeStyles.borderColor
-      }],
-      children: [/*#__PURE__*/_jsx(SkeletonBox, {
-        width: 44,
-        height: 44,
-        borderRadius: 8,
-        delay: index * 50
-      }), /*#__PURE__*/_jsxs(View, {
-        style: {
-          flex: 1,
-          marginLeft: 12,
-          justifyContent: 'center'
-        },
-        children: [/*#__PURE__*/_jsx(SkeletonBox, {
-          width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%',
-          height: 16,
-          style: {
-            marginBottom: 8
-          },
-          delay: index * 50 + 20
-        }), /*#__PURE__*/_jsx(SkeletonBox, {
-          width: index % 2 === 0 ? '50%' : '60%',
-          height: 12,
-          delay: index * 50 + 40
-        })]
-      })]
-    });
-    return /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.container, {
-        backgroundColor
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [fileManagementStyles.header, {
-          borderBottomColor: themeStyles.borderColor,
-          borderBottomWidth: StyleSheet.hairlineWidth
-        }],
-        children: [/*#__PURE__*/_jsx(SkeletonBox, {
-          width: 44,
-          height: 44,
-          borderRadius: 12
-        }), /*#__PURE__*/_jsxs(View, {
-          style: [fileManagementStyles.headerTitleContainer, {
-            flex: 1
-          }],
-          children: [/*#__PURE__*/_jsx(SkeletonBox, {
-            width: 140,
-            height: 20,
-            style: {
-              marginBottom: 6
-            }
-          }), /*#__PURE__*/_jsx(SkeletonBox, {
-            width: 100,
-            height: 14
-          })]
-        }), /*#__PURE__*/_jsx(SkeletonBox, {
-          width: 44,
-          height: 44,
-          borderRadius: 12
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.controlsBar,
-        children: [/*#__PURE__*/_jsx(SkeletonBox, {
-          width: 100,
-          height: 36,
-          borderRadius: 18
-        }), /*#__PURE__*/_jsx(SkeletonBox, {
-          width: 44,
-          height: 44,
-          borderRadius: 22
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [fileManagementStyles.searchContainer, {
-          backgroundColor: themeStyles.colors.card
-        }],
-        children: /*#__PURE__*/_jsx(SkeletonBox, {
-          width: "100%",
-          height: 44,
-          borderRadius: 12
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: [fileManagementStyles.statsContainer, {
-          backgroundColor: themeStyles.colors.card
-        }],
-        children: [1, 2, 3].map(i => /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.statItem,
-          children: [/*#__PURE__*/_jsx(SkeletonBox, {
-            width: 50,
-            height: 20,
-            style: {
-              marginBottom: 4
-            },
-            delay: i * 30
-          }), /*#__PURE__*/_jsx(SkeletonBox, {
-            width: 40,
-            height: 14,
-            delay: i * 30 + 15
-          })]
-        }, i))
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        style: fileManagementStyles.scrollView,
-        contentContainerStyle: fileManagementStyles.scrollContainer,
-        showsVerticalScrollIndicator: false,
-        children: /*#__PURE__*/_jsx(View, {
-          style: {
-            backgroundColor: themeStyles.colors.card,
-            borderRadius: 18,
-            overflow: 'hidden',
-            marginTop: 8
-          },
-          children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => /*#__PURE__*/_jsx(SkeletonFileItem, {
-            index: i
-          }, i))
-        })
-      })]
-    });
-  });
-  if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonLoader, {});
-  }
-
-  // If a file is opened, show the file viewer
-  if (!selectMode && openedFile) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(FileViewer, {
-        file: openedFile,
-        fileContent: fileContent,
-        loadingFileContent: loadingFileContent,
-        showFileDetailsInViewer: showFileDetailsInViewer,
-        onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
-        onClose: handleCloseFile,
-        onDownload: handleFileDownload,
-        onDelete: handleFileDelete,
-        themeStyles: themeStyles,
-        isOwner: user?.id === targetUserId
-      }), /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsxs(View, {
-      style: fileManagementStyles.container,
-      children: [/*#__PURE__*/_jsx(Header, {
-        title: "Review Files",
-        subtitle: `${pendingFiles.length} file${pendingFiles.length !== 1 ? 's' : ''} ready to upload`,
-        onBack: handleCancelUpload,
-        showBackButton: true,
-        variant: "minimal",
-        elevation: "none",
-        titleAlignment: "left"
-      }), /*#__PURE__*/_jsx(UploadPreview, {
-        visible: true,
-        pendingFiles: pendingFiles,
-        onConfirm: handleConfirmUpload,
-        onCancel: handleCancelUpload,
-        onRemoveFile: removePendingFile,
-        themeStyles: themeStyles,
-        inline: true
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: fileManagementStyles.container,
-    children: [/*#__PURE__*/_jsx(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'}`,
-      rightActions: selectMode && multiSelect ? [{
-        key: 'clear',
-        text: 'Clear',
-        onPress: () => setSelectedIds(new Set()),
-        disabled: selectedIds.size === 0
-      }, {
-        key: 'confirm',
-        text: 'Confirm',
-        onPress: confirmMultiSelection,
-        disabled: selectedIds.size === 0
-      }] : !selectMode && selectedIds.size > 0 ? [{
-        key: 'clear',
-        text: 'Clear',
-        onPress: () => setSelectedIds(new Set())
-      }, {
-        key: 'delete',
-        text: `Delete (${selectedIds.size})`,
-        onPress: handleBulkDelete,
-        icon: 'delete'
-      }, {
-        key: 'visibility',
-        text: 'Visibility',
-        onPress: () => {
-          // Show visibility options menu
-          Alert.alert('Change Visibility', `Change visibility for ${selectedIds.size} file(s)?`, [{
-            text: 'Cancel',
-            style: 'cancel'
-          }, {
-            text: 'Private',
-            onPress: () => handleBulkVisibilityChange('private')
-          }, {
-            text: 'Public',
-            onPress: () => handleBulkVisibilityChange('public')
-          }, {
-            text: 'Unlisted',
-            onPress: () => handleBulkVisibilityChange('unlisted')
-          }]);
-        },
-        icon: 'eye'
-      }] : undefined,
-      onBack: onClose || goBack,
-      showBackButton: true,
-      variant: "minimal",
-      elevation: "none",
-      titleAlignment: "left"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: fileManagementStyles.controlsBar,
-      children: [/*#__PURE__*/_jsx(ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        style: fileManagementStyles.viewModeScroll,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: [fileManagementStyles.viewModeToggle, {
-            backgroundColor: themeStyles.colors.card
-          }],
-          children: [/*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'all',
-            onPress: () => setViewMode('all'),
-            icon: viewMode === 'all' ? 'folder' : 'folder-outline',
-            primaryColor: themeStyles.primaryColor,
-            textColor: themeStyles.textColor,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'photos',
-            onPress: () => setViewMode('photos'),
-            icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
-            primaryColor: themeStyles.primaryColor,
-            textColor: themeStyles.textColor,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'videos',
-            onPress: () => setViewMode('videos'),
-            icon: viewMode === 'videos' ? 'video' : 'video-outline',
-            primaryColor: themeStyles.primaryColor,
-            textColor: themeStyles.textColor,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'documents',
-            onPress: () => setViewMode('documents'),
-            icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
-            primaryColor: themeStyles.primaryColor,
-            textColor: themeStyles.textColor,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'audio',
-            onPress: () => setViewMode('audio'),
-            icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
-            primaryColor: themeStyles.primaryColor,
-            textColor: themeStyles.textColor,
-            style: fileManagementStyles.viewModeButton
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [fileManagementStyles.sortButton, {
-          backgroundColor: themeStyles.colors.card
-        }],
-        onPress: () => {
-          // Cycle through sort options: date -> size -> name -> type -> date
-          const sortOrder = ['date', 'size', 'name', 'type'];
-          const currentIndex = sortOrder.indexOf(sortBy);
-          const nextIndex = (currentIndex + 1) % sortOrder.length;
-          setSortBy(sortOrder[nextIndex]);
-          // Toggle order when cycling back to date
-          if (nextIndex === 0) {
-            setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
-          }
-        },
-        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'sort-numeric-variant' : sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline',
-          size: 16,
-          color: themeStyles.textColor
-        }), /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
-          size: 14,
-          color: themeStyles.colors.secondaryText
-        })]
-      }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [fileManagementStyles.uploadButton, {
-          backgroundColor: themeStyles.primaryColor
-        }],
-        onPress: handleFileUpload,
-        disabled: uploading || isPickingDocument,
-        children: uploading ? /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.uploadProgress,
-          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
-            style: fileManagementStyles.uploadProgressText,
-            children: [uploadProgress.current, "/", uploadProgress.total]
-          })]
-        }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: "#FFFFFF"
-        }) : /*#__PURE__*/_jsx(Ionicons, {
-          name: "add",
-          size: 22,
-          color: "#FFFFFF"
-        })
-      })]
-    }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.searchContainer, {
-        backgroundColor: themeStyles.colors.card
-      }],
-      children: [/*#__PURE__*/_jsx(Ionicons, {
-        name: "search",
-        size: 22,
-        color: themeStyles.colors.icon
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [fileManagementStyles.searchInput, {
-          color: themeStyles.textColor
-        }],
-        placeholder: viewMode === 'photos' ? 'Search photos...' : 'Search files...',
-        placeholderTextColor: themeStyles.colors.secondaryText,
-        value: searchQuery,
-        onChangeText: setSearchQuery
-      }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => setSearchQuery(''),
-        style: fileManagementStyles.searchClearButton,
-        children: /*#__PURE__*/_jsx(Ionicons, {
-          name: "close-circle",
-          size: 22,
-          color: themeStyles.colors.icon
-        })
-      })]
-    }), files.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.statsContainer, {
-        backgroundColor: themeStyles.colors.card
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statValue, {
-            color: themeStyles.textColor
-          }],
-          children: filteredFiles.length
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statLabel, {
-            color: themeStyles.colors.secondaryText
-          }],
-          children: searchQuery.length > 0 ? 'Found' : filteredFiles.length === 1 ? viewMode === 'photos' ? 'Photo' : 'File' : viewMode === 'photos' ? 'Photos' : 'Files'
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statValue, {
-            color: themeStyles.textColor
-          }],
-          children: formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statLabel, {
-            color: themeStyles.colors.secondaryText
-          }],
-          children: searchQuery.length > 0 ? 'Size' : 'Total Size'
-        })]
-      }), searchQuery.length > 0 && /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statValue, {
-            color: themeStyles.textColor
-          }],
-          children: files.length
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statLabel, {
-            color: themeStyles.colors.secondaryText
-          }],
-          children: "Total"
-        })]
-      })]
-    }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollViewRef,
-      style: fileManagementStyles.scrollView,
-      contentContainerStyle: fileManagementStyles.scrollContainer,
-      refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
-        refreshing: refreshing,
-        onRefresh: () => loadFiles('refresh'),
-        tintColor: themeStyles.primaryColor
-      }),
-      onScroll: ({
-        nativeEvent
-      }) => {
-        const {
-          layoutMeasurement,
-          contentOffset,
-          contentSize
-        } = nativeEvent;
-        const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-          loadFiles('more');
-        }
-      },
-      scrollEventThrottle: 250,
-      children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.emptyState,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "search",
-          size: 64,
-          color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.emptyStateTitle, {
-            color: themeStyles.textColor
-          }],
-          children: "No Results Found"
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [fileManagementStyles.emptyStateDescription, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["No files match your search for \"", searchQuery, "\""]
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: [fileManagementStyles.emptyStateButton, {
-            backgroundColor: themeStyles.primaryColor
-          }],
-          onPress: () => setSearchQuery(''),
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "refresh",
-            size: 20,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: fileManagementStyles.emptyStateButtonText,
-            children: "Clear Search"
-          })]
-        })]
-      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(GroupedSection, {
-          items: groupedFileItems
-        }), paging.loadingMore && /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.loadingMoreBar,
-          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: themeStyles.primaryColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [fileManagementStyles.loadingMoreText, {
-              color: themeStyles.textColor
-            }],
-            children: "Loading more..."
-          })]
-        })]
-      })
-    }), !selectMode && /*#__PURE__*/_jsx(FileDetailsModal, {
-      visible: showFileDetails,
-      file: selectedFile,
-      onClose: () => setShowFileDetails(false),
-      onDownload: handleFileDownload,
-      onDelete: handleFileDelete,
-      themeStyles: themeStyles,
-      isOwner: user?.id === targetUserId
-    }), !selectMode && uploading && /*#__PURE__*/_jsx(View, {
-      style: [fileManagementStyles.uploadBannerContainer, {
-        pointerEvents: 'none'
-      }],
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [fileManagementStyles.uploadBanner, {
-          backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE',
-          borderColor: themeStyles.borderColor
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "cloud-upload",
-          size: 18,
-          color: themeStyles.primaryColor
-        }), /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.uploadBannerContent,
-          children: [/*#__PURE__*/_jsxs(Text, {
-            style: [fileManagementStyles.uploadBannerText, {
-              color: themeStyles.textColor
-            }],
-            children: ["Uploading", uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...']
-          }), uploadProgress && uploadProgress.total > 0 && /*#__PURE__*/_jsx(View, {
-            style: [fileManagementStyles.uploadProgressBarContainer, {
-              backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'
-            }],
-            children: /*#__PURE__*/_jsx(View, {
-              style: [fileManagementStyles.uploadProgressBar, {
-                width: `${uploadProgress.current / uploadProgress.total * 100}%`,
-                backgroundColor: themeStyles.primaryColor
-              }]
-            })
-          })]
-        }), /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: themeStyles.primaryColor
-        })]
-      })
-    })]
-  });
-};
-
-// Styles have been moved to components/fileManagement/styles.ts
-
-export default FileManagementScreen;
-//# sourceMappingURL=FileManagementScreen.js.map