create-gufran-expo-app 2.0.4 → 2.0.5

package/template/src/screens/chat/ChatScreen.tsx

@@ -1,1819 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { View, Text, StyleSheet, StatusBar, Platform, TouchableOpacity, Image, Keyboard, ActivityIndicator, Alert, Modal, TextInput, ScrollView } from "react-native";
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { GiftedChat, Bubble, InputToolbar, Composer } from 'react-native-gifted-chat';
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useIsFocused } from "@react-navigation/native";
-import { ImageZoom } from '@likashefqet/react-native-image-zoom';
-import { ChatScreenProps } from "@navigation";
-import { theme } from "@constants";
-import { moderateScale } from "@utils/scaling";
-import { Fonts } from "@constants/Fonts";
-import SVG from "@assets/icons";
-import * as SignalR from "@microsoft/signalr";
-import { useInfiniteChatMessages, ChatMessage, mainService } from "@services/mainServices";
-import { pickImage } from "@utils";
-import ToastManager from "@components/common/ToastManager";
-import { useImageUpload } from "../../hooks";
-import { CHAT_HUB_URL } from "@services";
-
-export const ChatScreen: React.FC<ChatScreenProps> = ({
-    navigation,
-    route,
-}) => {
-    const { itemDetails, memberId, teamId, team, userType } = route?.params as any ?? {};
-    const [messages, setMessages] = useState([]);
-
-
-    // Use refs for connection management to avoid unnecessary re-renders
-    const connectionRef = useRef<SignalR.HubConnection | null>(null);
-    const isConnectedRef = useRef(false);
-    const isConnectingRef = useRef(false);
-    const reconnectAttemptRef = useRef(0);
-
-    // UI states
-    const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
-    const [showReportModal, setShowReportModal] = useState(false);
-    const [selectedMessage, setSelectedMessage] = useState<any>(null);
-    const [reportReason, setReportReason] = useState('');
-    const [reportError, setReportError] = useState('');
-    const [showMoreModal, setShowMoreModal] = useState(false);
-    const [isMuted, setIsMuted] = useState(false);
-    // Image selection state
-    const [selectedImage, setSelectedImage] = useState<any>(null);
-    const [isUploadingImage, setIsUploadingImage] = useState(false);
-    // Fullscreen image viewer state
-    const [isImageViewerVisible, setIsImageViewerVisible] = useState(false);
-    const [imageViewerUri, setImageViewerUri] = useState<string | null>(null);
-
-    let keyboardDidShowListenerRef = useRef<any>(null);
-    let keyboardDidHideListenerRef = useRef<any>(null);
-
-
-    // Track if this screen is focused
-    const isFocused = useIsFocused();
-
-    // Add API call for fetching messages with pagination
-    const { data: chatMessagesData, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading: isLoadingMessages, error: messagesError, refetch: refetchMessages } = useInfiniteChatMessages(
-        teamId || 46,
-        memberId || 123,
-        itemDetails?.threadId || 27,
-        userType); // Pass userType to the hook
-
-    const isMute = chatMessagesData?.pages?.[0]?.data?.data?.isMute;
-
-
-    console.log("chatMessagesData", JSON.stringify(chatMessagesData?.pages?.[0]?.data?.data?.isMute));
-
-
-    // Transform API messages to GiftedChat format
-    const transformedMessages = useMemo(() => {
-        if (!chatMessagesData?.pages || chatMessagesData.pages.length === 0) {
-            console.log("No chat messages data available");
-            return [];
-        }
-
-        const allMessages: any[] = [];
-
-        chatMessagesData.pages.forEach((page, pageIndex) => {
-            // Check if page has the expected structure
-            if (!page?.data?.data?.lstMessages) {
-                console.log(`Page ${pageIndex} has invalid structure:`, page);
-                return;
-            }
-
-            const { lstMessages } = page.data.data;
-
-            lstMessages.forEach((message: ChatMessage, messageIndex) => {
-                // Handle sender image - use full URL if it starts with http, otherwise use default
-                let senderAvatar = null;
-                if (message.senderImage) {
-                    if (message.senderImage.startsWith('http')) {
-                        senderAvatar = message.senderImage;
-                    } else if (message.senderImage !== '/assets/images/noimg.png') {
-                        // If it's a relative path but not the default no-image path
-                        senderAvatar = `https://clubyakkastorage.blob.core.windows.net${message.senderImage}`;
-                    }
-                }
-
-
-
-
-                // Parse sent date with fallback
-                let messageDate = new Date();
-                if (message.sentAt) {
-
-                    try {
-                        // First try parsing the date as-is (works for most browsers)
-                        let parsedDate = new Date(message.sentAt);
-
-                        // If that doesn't work, try manual parsing
-                        if (isNaN(parsedDate.getTime())) {
-                            // Split date and time parts
-                            const [datePart, timePart, period] = message.sentAt.split(' ');
-                            const [month, day, year] = datePart.split('/');
-                            const [hours, minutes, seconds] = timePart.split(':');
-
-                            // Convert to 24-hour format
-                            let hour24 = parseInt(hours, 10);
-                            if (period === 'PM' && hour24 !== 12) {
-                                hour24 += 12;
-                            } else if (period === 'AM' && hour24 === 12) {
-                                hour24 = 0;
-                            }
-
-                            // Create date object
-                            parsedDate = new Date(
-                                parseInt(year, 10),
-                                parseInt(month, 10) - 1,
-                                parseInt(day, 10),
-                                hour24,
-                                parseInt(minutes, 10),
-                                parseInt(seconds, 10)
-                            );
-                        }
-
-                        if (!isNaN(parsedDate.getTime())) {
-                            messageDate = parsedDate;
-                        } else {
-                            console.log(`Failed to parse date for message ${message.messageId}:`, message.sentAt);
-                        }
-                    } catch (error) {
-                        console.log(`Date parsing error for message ${message.messageId}:`, error, message.sentAt);
-                    }
-
-                }
-
-
-
-                // Transform to GiftedChat format
-                const transformedMessage = {
-                    _id: message.messageId.toString(),
-                    text: message.message.trim(),
-                    createdAt: new Date(message?.sentAt + "Z"),
-                    image: message?.image,
-                    user: {
-                        _id: message.senderId,
-                        name: message.senderName || 'Unknown User',
-                        avatar: senderAvatar,
-                    },
-                    metadata: {
-                        threadId: message.threadId,
-                        userTypeId: message.userTypeId,
-                        userType: message.userType,
-                        originalSentAt: new Date(message?.sentAt + "Z"),
-                        messageId: message.messageId, // Keep original messageId for sorting
-                        hasImage: !!message?.image,
-                        image: message.image || null,
-                    }
-                };
-
-                allMessages.push(transformedMessage);
-            });
-        });
-
-        console.log(`Transformed ${allMessages.length} messages`);
-
-        // Sort messages by messageId (index) first (largest first), then by timestamp (newest first)
-        // This ensures messages with the largest index appear at the top
-        const sortedMessages = allMessages.sort((a, b) => {
-            const messageIdA = a.metadata.messageId;
-            const messageIdB = b.metadata.messageId;
-
-            // First sort by messageId (largest first - most recent index)
-            if (messageIdA !== messageIdB) {
-                return messageIdB - messageIdA;
-            }
-
-            // If messageIds are the same (unlikely), sort by timestamp (newest first)
-            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-        });
-
-        console.log('Sorted messages by largest index first:', {
-            totalMessages: sortedMessages.length,
-            firstMessageId: sortedMessages[0]?.metadata?.messageId,
-            lastMessageId: sortedMessages[sortedMessages.length - 1]?.metadata?.messageId
-        });
-
-        // Apply additional conditions if needed
-        const filteredMessages = sortedMessages.filter((message) => {
-            // Filter by current thread ID
-            if (itemDetails?.threadId && message.metadata.threadId !== itemDetails.threadId) {
-                return false;
-            }
-
-            // Don't filter out messages that have images, even if text is empty
-            if (message.image || message.metadata.hasImage) {
-                return true;
-            }
-
-            // Filter out empty messages (only if they don't have images)
-            if (!message.text || message.text.trim().length === 0) {
-                return false;
-            }
-
-            // Add any other conditions here
-            return true;
-        });
-
-        console.log(`Filtered to ${filteredMessages.length} messages for current thread`);
-        console.log('Final message order (first 5):', filteredMessages.slice(0, 5).map(m => ({
-            id: m.metadata.messageId,
-            text: m.text.substring(0, 30) + '...',
-            createdAt: m.createdAt
-        })));
-
-        return filteredMessages;
-    }, [chatMessagesData, itemDetails?.threadId]);
-
-    // Update local messages when API data changes
-    useEffect(() => {
-        setIsMuted(isMute);
-        if (transformedMessages.length > 0) {
-            setMessages(transformedMessages);
-        }
-    }, [transformedMessages]);
-
-    // Keyboard event listeners - simple state management
-    useEffect(() => {
-        if (!isFocused) {
-            keyboardDidShowListenerRef.current?.remove();
-            keyboardDidHideListenerRef.current?.remove();
-            return;
-        }
-
-        keyboardDidShowListenerRef.current = Keyboard.addListener(
-            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
-            () => setIsKeyboardOpen(true)
-        );
-
-        keyboardDidHideListenerRef.current = Keyboard.addListener(
-            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
-            () => setIsKeyboardOpen(false)
-        );
-
-        return () => {
-            keyboardDidShowListenerRef.current?.remove();
-            keyboardDidHideListenerRef.current?.remove();
-        };
-    }, [isFocused]);
-
-
-
-    // Handle loading more messages (pagination)
-    const handleLoadEarlier = useCallback(() => {
-        console.log("🔄 handleLoadEarlier called");
-        console.log("📊 Pagination state:", {
-            hasNextPage,
-            isFetchingNextPage,
-            pagesLoaded: chatMessagesData?.pages?.length || 0
-        });
-
-        if (hasNextPage && !isFetchingNextPage) {
-            console.log("✅ Fetching next page...");
-            fetchNextPage()
-                .then(() => {
-                    console.log("✅ Successfully fetched next page");
-                })
-                .catch((error) => {
-                    console.error("❌ Error fetching next page:", error);
-                    Alert.alert("Error", "Failed to load earlier messages. Please try again.");
-                });
-        } else {
-            console.log("⚠️ Cannot fetch:", {
-                hasNextPage,
-                isFetchingNextPage,
-                reason: !hasNextPage ? "No more pages" : "Already fetching"
-            });
-
-            if (!hasNextPage) {
-                Alert.alert("Info", "No more messages to load");
-            }
-        }
-    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-
-    useEffect(() => {
-        // Configure automatic reconnect with exponential backoff delays
-        // First reconnect attempts immediately, then progressively increases
-        const reconnectDelays = [0, 2000, 5000, 10000, 15000, 30000]; // 0s, 2s, 5s, 10s, 15s, 30s
-
-        const newConnection = new SignalR.HubConnectionBuilder()
-            .withUrl(CHAT_HUB_URL)
-            .withAutomaticReconnect(reconnectDelays)
-            .configureLogging(SignalR.LogLevel.Information)
-            .build();
-
-        // Store in ref
-        connectionRef.current = newConnection;
-
-        // Set up connection event handlers
-        newConnection.onclose((error) => {
-            console.log("Connection closed:", error);
-            isConnectedRef.current = false;
-            isConnectingRef.current = false;
-        });
-
-        newConnection.onreconnecting((error) => {
-            console.log("Connection reconnecting:", error);
-            isConnectedRef.current = false;
-            isConnectingRef.current = true;
-            reconnectAttemptRef.current += 1;
-            console.log(`Reconnection attempt #${reconnectAttemptRef.current}`);
-        });
-
-        newConnection.onreconnected((connectionId) => {
-            console.log("Connection reconnected:", connectionId);
-            isConnectedRef.current = true;
-            isConnectingRef.current = false;
-            reconnectAttemptRef.current = 0; // Reset counter on successful reconnect
-            joinThread(connectionId);
-        });
-        // Cleanup function
-        return () => {
-            if (connectionRef.current?.state === SignalR.HubConnectionState.Connected) {
-                connectionRef.current.stop();
-            }
-            connectionRef.current = null;
-        };
-    }, []);
-
-    // Start connection when component mounts
-    useEffect(() => {
-        if (connectionRef.current && !isConnectedRef.current && !isConnectingRef.current) {
-            startConnection();
-        }
-    }, []); // Empty dependency array - only run once on mount
-
-    const startConnection = async () => {
-        if (!connectionRef.current || isConnectingRef.current) return;
-
-        isConnectingRef.current = true;
-
-        try {
-            await connectionRef.current.start();
-            console.log("✅ Connected:", connectionRef.current?.connectionId);
-            isConnectedRef.current = true;
-            isConnectingRef.current = false;
-            setupListeners();
-
-            await joinThread(connectionRef.current?.connectionId);
-        } catch (err) {
-            console.error("❌ Connection failed:", err);
-            isConnectedRef.current = false;
-            isConnectingRef.current = false;
-            // Retry after 5 seconds with exponential backoff
-            setTimeout(startConnection, 5000);
-        }
-    };
-
-    const setupListeners = () => {
-        // if (!connectionRef.current) return;
-        connectionRef.current.on("ReceiveMessage", (message) => {
-
-            console.log("ReceiveMessage received:", message);
-            // Handle sender image - use full URL if it starts with http, otherwise use default
-            let senderAvatar = undefined;
-            if (message?.senderImage) {
-                if (message.senderImage.startsWith('http')) {
-                    senderAvatar = message.senderImage;
-                } else if (message.senderImage !== '/assets/images/noimg.png') {
-                    // If it's a relative path but not the default no-image path
-                    senderAvatar = `https://clubyakkastorage.blob.core.windows.net${message.senderImage}`;
-                }
-            }
-
-            const newMessage = {
-                _id: message.messageId?.toString() || Math.random().toString(),
-                text: message?.message || '',
-                createdAt: new Date(message?.sentAt + "Z"),
-                user: {
-                    _id: message?.senderId || 0,
-                    name: message?.senderName || 'Unknown User',
-                    avatar: senderAvatar,
-                },
-                image: message?.image || undefined,
-            };
-
-            setMessages(previousMessages => {
-                // If there's a matching pending message (same sender, text, and image presence),
-                // replace it with the confirmed one to avoid brief duplication.
-                const matchIndex = previousMessages.findIndex(m =>
-                    m?.pending === true &&
-                    (m?.user?._id === memberId) &&
-                    ((m?.text || '') === (newMessage.text || '')) &&
-                    (Boolean(m?.image) === Boolean(newMessage.image))
-                );
-
-                if (matchIndex !== -1) {
-                    const updated = [...previousMessages];
-                    updated[matchIndex] = newMessage;
-                    return updated;
-                }
-
-                // Also guard against duplicates by id
-                if (previousMessages.some(m => String(m?._id) === String(newMessage._id))) {
-                    return previousMessages;
-                }
-
-                return GiftedChat.append(previousMessages, [newMessage]);
-            });
-        });
-
-
-
-
-        connectionRef.current.on("MessageDelete", (threadId, messageId) => {
-            console.log("MessageDelete received:", { threadId, messageId });
-
-            // Remove the deleted message from local state
-            setMessages(previousMessages => {
-                const filteredMessages = previousMessages.filter(msg => {
-                    // Convert both IDs to the same type for comparison
-                    return Number(msg._id) !== Number(messageId);
-                });
-
-                console.log(`Deleted message ${messageId} from local state. Remaining: ${filteredMessages.length} messages`);
-                return filteredMessages;
-            });
-        });
-
-
-        connectionRef.current.on("ReportMessage", (perThreadId, messageId, isReported) => {
-            console.log("ReportMessage received:", { perThreadId, messageId, isReported });
-
-            console.log("ReportMessage received:", { perThreadId, messageId, isReported });
-            if (perThreadId == itemDetails?.threadId) {
-                if (isReported === true) {
-                    ToastManager.success("Message has been reported successfully");
-                } else {
-                    ToastManager.error("Unable to report this message. Please try again.");
-                }
-            }
-        });
-    };
-
-    const joinThread = async (connectionId: string | undefined) => {
-        if (!connectionRef.current || !connectionId || !itemDetails?.threadId || !memberId) {
-            console.log("Cannot join thread - missing required data");
-            return;
-        }
-
-        const data = {
-            threadId: itemDetails.threadId,
-            memberId: memberId,
-            type: 7,
-            connectionId: connectionId
-        };
-
-        console.log("Joining thread with data:", data);
-
-        try {
-            await connectionRef.current.invoke("JoinThread", itemDetails.threadId, memberId, 7, connectionId);
-            console.log(`Successfully joined thread ${itemDetails.threadId}`);
-        } catch (err) {
-            console.error("JoinThread error:", err);
-        }
-    };
-
-    // Image upload hook
-    const {
-        uploadState,
-        uploadImage,
-    } = useImageUpload({
-        containerName: 'chat',
-        maxRetries: 3,
-        retryDelay: 1000,
-        onUploadStart: () => {
-            console.log('Upload started');
-        },
-        onUploadProgress: (progress) => {
-            console.log(`Upload progress: ${progress}%`);
-        },
-        onUploadSuccess: (url) => {
-            console.log('Upload successful:', url);
-            // ToastManager.success('Success', 'Image uploaded successfully');
-        },
-        onUploadError: (error) => {
-            console.error('Upload error:', error);
-            ToastManager.error('Upload Failed', error);
-        },
-        onUploadComplete: () => {
-            console.log('Upload completed');
-        },
-    });
-
-
-    const deleteMessage = async (messageId: any) => {
-        console.log("Deleting message with ID:", typeof itemDetails?.threadId, typeof messageId, typeof memberId, typeof 7);
-        // return
-        Alert.alert("Delete Chat", "Do you really want to delete this chat?", [
-            { text: "Cancel", style: "cancel" },
-            {
-                text: "Yes",
-                onPress: () => {
-                    connectionRef.current?.invoke("DeleteMessage", itemDetails?.threadId, Number(messageId), Number(memberId), 7)
-                        .then((res) => {
-                            console.log("Message deleted successfully:", res);
-                        })
-                        .catch((err) => {
-                            console.error("DeleteMessage error:", err);
-                        });
-                },
-            },
-        ]);
-    };
-
-    const onSend = useCallback(async (messages = [], shouldSendImage = false) => {
-        // Check if there's either text or an image to send
-        const messageText = messages[0]?.text?.trim() || '';
-        const hasText = messageText.length > 0;
-        const hasImage = selectedImage !== null;
-
-        if (!hasText && !hasImage) {
-            Alert.alert("Error", "Please enter a message or select an image");
-            return;
-        }
-
-        // Check if connection is ready
-        if (!connectionRef.current || !isConnectedRef.current || connectionRef.current.state !== SignalR.HubConnectionState.Connected) {
-            Alert.alert("Connection Error", "Chat connection is not ready. Please wait and try again.");
-            console.log("Connection state:", connectionRef.current?.state, "IsConnected:", isConnectedRef.current);
-            return;
-        }
-
-        // Check required data
-        if (!itemDetails?.threadId || !memberId) {
-            Alert.alert("Error", "Missing chat information");
-            return;
-        }
-
-        // Create pending message ID
-        const pendingMessageId = `pending-${Date.now()}-${Math.random()}`;
-
-        // Save selected image reference before clearing
-        const imageToUpload = selectedImage;
-
-        try {
-            let imageFileName = null;
-
-            // Add message to state immediately with pending flag
-            const pendingMessage = {
-                _id: pendingMessageId,
-                text: messageText,
-                createdAt: new Date(),
-                pending: true,
-                image: hasImage ? imageToUpload?.uri : null,
-                user: {
-                    _id: memberId,
-                },
-                metadata: {
-                    threadId: itemDetails?.threadId,
-                }
-            };
-
-            // Add pending message to UI
-            setMessages(previousMessages => [pendingMessage, ...previousMessages]);
-
-            // Clear the input and selected image immediately
-            handleRemoveImage();
-
-            // If there's an image to send, upload it first
-            if (hasImage && imageToUpload) {
-                setIsUploadingImage(true);
-                try {
-                    const uploadResult = await uploadImage(imageToUpload);
-                    if (uploadResult.success) {
-                        imageFileName = imageToUpload?.fileName;
-                        console.log('Image uploaded successfully:', imageFileName);
-                    } else {
-                        console.error('Image upload failed:', uploadResult.error);
-                        Alert.alert("Upload Error", "Failed to upload image. Please try again.");
-                        setIsUploadingImage(false);
-
-                        // Remove pending message on failure
-                        setMessages(previousMessages =>
-                            previousMessages.filter(msg => msg._id !== pendingMessageId)
-                        );
-                        return;
-                    }
-                } catch (error) {
-                    console.error('Image upload error:', error);
-                    Alert.alert("Upload Error", "Failed to upload image. Please try again.");
-                    setIsUploadingImage(false);
-
-                    // Remove pending message on failure
-                    setMessages(previousMessages =>
-                        previousMessages.filter(msg => msg._id !== pendingMessageId)
-                    );
-                    return;
-                } finally {
-                    setIsUploadingImage(false);
-                }
-            }
-
-            // Send the message with text and/or image
-            await connectionRef.current.invoke("SendMessage", itemDetails?.threadId, memberId, messageText, imageFileName, 7)
-                .then((res) => {
-                    console.log("Message sent successfully:", res);
-                })
-                .catch((err) => {
-                    console.error("SendMessage error:", err);
-                    Alert.alert("Send Error", "Failed to send message. Please try again.");
-
-                    // Remove pending message on failure
-                    setMessages(previousMessages =>
-                        previousMessages.filter(msg => msg._id !== pendingMessageId)
-                    );
-                });
-        } catch (err) {
-            console.error("SendMessage error:", err);
-            Alert.alert("Send Error", "Failed to send message. Please try again.");
-
-            // Remove pending message on failure
-            setMessages(previousMessages =>
-                previousMessages.filter(msg => msg._id !== pendingMessageId)
-            );
-        }
-    }, [itemDetails?.threadId, memberId, selectedImage, uploadImage]);
-
-    const handleGalleryPress = async () => {
-        Alert.alert(
-            "Select Image",
-            "Choose an option to add an image",
-            [
-                {
-                    text: "Camera",
-                    onPress: () => handleImageSelection('camera'),
-                },
-                {
-                    text: "Gallery",
-                    onPress: () => handleImageSelection('gallery'),
-                },
-                {
-                    text: "Cancel",
-                    style: "cancel",
-                },
-            ],
-            { cancelable: true }
-        );
-    };
-
-    const handleImageSelection = async (source: 'camera' | 'gallery') => {
-        const options = {};
-        try {
-            const result = await pickImage({ ...options, source });
-
-            if (result) {
-                // Store the image in state instead of immediately sending
-                setSelectedImage(result);
-            }
-        } catch (error) {
-            console.error(`${source} error:`, error);
-            Alert.alert('Error', `Failed to select image from ${source}. Please try again.`);
-        }
-    };
-
-    const openImageViewer = useCallback((uri: string) => {
-        setImageViewerUri(uri);
-        setIsImageViewerVisible(true);
-    }, []);
-
-    const closeImageViewer = useCallback(() => {
-        setIsImageViewerVisible(false);
-        setImageViewerUri(null);
-    }, []);
-
-    const handleRemoveImage = useCallback(() => {
-        setSelectedImage(null);
-    }, []);
-
-
-    // Report modal functions
-    const openReportModal = useCallback((message: any) => {
-        Keyboard.dismiss();
-        setSelectedMessage(message);
-        setShowReportModal(true);
-    }, []);
-
-    const closeReportModal = useCallback(() => {
-        setShowReportModal(false);
-        setReportReason('');
-        setSelectedMessage(null);
-        setReportError('');
-    }, []);
-
-    const handleReportSubmit = async () => {
-        console.log("handleReportSubmit", itemDetails?.threadId, memberId, selectedMessage?._id, selectedMessage?.user?._id, selectedMessage?.user?.userTypeId, 'Report');
-
-        // Clear any previous error
-        setReportError('');
-
-        if (!reportReason.trim()) {
-            setReportError("Please provide a reason for reporting this message.");
-            return;
-        }
-
-
-        await connectionRef.current.invoke("MessageReport", Number(itemDetails?.threadId), Number(selectedMessage?._id), Number(memberId), 7, String(reportReason))
-            .then((res) => {
-                console.log("Message reported successfully:", res);
-                closeReportModal();
-                ToastManager.success("Message has been reported successfully");
-            })
-            .catch((err) => {
-                console.error("MessageReport error:", err);
-                ToastManager.error("Unable to report this message. Please try again.");
-            });
-    };
-
-    // Memoized bubble renderer for better performance
-    const renderBubble = useCallback((props: any) => {
-        const isCurrentUser = props.currentMessage.user._id === memberId;
-
-        return (
-
-            <View style={styles.messageContainer}>
-                {/* Show avatar and name for other users (left side) */}
-                {!isCurrentUser && (
-                    <View style={styles.leftMessageWrapper}>
-                        <View style={styles.avatarContainer}>
-                            {props.currentMessage.user.avatar ? (
-                                <Image
-                                    source={{ uri: props?.currentMessage?.user?.avatar }}
-                                    style={styles.avatar}
-                                    onError={(error) => {
-                                        console.log("Avatar loading error:", error.nativeEvent.error);
-                                    }}
-                                />
-                            ) : (
-                                <View style={styles.defaultAvatar}>
-                                    <Text style={styles.avatarInitial}>
-                                        {props.currentMessage.user.name?.charAt(0) || 'U'}
-                                    </Text>
-                                </View>
-                            )}
-                        </View>
-                        <View style={styles.messageContentLeft}>
-                            {props.currentMessage.user.name && (
-                                <Text style={styles.userName}>
-                                    {props.currentMessage.user.name}
-                                </Text>
-                            )}
-                            <Bubble
-                                {...props}
-                                wrapperStyle={{
-                                    left: {
-                                        backgroundColor: theme.colors.blue,
-                                        borderRadius: 16,
-                                        padding: 8,
-                                        marginBottom: 2,
-                                        marginLeft: 0,
-                                        maxWidth: "80%",
-                                        borderWidth: 1,
-                                        borderColor: "#E5E5E5",
-                                    },
-                                }}
-                                textStyle={{
-                                    left: { color: theme.colors.white, fontSize: 15 },
-                                }}
-                                timeTextStyle={{
-                                    left: { color: theme.colors.white, fontSize: 12, alignSelf: "flex-start" },
-                                }}
-                                onLongPress={() => {
-                                    Keyboard.dismiss();
-                                    openReportModal(props.currentMessage);
-                                }}
-                                renderMessageImage={(imageProps) => {
-
-                                    if (imageProps.currentMessage.pending) {
-                                        return (
-                                            <View style={styles.pendingImageContainer}>
-                                                <ActivityIndicator size="small" color={theme.colors.blue} />
-                                                <Text style={styles.pendingText}>
-                                                    {imageProps.currentMessage.text}
-                                                </Text>
-                                            </View>
-                                        );
-                                    }
-
-                                    return (
-                                        <TouchableOpacity
-                                            onLongPress={() => {
-                                                Keyboard.dismiss();
-                                                openReportModal(imageProps.currentMessage);
-                                            }}
-                                            onPress={() => {
-                                                if (imageProps.currentMessage?.image) {
-                                                    openImageViewer(imageProps.currentMessage.image);
-                                                }
-                                            }}>
-                                            <View style={styles.messageImageContainer}>
-                                                <Image
-                                                    source={{ uri: imageProps.currentMessage.image }}
-                                                    style={styles.messageImage}
-                                                    resizeMode="cover"
-                                                    onError={(error) =>
-                                                        console.log("Image loading error:", error.nativeEvent.error)
-                                                    }
-                                                />
-                                            </View>
-                                        </TouchableOpacity>
-                                    );
-                                }}
-                            />
-                        </View>
-                    </View>
-                )}
-
-                {/* Show messages for current user (right side) - NO AVATAR */}
-                {isCurrentUser && (
-                    <View style={styles.rightMessageWrapper}>
-                        <Bubble
-                            {...props}
-                            wrapperStyle={{
-                                right: {
-                                    backgroundColor: theme.colors.lightLavenderGray,
-                                    borderRadius: 16,
-                                    padding: 8,
-                                    marginBottom: 2,
-                                    marginRight: moderateScale(15),
-                                    maxWidth: "70%",
-                                },
-                            }}
-                            textStyle={{
-                                right: {
-                                    color: theme.colors.black,
-                                    fontSize: 15,
-                                },
-                            }}
-                            timeTextStyle={{
-                                right: { color: theme.colors.black, fontSize: 12, alignSelf: "flex-end" },
-                            }}
-                            onLongPress={() => {
-                                Keyboard.dismiss();
-                                // alert('Long press detected');
-                                deleteMessage(props.currentMessage._id);
-                            }}
-                            renderMessageImage={(imageProps) => {
-                                if (imageProps.currentMessage.pending) {
-                                    return (
-                                        <View style={styles.pendingImageContainer}>
-                                            <ActivityIndicator size="small" color={theme.colors.blue} />
-                                            <Text style={styles.pendingText}>Uploading...</Text>
-                                        </View>
-                                    );
-                                }
-
-                                return (
-                                    <TouchableOpacity
-                                        onLongPress={() => {
-                                            Keyboard.dismiss();
-                                            // alert('Long press detected on image');
-                                            deleteMessage(imageProps.currentMessage._id);
-                                        }}
-                                        onPress={() => {
-                                            if (imageProps.currentMessage?.image) {
-                                                openImageViewer(imageProps.currentMessage.image);
-                                            }
-                                        }}>
-                                        <View style={styles.messageImageContainerRight}>
-                                            <Image
-                                                source={{ uri: imageProps.currentMessage.image }}
-                                                style={styles.messageImage}
-                                                resizeMode="cover"
-                                                onError={(error) =>
-                                                    console.log("Image loading error:", error.nativeEvent.error)
-                                                }
-                                            />
-                                        </View>
-                                    </TouchableOpacity>
-                                );
-                            }}
-                        />
-                    </View>
-                )}
-            </View>
-        );
-    }, [memberId, openImageViewer, openReportModal, deleteMessage]);
-
-
-    // Memoized input toolbar with optimized conditional rendering
-    const renderInputToolbar = useCallback((props: any) => {
-        // Compute margin bottom based on keyboard state
-        const inputMarginBottom = Platform.OS === 'android' ? isKeyboardOpen ? moderateScale(-5) : moderateScale(10) : isKeyboardOpen ? moderateScale(-20) : moderateScale(10);
-
-        return (
-            <View style={[styles.newInputToolbarWrapper, { marginBottom: inputMarginBottom }]}>
-                {/* Green Plus Icon */}
-                <TouchableOpacity
-                    style={styles.addCommentButton}
-                    onPress={handleGalleryPress}
-                    activeOpacity={0.7}
-                >
-                    <SVG.addCircle width={moderateScale(30)} height={moderateScale(30)} />
-                </TouchableOpacity>
-
-                {/* Input Field */}
-                <View style={styles.inputFieldContainer}>
-                    {/* Image Preview - conditional rendering */}
-                    {selectedImage ? (
-                        <View style={styles.imagePreviewContainer}>
-                            <Image
-                                source={{ uri: selectedImage.uri }}
-                                style={styles.imagePreview}
-                                resizeMode="cover"
-                            />
-                            <TouchableOpacity
-                                style={styles.removeImageButton}
-                                onPress={handleRemoveImage}
-                                activeOpacity={0.7}
-                            >
-                                <Text style={styles.removeImageText}>✕</Text>
-                            </TouchableOpacity>
-                        </View>
-                    ) : null}
-
-                    <InputToolbar
-                        {...props}
-                        containerStyle={styles.newInputToolbar}
-                        renderComposer={(composerProps) => (
-                            <Composer
-                                {...composerProps}
-                                textInputStyle={styles.newTextInput}
-                                placeholder="Add Comment"
-                                placeholderTextColor="#999"
-                            />
-                        )}
-                        renderActions={() => null}
-                    />
-                </View>
-
-                {/* Send Button */}
-                <TouchableOpacity
-                    style={styles.newSendButton}
-                    onPress={() => {
-                        const messageText = props.text?.trim() || '';
-                        const hasText = messageText.length > 0;
-                        const hasImage = selectedImage !== null;
-
-                        if (hasText || hasImage) {
-                            const messageToSend = [{
-                                _id: Math.random().toString(),
-                                text: messageText,
-                                createdAt: new Date(),
-                                user: { _id: memberId }
-                            }];
-                            props.onSend(messageToSend, true);
-                        }
-                    }}
-                    activeOpacity={0.7}
-                    disabled={isUploadingImage}
-                >
-                    {isUploadingImage ? (
-                        <ActivityIndicator size="small" color={theme.colors.blue} />
-                    ) : (
-                        <SVG.chatSend
-                            width={moderateScale(30)}
-                            height={moderateScale(30)}
-                        />
-                    )}
-                </TouchableOpacity>
-            </View>
-        );
-    }, [isKeyboardOpen, selectedImage, isUploadingImage, memberId, handleGalleryPress, handleRemoveImage]);
-
-
-    return (
-        console.log("teamteam", team),
-
-        <SafeAreaView style={styles.container}>
-            <View style={styles.container}>
-                <StatusBar backgroundColor={theme.colors.blue} barStyle="light-content" />
-                {Platform.OS === "android" && <View style={styles.statusBarBackground} />}
-
-                <View style={styles.header}>
-                    <View style={styles.headerTopRow}>
-                        <TouchableOpacity onPress={() => {
-                            refetchMessages();
-                            navigation.goBack();
-                        }}>
-                            <SVG.arrowLeft_white
-                                width={moderateScale(25)}
-                                height={moderateScale(25)}
-                            />
-                        </TouchableOpacity>
-                        <View style={{ flexDirection: "row", flex: 1 }}>
-                            <View style={styles.userConSty}>
-                                {!!team?.teamProfileImage || team?.clubImage ? (
-                                    <Image
-                                        source={{ uri: team?.teamProfileImage || team?.clubImage }}
-                                        style={styles.userDetailsSty}
-                                    />
-                                ) : (
-                                    <View style={styles.placeholderLogoHeader}>
-                                        <SVG.UsersIcon
-                                            width={moderateScale(20)}
-                                            height={moderateScale(20)}
-                                        />
-                                    </View>
-                                )}
-                            </View>
-                            <View style={styles.clubInfoContainer}>
-                                <Text style={styles.userNameSty}>
-                                    {team?.teamName || team?.clubName || "Unknown Member"}
-                                </Text>
-                                <Text style={styles.totalMembersSty}>
-                                    {team?.totalMembers || 0}{" "}
-                                    {(team?.totalMembers || 0) === 1 ? "member" : "members"}
-                                </Text>
-                            </View>
-                        </View>
-                        <TouchableOpacity
-                            style={{ alignSelf: 'center' }}
-                            onPress={() => setShowMoreModal(true)}
-                            activeOpacity={0.7}
-                        >
-                            <SVG.more width={moderateScale(18)} height={moderateScale(18)} />
-                        </TouchableOpacity>
-                    </View>
-
-                </View>
-                <View style={styles.contentList}>
-                    <Text style={styles.trainingDayText} numberOfLines={1} ellipsizeMode="tail">
-                        {itemDetails?.threadName ? itemDetails?.threadName : `${itemDetails?.slotStartTime}-${itemDetails?.slotEndTime}`}
-                    </Text>
-                    <View style={styles.contentListWhite}>
-                        <GiftedChat
-                            messages={messages}
-                            onSend={messages => onSend(messages)}
-                            user={{
-                                _id: memberId,
-                            }}
-                            renderBubble={renderBubble}
-                            alwaysShowSend={true}
-                            renderInputToolbar={renderInputToolbar}
-                            renderSend={() => <></>}
-                            showAvatarForEveryMessage={true}
-                            inverted={true}
-                            renderUsernameOnMessage={false}
-                            maxInputLength={400}
-                            minComposerHeight={50}
-                            renderAvatar={() => <></>}
-                            loadEarlier={hasNextPage}
-                            onLoadEarlier={handleLoadEarlier}
-                            isLoadingEarlier={isFetchingNextPage}
-                            infiniteScroll={true}
-                            keyboardShouldPersistTaps="handled"
-                        />
-                    </View>
-                </View>
-
-                {/* Report Modal */}
-                <Modal
-                    visible={showReportModal}
-                    transparent={true}
-                    animationType="fade"
-                    onRequestClose={closeReportModal}
-                >
-                    <KeyboardAwareScrollView
-                        enableOnAndroid={true}
-                        enableAutomaticScroll={true}
-                        extraScrollHeight={Platform.OS === 'ios' ? 120 : 0}
-                        contentContainerStyle={styles.modalContainer}
-                        keyboardShouldPersistTaps="handled"
-                    >
-                        <TouchableOpacity
-                            style={styles.modalOverlay}
-                            activeOpacity={1}
-                            onPress={closeReportModal}
-                        >
-                            <View
-                                style={styles.modalContent}
-                                onStartShouldSetResponder={() => true}
-                            >
-                                <View style={styles.modalHeader}>
-                                    <Text style={styles.modalTitle}>Report Message</Text>
-                                    <TouchableOpacity onPress={closeReportModal}>
-                                        <Text style={styles.closeButton}>✕</Text>
-                                    </TouchableOpacity>
-                                </View>
-
-                                <ScrollView
-                                    style={styles.modalBody}
-                                    showsVerticalScrollIndicator={false}
-                                    keyboardShouldPersistTaps="handled"
-                                    contentContainerStyle={styles.modalBodyContent}
-                                    nestedScrollEnabled={true}
-                                >
-                                    <Text style={styles.modalSubtitle}>
-                                        Why are you reporting this message?
-                                    </Text>
-
-                                    <TextInput
-                                        style={[
-                                            styles.reportInput,
-                                            reportError ? styles.reportInputError : null
-                                        ]}
-                                        placeholder="Please describe the issue..."
-                                        placeholderTextColor="#999"
-                                        multiline
-                                        numberOfLines={6}
-                                        maxLength={400}
-                                        value={reportReason}
-                                        onChangeText={(text) => {
-                                            setReportReason(text);
-                                            if (reportError) setReportError('');
-                                        }}
-                                        textAlignVertical="top"
-                                    />
-                                    <View style={styles.inputBottomContainer}>
-                                        {reportError ? (
-                                            <Text style={styles.errorText}>{reportError}</Text>
-                                        ) : null}
-                                        <Text style={[
-                                            styles.characterCount,
-                                            reportReason.length >= 400 ? styles.characterCountWarning : null
-                                        ]}>
-                                            {reportReason.length}/400
-                                        </Text>
-                                    </View>
-                                </ScrollView>
-
-                                <View style={styles.modalFooter}>
-                                    <TouchableOpacity
-                                        style={styles.cancelButton}
-                                        onPress={closeReportModal}
-                                    >
-                                        <Text style={styles.cancelButtonText}>Cancel</Text>
-                                    </TouchableOpacity>
-                                    <TouchableOpacity
-                                        style={styles.submitButton}
-                                        onPress={handleReportSubmit}
-                                    >
-                                        <Text style={styles.submitButtonText}>Submit Report</Text>
-                                    </TouchableOpacity>
-                                </View>
-                            </View>
-                        </TouchableOpacity>
-                    </KeyboardAwareScrollView>
-                </Modal>
-
-                {/* Image Viewer Modal */}
-                <Modal
-                    visible={isImageViewerVisible}
-                    transparent={true}
-                    animationType="fade"
-                    onRequestClose={closeImageViewer}
-                >
-                    <GestureHandlerRootView style={styles.viewerContainer}>
-                        <TouchableOpacity style={styles.viewerBackdrop} activeOpacity={1} onPress={closeImageViewer} />
-                        <View style={styles.viewerContent}>
-                            {imageViewerUri ? (
-                                <ImageZoom
-                                    uri={imageViewerUri}
-                                    minScale={1}
-                                    maxScale={5}
-                                    doubleTapScale={3}
-                                    isSingleTapEnabled={true}
-                                    isDoubleTapEnabled={true}
-                                    onSingleTap={closeImageViewer}
-                                    style={styles.viewerImage}
-                                />
-                            ) : null}
-                        </View>
-                        <TouchableOpacity onPress={closeImageViewer} style={styles.viewerClose}>
-                            <Text style={styles.viewerCloseText}>✕</Text>
-                        </TouchableOpacity>
-                    </GestureHandlerRootView>
-                </Modal>
-
-
-                <Modal
-                    visible={showMoreModal}
-                    transparent={true}
-                    animationType="fade"
-                    onRequestClose={() => setShowMoreModal(false)}
-                >
-                    <View style={styles.bottomSheetOverlay}>
-                        <TouchableOpacity style={styles.bottomSheetOverlayTouchable} activeOpacity={1} onPress={() => setShowMoreModal(false)} />
-                        <View style={styles.bottomSheetContent}>
-                            <View style={styles.bottomSheetHandle} />
-                            <TouchableOpacity
-                                style={styles.bottomSheetOption}
-                                onPress={async () => {
-                                    try {
-                                        const response = await mainService.updateChatMuteStatus({
-                                            chatTypeId: userType == "volunteer" ? 2 : 1,
-                                            teamId: teamId,
-                                            memberId: memberId,
-                                            threadId: itemDetails?.threadId,
-                                            isMute: !isMuted
-                                        });
-                                        setIsMuted(prev => !prev);
-                                        ToastManager.success(
-                                            !isMuted ? 'Muted successfully' : 'Unmuted successfully'
-                                        );
-                                    } catch (err) {
-                                        console.error('Mute/Unmute error:', err);
-                                        ToastManager.error('Failed to update mute status');
-                                    } finally {
-                                        setShowMoreModal(false);
-                                    }
-                                }}
-                            >
-                                <Text style={styles.bottomSheetOptionText}>{isMuted ? 'Unmute' : 'Mute'}</Text>
-                            </TouchableOpacity>
-                            <TouchableOpacity
-                                style={[styles.bottomSheetOption, styles.bottomSheetCancel]}
-                                onPress={() => setShowMoreModal(false)}
-                            >
-                                <Text style={styles.bottomSheetCancelText}>Cancel</Text>
-                            </TouchableOpacity>
-                        </View>
-                    </View>
-                </Modal>
-
-            </View>
-        </SafeAreaView>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: theme.colors.blue,
-    },
-    modalContainer: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
-    statusBarBackground: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        height: Platform.OS === "ios" ? 44 : 0,
-        backgroundColor: theme.colors.blue,
-        zIndex: 1000,
-    },
-    header: {
-        backgroundColor: theme.colors.blue,
-        paddingTop: Platform.OS === "android" ? theme.spacing.lg : theme.spacing.xs,
-        paddingBottom: Platform.OS === "android" ? -theme.spacing.md : moderateScale(0),
-    },
-    headerTopRow: {
-        flexDirection: "row",
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.sm,
-    },
-    clubInfoContainer: {
-        marginLeft: moderateScale(4),
-        justifyContent: 'center',
-    },
-    userNameSty: {
-        color: theme.colors.white,
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(16),
-    },
-    totalMembersSty: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(11),
-        color: theme.colors.appleGreen,
-    },
-    userDetailsSty: {
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-    },
-    userConSty: {
-        marginLeft: moderateScale(12),
-        marginRight: theme.spacing.xs,
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(20),
-        borderWidth: 1.5,
-        borderColor: theme.colors.imageBorder,
-        backgroundColor: theme.colors.imageBorder,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    placeholderLogoHeader: {
-        width: moderateScale(20),
-        height: moderateScale(20),
-        borderRadius: moderateScale(10),
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    trainingDayContainer: {
-        alignItems: 'center',
-        paddingHorizontal: moderateScale(16),
-    },
-    trainingDayText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(16),
-        color: theme.colors.blue,
-        textAlign: 'center',
-        marginTop: moderateScale(8),
-        paddingHorizontal: moderateScale(16),
-    },
-    contentList: {
-        flex: 1,
-        backgroundColor: theme.colors.lightLavenderGray,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-    },
-    contentListWhite: {
-        flex: 1,
-        backgroundColor: theme.colors.white,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-        marginTop: theme.spacing.sm,
-    },
-    inputToolbar: {
-        borderTopWidth: 0,
-        backgroundColor: 'transparent',
-        paddingHorizontal: moderateScale(16),
-        paddingVertical: moderateScale(8),
-    },
-
-    textInput: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.black,
-        flex: 1,
-        paddingHorizontal: moderateScale(12),
-        paddingVertical: moderateScale(8),
-        minHeight: moderateScale(40),
-    },
-    sendButton: {
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-        backgroundColor: theme.colors.blue,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginLeft: moderateScale(8),
-    },
-    scrollToBottomStyle: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: moderateScale(30),
-        width: moderateScale(30),
-        borderRadius: moderateScale(15),
-        backgroundColor: theme.colors.blue,
-        margin: moderateScale(10),
-    },
-    threadsContainer: {
-        backgroundColor: theme.colors.lightLavenderGray,
-        top: moderateScale(-25),
-        paddingVertical: moderateScale(4),
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-        paddingHorizontal: moderateScale(16),
-        marginBottom: moderateScale(8)
-    },
-    messageContainer: {
-        flexDirection: 'row',
-        marginVertical: moderateScale(4),
-    },
-    leftMessageWrapper: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-    },
-    rightMessageWrapper: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'flex-end',
-        flex: 1,
-    },
-    avatarContainer: {
-        marginRight: moderateScale(8),
-    },
-    avatar: {
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-    },
-    defaultAvatar: {
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-        backgroundColor: '#E0E0E0',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    avatarInitial: {
-        fontSize: moderateScale(16),
-        color: theme.colors.black,
-    },
-    messageContentLeft: {
-        maxWidth: '90%',
-    },
-    userName: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(12),
-        color: theme.colors.black,
-        marginBottom: moderateScale(4),
-    },
-    pendingImageContainer: {
-        width: 200,
-        height: 200,
-        borderRadius: 8,
-        backgroundColor: "#f0f0f0",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    pendingText: {
-        marginTop: 8,
-        color: "#666",
-        fontSize: 14,
-    },
-    messageImageContainer: {
-        maxWidth: moderateScale(220),
-        maxHeight: moderateScale(220),
-        borderRadius: 8,
-        overflow: 'hidden',
-    },
-    messageImageContainerRight: {
-        alignSelf: 'flex-end',
-        maxWidth: moderateScale(220),
-        maxHeight: moderateScale(220),
-        borderRadius: 8,
-        overflow: 'hidden',
-    },
-    messageImage: {
-        width: '100%',
-        aspectRatio: 1,
-    },
-
-    inputToolbarContainer: {
-        backgroundColor: theme.colors.white,
-    },
-    inputToolbarWrapper: {
-        backgroundColor: theme.colors.white,
-        marginHorizontal: moderateScale(16),
-        borderRadius: moderateScale(25),
-        marginVertical: moderateScale(8),
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-        marginBottom: Platform.OS === "ios" ? moderateScale(20) : moderateScale(2),
-    },
-    attachButton: {
-        marginLeft: moderateScale(1),
-    },
-    newInputToolbarWrapper: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: theme.colors.white,
-        marginHorizontal: moderateScale(16),
-        borderRadius: moderateScale(30),
-        marginVertical: moderateScale(8),
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-        // marginBottom will be set dynamically based on platform and navigation bar state
-    },
-    addCommentButton: {
-        marginLeft: moderateScale(8),
-    },
-    plusIcon: {
-        width: moderateScale(24),
-        height: moderateScale(24),
-        borderRadius: moderateScale(12),
-        backgroundColor: theme.colors.green,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    plusText: {
-        color: theme.colors.white,
-        fontSize: moderateScale(16),
-        fontWeight: 'bold',
-    },
-    inputFieldContainer: {
-        flex: 1,
-    },
-    imagePreviewContainer: {
-        marginHorizontal: moderateScale(12),
-        marginTop: moderateScale(8),
-        marginBottom: moderateScale(4),
-        position: 'relative',
-    },
-    imagePreview: {
-        width: '100%',
-        height: moderateScale(150),
-        borderRadius: moderateScale(8),
-    },
-    removeImageButton: {
-        position: 'absolute',
-        top: moderateScale(8),
-        right: moderateScale(8),
-        width: moderateScale(28),
-        height: moderateScale(28),
-        borderRadius: moderateScale(14),
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    removeImageText: {
-        color: theme.colors.white,
-        fontSize: moderateScale(18),
-        fontWeight: 'bold',
-    },
-    newInputToolbar: {
-        borderTopWidth: 0,
-        backgroundColor: 'transparent',
-    },
-    newTextInput: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.black,
-        flex: 1,
-        paddingVertical: moderateScale(10),
-        minHeight: moderateScale(40)
-    },
-    newSendButton: {
-        width: moderateScale(46),
-        height: moderateScale(46),
-        borderRadius: moderateScale(23),
-        backgroundColor: theme.colors.lightLavenderGray,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: moderateScale(8),
-    },
-    // Empty state styles
-    emptyStateContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: moderateScale(32),
-        paddingBottom: moderateScale(100), // Leave space for input toolbar
-    },
-    emptyStateContent: {
-        alignItems: 'center',
-        maxWidth: moderateScale(280),
-    },
-    emptyStateTitle: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(18),
-        color: theme.colors.black,
-        marginTop: moderateScale(16),
-        textAlign: 'center',
-    },
-    emptyStateSubtitle: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        marginTop: moderateScale(8),
-        textAlign: 'center',
-        lineHeight: moderateScale(20),
-    },
-    errorIconContainer: {
-        marginBottom: moderateScale(8),
-    },
-    emptyIconContainer: {
-        marginBottom: moderateScale(8),
-    },
-    retryButton: {
-        marginTop: moderateScale(20),
-        paddingHorizontal: moderateScale(24),
-        paddingVertical: moderateScale(12),
-        backgroundColor: theme.colors.blue,
-        borderRadius: moderateScale(8),
-    },
-    retryButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.white,
-    },
-    emptyStateInputContainer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: theme.colors.white,
-    },
-
-    modalOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: moderateScale(20),
-        paddingVertical: moderateScale(20),
-    },
-    modalContent: {
-        backgroundColor: theme.colors.white,
-        borderRadius: moderateScale(16),
-        width: '100%',
-        // maxHeight: Platform.OS === 'ios' ? '85%' : '80%',
-        overflow: 'hidden',
-        borderWidth: 1,
-    },
-    modalHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: moderateScale(16),
-        borderBottomWidth: 1,
-        borderBottomColor: theme.colors.border,
-    },
-    modalTitle: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(18),
-        color: theme.colors.black,
-    },
-    closeButton: {
-        fontSize: moderateScale(24),
-        color: theme.colors.textSecondary,
-        fontWeight: '300',
-    },
-    modalBody: {
-        flexGrow: 1,
-        maxHeight: moderateScale(250),
-    },
-    modalBodyContent: {
-        padding: moderateScale(16),
-    },
-    modalSubtitle: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        marginBottom: moderateScale(12),
-    },
-    reportInput: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.black,
-        backgroundColor: theme.colors.lightLavenderGray,
-        borderRadius: moderateScale(8),
-        padding: moderateScale(12),
-        minHeight: moderateScale(120),
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-    },
-    reportInputError: {
-        borderColor: '#FF4444',
-        borderWidth: 1,
-    },
-    errorText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: '#FF4444',
-        marginTop: moderateScale(8),
-        marginLeft: moderateScale(4),
-    },
-    inputBottomContainer: {
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-    },
-    characterCount: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.textSecondary,
-        alignSelf: 'flex-end',
-        marginTop: moderateScale(8),
-    },
-    characterCountWarning: {
-        color: '#FF4444',
-    },
-    modalFooter: {
-        flexDirection: 'row',
-        borderTopWidth: 1,
-        borderTopColor: theme.colors.border,
-        padding: moderateScale(16),
-    },
-    cancelButton: {
-        flex: 1,
-        paddingVertical: moderateScale(12),
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: moderateScale(8),
-        borderRadius: moderateScale(8),
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-    },
-    cancelButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.black,
-    },
-    submitButton: {
-        flex: 1,
-        paddingVertical: moderateScale(12),
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: theme.colors.blue,
-        borderRadius: moderateScale(8),
-        marginLeft: moderateScale(8),
-    },
-    submitButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.white,
-    },
-    // Image viewer styles
-    viewerContainer: {
-        flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.9)'
-    },
-    viewerBackdrop: {
-        ...StyleSheet.absoluteFillObject as any,
-    },
-    viewerContent: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    viewerImage: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-    },
-    viewerControls: {
-        position: 'absolute',
-        bottom: moderateScale(40),
-        flexDirection: 'row',
-        gap: moderateScale(12),
-        backgroundColor: 'rgba(0,0,0,0.3)',
-        paddingHorizontal: moderateScale(12),
-        paddingVertical: moderateScale(8),
-        borderRadius: moderateScale(20),
-    },
-    viewerButton: {
-        paddingHorizontal: moderateScale(12),
-        paddingVertical: moderateScale(6),
-        backgroundColor: 'rgba(255,255,255,0.15)',
-        borderRadius: moderateScale(16),
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: moderateScale(48),
-    },
-    viewerButtonText: {
-        color: '#fff',
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(14),
-    },
-    viewerClose: {
-        position: 'absolute',
-        top: moderateScale(50),
-        right: moderateScale(20),
-        backgroundColor: 'rgba(255,255,255,0.15)',
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    viewerCloseText: {
-        color: '#fff',
-        fontSize: moderateScale(18),
-    },
-    bottomSheetOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.4)',
-        justifyContent: 'flex-end',
-    },
-    bottomSheetOverlayTouchable: {
-        flex: 1,
-    },
-    bottomSheetContent: {
-        backgroundColor: theme.colors.white,
-        borderTopLeftRadius: moderateScale(16),
-        borderTopRightRadius: moderateScale(16),
-        paddingBottom: Platform.OS === 'ios' ? moderateScale(24) : moderateScale(16),
-        paddingTop: moderateScale(8),
-        paddingHorizontal: moderateScale(16),
-        borderTopWidth: 1,
-        borderColor: theme.colors.border,
-    },
-    bottomSheetHandle: {
-        alignSelf: 'center',
-        width: moderateScale(40),
-        height: moderateScale(4),
-        borderRadius: moderateScale(2),
-        backgroundColor: '#D9D9D9',
-        marginBottom: moderateScale(8),
-    },
-    bottomSheetOption: {
-        paddingVertical: moderateScale(14),
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderBottomWidth: 1,
-        borderBottomColor: theme.colors.border,
-    },
-    bottomSheetOptionText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.black,
-    },
-    bottomSheetCancel: {
-        borderBottomWidth: 0,
-        marginTop: moderateScale(4),
-        marginBottom: Platform.OS === 'android' ? moderateScale(15) : moderateScale(0),
-    },
-    bottomSheetCancelText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.textSecondary,
-    },
-});