import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { ArrowDown2, CloseSquare } from 'iconsax-react'
import AvatarImage from '@/assets/images/avatar.svg'
import AnswerIcon from '@/assets/images/answer.svg'
import EmailEditor from './EmailEditor'
import EmailFormActions from './EmailFormActions'
import { useReply } from './hooks/useReply'
import { MessageDetail } from '@/pages/received/types/Types'
import { toast } from '@/components/Toast'

interface ReplyProps {
    originalMessage: MessageDetail
    onClose?: () => void
    onExpand?: () => void
    className?: string
    showInitialButton?: boolean
}

const Reply: FC<ReplyProps> = ({
    originalMessage,
    onClose,
    onExpand,
    className = '',
    showInitialButton = true
}) => {
    const { t } = useTranslation()

    const {
        content,
        isExpanded,
        isSending,
        setContent,
        expandReply,
        collapseReply,
        handleSendReply,
        handleSaveDraft
    } = useReply({
        originalMessage,
        onSuccess: () => {
            onClose?.()
        }
    })

    const handleExpand = () => {
        expandReply()
        onExpand?.()
    }


    const handleClose = async () => {
        if (content.trim()) {
            await handleSaveDraft()
            toast('پیش‌نویس ذخیره شد', 'success')
        }

        collapseReply()
        onClose?.()
    }

    if (showInitialButton && !isExpanded) {
        return (
            <div className={`flex justify-end ${className}`}>
                <div className='flex gap-5 text-sm'>
                    <div
                        onClick={handleExpand}
                        className='flex gap-2 cursor-pointer items-center hover:text-primary transition-colors'
                    >
                        <img src={AnswerIcon} className='w-[17px] filterWhite' />
                        <div>{t('mail.answer')}</div>
                    </div>
                </div>
            </div>
        )
    }

    const handleSend = () => {
        handleSendReply(originalMessage?.html[0])
        collapseReply()
    }

    return (
        <div className={`mt-6 w-full ${className}`}>
            <div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
                <div className='flex items-center gap-2 text-sm text-gray-600'>
                    <img src={AnswerIcon} className='w-4 h-4 filterWhite' />
                    <span>پاسخ به {originalMessage.from.name || originalMessage.from.address}</span>
                </div>
                <div className='flex items-center gap-2'>
                    <button
                        onClick={collapseReply}
                        className='p-1 hover:bg-gray-200 rounded transition-colors'
                        title='بستن'
                    >
                        <ArrowDown2 size={16} />
                    </button>
                    <button
                        onClick={() => {
                            collapseReply()
                            onClose?.()
                        }}
                        className='p-1 hover:bg-gray-200 rounded transition-colors'
                        title='لغو'
                    >
                        <CloseSquare size={16} />
                    </button>
                </div>
            </div>


            <div className='flex gap-4'>
                <img src={AvatarImage} className='size-10 xl:block hidden flex-shrink-0' />
                <div className='w-full'>
                    <div className='mb-4 text-sm'>
                        <div className='flex items-center gap-2 p-2 bg-gray-50 rounded border'>
                            <span className='text-gray-600 min-w-fit'>به:</span>
                            <span className='text-gray-800'>{originalMessage.from.address}</span>
                        </div>
                    </div>

                    <div className='mb-4 text-sm'>
                        <div className='flex items-center gap-2 p-2 bg-gray-50 rounded border'>
                            <span className='text-gray-600 min-w-fit'>موضوع:</span>
                            <span className='text-gray-800'>
                                {originalMessage.subject.startsWith('Re:')
                                    ? originalMessage.subject
                                    : `Re: ${originalMessage.subject}`}
                            </span>
                        </div>
                    </div>

                    <div className='mb-4'>
                        <EmailEditor
                            value={content}
                            onChange={setContent}
                            placeholder='پیام خود را بنویسید...'
                        />
                    </div>

                    <EmailFormActions
                        onSend={handleSend}
                        onClose={handleClose}
                        isSending={isSending}
                    />
                </div>
            </div>
        </div>
    )
}

export default Reply