"use client";

import React, { useEffect, useState } from 'react';
import { cn, formatResponseTime } from '@/lib/utils';
import { Conversation } from '@/types/conversations';
import MessageItemImage from './message-item-image';
import MessageItemVideo from './message-item-video';
import MessageItemAudio from './message-item-audio';
import MessageItemText from './message-item-text';
import MessageItemLocation from './message-item-location';
import MessageItemTemplate from './message-item-template';
import MessageItemContacts from './message-item-contacts';
import { Bookmark, Check, CheckCheck, ChevronDown, Info, RefreshCcw, Reply, Smile, X, Tag } from 'lucide-react';
import Link from 'next/link';
import { Button } from './ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuPortal, DropdownMenuSeparator } from './ui/dropdown-menu';
import { useChatStore } from '@/store/useChatStore';
import MessageItemDocument from './message-item-document';
import { EmojiClickData, EmojiStyle } from 'emoji-picker-react';
import { useSendMessage, useSyncMessage, useBookmarkMessage, useRemoveBookmarkMessage, useSetMessageCategory } from '@/hooks/useWhatsApp';
import { useAuth } from '@/contexts/auth-context';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './ui/sheet';
import { ScrollArea } from './ui/scroll-area';
import MessageItemCall from './message-item-call';
import dynamic from "next/dynamic";
import { usePathname } from 'next/navigation';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const EmojiPicker = dynamic(
    () => import('emoji-picker-react').then((mod: any) => mod.default),
    { ssr: false }
) as any;

interface MessageBubbleProps {
    content: Conversation;
    isSent: boolean;
    timestamp: string;
    status?: 'sent' | 'delivered' | 'read';
}

