import ReturnArrow from "@/assets/icons/svg/returnArrow.svg";
import Chat from "@/components/ask/chat";
import AskHello from "@/components/ask/hello";
import SendMessage from "@/components/ask/send";
import { ThemedText } from "@/components/ThemedText";
import { fetchApi } from "@/lib/server-api-util";
import { getWebSocketErrorMessage, webSocketManager, WsMessage } from "@/lib/websocket-util";
import { Assistant, Message } from "@/types/ask";
import { useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from "react-i18next";
import {
    Animated,
    FlatList,
    Keyboard,
    KeyboardAvoidingView,
    Platform,
    StyleSheet,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function AskScreen() {
    const router = useRouter();
    const insets = useSafeAreaInsets();

    const chatListRef = useRef<FlatList>(null);
    const [isHello, setIsHello] = useState(true);
    const [conversationId, setConversationId] = useState<string | null>(null);
    const [userMessages, setUserMessages] = useState<Message[]>([]);
    const [selectedImages, setSelectedImages] = useState<string[]>([]);
    const fadeAnim = useSharedValue(1);
    const fadeAnimChat = useSharedValue(0);
    const { t } = useTranslation();

    const { sessionId, newSession } = useLocalSearchParams<{
        sessionId: string;
        newSession: string;
    }>();

    // 创建一个可复用的滚动函数
    const scrollToEnd = useCallback((animated = true) => {
        if (chatListRef.current) {
            setTimeout(() => chatListRef.current?.scrollToEnd({ animated }), 100);
        }
    }, []);

    // 右滑
    const gesture = Gesture.Pan()
        .onEnd((event) => {
            const { translationX } = event;
            const threshold = 100; // 滑动阈值

            if (translationX > threshold) {
                // 从左向右滑动，跳转页面
                runOnJS(router.replace)("/memo-list");
            }
        })
        .minPointers(1)
        .activeOffsetX([-10, 10]); // 在 X 方向触发的范围

    useEffect(() => {
        if (!isHello && userMessages.length > 0) {
            scrollToEnd();
        }
    }, [userMessages, isHello, scrollToEnd]);

    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener(
            'keyboardDidShow',
            (e) => {
                setTimeout(() => {
                    if (!isHello) {
                        scrollToEnd();
                    }
                }, 100);
            }
        );

        const keyboardDidHideListener = Keyboard.addListener(
            'keyboardDidHide',
            () => {
                setTimeout(() => {
                    if (!isHello) {
                        scrollToEnd(false);
                    }
                }, 100);
            }
        );

        return () => {
            keyboardDidShowListener.remove();
            keyboardDidHideListener.remove();
        };
    }, [isHello]);

    useFocusEffect(
        useCallback(() => {
            // 添加一个标志来检查组件是否已卸载
            let isMounted = true;

            // 确保在组件挂载时才连接
            if (isMounted) {
                webSocketManager.connect();
            }

            const handleChatStream = (message: WsMessage) => {
                // 确保组件仍然挂载
                if (!isMounted) return;

                if (message.type === 'ChatStream') {
                    setUserMessages(prevMessages => {
                        // 使用 try-catch 包装以防止错误导致应用崩溃
                        try {
                            const lastMessage = prevMessages[prevMessages.length - 1];

                            // 检查是否是有效的助手消息
                            if (!lastMessage || lastMessage.role !== Assistant) {
                                return prevMessages;
                            }

                            // 创建新的消息数组
                            const newMessages = [...prevMessages];

                            if (typeof lastMessage.content === 'string') {
                                if (lastMessage.content === 'keepSearchIng') {
                                    // 第一次收到流式消息，替换占位符
                                    newMessages[newMessages.length - 1] = {
                                        ...lastMessage,
                                        content: message.chunk
                                    };
                                } else {
                                    // 持续追加流式消息
                                    newMessages[newMessages.length - 1] = {
                                        ...lastMessage,
                                        content: lastMessage.content + message.chunk
                                    };
                                }
                            } else if (Array.isArray(lastMessage.content)) {
                                // 如果 content 是数组，则更新第一个 text 部分
                                const textPartIndex = lastMessage.content.findIndex(p => p.type === 'text');
                                if (textPartIndex !== -1) {
                                    const updatedContent = [...lastMessage.content];
                                    updatedContent[textPartIndex] = {
                                        ...updatedContent[textPartIndex],
                                        text: (updatedContent[textPartIndex].text || '') + message.chunk
                                    };

                                    newMessages[newMessages.length - 1] = {
                                        ...lastMessage,
                                        content: updatedContent
                                    };
                                }
                            }

                            return newMessages;
                        } catch (error) {
                            console.error('处理 ChatStream 消息时出错:', error);
                            // 发生错误时返回原始消息数组
                            return prevMessages;
                        }
                    });
                }
            };

            const handleChatStreamEnd = (message: WsMessage) => {
                // 确保组件仍然挂载
                if (!isMounted) return;

                if (message.type === 'ChatStreamEnd') {
                    setUserMessages(prevMessages => {
                        // 使用 try-catch 包装以防止错误导致应用崩溃
                        try {
                            const lastMessage = prevMessages[prevMessages.length - 1];

                            // 检查是否是有效的助手消息
                            if (!lastMessage || lastMessage.role !== Assistant) {
                                return prevMessages;
                            }

                            // 使用最终消息替换流式消息，确保 message.message 存在
                            if (message.message) {
                                const newMessages = [...prevMessages];
                                newMessages[newMessages.length - 1] = message.message as Message;
                                return newMessages;
                            } else {
                                // 如果最终消息为空，则移除 'keepSearchIng' 占位符
                                return prevMessages.filter(m =>
                                    !(typeof m.content === 'string' && m.content === 'keepSearchIng')
                                );
                            }
                        } catch (error) {
                            console.error('处理 ChatStreamEnd 消息时出错:', error);
                            // 发生错误时返回原始消息数组
                            return prevMessages;
                        }
                    });
                }
            };

            const handleError = (message: WsMessage) => {
                // 确保组件仍然挂载
                if (!isMounted) return;

                if (message.type === 'Error') {
                    console.log(`WebSocket Error: ${message.code} - ${message.message}`);

                    setUserMessages(prevMessages => {
                        // 使用 try-catch 包装以防止错误导致应用崩溃
                        try {
                            const lastMessage = prevMessages[prevMessages.length - 1];

                            // 检查是否是有效的助手消息且包含占位符
                            if (!lastMessage ||
                                lastMessage.role !== Assistant ||
                                typeof lastMessage.content !== 'string' ||
                                lastMessage.content !== 'keepSearchIng') {
                                return prevMessages;
                            }

                            // 替换占位符为错误消息
                            const newMessages = [...prevMessages];
                            newMessages[newMessages.length - 1] = {
                                ...lastMessage,
                                content: getWebSocketErrorMessage(message.code, t)
                            };

                            return newMessages;
                        } catch (error) {
                            console.error('处理 Error 消息时出错:', error);
                            // 发生错误时返回原始消息数组
                            return prevMessages;
                        }
                    });
                }
            };

            webSocketManager.subscribe('ChatStream', handleChatStream);
            webSocketManager.subscribe('ChatStreamEnd', handleChatStreamEnd);
            webSocketManager.subscribe('Error', handleError);

            return () => {
                // 设置组件卸载标志
                isMounted = false;

                // 清理订阅
                webSocketManager.unsubscribe('ChatStream', handleChatStream);
                webSocketManager.unsubscribe('ChatStreamEnd', handleChatStreamEnd);
                webSocketManager.unsubscribe('Error', handleError);

                // 可以在这里选择断开连接，或者保持连接以加快下次进入页面的速度
                webSocketManager.disconnect();
            };
        }, [t])
    );

    // 创建动画样式
    const welcomeStyle = useAnimatedStyle(() => {
        return {
            opacity: fadeAnim.value,
            pointerEvents: isHello ? 'auto' : 'none',
        };
    });

    const chatStyle = useAnimatedStyle(() => {
        return {
            opacity: fadeAnimChat.value,
            pointerEvents: isHello ? 'none' : 'auto',
        };
    });

    // 触发动画
    useEffect(() => {
        fadeAnim.value = withTiming(isHello ? 1 : 0, { duration: 300 });
        fadeAnimChat.value = withTiming(isHello ? 0 : 1, { duration: 300 });
    }, [isHello]);

    useEffect(() => {
        if (sessionId) {
            setConversationId(sessionId);
            setIsHello(false);
            fetchApi<Message[]>(`/chats/${sessionId}/message-history`).then((res) => {
                setUserMessages(res);
            });
        }
        if (newSession) {
            setIsHello(true);
            setConversationId(null);
        }
    }, [sessionId, newSession]);

    useEffect(() => {
        if (!isHello) {
            // 不再自动关闭键盘，让用户手动控制
            // 这里可以添加其他需要在隐藏hello界面时执行的逻辑
            scrollToEnd(false);
        }
    }, [isHello]);

    useFocusEffect(
        useCallback(() => {
            if (!sessionId) {
                setIsHello(true);
                setUserMessages([])
            }
        }, [sessionId])
    );

    return (
        <GestureDetector gesture={gesture}>
            <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
                {/* 导航栏 */}
                <View style={[styles.navbar, isHello && styles.hiddenNavbar]}>
                    <TouchableOpacity
                        style={styles.backButton}
                        onPress={() => {
                            try {
                                if (TextInput.State?.currentlyFocusedInput) {
                                    const input = TextInput.State.currentlyFocusedInput();
                                    if (input) input.blur();
                                }
                            } catch (error) {
                                console.log('失去焦点失败:', error);
                            }
                            Keyboard.dismiss();
                            router.push('/memo-list');
                        }}
                    >
                        <ReturnArrow />
                    </TouchableOpacity>
                    <ThemedText style={styles.title} onPress={() => { router.push('/owner') }}>MemoWake</ThemedText>
                    <View style={styles.placeholder} />
                </View>

                <View style={styles.contentContainer}>
                    {/* 欢迎页面 */}
                    <Animated.View
                        style={[styles.absoluteView, welcomeStyle, { zIndex: 1 }]}
                    >
                        <AskHello setUserMessages={setUserMessages} setConversationId={setConversationId} setIsHello={setIsHello} />
                    </Animated.View>

                    {/* 聊天页面 */}
                    <Animated.View
                        style={[styles.absoluteView, chatStyle, { zIndex: 0 }]}
                    >
                        <Chat
                            ref={chatListRef}
                            userMessages={userMessages}
                            sessionId={sessionId}
                            setSelectedImages={setSelectedImages}
                            selectedImages={selectedImages}
                            style={styles.chatContainer}
                            contentContainerStyle={styles.chatContentContainer}
                            showsVerticalScrollIndicator={false}
                        // onContentSizeChange={() => scrollToEnd()}
                        />
                    </Animated.View>
                </View>

                {/* 输入框区域 */}
                <KeyboardAvoidingView
                    behavior={Platform.OS === "ios" ? "padding" : "height"}
                    keyboardVerticalOffset={0} >
                    <View style={styles.inputContainer} key={conversationId}>
                        <SendMessage
                            setIsHello={setIsHello}
                            conversationId={conversationId}
                            setConversationId={setConversationId}
                            setUserMessages={setUserMessages}
                            selectedImages={selectedImages}
                            setSelectedImages={setSelectedImages}
                        />
                    </View>
                </KeyboardAvoidingView>
            </View >
        </GestureDetector >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    navbar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 16,
        paddingHorizontal: 16,
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
        elevation: 1, // Android
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 1,
    },
    hiddenNavbar: {
        shadowOpacity: 0,
        elevation: 0,
        opacity: 0
    },
    backButton: {
        padding: 8,
        marginRight: 8,
    },
    title: {
        fontSize: 20,
        fontWeight: '600',
        textAlign: 'center',
        flex: 1,
    },
    placeholder: {
        width: 40,
    },
    contentContainer: {
        flex: 1,
        position: 'relative'
    },
    absoluteView: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'white',
    },
    chatContainer: {
        flex: 1,
    },
    chatContentContainer: {
        paddingBottom: 20,
    },
    inputContainer: {
        padding: 16,
        paddingBottom: 24,
        backgroundColor: 'white',
        // borderTopWidth: 1,
        // borderTopColor: '#f0f0f0',
    },
});