@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/FileManagementScreen.js

@@ -0,0 +1,1473 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const expo_image_1 = require("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');
+    }
+};
+const sonner_1 = require("../../lib/sonner");
+const vector_icons_1 = require("@expo/vector-icons");
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+const vector_icons_2 = require("@expo/vector-icons");
+const fileStore_1 = require("../stores/fileStore");
+const Header_1 = __importDefault(require("../components/Header"));
+const JustifiedPhotoGrid_1 = __importDefault(require("../components/photogrid/JustifiedPhotoGrid"));
+const components_1 = require("../components");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const useI18n_1 = require("../hooks/useI18n");
+const useAccountMutations_1 = require("../hooks/mutations/useAccountMutations");
+const fileManagement_1 = require("../utils/fileManagement");
+const FileViewer_1 = require("../components/fileManagement/FileViewer");
+const FileDetailsModal_1 = require("../components/fileManagement/FileDetailsModal");
+const UploadPreview_1 = require("../components/fileManagement/UploadPreview");
+const styles_1 = require("../components/fileManagement/styles");
+/** Extract error message from unknown error type */
+const getErrorMessage = (error) => error instanceof Error ? getErrorMessage(error) : typeof error === 'string' ? error : undefined;
+// Animated button component for smooth transitions
+const AnimatedButton = ({ isSelected, onPress, icon, primaryColor, textColor, style }) => {
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(isSelected ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(animatedValue, {
+            toValue: isSelected ? 1 : 0,
+            duration: 200,
+            easing: react_native_1.Easing.out(react_native_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+                style,
+                {
+                    backgroundColor,
+                },
+            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { children: (0, jsx_runtime_1.jsx)(vector_icons_2.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 } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const uploadFileMutation = (0, useAccountMutations_1.useUploadFile)();
+    const files = (0, fileStore_1.useFiles)();
+    // Ensure containerWidth is a number (TypeScript guard)
+    const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
+    const uploading = (0, fileStore_1.useUploading)();
+    const uploadProgress = (0, fileStore_1.useUploadAggregateProgress)();
+    const deleting = (0, fileStore_1.useDeleting)();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
+    const [paging, setPaging] = (0, react_1.useState)({ offset: 0, limit: 40, total: 0, hasMore: true, loadingMore: false });
+    const [selectedFile, setSelectedFile] = (0, react_1.useState)(null);
+    const [showFileDetails, setShowFileDetails] = (0, react_1.useState)(false);
+    // In selectMode we never open the detailed viewer
+    const [openedFile, setOpenedFile] = (0, react_1.useState)(null);
+    const [fileContent, setFileContent] = (0, react_1.useState)(null);
+    const [loadingFileContent, setLoadingFileContent] = (0, react_1.useState)(false);
+    const [showFileDetailsInViewer, setShowFileDetailsInViewer] = (0, react_1.useState)(false);
+    const [isPickingDocument, setIsPickingDocument] = (0, react_1.useState)(false);
+    const [viewMode, setViewMode] = (0, react_1.useState)('all');
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [sortBy, setSortBy] = (0, react_1.useState)('date');
+    const [sortOrder, setSortOrder] = (0, react_1.useState)('desc');
+    const [pendingFiles, setPendingFiles] = (0, react_1.useState)([]);
+    const [showUploadPreview, setShowUploadPreview] = (0, react_1.useState)(false);
+    // Derived filtered and sorted files (avoid setState loops)
+    const filteredFiles = (0, react_1.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?.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] = (0, react_1.useState)({});
+    const [loadingDimensions, setLoadingDimensions] = (0, react_1.useState)(false);
+    const uploadStartRef = (0, react_1.useRef)(null);
+    const MIN_BANNER_MS = 600;
+    // Selection state
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)(new Set(initialSelectedIds));
+    const [lastSelectedFileId, setLastSelectedFileId] = (0, react_1.useState)(null);
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const photoScrollViewRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)(new Map()); // Track item positions
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (initialSelectedIds?.length) {
+            setSelectedIds(new Set(initialSelectedIds));
+        }
+    }, [initialSelectedIds]);
+    const toggleSelect = (0, react_1.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) {
+                sonner_1.toast.error(t('fileManagement.toasts.fileTypeBlocked'));
+                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) {
+                    sonner_1.toast.error(t('fileManagement.toasts.maxSelection', { max: 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 = (0, react_1.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 = (0, react_1.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(() => {
+            fileStore_1.useFileStore.getState().setUploading(false);
+            uploadStartRef.current = null;
+        }, remaining);
+    }, []);
+    // Helper to safely request a thumbnail variant only for image mime types.
+    const getSafeDownloadUrlCallback = (0, react_1.useCallback)((file, variant = 'thumb') => {
+        return (0, fileManagement_1.getSafeDownloadUrl)(file, variant, (fileId, variant) => oxyServices.getFileDownloadUrl(fileId, variant));
+    }, [oxyServices]);
+    // Use centralized theme styles hook for consistency
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const baseThemeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    // FileManagementScreen uses a slightly different light background
+    const themeStyles = (0, react_1.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 = (0, fileStore_1.useFileStore)(s => s.setUploading);
+    const storeSetUploadProgress = (0, fileStore_1.useFileStore)(s => s.setUploadProgress);
+    const storeSetDeleting = (0, fileStore_1.useFileStore)(s => s.setDeleting);
+    const loadFiles = (0, react_1.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
+                fileStore_1.useFileStore.getState().setFiles(assets, { merge: true });
+                setPaging(p => ({
+                    ...p,
+                    offset: effectiveOffset,
+                    total: response.total || (effectiveOffset + assets.length),
+                    hasMore: response.hasMore,
+                    loadingMore: false,
+                }));
+            }
+            else {
+                fileStore_1.useFileStore.getState().setFiles(assets, { merge: false });
+                setPaging(p => ({
+                    ...p,
+                    offset: 0,
+                    total: response.total || assets.length,
+                    hasMore: response.hasMore,
+                    loadingMore: false,
+                }));
+            }
+        }
+        catch (error) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.loadFailed'));
+        }
+        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 = (0, react_1.useRef)(paging);
+    (0, react_1.useEffect)(() => { prevPagingRef.current = paging; }, [paging]);
+    // (removed effect; filteredFiles is memoized)
+    // Load photo dimensions for justified grid - unified approach using Image.getSize
+    const loadPhotoDimensions = (0, react_1.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) => {
+                        react_native_1.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 = (0, react_1.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(', ');
+                sonner_1.toast.error(t('fileManagement.toasts.filesTooLarge', { files: 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}`;
+                        if (__DEV__) {
+                            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: [],
+                    };
+                    fileStore_1.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
+                    const f = result?.file ?? result?.files?.[0];
+                    if (f) {
+                        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
+                        fileStore_1.useFileStore.getState().removeFile(optimisticId);
+                        fileStore_1.useFileStore.getState().addFile(merged, { prepend: true });
+                        uploadedFiles.push(merged);
+                        successCount++;
+                    }
+                    else {
+                        // Fallback: will reconcile on later list refresh
+                        fileStore_1.useFileStore.getState().updateFile(optimisticId, { metadata: { uploading: false } });
+                        if (__DEV__) {
+                            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 = getErrorMessage(error) || String(error) || 'Upload failed';
+                    const fullError = `${fileName}: ${errorMessage}`;
+                    errors.push(fullError);
+                    if (__DEV__) {
+                        console.error('File upload failed:', {
+                            fileName,
+                            fileSize: raw.size,
+                            fileType: raw.type,
+                            error: errorMessage,
+                            stack: (error instanceof Error) ? error.stack : undefined
+                        });
+                    }
+                    // Remove optimistic file on error (use the same optimisticId from above)
+                    fileStore_1.useFileStore.getState().removeFile(optimisticId);
+                }
+            }
+            // Show success/error messages
+            if (successCount > 0) {
+                sonner_1.toast.success(t('fileManagement.toasts.uploadSuccess', { count: successCount }));
+            }
+            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` : ''}`
+                    : '';
+                sonner_1.toast.error(`${t('fileManagement.toasts.uploadFailed', { count: failureCount })}${errorDetails}`);
+            }
+            // Silent background refresh to ensure metadata/variants updated
+            setTimeout(() => { loadFiles('silent'); }, 1200);
+        }
+        catch (error) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
+        }
+        finally {
+            storeSetUploadProgress(null);
+        }
+        return uploadedFiles;
+    };
+    // biome-ignore lint/suspicious/noExplicitAny: Files from document picker may have extra properties like uri
+    const handleFileSelection = (0, react_1.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) {
+                if (__DEV__) {
+                    console.error('Invalid file: file is null or undefined');
+                }
+                sonner_1.toast.error(t('fileManagement.toasts.invalidFileMissing'));
+                continue;
+            }
+            if (!file.name || typeof file.name !== 'string') {
+                if (__DEV__) {
+                    console.error('Invalid file: missing or invalid name property', file);
+                }
+                sonner_1.toast.error(t('fileManagement.toasts.invalidFileName'));
+                continue;
+            }
+            if (file.size === undefined || file.size === null || Number.isNaN(file.size)) {
+                if (__DEV__) {
+                    console.error('Invalid file: missing or invalid size property', file);
+                }
+                sonner_1.toast.error(t('fileManagement.toasts.invalidFileSize', { name: file.name || 'unknown' }));
+                continue;
+            }
+            if (file.size <= 0) {
+                if (__DEV__) {
+                    console.error('Invalid file: file size is zero or negative', file);
+                }
+                sonner_1.toast.error(t('fileManagement.toasts.fileEmpty', { name: file.name }));
+                continue;
+            }
+            // Validate file size
+            if (file.size > MAX_FILE_SIZE) {
+                sonner_1.toast.error(t('fileManagement.toasts.fileTooLarge', { name: file.name, maxSize: (0, fileManagement_1.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) {
+                        if (__DEV__) {
+                            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) {
+            sonner_1.toast.error(t('fileManagement.toasts.noValidFiles'));
+            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) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
+            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) {
+            sonner_1.toast.error(t('fileManagement.toasts.waitForSelection'));
+            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);
+                sonner_1.toast.error(t('fileManagement.toasts.noFilesSelected'));
+                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) => (0, fileManagement_1.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'}": ${getErrorMessage(error) || '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` : '');
+                sonner_1.toast.error(t('fileManagement.toasts.loadSomeFailed', { errors: errorMessage }));
+            }
+            // Process successfully converted files
+            if (files.length > 0) {
+                await handleFileSelection(files);
+            }
+            else {
+                // Files were selected but none could be converted
+                sonner_1.toast.error(t('fileManagement.toasts.noFilesProcessed'));
+            }
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('File upload error:', error);
+            }
+            if (getErrorMessage(error)?.includes('expo-document-picker') || getErrorMessage(error)?.includes('Different document picking in progress')) {
+                if (getErrorMessage(error)?.includes('Different document picking in progress')) {
+                    sonner_1.toast.error(t('fileManagement.toasts.waitForSelection'));
+                }
+                else {
+                    sonner_1.toast.error(t('fileManagement.toasts.filePickerNotAvailable'));
+                }
+            }
+            else {
+                sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.selectFilesFailed'));
+            }
+        }
+        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 (0, fileManagement_1.confirmAction)(t('fileManagement.confirms.deleteFile', { filename }), t('fileManagement.deleteFile'), t('fileManagement.confirm'), t('common.cancel'));
+        if (!confirmed) {
+            return;
+        }
+        try {
+            storeSetDeleting(fileId);
+            await oxyServices.deleteFile(fileId);
+            sonner_1.toast.success(t('fileManagement.toasts.deleteSuccess'));
+            // Reload files after successful deletion
+            // Optimistic remove
+            fileStore_1.useFileStore.getState().removeFile(fileId);
+            // Silent background reconcile
+            setTimeout(() => loadFiles('silent'), 800);
+        }
+        catch (error) {
+            // Provide specific error messages
+            if (getErrorMessage(error)?.includes('File not found') || getErrorMessage(error)?.includes('404')) {
+                sonner_1.toast.error(t('fileManagement.toasts.fileNotFound'));
+                // Still reload files to refresh the list
+                setTimeout(() => loadFiles('silent'), 800);
+            }
+            else if (getErrorMessage(error)?.includes('permission') || getErrorMessage(error)?.includes('403')) {
+                sonner_1.toast.error(t('fileManagement.toasts.noPermission'));
+            }
+            else {
+                sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
+            }
+        }
+        finally {
+            storeSetDeleting(null);
+        }
+    };
+    const handleBulkDelete = (0, react_1.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 (0, fileManagement_1.confirmAction)(t('fileManagement.confirms.deleteFiles', { count: selectedFiles.length }), t('fileManagement.deleteFiles'), t('fileManagement.confirm'), t('common.cancel'));
+        if (!confirmed)
+            return;
+        try {
+            const deletePromises = Array.from(selectedIds).map(async (fileId) => {
+                try {
+                    await oxyServices.deleteFile(fileId);
+                    fileStore_1.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) {
+                sonner_1.toast.success(t('fileManagement.toasts.bulkDeleteSuccess', { count: successful }));
+            }
+            if (failed > 0) {
+                sonner_1.toast.error(t('fileManagement.toasts.bulkDeleteFailed', { count: failed }));
+            }
+            setSelectedIds(new Set());
+            setTimeout(() => loadFiles('silent'), 800);
+        }
+        catch (error) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
+        }
+    }, [selectedIds, files, oxyServices, loadFiles]);
+    const handleBulkVisibilityChange = (0, react_1.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) {
+                sonner_1.toast.success(t('fileManagement.toasts.visibilitySuccess', { count: successful, visibility }));
+                // Update file metadata in store
+                Array.from(selectedIds).forEach(fileId => {
+                    fileStore_1.useFileStore.getState().updateFile(fileId, {
+                        metadata: { ...files.find(f => f.id === fileId)?.metadata, visibility }
+                    });
+                });
+            }
+            if (failed > 0) {
+                sonner_1.toast.error(t('fileManagement.toasts.visibilityFailed', { count: failed }));
+            }
+            setTimeout(() => loadFiles('silent'), 800);
+        }
+        catch (error) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
+        }
+    }, [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);
+                    sonner_1.toast.success(t('fileManagement.toasts.downloadStarted'));
+                }
+                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);
+                    sonner_1.toast.success(t('fileManagement.toasts.downloadSuccess'));
+                }
+            }
+            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
+                sonner_1.toast.info(t('fileManagement.toasts.downloadMobile'));
+            }
+        }
+        catch (error) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
+        }
+    };
+    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 (getErrorMessage(error)?.includes('404') || getErrorMessage(error)?.includes('not found')) {
+                        sonner_1.toast.error(t('fileManagement.toasts.fileNotFoundContent'));
+                    }
+                    else {
+                        sonner_1.toast.error(t('fileManagement.toasts.loadContentFailed'));
+                    }
+                    setFileContent(null);
+                }
+            }
+            else {
+                // For non-viewable files, don't load content
+                setFileContent(null);
+            }
+        }
+        catch (error) {
+            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.openFailed'));
+        }
+        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 = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                styles_1.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: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.simplePhotoContainer, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: downloadUrl }, style: styles_1.fileManagementStyles.simplePhotoImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
+                            // Photo failed to load, will show placeholder
+                        }, accessibilityLabel: photo.filename }), selectMode && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.selectionBadge, children: (0, jsx_runtime_1.jsx)(vector_icons_1.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 = (0, react_1.useCallback)((photo, width, height, isLast) => {
+        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                styles_1.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: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.justifiedPhotoContainer, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: downloadUrl }, style: styles_1.fileManagementStyles.justifiedPhotoImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
+                            // Photo failed to load, will show placeholder
+                        }, accessibilityLabel: photo.filename }), selectMode && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.selectionBadge, children: (0, jsx_runtime_1.jsx)(vector_icons_1.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 = (0, react_1.useRef)(undefined);
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.fileItem, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }, selectMode && selectedIds.has(file.id) && { borderColor: themeStyles.primaryColor, borderWidth: 2 }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles_1.fileManagementStyles.fileContent, onPress: () => handleFileOpen(file), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.filePreviewContainer, children: hasPreview ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.filePreview, children: [isImage && ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: getSafeDownloadUrlCallback(file, 'thumb') }, style: styles_1.fileManagementStyles.previewImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
+                                            // Image preview failed to load
+                                        }, accessibilityLabel: file.filename })), isPDF && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.pdfPreview, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "document", size: 32, color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.pdfLabel, { color: themeStyles.primaryColor }], children: "PDF" })] })), isVideo && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.videoPreviewWrapper, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: getSafeDownloadUrlCallback(file, 'thumb') }, style: styles_1.fileManagementStyles.videoPosterImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: (_) => {
+                                                    // If thumbnail not available, we still show icon overlay
+                                                }, accessibilityLabel: `${file.filename} video thumbnail` }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.videoOverlay, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "play", size: 24, color: "#FFFFFF" }) })] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.fallbackIcon, { display: isImage ? 'none' : 'flex' }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: (0, fileManagement_1.getFileIcon)(file.contentType), size: 32, color: themeStyles.primaryColor }) }), selectMode && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.selectionBadge, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline', size: 22, color: selectedIds.has(file.id) ? themeStyles.primaryColor : themeStyles.textColor }) }))] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.fileIconContainer, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: (0, fileManagement_1.getFileIcon)(file.contentType), size: 32, color: themeStyles.primaryColor }) })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileName, { color: themeStyles.textColor }], numberOfLines: 1, children: file.filename }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileDetails, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: [(0, fileManagement_1.formatFileSize)(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()] }), file.metadata?.description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888' }], numberOfLines: 2, children: file.metadata.description }))] })] }), !selectMode && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileActions, children: [hasPreview && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileOpen(file), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "eye", size: 20, color: themeStyles.primaryColor }) })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileDownload(file.id, file.filename), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "download", size: 20, color: themeStyles.primaryColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }], onPress: () => {
+                                handleFileDelete(file.id, file.filename);
+                            }, disabled: deleting === file.id, children: deleting === file.id ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.dangerColor })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash", size: 20, color: themeStyles.dangerColor })) })] }))] }, file.id));
+    };
+    // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
+    // biome-ignore lint/suspicious/noExplicitAny: GroupedSection items have dynamic props
+    const groupedFileItems = (0, react_1.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 = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(expo_image_1.Image, { 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 = ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { 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` }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.25)' }, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "play", size: 16, color: "#FFFFFF" }) })] }));
+                }
+                else if (isPDF) {
+                    customIcon = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF6B6B20' }, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "document", size: 20, color: themeStyles.primaryColor }) }));
+                }
+            }
+            return {
+                id: file.id,
+                customIcon: customIcon,
+                icon: !hasPreview ? (0, fileManagement_1.getFileIcon)(file.contentType) : undefined,
+                iconColor: themeStyles.primaryColor,
+                title: file.filename,
+                subtitle: `${(0, fileManagement_1.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) ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.groupedActions, children: [(isImage || isVideo || file.contentType.includes('pdf')) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileOpen(file), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "eye", size: 18, color: themeStyles.primaryColor }) })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileDownload(file.id, file.filename), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "download", size: 18, color: themeStyles.primaryColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }], onPress: () => handleFileDelete(file.id, file.filename), disabled: deleting === file.id, children: deleting === file.id ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.dangerColor })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash", size: 18, color: themeStyles.dangerColor })) })] })) : undefined,
+                customContentBelow: file.metadata?.description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.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
+    (0, react_1.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
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                styles_1.fileManagementStyles.photoItem,
+                {
+                    width: itemWidth,
+                    height: itemWidth,
+                }
+            ], onPress: () => handleFileOpen(photo), activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.photoContainer, children: (0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: downloadUrl }, style: styles_1.fileManagementStyles.photoImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
+                        // Image preview failed to load
+                    }, accessibilityLabel: photo.filename }) }) }, photo.id));
+    };
+    const renderPhotoGrid = (0, react_1.useCallback)(() => {
+        const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
+        if (photos.length === 0) {
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.emptyState, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "images-outline", size: 64, color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }], children: t('fileManagement.emptyPhotos.title') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: [" ", user?.id === targetUserId
+                                ? t('fileManagement.emptyPhotos.ownDescription')
+                                : t('fileManagement.emptyPhotos.otherDescription'), " "] }), user?.id === targetUserId && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }], onPress: handleFileUpload, disabled: uploading || isPickingDocument, children: uploading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : isPickingDocument ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.emptyStateButtonText, children: t('fileManagement.uploadPhotos') })] })) }))] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { ref: photoScrollViewRef, style: styles_1.fileManagementStyles.scrollView, contentContainerStyle: styles_1.fileManagementStyles.photoScrollContainer, refreshControl: (0, jsx_runtime_1.jsx)(react_native_1.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 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.dimensionsLoadingIndicator, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('fileManagement.loadingPhotoLayout') })] })), (0, jsx_runtime_1.jsx)(JustifiedPhotoGrid_1.default, { 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 = () => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.emptyState, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "folder-open-outline", size: 64, color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }], children: t('fileManagement.emptyFiles.title') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: user?.id === targetUserId
+                    ? t('fileManagement.emptyFiles.ownDescription')
+                    : t('fileManagement.emptyFiles.otherDescription') }), user?.id === targetUserId && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }], onPress: handleFileUpload, disabled: uploading || isPickingDocument, children: uploading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : isPickingDocument ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.emptyStateButtonText, children: t('fileManagement.uploadFiles') })] })) }))] }));
+    // Professional Skeleton Loading Component with Advanced Shimmer Effect
+    const SkeletonLoader = react_1.default.memo(() => {
+        const shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+        const skeletonContainerWidth = safeContainerWidth;
+        (0, react_1.useEffect)(() => {
+            const shimmer = react_native_1.Animated.loop(react_native_1.Animated.timing(shimmerAnim, {
+                toValue: 1,
+                duration: 2000,
+                easing: react_native_1.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 ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    {
+                        width,
+                        height,
+                        borderRadius,
+                        backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
+                        overflow: 'hidden',
+                        position: 'relative',
+                    },
+                    style,
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
+                        } }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            transform: [{ translateX: delayedTranslateX }],
+                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.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 }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 16,
+                    paddingVertical: 12,
+                    backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
+                    borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+                    borderBottomColor: themeStyles.borderColor,
+                },
+            ], children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 8, delay: index * 50 }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, marginLeft: 12, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%', height: 16, style: { marginBottom: 8 }, delay: index * 50 + 20 }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: index % 2 === 0 ? '50%' : '60%', height: 12, delay: index * 50 + 40 })] })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.container, { backgroundColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.header, { borderBottomColor: themeStyles.borderColor, borderBottomWidth: react_native_1.StyleSheet.hairlineWidth }], children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 12 }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.headerTitleContainer, { flex: 1 }], children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 140, height: 20, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 100, height: 14 })] }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 12 })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.controlsBar, children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 100, height: 36, borderRadius: 18 }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 22 })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.searchContainer, {
+                            backgroundColor: themeStyles.colors.card,
+                        }], children: (0, jsx_runtime_1.jsx)(SkeletonBox, { width: "100%", height: 44, borderRadius: 12 }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.statsContainer, {
+                            backgroundColor: themeStyles.colors.card,
+                        }], children: [1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 50, height: 20, style: { marginBottom: 4 }, delay: i * 30 }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 40, height: 14, delay: i * 30 + 15 })] }, i))) }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles_1.fileManagementStyles.scrollView, contentContainerStyle: styles_1.fileManagementStyles.scrollContainer, showsVerticalScrollIndicator: false, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            backgroundColor: themeStyles.colors.card,
+                            borderRadius: 18,
+                            overflow: 'hidden',
+                            marginTop: 8,
+                        }, children: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => ((0, jsx_runtime_1.jsx)(SkeletonFileItem, { index: i }, i))) }) })] }));
+    });
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(SkeletonLoader, {});
+    }
+    // If a file is opened, show the file viewer
+    if (!selectMode && openedFile) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: openedFile, fileContent: fileContent, loadingFileContent: loadingFileContent, showFileDetailsInViewer: showFileDetailsInViewer, onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer), onClose: handleCloseFile, onDownload: handleFileDownload, onDelete: handleFileDelete, themeStyles: themeStyles, isOwner: user?.id === targetUserId }), (0, jsx_runtime_1.jsx)(FileDetailsModal_1.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 ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.container, children: [(0, jsx_runtime_1.jsx)(Header_1.default, { title: t('fileManagement.reviewFiles'), subtitle: t('fileManagement.readyToUpload', { count: pendingFiles.length }), onBack: handleCancelUpload, showBackButton: true, variant: "minimal", elevation: "none", titleAlignment: "left" }), (0, jsx_runtime_1.jsx)(UploadPreview_1.UploadPreview, { visible: true, pendingFiles: pendingFiles, onConfirm: handleConfirmUpload, onCancel: handleCancelUpload, onRemoveFile: removePendingFile, themeStyles: themeStyles, inline: true })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.container, children: [(0, jsx_runtime_1.jsx)(Header_1.default, { title: selectMode ? (multiSelect ? (maxSelection ? t('fileManagement.selectedWithMax', { count: selectedIds.size, max: maxSelection }) : t('fileManagement.selected', { count: selectedIds.size })) : t('fileManagement.selectFile')) : (viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title')), subtitle: selectMode ? (multiSelect ? t('fileManagement.available', { count: filteredFiles.length }) : t('fileManagement.tapToSelect')) : (filteredFiles.length === 1 ? t('fileManagement.itemCount', { count: filteredFiles.length }) : t('fileManagement.itemCount_plural', { count: filteredFiles.length })), rightActions: selectMode && multiSelect ? [
+                    {
+                        key: 'clear',
+                        text: t('fileManagement.clear'),
+                        onPress: () => setSelectedIds(new Set()),
+                        disabled: selectedIds.size === 0,
+                    },
+                    {
+                        key: 'confirm',
+                        text: t('fileManagement.confirm'),
+                        onPress: confirmMultiSelection,
+                        disabled: selectedIds.size === 0,
+                    }
+                ] : !selectMode && selectedIds.size > 0 ? [
+                    {
+                        key: 'clear',
+                        text: t('fileManagement.clear'),
+                        onPress: () => setSelectedIds(new Set()),
+                    },
+                    {
+                        key: 'delete',
+                        text: t('fileManagement.delete', { count: selectedIds.size }),
+                        onPress: handleBulkDelete,
+                        icon: 'delete',
+                    },
+                    {
+                        key: 'visibility',
+                        text: t('fileManagement.visibility'),
+                        onPress: () => {
+                            // Show visibility options menu
+                            react_native_1.Alert.alert(t('fileManagement.changeVisibility'), t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size }), [
+                                { text: t('common.cancel'), style: 'cancel' },
+                                { text: t('fileManagement.private'), onPress: () => handleBulkVisibilityChange('private') },
+                                { text: t('fileManagement.public'), onPress: () => handleBulkVisibilityChange('public') },
+                                { text: t('fileManagement.unlisted'), onPress: () => handleBulkVisibilityChange('unlisted') },
+                            ]);
+                        },
+                        icon: 'eye',
+                    }
+                ] : undefined, onBack: onClose || goBack, showBackButton: true, variant: "minimal", elevation: "none", titleAlignment: "left" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.controlsBar, children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles_1.fileManagementStyles.viewModeScroll, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                styles_1.fileManagementStyles.viewModeToggle,
+                                {
+                                    backgroundColor: themeStyles.colors.card,
+                                }
+                            ], children: [(0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'all', onPress: () => setViewMode('all'), icon: viewMode === 'all' ? 'folder' : 'folder-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'photos', onPress: () => setViewMode('photos'), icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'videos', onPress: () => setViewMode('videos'), icon: viewMode === 'videos' ? 'video' : 'video-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'documents', onPress: () => setViewMode('documents'), icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'audio', onPress: () => setViewMode('audio'), icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.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: [(0, jsx_runtime_1.jsx)(vector_icons_2.MaterialCommunityIcons, { name: sortBy === 'date' ? 'calendar' :
+                                    sortBy === 'size' ? 'sort-numeric-variant' :
+                                        sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline', size: 16, color: themeStyles.textColor }), (0, jsx_runtime_1.jsx)(vector_icons_2.MaterialCommunityIcons, { name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down', size: 14, color: themeStyles.colors.secondaryText })] }), user?.id === targetUserId && (!selectMode || (selectMode && allowUploadInSelectMode)) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.uploadButton, { backgroundColor: themeStyles.primaryColor }], onPress: handleFileUpload, disabled: uploading || isPickingDocument, children: uploading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadProgress, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" }), uploadProgress && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles_1.fileManagementStyles.uploadProgressText, children: [uploadProgress.current, "/", uploadProgress.total] }))] })) : isPickingDocument ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "add", size: 22, color: "#FFFFFF" })) }))] }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    styles_1.fileManagementStyles.searchContainer,
+                    {
+                        backgroundColor: themeStyles.colors.card,
+                    }
+                ], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 22, color: themeStyles.colors.icon }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles_1.fileManagementStyles.searchInput, { color: themeStyles.textColor }], placeholder: viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles'), placeholderTextColor: themeStyles.colors.secondaryText, value: searchQuery, onChangeText: setSearchQuery }), searchQuery.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setSearchQuery(''), style: styles_1.fileManagementStyles.searchClearButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close-circle", size: 22, color: themeStyles.colors.icon }) }))] })), files.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    styles_1.fileManagementStyles.statsContainer,
+                    {
+                        backgroundColor: themeStyles.colors.card,
+                    }
+                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statValue, { color: themeStyles.textColor }], children: filteredFiles.length }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }], children: searchQuery.length > 0 ? t('fileManagement.found') : (filteredFiles.length === 1 ? (viewMode === 'photos' ? t('fileManagement.photo') : t('fileManagement.file')) : (viewMode === 'photos' ? t('fileManagement.photos_stat') : t('fileManagement.files'))) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statValue, { color: themeStyles.textColor }], children: (0, fileManagement_1.formatFileSize)(filteredFiles.reduce((total, file) => total + file.length, 0)) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }], children: searchQuery.length > 0 ? t('fileManagement.size') : t('fileManagement.totalSize') })] }), searchQuery.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statValue, { color: themeStyles.textColor }], children: files.length }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }], children: t('fileManagement.total') })] }))] })), viewMode === 'photos' ? (renderPhotoGrid()) : ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: scrollViewRef, style: styles_1.fileManagementStyles.scrollView, contentContainerStyle: styles_1.fileManagementStyles.scrollContainer, refreshControl: (0, jsx_runtime_1.jsx)(react_native_1.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 ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.emptyState, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 64, color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }], children: t('fileManagement.noResults.title') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('fileManagement.noResults.description', { query: searchQuery }) }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }], onPress: () => setSearchQuery(''), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "refresh", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.emptyStateButtonText, children: t('fileManagement.clearSearch') })] })] })) : filteredFiles.length === 0 ? renderEmptyState() : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: groupedFileItems }), paging.loadingMore && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.loadingMoreBar, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.loadingMoreText, { color: themeStyles.textColor }], children: t('fileManagement.loadingMore') })] }))] })) })), !selectMode && ((0, jsx_runtime_1.jsx)(FileDetailsModal_1.FileDetailsModal, { visible: showFileDetails, file: selectedFile, onClose: () => setShowFileDetails(false), onDownload: handleFileDownload, onDelete: handleFileDelete, themeStyles: themeStyles, isOwner: user?.id === targetUserId })), !selectMode && uploading && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadBannerContainer, { pointerEvents: 'none' }], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadBanner, { backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE', borderColor: themeStyles.borderColor }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 18, color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadBannerContent, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadBannerText, { color: themeStyles.textColor }], children: [t('fileManagement.uploading'), uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'] }), uploadProgress && uploadProgress.total > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadProgressBarContainer, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles_1.fileManagementStyles.uploadProgressBar,
+                                            {
+                                                width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
+                                                backgroundColor: themeStyles.primaryColor
+                                            }
+                                        ] }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.primaryColor })] }) }))] }));
+};
+// Styles have been moved to components/fileManagement/styles.ts
+exports.default = FileManagementScreen;