import { useEffect } from 'react';
import { useChatContext } from "../providers/ChatProvider";
import useChatUIStore from '../stores/Zustant';
import { getChatConfig } from '../Chat.config';

export const useMessageStatus = () => {
    const { socket, userId } = useChatContext();
    const { messages, setMessages, selectedConversation } = useChatUIStore();
    const { role } = getChatConfig();
    useEffect(() => {
        if (!socket) return;

        const handleStatusUpdate = (event: MessageEvent) => {
            try {
                const parsed = JSON.parse(event.data);

                if (parsed.event === 'messageStatusUpdated') {
                    const { messageId, status } = parsed.data;

                    setMessages(prev => prev.map(msg => {
                        if (msg._id === messageId) {
                            const statusOrder = ['sent', 'delivered', 'read'];
                            const currentIdx = statusOrder.indexOf(msg.status);
                            const newIdx = statusOrder.indexOf(status);

                            if (newIdx > currentIdx) {
                                return { ...msg, status };
                            }
                        }
                        return msg;
                    }));
                }
            } catch (error) {
                console.error('Error handling status update:', error);
            }
        };

        socket.addEventListener('message', handleStatusUpdate);
        return () => socket.removeEventListener('message', handleStatusUpdate);
    }, [socket, setMessages]);

    useEffect(() => {
        if (!socket || !selectedConversation) return;

        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const messageId = entry.target.getAttribute('data-message-id');
                        if (messageId) {
                            const message = messages.find(m => m._id === messageId);
                            if (message && message.status === 'sent') {
                                socket.send(JSON.stringify({
                                    event: 'confirmDelivery',
                                    data: {
                                        messageId,
                                        chatId: selectedConversation._id,
                                        senderRole: message.sender.role,
                                        senderId: message.sender.senderId,
                                    }
                                }));
                            }
                        }
                    }
                });
            },
            { threshold: 0.7 }
        );

        const messageElements = document.querySelectorAll('[data-message-id]');
        messageElements.forEach(el => observer.observe(el));

        return () => observer.disconnect();
    }, [messages, socket, selectedConversation]);

    useEffect(() => {
        if (!socket || !selectedConversation) return;

        const unreadMessages = messages.filter(
            msg => msg.status !== 'read' &&
                msg.conversationId === selectedConversation._id &&
                msg.sender.senderId !== userId
        );

        if (unreadMessages.length > 0) {
            socket.send(JSON.stringify({
                event: 'messageRead',
                data: {
                    messageIds: unreadMessages.map(m => m._id),
                    chatId: selectedConversation._id,
                    senderRole: unreadMessages[0].sender.role,
                    senderId: unreadMessages[0].sender.senderId,
                    receiverId: userId,
                    receiverRole: role,
                }
            }));
        }
    }, [messages, socket, selectedConversation, userId]);
};