"use client";

import { Conversation } from "@/types/conversations";
import Image from "next/image";
import { dashToPoint, nl2br, parseMessage } from "@/lib/utils";
import {  CopyIcon, ExternalLink, Icon, MapPin, Phone, ReplyIcon, Share2 } from "lucide-react";
import { Button } from "./ui/button";
import Link from "next/link";
import { useChatStore } from "@/store/useChatStore";
import { Skeleton } from "./ui/skeleton";


interface MessageItemTemplateProps {
    conversation: Conversation;
}

const MessageItemTemplate = ({ conversation }: MessageItemTemplateProps) => {
    const { setSelectedLightBoxImage } = useChatStore();
   
    return (
        <div className="flex flex-col gap-2">
            {
                conversation.message_json?.map((item: any, index: number) => {
                    if(item.type === "header") {
                        if(item.format === "text") {
                            return (
                                <div key={index}>
                                    <p className="text-sm text-gray-800 dark:text-white">{item.text}</p>
                                </div>
                            )
                        }else if(item.format === "image") {
                            return (
                                <div key={index}>
                                    <Link onClick={(e) => setSelectedLightBoxImage(item.text)} href={"#"}>
                                        {
                                            item.text ?
                                            <Image  src={item.text || ""} alt={""} width={350} height={200} />
                                            :
                                            <Skeleton className="h-[200px] w-[350px] rounded-xl" />
                                        }
                                    </Link>
                                </div>
                            )
                        }else if(item.format === "video") {
                            return (
                                <div key={index}>
                                    {
                                        item.text ?
                                            <video controls width={350} height={200}>
                                                <source src={item.text || ""}/>
                                            </video>
                                        :
                                        <Skeleton className="h-[200px] w-[350px] rounded-xl" />
                                    }
                                </div>
                            )
                        }else if(item.format === "document") {
                            return (
                                <div key={index}>
                                    <Link href={item.text || ""} target="_blank">
                                        {item.mime_type === "application/pdf" && (
                                                    <Image src="/images/pdf.png" alt="PDF" width={200} height={200} className="w-10 h-10" />
                                            )}
                                            {item.mime_type === "application/msword" && (
                                                    <Image src="/images/word.png" alt="Word" width={200} height={200} className="w-10 h-10" />
                                                )}
                                            {item.mime_type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" && (
                                                    <Image src="/images/word.png" alt="Word" width={200} height={200} className="w-10 h-10" />
                                                )}
                                            {item.mime_type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" && (
                                                    <Image src="/images/excel.png" alt="Excel" width={200} height={200} className="w-10 h-10" />
                                                )}
                                            {item.mime_type === "application/vnd.openxmlformats-officedocument.presentationml.presentation" && (
                                                    <Image src="/images/powerpoint.png" alt="PowerPoint" width={200} height={200} className="w-10 h-10" />
                                                )}
                                    </Link>
                                </div>
                            )
                        }else if(item.format === "location") {
                            return (
                                <div key={index}>
                                    <p>{item.text}</p>
                                </div>
                            )
                        }
                    }else if(item.type === "body") {
                        const urlRegex = /(https?:\/\/[^\s]+)/g;
                        const parts = dashToPoint(conversation.message_text).split(urlRegex);
                        return (
                            <div key={index}>
                                {parts.map((part, i) =>
                                    urlRegex.test(part) ? (
                                    <Link
                                        key={i}
                                        href={part}
                                        target="_blank"
                                        className="text-emerald-600 dark:text-emerald-400 hover:underline hover:text-emerald-800"
                                        rel="noopener noreferrer"
                                    >
                                        {part}
                                    </Link>
                                    ) : (
                                        <p key={i} className="text-sm text-gray-800 dark:text-white" dangerouslySetInnerHTML={{ __html: nl2br(parseMessage(item.text)) }} />
                                    )
                                )}
                            </div>
                        )
                    }else if(item.type === "footer") {
                        return (
                            <div key={index}>
                                <p className="text-xs text-gray-400" dangerouslySetInnerHTML={{ __html: item.text }} />
                            </div>
                        )
                    }else if(item.type === "button") {
                        return (
                            <div key={index} className="flex flex-col gap-2">
                                <span className="border-b border-gray-300 dark:border-white w-full"></span>
                                {item.items.map((button: any, index: number) => {
                                    if(button.sub_type === "url") {
                                        return (
                                            <div key={index}>
                                                <Link href={button.text} target="_blank" className="w-full font-normal hover:bg-gray-400/25">
                                                    <Button variant="ghost"  size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                        <ExternalLink/>
                                                        {button.name}
                                                    </Button>
                                                </Link>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "phone_number") {
                                        return (
                                            <div key={index}>
                                                <Link href={button.text} target="_blank">
                                                    <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                        <Phone/>
                                                        {button.name}
                                                    </Button>
                                                </Link>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "quick_reply") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <ReplyIcon/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "copy_code") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <CopyIcon/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "voice_call") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <Phone/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "share_location") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <MapPin/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "share_phone_number") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <Share2/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "share_email") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <Share2/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "share_address") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <Share2/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                    if(button.sub_type === "share_website") {
                                        return (
                                            <div key={index}>
                                                <Button variant="ghost" size="sm" className="w-full font-normal hover:bg-gray-400/25">
                                                    <Share2/>
                                                    {button.name}
                                                </Button>
                                            </div>
                                        )
                                    }
                                })}
                            </div>
                        )
                    }
                })
            }
        </div>
    );
};

export default MessageItemTemplate;