import { type FC, useState } from 'react'
import { useDeleteThemeValue, useGetThemeValues } from './hooks/useThemeData'
import { useParams } from 'react-router-dom'
import PageTitle from '@/components/PageTitle'
import Td from '@/components/Td'
import { Edit, Add } from 'iconsax-react'
import TrashWithConfrim from '@/components/TrashWithConfrim'
import { toast } from 'react-toastify'
import Button from '@/components/Button'
import CreateThemeValueModal from './components/CreateThemeValueModal'
import UpdateThemeValueModal from './components/UpdateThemeValueModal'
import type { ThemeValueType } from './type/Types'
import { extractErrorMessage } from '@/helpers/utils'

const Values: FC = () => {

    const { id } = useParams()
    const { mutate: deleteThemeValue, isPending: isDeletingThemeValue } = useDeleteThemeValue()
    const { data, isLoading } = useGetThemeValues(id!)
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false)
    const [selectedThemeValue, setSelectedThemeValue] = useState<ThemeValueType | null>(null)

    if (isLoading) {
        return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>
    }

    const themeInfo = data?.results?.data?.[0]?.theme

    return (
        <div>
            <div className='flex gap-4 justify-between items-center'>
                <PageTitle title1='مقادیر تم' />
                <Button
                    onClick={() => setIsModalOpen(true)}
                    className='w-fit'
                >
                    <div className='flex whitespace-nowrap gap-2 items-center'>
                        <Add size={16} color='#fff' />
                        <div>افزودن مقدار</div>
                    </div>
                </Button>
            </div>

            {themeInfo && (
                <div className='mt-5 p-4 bg-gray-50 rounded-lg'>
                    <div className='flex gap-4'>
                        <div>
                            <span className='text-gray-600'>عنوان تم: </span>
                            <span className='font-semibold'>{themeInfo.title}</span>
                        </div>
                        <div>
                            <span className='text-gray-600'>نوع ورودی: </span>
                            <span className='font-semibold'>{themeInfo.inputType}</span>
                        </div>
                    </div>
                </div>
            )}

            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
                <table className='w-full text-sm'>
                    <thead className='thead'>
                        <tr>
                            <Td text={'نام'} />
                            <Td text={'مقدار'} />
                            <Td text={'عملیات'} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            data?.results?.data && data.results.data.length > 0 ? (
                                data.results.data.map((item) => {
                                    return (
                                        <tr className='tr' key={item._id}>
                                            <Td text={item.name} />
                                            <Td text={item.value.toString()} />
                                            <Td text=''>
                                                <div className='flex gap-2'>
                                                    <button
                                                        onClick={() => {
                                                            setSelectedThemeValue(item)
                                                            setIsUpdateModalOpen(true)
                                                        }}
                                                        className='cursor-pointer hover:opacity-70 transition-opacity'
                                                    >
                                                        <Edit size={16} color='#8C90A3' />
                                                    </button>
                                                    <TrashWithConfrim
                                                        onDelete={() => {
                                                            deleteThemeValue(item._id, {
                                                                onSuccess: () => {
                                                                    toast.success('مقدار تم با موفقیت حذف شد')
                                                                },
                                                                onError: (error) => {
                                                                    toast.error(extractErrorMessage(error))
                                                                }
                                                            })
                                                        }}
                                                        isLoading={isDeletingThemeValue}
                                                    />
                                                </div>
                                            </Td>
                                        </tr>
                                    )
                                })
                            ) : (
                                <tr>
                                    <td colSpan={3} className='text-center py-8 text-gray-500'>
                                        هیچ مقداری یافت نشد
                                    </td>
                                </tr>
                            )
                        }
                    </tbody>
                </table>
            </div>

            {id && (
                <CreateThemeValueModal
                    open={isModalOpen}
                    close={() => setIsModalOpen(false)}
                    themeId={id}
                />
            )}

            <UpdateThemeValueModal
                open={isUpdateModalOpen}
                close={() => {
                    setIsUpdateModalOpen(false)
                    setSelectedThemeValue(null)
                }}
                themeValue={selectedThemeValue}
            />
        </div>
    )
}

export default Values