import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Button from '../../components/Button'
import { CloseCircle, InfoCircle, Paperclip2 } from 'iconsax-react'
import { useNavigate, useParams } from 'react-router-dom'
import { useAddMessageTicket, useCloseTicket, useGetMessages } from './hooks/useTicketData'
import PageLoading from '../../components/PageLoading'
import moment from 'moment-jalaali'
import { useFormik } from 'formik'
import { AddMessageTicketType, TicketMessageType } from './types/TicketTypes'
import * as Yup from 'yup'
import { toast } from '../../components/Toast';
import { ErrorType } from '../../helpers/types'
import { clx } from '../../helpers/utils'
import { Pages } from '../../config/Pages'
import { useMultiUpload } from '../service/hooks/useServiceData'
import ReferTicket from './components/ReferTicket'
import CreateTaskFromTicket from './components/CreateTaskFromTicket'

const TicketDetail: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const { id } = useParams()
    const getMessages = useGetMessages(id ? id : '')
    const [files, setFiles] = useState<File[]>([])
    const addMessage = useAddMessageTicket(id ? id : '')
    const multiUpload = useMultiUpload()
    const [isResetFiles, setIsResetFiles] = useState<boolean>(false)
    const closeTicket = useCloseTicket()

    const formik = useFormik<AddMessageTicketType>({
        initialValues: {
            content: '',
            attachmentUrls: [],
        },
        validationSchema: Yup.object().shape({
            content: Yup.string().required(t('errors.required')),
        }),
        onSubmit: async (values) => {
            if (files.length > 0) {
                const images = new FormData()
                files.forEach(file => {
                    images.append('files', file)
                })
                await multiUpload.mutateAsync(images, {
                    onSuccess: async (data) => {
                        values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
                    },
                    onError: (error: ErrorType) => {
                        toast(error.response?.data?.error?.message[0] ?? t('error'), 'error')
                    }
                })
            } else {
                delete values.attachmentUrls
            }

            addMessage.mutate(values, {
                onSuccess: () => {
                    toast(t('success'), 'success')
                    formik.resetForm()
                    setFiles([])
                    setIsResetFiles(true)
                    setTimeout(() => {
                        setIsResetFiles(false)
                    }, 1000);
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0] ?? t('error'), 'error')
                }
            })
        },
    })

    const hadleCloseTicket = () => {
        closeTicket.mutate(id ? id : '', {
            onSuccess: () => {
                toast(t('success'), 'success')
                navigate(Pages.ticket.list)
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message[0] ?? t('error'), 'error')
            }
        })
    }

    return (
        <div className='mt-4'>
            <div className='flex gap-1'>
                <div>{t('ticket.ticket_number')}</div>
                <div>{getMessages.data?.data?.ticket?.numericId}</div>
            </div>
            {
                getMessages.isPending ?
                    <PageLoading />
                    :
                    <div className='flex xl:flex-row flex-col-reverse gap-6 xl:mt-8 mt-6'>
                        <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                            <div className='gap-6 rowTwoInput'>
                                <Input
                                    label={t('ticket.select_your_service')}
                                    value={getMessages.data?.data?.ticket?.danakService?.name || '-'}
                                    readOnly
                                />
                                <Input
                                    label={t('ticket.user_name')}
                                    value={getMessages.data?.data?.ticket?.user?.firstName + ' ' + getMessages.data?.data?.ticket?.user?.lastName}
                                    readOnly
                                />

                                <Input
                                    label={t('ticket.user_plan')}
                                    value={getMessages.data?.data?.supportPlan?.userSupportPlan?.supportPlan?.name}
                                    readOnly
                                />
                            </div>

                            <div className='mt-8 xl:text-sm text-xs'>
                                {getMessages.data?.data?.ticket?.subject}
                            </div>

                            {
                                getMessages.data?.data?.messages.map((item: TicketMessageType) => {
                                    if (item?.author?.roles[0]?.name === 'user') {
                                        return (
                                            <div key={item.id} className='mt-6 xl:text-sm text-xs bg-[#F6F7FA] p-6 rounded-3xl rounded-tr-none xl:max-w-[70%] max-w-[90%]'>
                                                <div className='leading-7 whitespace-pre-line'>
                                                    {item.content}
                                                </div>
                                                <div className='flex dltr end mt-6 text-xs text-description'>
                                                    {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                                </div>

                                                <div className='flex gap-2 flex-wrap text-sm'>
                                                    {
                                                        item.attachments && item?.attachments?.map((item, index: number) => {
                                                            return (
                                                                <div className='text-[#0047FF] mt-2 flex  gap-1 items-center' key={item.id}>
                                                                    <Paperclip2 size={20} color='#0047FF' />
                                                                    <a href={item.attachmentUrl} target='_blank' rel='noreferrer'>
                                                                        {t('attach') + ' ' + Number(index + 1)}
                                                                    </a>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    } else {
                                        return (
                                            <div className='w-full flex justify-end'>
                                                <div className='mt-6 xl:text-sm text-xs bg-[#EBEDF5] p-6 rounded-3xl rounded-tl-none xl:max-w-[70%] max-w-[90%]'>
                                                    <div className='flex gap-1'>
                                                        <div className='font-bold'>
                                                            {t('ticket.expert')}
                                                        </div>
                                                        <div>{item.author?.firstName + ' ' + item?.author?.lastName}</div>
                                                    </div>
                                                    <div className='leading-7 mt-4 whitespace-pre-line'>
                                                        {item.content}
                                                    </div>
                                                    <div className='flex dltr  mt-6 text-xs text-description'>
                                                        {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                                    </div>

                                                    <div className='flex gap-2 flex-wrap text-sm'>
                                                        {
                                                            item.attachments && item?.attachments?.map((item, index: number) => {
                                                                return (
                                                                    <div className='text-[#0047FF] mt-2 flex  gap-1 items-center' key={item.id}>
                                                                        <Paperclip2 size={20} color='#0047FF' />
                                                                        <a href={item.attachmentUrl} target='_blank' rel='noreferrer'>
                                                                            {t('attach') + ' ' + Number(index + 1)}
                                                                        </a>
                                                                    </div>
                                                                )
                                                            })
                                                        }
                                                    </div>

                                                    <div className='flex gap-2'></div>
                                                </div>
                                            </div>
                                        )
                                    }
                                })
                            }



                            {
                                getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
                                <Fragment>
                                    <div className='mt-9'>
                                        <Textarea
                                            label={t('ticket.answer')}
                                            placeholder={t('ticket.your_description')}
                                            value={formik.values.content}
                                            onChange={formik.handleChange}
                                            name='content'
                                            error_text={formik.touched.content && formik.errors.content ? formik.errors.content : ''}
                                        />
                                    </div>

                                    <div className='mt-7'>
                                        <UploadBox
                                            label={t('ticket.attachment')}
                                            onChange={setFiles}
                                            isMultiple
                                            isReset={isResetFiles}
                                        />
                                    </div>

                                    <div className='flex justify-end mt-6'>
                                        <Button
                                            label={t('ticket.send')}
                                            className='max-w-[100px]'
                                            onClick={() => formik.handleSubmit()}
                                            isLoading={addMessage.isPending || multiUpload.isPending}
                                        />
                                    </div>
                                </Fragment>
                            }
                            <div className='h-8'></div>
                        </div>
                        <div className={`h-fit lg:sticky left-0 lg:top-0 xl:w-sidebar w-full`}>
                            {
                                getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
                                <div className='bg-white xl:p-6 p-4 rounded-3xl flex gap-4'>
                                    <Button
                                        label={t('ticket.send_answer')}
                                        className='text-xs xl:h-10 h-8'
                                    />
                                    <Button
                                        className='bg-[#D52903] xl:h-10 h-8'
                                        onClick={hadleCloseTicket}
                                        isLoading={closeTicket.isPending}
                                    >
                                        <div className='flex gap-2 text-xs items-center'>
                                            <CloseCircle
                                                color='white'
                                                size={20}
                                            />
                                            <div>
                                                {t('ticket.close_ticket')}
                                            </div>
                                        </div>
                                    </Button>
                                </div>
                            }
                            <div className={clx(
                                'bg-white p-6 rounded-3xl mt-8',
                                getMessages.data?.data?.ticket?.status === 'CLOSED' && 'mt-0'
                            )}>
                                <div className='flex justify-between'>
                                    <div className='text-sm'>
                                        {t('ticket.info_ticket')}
                                    </div>
                                    <div className={clx(
                                        'h-7 px-3 rounded-xl flex items-center text-xs bg-green-100 text-green-400',
                                        getMessages.data?.data?.ticket?.status === 'PENDING' && 'bg-orange-100 text-orange-700',
                                        getMessages.data?.data?.ticket?.status === 'CLOSED' && 'bg-red-100 text-red-400'
                                    )}>
                                        {t(`ticket.${getMessages.data?.data?.ticket?.status}`)}
                                    </div>
                                </div>

                                <div className='mt-14 text-xs w-full'>
                                    <div className='flex justify-between text-description'>
                                        <div>{t('ticket.ticket_number')}</div>
                                        <div>
                                            {getMessages.data?.data?.ticket?.numericId}
                                        </div>
                                    </div>
                                    <div className='flex mt-6 justify-between text-description'>
                                        <div>{t('ticket.asignto')}</div>
                                        <div>
                                            {getMessages.data?.data?.ticket?.assignedTo ? getMessages.data?.data?.ticket?.assignedTo?.firstName + ' ' + getMessages.data?.data?.ticket?.assignedTo?.lastName : ''}
                                        </div>
                                    </div>
                                    <div className='flex mt-6 justify-between text-description'>
                                        <div>{t('date')}</div>
                                        <div className='dltr'>
                                            {moment(getMessages.data?.data?.ticket?.createdAt).format('jYYYY/jMM/jDD HH:mm')}
                                        </div>
                                    </div>
                                    <div className='flex mt-6 justify-between text-description'>
                                        <div>{t('ticket.category')}</div>
                                        <div>
                                            {getMessages.data?.data?.ticket?.category?.title}
                                        </div>
                                    </div>
                                    <div className='flex mt-6 justify-between text-description'>
                                        <div>{t('ticket.priority')}</div>
                                        <div>
                                            {getMessages.data?.data?.ticket?.priority === 'low' ? t('ticket.low') : getMessages.data?.data?.ticket?.priority === 'medium' ? t('ticket.medium') : t('ticket.high')}
                                        </div>
                                    </div>

                                </div>

                                <div className='mt-10 border-t text-xs pt-5 border-border items-center flex gap-2'>
                                    <InfoCircle size={20} color='black' />
                                    <div>
                                        {t('ticket.update_sms')}
                                    </div>
                                </div>
                            </div>

                            {
                                getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
                                <CreateTaskFromTicket
                                    ticketId={id ?? ''}
                                    ticketSubject={getMessages.data?.data?.ticket?.subject ?? ''}
                                />
                            }

                            {
                                <ReferTicket refetch={getMessages.refetch} />
                            }
                        </div>
                    </div>
            }
        </div>
    )
}

export default TicketDetail