"use client";

import { X } from "lucide-react"
import { Button } from "./ui/button"
import { useChatStore } from "@/store/useChatStore";
import Image from "next/image";
import { fLimitation } from "@/lib/utils";
import { useQueryClient } from "@tanstack/react-query";
import { Conversation } from "@/types/conversations";

export const ImageReply = () => {
    const { messageReply, setMessageReply } = useChatStore();
    return (
        <div className="flex items-start gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#111b21] p-3">
            <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={messageReply?.media_url || ""} alt={messageReply?.media_file_name || ""} width={350} height={200} />
            </div>
            <div className="flex-1 min-w-0">
                {messageReply?.direction == "inbound" && (<span className="font-semibold text-gray-500 dark:text-gray-400 text-sm">{messageReply?.contacts_name}</span>)}
                <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" dangerouslySetInnerHTML={{__html:fLimitation(messageReply?.message_text || '',0,100)}}/>
            </div>
            <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400" onClick={(e) => setMessageReply(null)}>
                <X className="h-4 w-4" />
            </Button>
        </div>
    )
}

export const TextReply = () => {
    const { messageReply, setMessageReply } = useChatStore();
    return (
        <div className="flex items-start gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#111b21] p-3">
            <div className="flex-1 min-w-0">
                {messageReply?.direction == "inbound" && (<span className="font-semibold text-gray-500 dark:text-gray-400 text-sm">{messageReply?.contacts_name}</span>)}
                <p className="text-sm font-medium text-gray-900 dark:text-gray-100" dangerouslySetInnerHTML={{__html:fLimitation(messageReply?.message_text || '',0,100)}}/>
            </div>
            <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400" onClick={(e) => setMessageReply(null)}>
                <X className="h-4 w-4" />
            </Button>
        </div>
    )
}

export const TemplatetReply = () => {
    const { messageReply, setMessageReply } = useChatStore();
    return (
        <div className="flex items-start gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#111b21] p-3">
            <div className="flex-1 min-w-0">
                {messageReply?.direction == "inbound" && (<span className="font-semibold text-gray-500 dark:text-gray-400 text-sm">{messageReply?.contacts_name}</span>)}
                <p className="text-sm font-medium text-gray-900 dark:text-gray-100" dangerouslySetInnerHTML={{__html:fLimitation(messageReply?.message_json.filter((fill:any) => fill.type == 'body').at(0).text || '',0,100)}}/>
            </div>
            <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400" onClick={(e) => setMessageReply(null)}>
                <X className="h-4 w-4" />
            </Button>
        </div>
    )
}