import { type FC } from 'react'
import moment from 'moment-jalaali'
import { Paperclip2 } from 'iconsax-react'
import { getFileNameAndExtensionFromUrl } from '@/config/func'
import VoicePlayer from '@/components/VoicePlayer'
import type { AttachmentsType } from '../type/Types'

type Props = {
    content: string
    attachments?: AttachmentsType[]
    senderName?: string
    senderLabel?: string
    createdAt?: string
    isAdmin?: boolean
}

const TicketMessage: FC<Props> = ({
    content,
    attachments = [],
    senderName,
    senderLabel = 'پشتیبان',
    createdAt,
    isAdmin = false,
}) => {
    const fileAttachments = attachments.filter((a) => a.type !== 'voice')
    const voiceAttachments = attachments.filter((a) => a.type === 'voice')

    const handleOpenLink = (url: string) => {
        window.open(url, '_blank', 'noopener,noreferrer')
    }

    return (
        <div className={isAdmin ? 'flex justify-end' : ''}>
            <div
                className={`bg-[#F5F7FC] rounded-3xl p-5 max-w-[min(100%,520px)] ${
                    isAdmin ? 'rounded-tl-none' : 'rounded-tr-none'
                }`}
            >
                {isAdmin && senderName && (
                    <div className="flex gap-1 text-xs mb-2 text-[#8C90A3]">
                        <span className="font-medium text-black">{senderLabel}:</span>
                        <span>{senderName}</span>
                    </div>
                )}

                {content && (
                    <p className="text-sm text-black leading-7 whitespace-pre-wrap">{content}</p>
                )}

                {fileAttachments.length > 0 && (
                    <div className="flex gap-3 flex-wrap mt-3">
                        {fileAttachments.map((attach) => (
                            <button
                                key={attach.url}
                                type="button"
                                onClick={() => handleOpenLink(attach.url)}
                                className="flex cursor-pointer items-center gap-1.5 text-[#0047FF] hover:opacity-80 transition-opacity"
                            >
                                <Paperclip2 size={18} color="#0047FF" />
                                <span className="text-xs">
                                    {getFileNameAndExtensionFromUrl(attach.url).fileName}
                                </span>
                            </button>
                        ))}
                    </div>
                )}

                {voiceAttachments.length > 0 && (
                    <div className="mt-3 space-y-2">
                        {voiceAttachments.map((voice) => (
                            <VoicePlayer key={voice.url} url={voice.url} />
                        ))}
                    </div>
                )}

                {createdAt && (
                    <div className="mt-3 text-[11px] text-[#8C90A3] text-left" dir="ltr">
                        {moment(createdAt).format('jYYYY/jMM/jDD HH:mm')}
                    </div>
                )}
            </div>
        </div>
    )
}

export default TicketMessage