import React, { useEffect, useRef, useState } from 'react';
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from '@cometchat/chat-uikit-react';
import moment from 'moment';
import MediaMessages from '@/Component/Common/CampaignChatInfo/MediaMessage';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { ChatBaseURL } from '@/Utils/APIRequest/Endpoints';
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';

const ChatMessageList = (props) => {
    const { groupId } = props

    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    const messageListRef = useRef<HTMLDivElement | any>(null);
    const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
    const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | any>(undefined);
    const [chatMessages, setChatMessages] = useState<CometChat.BaseMessage[]>([]);

    useEffect(() => {
        if (groupId) {
            let listenerID: string = groupId;

            if (listenerID) {
                fetchMessages(listenerID)
            }
            CometChat.getGroup(groupId).then((group) => {
                setSelectedGroup(group);
            });
        }
        return () => {
            if (messageListRef?.current) {
                messageListRef.current.scrollTop = 0
            }
        }
    }, [groupId])

    useEffect(() => {
        if (selectedGroup) {
            fetchMessages(selectedGroup?.getGuid());
        }
        addMessageListener();
        return () => {
            CometChat.removeMessageListener("messageListener");
        };
    }, [selectedGroup]);

    const addMessageListener = () => {
        CometChat.addMessageListener(
            "messageListener",
            new CometChat.MessageListener({
                onTextMessageReceived: (message) => {
                    if (message?.getConversationId() == selectedGroup?.conversationId) {
                        scrollToBottom(); // Scroll to bottom on new message
                        setChatMessages((prevMessages) => [...prevMessages, message]); // Add to the end
                    }
                },
                onCustomMessageReceived: (message) => {
                    if (message?.getConversationId() == selectedGroup?.conversationId) {
                        scrollToBottom(); // Scroll to bottom on new message
                        setChatMessages((prevMessages) => [...prevMessages, message]); // Add to the end
                    }
                },
            })
        );
    };
    const scrollToBottom = () => {

        if (messageListRef.current) {
            messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
        }
    };
    const fetchMessages = async (listenerID) => {
        try {
            // Use API route since ChatRestAPIKey is server-side only
            const response = await fetch(`/api/chat/messages?groupId=${listenerID}`, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                },
                credentials: 'include' // Include cookies for authentication
            });
            
            const result = await response.json();
            
            if (response.ok && result?.data) {
                setChatMessages(result.data);
                scrollToBottom();
            } else {
                console.error('Error fetching messages:', result.error);
                setChatMessages([]);
            }
        } catch (error) {
            console.error('Error fetching messages:', error);
            setChatMessages([]);
        }
    }


    const isMentions = (message) => {

        if (message?.data?.mentions) {
            let splitText = message?.data?.text?.split("<@uid:")
            console.log("splitText1", splitText);
            splitText = splitText[1]
            // splitText = splitText?.join()
            console.log("splitText2", splitText);
            splitText = splitText?.split(">")
            splitText = splitText[0]
            console.log("splitText3", splitText[0]);

            return <div className="cursor-pointer">
                <h1 className="font-bold text-primary">@{message?.data?.mentions[splitText]?.name}</h1>
            </div>
        } else {
            return <div>
                <h1>{message?.data?.text}</h1>
            </div>
        }
    }
    return (
        <>
            <CometChatMessageHeader group={selectedGroup} user={selectedUser} hideVideoCallButton={true} hideVoiceCallButton={true} />
            <div className="h-80 overflow-y-scroll [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray/25 [&::-webkit-scrollbar-thumb]:bg-gray/50" ref={messageListRef}>
                {
                    chatMessages?.length > 0 ?
                        chatMessages?.map((message: any) => (
                            <div key={message.id}>
                                {message.type !== "status" &&
                                    <div className="flex items-start gap-2 my-5">
                                        <ImageWithFallback className="w-12 min-w-12 h-12 rounded-full" src={message?.data?.entities?.sender?.entity?.avatar} alt={message?.data?.entities?.sender?.entity?.name} width={48} height={48} />
                                        <div className={`flex flex-col items-start w-full gap-2.5`}>
                                            <div className="flex flex-col gap-0.5">
                                                <h5 className="text-lg font-medium">{message?.data?.entities?.sender?.entity?.name}</h5>
                                                <span className="text-xs text-tertiary">{moment.unix(message.sentAt).format("hh:mm A")}</span>
                                            </div>

                                            {message.type === "custom" ?
                                                <>
                                                    <p>{message?.data?.customData?.text ?? message?.data?.text}</p>
                                                    <div className="bg-gray/30 rounded-xl border-l-8 px-5 py-2.5 border-primary flex-col flex text-sm">
                                                        <label>{message?.data?.customData?.title ?? message?.data?.title}</label>
                                                        <span>{message?.data?.customData?.amount ?? message?.data?.amount}</span>
                                                        <span>{message?.data?.customData?.due ?? message?.data?.due}</span>
                                                    </div>
                                                </>
                                                :
                                                (message.type == "file" || message.type == "image") ?
                                                    <MediaMessages message={message} />
                                                    :
                                                    isMentions(message)
                                            }


                                        </div>
                                    </div>
                                }
                                {(message.type === "status") &&
                                    <div className="flex items-center justify-center w-full my-5">
                                        <p className="bg-primary/15 px-3 py-1 rounded-full text-sm">{userDetails?.role == 'brand' ? message?.data?.customData?.brandMessage : userDetails?.role == 'admin' ? message?.data?.customData?.adminMessage : message?.data?.customData?.influencerMessage}</p>
                                    </div>
                                }
                            </div>
                        ))
                        :
                        <div className="w-full h-full flex items-center justify-center">
                            No Conversation yet
                        </div>
                }
            </div>
        </>
    );
}

export default ChatMessageList;