"use client";

import { cn, dashToPoint, fLimitation, nl2br, parseMessage } from "@/lib/utils";
import { useChatStore } from "@/store/useChatStore";
import { Conversation } from "@/types/conversations";
import { useQueryClient } from "@tanstack/react-query";
import Image from "next/image";
import Link from "next/link";

interface MessageItemTextProps {
    conversation: Conversation;
}

const MessageItemText = ({ conversation }: MessageItemTextProps) => {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    const parts = conversation.message_text;
    const { setPageMessageId } = useChatStore();

    const queryClient = useQueryClient();
    const handlePageMessageId = (message_id?: string | null) => {
        if (!message_id) return;
        setPageMessageId(parseInt(message_id));
        queryClient.invalidateQueries({queryKey:['page-message']})
        window.location.hash = `#${message_id.toString()}`;
    };

    return (
        <div className="flex flex-col">
            {conversation?.ref_messages_id && (
                <div className="flex flex-col gap-1" onClick={(e) => handlePageMessageId(conversation.ref_messages_id ?? null)}>
                    <div className={cn("flex items-start gap-3 rounded-lg border-s-4 border-green-600 dark:border-s-4  dark:border-green-400  dark:bg-[#111b21] p-3 mb-1",
                    conversation?.direction == "inbound" ? "bg-zinc-200/25" : "bg-zinc-400/25")}>
                        <div className="flex flex-col gap-1">
                            {
                                (conversation?.ref_messages_type == "image" ||  conversation?.ref_messages_type == "sticker") ?
                                <div className="flex flex-row gap-2" >
                                     <div className="h-12 w-12 rounded-md bg-gray-100 dark:bg-[#1f2c33] text-gray-600 dark:text-gray-200 flex items-center justify-center overflow-hidden">
                                        <Image src={conversation?.ref_media_url || ""} alt={conversation?.ref_media_file_name || ""} width={350} height={200} />
                                    </div>
                                    <div className="flex flex-col gap-1">
                                        <span className="font-semibold text-xs">{conversation?.ref_messages_direction == "inbound" ? conversation?.ref_messages_contacts_name : conversation?.ref_maded_by_json?.id}</span>
                                        <p  className="text-gray-600  dark:text-gray-200 text-sm font-normal" dangerouslySetInnerHTML={{__html:fLimitation(conversation?.ref_messages_text || '',0,100)}}/>
                                    </div>
                                </div>
                                :
                                (conversation?.ref_messages_type == "template") ?
                                <div className="flex flex-col gap-1">
                                    <span className="font-semibold text-xs">{conversation?.ref_messages_direction == "inbound" ? conversation?.ref_messages_contacts_name : conversation?.ref_maded_by_json?.name}</span>
                                     <p className="text-gray-600  dark:text-gray-200 text-sm font-normal" dangerouslySetInnerHTML={{__html:fLimitation(parseMessage(conversation?.ref_message_json.filter((fill:any) => fill.type == 'body').at(0).text),0, 100)}}/>
                                </div>
                                :
                                <div className="flex flex-col gap-1">
                                    <span className="font-semibold text-xs">{conversation?.ref_messages_direction == "inbound" ? conversation?.ref_messages_contacts_name : conversation?.ref_maded_by_json?.name}</span>
                                    <p  className="text-gray-600 dark:text-gray-200 text-sm font-normal" dangerouslySetInnerHTML={{__html:fLimitation(conversation?.ref_messages_text || '',0,100)}}/>
                                </div>
                             
                            }
                        </div>
                    </div>
                </div>
            )}
            <span className="text-sm text-gray-800 dark:text-white pb-1" dangerouslySetInnerHTML={{__html:nl2br(parseMessage(conversation.message_text))  || ""}}/>
        </div>
    );
};

export default MessageItemText;