const MessageBubble: React.FC<MessageBubbleProps> = ({ content, isSent, timestamp, status }) => {

    const [hoverContainter, setHoverContainer] = useState<boolean>(false);
    const { setMessageReply, selectedContact } = useChatStore();
    const [showReactionPicker, setShowReactionPicker] = useState<boolean>(false);
    const addMessageMutation = useSendMessage();
    const { user } = useAuth();
    const { refetch:refetcSync, isFetching:isFetchingSync, data:syncData  } = useSyncMessage(content.id.toString());
    const bookmarkMutation = useBookmarkMessage();
    const removeBookmarkMutation = useRemoveBookmarkMessage();
    const { mutate: setCategory } = useSetMessageCategory();
    
    const isBookmarked = content.bookmarks && content.bookmarks.length > 0;

    const handleToggleBookmark = () => {
        if (isBookmarked) {
            removeBookmarkMutation.mutateAsync(content.id.toString());
        } else {
            bookmarkMutation.mutateAsync({
                messageId: content.id.toString(),
                madedBy: JSON.stringify(user)
            });
        }
    };
 
    const handleSendReaction = (reaction: EmojiClickData) => {
       const accountId = process.env.NEXT_PUBLIC_APP_ACCOUNT_ID_WHATSAPP_SERVICE ?? '';

       const payload = {
            type: 'reaction',
            account_id: accountId,
            message: reaction.emoji,
            phone_number: selectedContact?.phone_number || '',
            maded_by: JSON.stringify(user),
            ref_message_id:content?.message_id
       }

       addMessageMutation.mutateAsync(payload).then(() => {
       });

       setShowReactionPicker(false);

       
    }

    return (
        <div id={content.id.toString()} className={cn("flex w-full mb-2 relative ", isSent ? "justify-end" : "justify-start")}>
            
            <div
                className={cn(
                    "max-w-[90%] md:max-w-[50%] px-3 py-1.5 rounded-lg shadow-sm text-sm relative flex flex-col gap-2",
                    isSent ? "bg-[#d9fdd3] dark:bg-[#005c4b] rounded-tr-none" : "bg-white dark:bg-[#202c33] rounded-tl-none",
                    window.location.hash.replace("#", "") === content.id.toString() ? "border border-black dark:border-white" : ""
                )}
                onMouseEnter={() => {
                    setHoverContainer(true);
                }}
                onMouseLeave={(e) => {
                    setHoverContainer(false);
                }}
            >
                {showReactionPicker && (
                    <div className={cn("absolute top-0 z-20",isSent ? "right-0" : "left-0")} onMouseLeave={(e) => setShowReactionPicker(false)}>
                        <Button size="icon-sm" className="md:hidden rounded-full" onClick={(e) => {
                           setShowReactionPicker(false);
                        }}>
                            <X/>
                        </Button>
                        <EmojiPicker 
                            emojiStyle={EmojiStyle.NATIVE}
                            reactionsDefaultOpen={showReactionPicker} 
                            onReactionClick={(e: EmojiClickData) => handleSendReaction(e)}
                            onEmojiClick={(e: EmojiClickData) => handleSendReaction(e)}
                            reactions={[
                                "1f601",
                                "1f44d", 
                                "1f602", 
                                "1f60d", 
                                "1f525",
                                "1f64f"  
                            ]}
                        />
                    </div>
                )}
                <div className="flex items-center  justify-between gap-2 ">
                    {
                        isSent ? (
                            <p className="text-xs font-semibold text-gray-500 dark:text-gray-200">{content.maded_by_json?.name}</p>
                        ) : (
                            <p className="text-xs font-semibold text-gray-500 dark:text-gray-400">{content.contacts_name}</p>
                        )
                    }
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button  variant="ghost" className={cn("text-gray-500 h-0 w-0 px-2 py-3 dark:text-gray-300 ",
                                isSent ? "hover:bg-transparent dark:bg-transparent" : "hover:bg-transparent dark:bg-transparent"
                            )}>
                                <ChevronDown className="h-3 w-3"/>
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start" sideOffset={8} className="p-2 flex flex-col gap-1 cursor:pointer" onCloseAutoFocus={(e) => e.preventDefault()}>
                                <Sheet>
                                        <SheetTrigger className="flex flex-row text-gray-800 items-center dark:text-white text-sm gap-2">
                                            <Info className="text-gray-500 ml-[7px] h-4 w-4"/>
                                             Info
                                        </SheetTrigger>
                                        <SheetContent>
                                            <SheetHeader>
                                                <SheetTitle>Info Pesan</SheetTitle>
                                            </SheetHeader>
                                            <ScrollArea className="flex-1 h-0">
                                                <div className="flex flex-col gap-2">
                                                    <div
                                                            className={cn(
                                                                "max-w-[100%] px-3 py-1.5 rounded-lg shadow-sm text-sm relative flex flex-col gap-2 m-3",
                                                                isSent ? "bg-[#d9fdd3] dark:bg-[#005c4b] rounded-tr-none" : "bg-white dark:bg-[#202c33] rounded-tl-none"
                                                            )}
                                                    >
                                                        {content.message_type === "image" ? 
                                                            <MessageItemImage conversation={content} />
                                                            :
                                                            content.message_type === "document" ? <MessageItemDocument conversation={content} />
                                                            :
                                                            content.message_type === "sticker" ? <MessageItemImage conversation={content} />
                                                            :
                                                            content.message_type === "video" ? <MessageItemVideo conversation={content} />
                                                            :
                                                            content.message_type === "audio" ? <MessageItemAudio conversation={content} />
                                                            :
                                                            content.message_type === "location" ? <MessageItemLocation conversation={content} />
                                                            :
                                                            content.message_type === "template" ? <MessageItemTemplate conversation={content} />
                                                            :
                                                            content.message_type === "call" ? <MessageItemCall conversation={content} />
                                                            :
                                                            <MessageItemText conversation={content} />
                                                        }
                                                       
                                                         <div className={`flex items-center gap-1 ${isSent ? "justify-end" : "justify-start"}`}>
                                                            <span className="text-[10px] text-gray-500 dark:text-gray-300">{timestamp}</span>
                                                            {isSent && (
                                                                <span className={cn("text-[10px]", status === 'read' ? "text-blue-500" : "text-gray-500")}>
                                                                    {/* Simple checkmark svg */}
                                                                    { content?.status == 'sent' && <Check className='h-3 w-3 text-gray'/> }
                                                                    { content?.status == 'delivered' && <CheckCheck className='h-3 w-3 text-gray'/> }
                                                                    { content?.status == 'read' && <CheckCheck className='h-3 w-3 text-green-500'/> }
                                                                </span>
                                                            )}
                                                        </div>
                                                    
                                                        {
                                                            content?.reactions && (
                                                                <div className="absolute bottom-[-12px] mt-5  right-0">
                                                                    <div className="flex flex-row mr-3 gap-2 px-2 rounded-full bg-white dark:bg-zinc-800 inset-shadow-sm ring-2 ring-gray-100 dark:ring-zinc-800">
                                                                        {(JSON.parse(content.reactions) as Conversation[]).map((item:Conversation, index:number) => (
                                                                            <span key={index}>{item.message_text}</span>
                                                                        ))}
                                                                    </div>
                                                                </div>
                                                            )
                                                        }
                                                    </div>
                                                    <span className="border-t border-gray-200 dark:border-gray-700"></span>
                                                    <div className="flex flex-col gap-2 m-3">
                                                        {
                                                            isSent && (
                                                                <div className="flex flex-col">
                                                                    <span className="font-semibold text-sm text-gray-600 dark:text-gray-300">Dibaca</span>
                                                                    <span className="text-sm text-gray-600 dark:text-gray-300">{content.read_at_format.original ? content.read_at_format.format : '-'}</span>
                                                                </div>
                                                            )
                                                        }
                                                        <div className="flex flex-col">
                                                            <span className="font-semibold text-sm text-gray-600 dark:text-gray-300">{isSent ? 'Terkirim' : 'Dikirim'}</span>
                                                            <span className="text-sm text-gray-600 dark:text-gray-300">{content.delivered_at_format.original ? content.delivered_at_format.format : '-'}</span>
                                                        </div>
                                                        {
                                                            isSent && (
                                                                <div className="flex flex-col">
                                                                    <span className="font-semibold text-sm text-gray-600 dark:text-gray-300">Dibuat Oleh</span>
                                                                    <span className="text-sm text-gray-600 dark:text-gray-300">{content.maded_by_json?.name}</span>
                                                                    <span className="text-sm text-gray-600 dark:text-gray-300">{content.sent_at_format.format}</span>
                                                                </div>
                                                            )
                                                        }
                                                        {
                                                            content.status == "sent" && (
                                                                <Button variant="secondary" disabled={isFetchingSync} onClick={() => {
                                                                    refetcSync();
                                                                }}>
                                                                    <RefreshCcw className={`${isFetchingSync ? 'animate-spin' : ''}`}/>
                                                                    Sinkronisasi
                                                                </Button>
                                                            )
                                                        }
                                                    </div>
                                            </div>
                                            </ScrollArea>
                                        </SheetContent>
                                </Sheet>
                            <DropdownMenuItem onClick={(e) => {
                                setMessageReply(content);
                            }}>
                                <Reply/>
                                <span>Reply</span>
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={(e) => setShowReactionPicker(true)}>
                                <Smile/>
                                <span>Reaction</span>
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={(e) => handleToggleBookmark()}>
                                <Bookmark className={isBookmarked ? "fill-current" : ""} />
                                <span>{isBookmarked ? "Remove Bookmark" : "Bookmark"}</span>
                            </DropdownMenuItem>
                            {isSent && (
                                <DropdownMenuSub>
                                    <DropdownMenuSubTrigger>
                                        <Tag />
                                        <span>Set Category</span>
                                    </DropdownMenuSubTrigger>
                                    <DropdownMenuPortal>
                                        <DropdownMenuSubContent>
                                            <DropdownMenuItem onClick={() => setCategory({ message_id: content.id.toString(), category: 1 })}>
                                                <span>Umum</span>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onClick={() => setCategory({ message_id: content.id.toString(), category: 2 })}>
                                                <span>Added Value</span>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onClick={() => setCategory({ message_id: content.id.toString(), category: 3 })}>
                                                <span>SP (Surat Penawaran)</span>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onClick={() => setCategory({ message_id: content.id.toString(), category: 4 })}>
                                                <span>Security</span>
                                            </DropdownMenuItem>
                                            <DropdownMenuSeparator />
                                            <DropdownMenuItem onClick={() => setCategory({ message_id: content.id.toString(), category: null })}>
                                                <X className="text-red-500" />
                                                <span className="text-red-500">Unset Category</span>
                                            </DropdownMenuItem>
                                        </DropdownMenuSubContent>
                                    </DropdownMenuPortal>
                                </DropdownMenuSub>
                            )}
                        </DropdownMenuContent>
                    </DropdownMenu>
                    
                </div>
              
                {content.message_type === "image" ? 
                    <MessageItemImage conversation={content} />
                    :
                    content.message_type === "document" ? <MessageItemDocument conversation={content} />
                    :
                    content.message_type === "sticker" ? <MessageItemImage conversation={content} />
                    :
                    content.message_type === "video" ? <MessageItemVideo conversation={content} />
                    :
                    content.message_type === "audio" ? <MessageItemAudio conversation={content} />
                    :
                    content.message_type === "location" ? <MessageItemLocation conversation={content} />
                    :
                    content.message_type === "template" ? <MessageItemTemplate conversation={content} />
                    :
                    content.message_type === "call" ? <MessageItemCall conversation={content} />
                    :
                    content.message_type === "contacts" ? <MessageItemContacts conversation={content} />
                    :                                  
                    <MessageItemText conversation={content} />
                }
                {/* <p className="text-gray-800 dark:text-gray-100 pb-4">{content}</p> */}
                <div className='flex flex-row justify-between'>
                    {/* {content.message_template_category && (
                        <div className="mb-1">
                            <span className="inline-block px-1  text-white  bg-green-600 dark:bg-green-700 rounded text-[10px] font-semibold  tracking-wide">
                                {content.message_template_category_name || 'Umum'}
                            </span>
                        </div>
                    )} */}
                    <div className={`flex items-center gap-1 ${isSent ? "justify-end" : "justify-start"}`}>
                       
                        <span className="text-[10px] text-gray-500 dark:text-gray-300">{timestamp}</span>
                        {isSent && content.response_time && content.response_time > 0 ? (
                            <span className="text-[10px] text-gray-500 dark:text-gray-300 ml-1">
                                Response Time {formatResponseTime(content.response_time)}
                            </span>
                        ) : null}
                        {isBookmarked && (
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Bookmark className="h-3 w-3 text-yellow-500 fill-current ml-1" />
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>Di-bookmark Oleh: {JSON.parse(content.bookmarks?.[0]?.maded_by || "{}")?.name || "-"}</p>
                                </TooltipContent>
                            </Tooltip>
                        )}
                        
                        {isSent && content.category_name && (
                            <span className="text-[10px] text-green-700 font-medium">
                                {content.category_name}
                            </span>
                        )}

                        {isSent && (
                            <span className={cn("text-[10px]", status === 'read' ? "text-blue-500" : "text-gray-500")}>
                                {/* Simple checkmark svg */}
                                { content?.status == 'sent' && <Check className='h-3 w-3 text-gray'/> }
                                { content?.status == 'delivered' && <CheckCheck className='h-3 w-3 text-gray'/> }
                                { content?.status == 'read' && <CheckCheck className='h-3 w-3 text-green-500'/> }
                                { content?.status == 'failed' && (
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                        <X className='h-3 w-3 text-red-500'/>
                                        </TooltipTrigger>
                                        <TooltipContent>
                                            <p>{JSON.parse(content?.status_message_logs_content)?.entry[0]?.changes[0]?.value?.statuses[0]?.errors[0]?.message}</p>
                                        </TooltipContent>
                                    </Tooltip>
                                ) }
                            </span>
                        )}

                       
                    </div>
                </div>
               
               
                {
                    content?.reactions && (
                        <div className="absolute bottom-[-12px] mt-5  right-0">
                            <div className="flex flex-row mr-3 gap-2 px-2 rounded-full bg-white dark:bg-zinc-800 inset-shadow-sm ring-2 ring-gray-100 dark:ring-zinc-800">
                                {(JSON.parse(content.reactions) as Conversation[]).map((item:Conversation, index:number) => (
                                    <span key={index}>{item.message_text}</span>
                                ))}
                            </div>
                        </div>
                    )
                }
            </div>
           
        </div>
    );
};

export default MessageBubble;