import { type FC, useState, useEffect } from 'react'
import Button from '../../components/Button'
import { TickCircle, ArrowLeft } from 'iconsax-react'
import SwitchComponent from '../../components/Switch'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Select from '../../components/Select'
import { type CategoryType, type CategoryTreeNode } from './types/Types'
import { CategoryThemeEnum } from './enum/Enum'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useUpdateCategory, useGetCategories, useGetCategoryById, useSingleUpload } from './hooks/useCategoryData'
import { useNavigate, useParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import { Pages } from '../../config/Pages'

const UpdateCategory: FC = () => {
    const navigate = useNavigate()
    const { id } = useParams<{ id: string }>()
    const [iconFile, setIconFile] = useState<File>()
    const [imageFile, setImageFile] = useState<File>()
    const [searchTerm, setSearchTerm] = useState('')
    const [isActive, setIsActive] = useState(true)
    const [hasIconChanged, setHasIconChanged] = useState(false)
    const [hasImageChanged, setHasImageChanged] = useState(false)
    const [isDataLoaded, setIsDataLoaded] = useState(false)

    const singleUpload = useSingleUpload()
    const updateCategoryMutation = useUpdateCategory()
    const getCategories = useGetCategories()
    const getCategoryById = useGetCategoryById(id!)

    const formik = useFormik<CategoryType>({
        initialValues: {
            title_fa: '',
            title_en: '',
            icon: '',
            imageUrl: '',
            description: '',
            parent: null,
            theme: '',
        },
        validationSchema: Yup.object({
            title_fa: Yup.string().required('عنوان فارسی دسته الزامی است'),
            title_en: Yup.string().required('عنوان انگلیسی دسته الزامی است'),
            description: Yup.string().required('توضیحات دسته الزامی است'),
            parent: Yup.string().nullable().optional(),
            theme: Yup.string().optional(),
        }),
        onSubmit: async (values) => {
            const updatedValues = { ...values }

            // آپلود آیکون جدید اگر تغییر کرده باشد
            if (hasIconChanged && iconFile) {
                const iconRes = await singleUpload.mutateAsync(iconFile)
                updatedValues.icon = iconRes.results?.url?.url
            }

            // آپلود تصویر جدید اگر تغییر کرده باشد
            if (hasImageChanged && imageFile) {
                const imageRes = await singleUpload.mutateAsync(imageFile)
                updatedValues.imageUrl = imageRes.results?.url?.url
            }

            updateCategoryMutation.mutate(
                { id: id!, data: updatedValues },
                {
                    onSuccess: () => {
                        toast.success('دسته با موفقیت ویرایش شد')
                        navigate(Pages.category.list)
                    },
                    onError: () => {
                        toast.error('خطا در ویرایش دسته')
                    },
                }
            )
        },
    })

    // بارگذاری داده‌های دسته برای ویرایش
    useEffect(() => {
        if (getCategoryById.data?.results?.data && !isDataLoaded) {
            const categoryData = getCategoryById.data.results.data
            formik.setValues({
                title_fa: categoryData.title_fa || '',
                title_en: categoryData.title_en || '',
                icon: categoryData.icon || '',
                imageUrl: categoryData.imageUrl || '',
                description: categoryData.description || '',
                parent: categoryData.parent,
                theme: categoryData.theme || '',
            })
            setIsActive(!categoryData.deleted)
            setIsDataLoaded(true)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [getCategoryById.data, isDataLoaded])

    const categoriesData: CategoryTreeNode[] = getCategories.data?.results?.data || []


    const filteredCategories = categoriesData.filter(cat =>
        cat.title_fa.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cat.title_en.toLowerCase().includes(searchTerm.toLowerCase())
    )

    const handleParentSelect = (category: CategoryTreeNode) => {
        formik.setFieldValue('parent', category._id)
    }

    const handleIconChange = (files: File[]) => {
        setIconFile(files[0])
        setHasIconChanged(true)
    }

    const handleImageChange = (files: File[]) => {
        setImageFile(files[0])
        setHasImageChanged(true)
    }

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

    if (getCategoryById.isError) {
        return (
            <div className="flex justify-center items-center h-64">
                <div className="text-red-500">خطا در بارگذاری اطلاعات دسته</div>
            </div>
        )
    }

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div className='flex items-center gap-3'>
                    <button
                        onClick={() => navigate(-1)}
                        className='p-2 hover:bg-gray-100 rounded-lg transition-colors'
                    >
                        <ArrowLeft size={20} />
                    </button>
                    <h1 className=''>ویرایش دسته</h1>
                </div>
                <div>
                    <Button
                        className='px-6'
                        onClick={() => formik.handleSubmit()}
                        isLoading={updateCategoryMutation.isPending}
                        disabled={!formik.isValid || updateCategoryMutation.isPending}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle size={16} color='#fff' />
                            <div>ذخیره تغییرات</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='flex gap-6 xl:mt-8 mt-6'>
                {/* اطلاعات اصلی */}
                <div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
                    <h2 className='text-lg font-medium mb-6'>اطلاعات اصلی</h2>

                    <div className='space-y-6'>
                        <div className='flex items-center justify-between'>
                            <span className='text-gray-700'>وضعیت دسته</span>
                            <SwitchComponent
                                active={isActive}
                                onChange={setIsActive}
                            />
                        </div>

                        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                            <Input
                                label='عنوان فارسی دسته'
                                placeholder='مثال: الکترونیک'
                                {...formik.getFieldProps('title_fa')}
                                error_text={formik.touched.title_fa && formik.errors.title_fa ? formik.errors.title_fa : ''}
                            />
                            <Input
                                label='عنوان انگلیسی دسته'
                                placeholder='مثال: Electronics'
                                {...formik.getFieldProps('title_en')}
                                error_text={formik.touched.title_en && formik.errors.title_en ? formik.errors.title_en : ''}
                            />
                        </div>

                        <Textarea
                            label='توضیحات دسته'
                            placeholder='توضیحات کامل دسته را وارد کنید...'
                            {...formik.getFieldProps('description')}
                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                        />

                        <Select
                            label='تم دسته'
                            placeholder='انتخاب تم دسته'
                            items={[
                                { value: CategoryThemeEnum.Sized, label: 'سایز' },
                                { value: CategoryThemeEnum.Colored, label: 'رنگ' },
                                { value: CategoryThemeEnum.Meterage, label: 'متراژ' },
                                { value: CategoryThemeEnum.No_color_No_sized, label: 'بدون تنوع' },
                            ]}
                            value={formik.values.theme}
                            onChange={(e) => formik.setFieldValue('theme', e.target.value)}
                            error_text={formik.touched.theme && formik.errors.theme ? formik.errors.theme : ''}
                        />
                    </div>
                </div>

                {/* ستون سمت راست */}
                <div className='w-80 space-y-6'>
                    {/* آپلود فایل‌ها */}
                    <div className='text-sm bg-white py-8 px-6 rounded-3xl'>
                        <h2 className='text-lg font-medium mb-6'>فایل‌ها</h2>

                        <div className='space-y-6'>
                            <div>
                                <UploadBox
                                    label='آیکون دسته'
                                    onChange={handleIconChange}
                                />
                                {formik.values.icon && !hasIconChanged && (
                                    <div className='mt-2 p-2 bg-gray-50 rounded-lg'>
                                        <div className='text-xs text-gray-600 mb-2'>آیکون فعلی:</div>
                                        <div className='flex justify-center'>
                                            <img
                                                src={formik.values.icon}
                                                alt='آیکون فعلی'
                                                className='w-12 h-12 rounded-full object-cover border border-gray-200'
                                            />
                                        </div>
                                    </div>
                                )}
                                {formik.errors.icon && formik.touched.icon && (
                                    <p className='text-red-500 text-xs mt-1'>{formik.errors.icon}</p>
                                )}
                            </div>

                            <div>
                                <UploadBox
                                    label='تصویر دسته'
                                    onChange={handleImageChange}
                                />
                                {formik.values.imageUrl && !hasImageChanged && (
                                    <div className='mt-2 p-2 bg-gray-50 rounded-lg'>
                                        <div className='text-xs text-gray-600 mb-2'>تصویر فعلی:</div>
                                        <div className='flex justify-center'>
                                            <img
                                                src={formik.values.imageUrl}
                                                alt='تصویر فعلی'
                                                className='w-16 h-16 rounded-lg object-cover border border-gray-200'
                                            />
                                        </div>
                                    </div>
                                )}
                                {formik.errors.imageUrl && formik.touched.imageUrl && (
                                    <p className='text-red-500 text-xs mt-1'>{formik.errors.imageUrl}</p>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* انتخاب دسته والد */}
                    <div className='text-sm bg-white py-6 px-4 rounded-2xl'>
                        <h2 className='text-lg font-medium mb-4'>انتخاب دسته والد</h2>

                        {/* جستجو */}
                        <div className='mb-4'>
                            <div className='relative'>
                                <input
                                    type='text'
                                    placeholder='جستجو در دسته‌ها...'
                                    value={searchTerm}
                                    onChange={(e) => setSearchTerm(e.target.value)}
                                    className='w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white'
                                />
                                <div className='absolute left-3 top-1/2 transform -translate-y-1/2'>
                                    <svg className='w-4 h-4 text-gray-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' />
                                    </svg>
                                </div>
                            </div>
                        </div>

                        {/* درخت دسته‌بندی */}
                        <div className='bg-gray-50 border border-gray-200 rounded-lg p-3 max-h-72 overflow-y-auto'>
                            {filteredCategories.length > 0 ? (
                                <div className='space-y-2'>
                                    {filteredCategories.map((category: CategoryTreeNode) => (
                                        <div key={category._id} className='space-y-1'>
                                            {/* دسته اصلی */}
                                            <div
                                                className={`
                                                    flex items-center gap-3 p-2.5 rounded-lg cursor-pointer transition-colors
                                                    ${category._id === formik.values.parent
                                                        ? 'bg-blue-100 border border-blue-300'
                                                        : 'hover:bg-gray-100'
                                                    }
                                                `}
                                                onClick={() => handleParentSelect(category)}
                                            >
                                                <div className='flex-1 min-w-0'>
                                                    <div className='flex items-center gap-2 mb-1'>
                                                        <span className={`text-sm font-medium ${category._id === formik.values.parent ? 'text-blue-700' : 'text-gray-900'}`}>
                                                            {category.title_fa}
                                                        </span>
                                                        {category.children.length > 0 && (
                                                            <span className='bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs'>
                                                                {category.children.length}
                                                            </span>
                                                        )}
                                                    </div>
                                                    <div className='text-xs text-gray-500'>{category.title_en}</div>
                                                </div>
                                                {category._id === formik.values.parent && (
                                                    <div className='flex-shrink-0'>
                                                        <div className='w-2 h-2 bg-blue-500 rounded-full'></div>
                                                    </div>
                                                )}
                                            </div>

                                            {/* زیردسته‌ها - همیشه باز */}
                                            {category.children.length > 0 && (
                                                <div className='mr-4 space-y-1'>
                                                    {category.children.map((child: CategoryTreeNode) => (
                                                        <div
                                                            key={child._id}
                                                            className={`
                                                                flex items-center gap-3 p-2.5 rounded-lg cursor-pointer transition-colors
                                                                ${child._id === formik.values.parent
                                                                    ? 'bg-blue-100 border border-blue-300'
                                                                    : 'hover:bg-gray-100'
                                                                }
                                                            `}
                                                            onClick={() => handleParentSelect(child)}
                                                        >
                                                            <div className='flex-1 min-w-0'>
                                                                <div className='flex items-center gap-2 mb-1'>
                                                                    <span className={`text-sm font-medium ${child._id === formik.values.parent ? 'text-blue-700' : 'text-gray-800'}`}>
                                                                        {child.title_fa}
                                                                    </span>
                                                                    {child.children.length > 0 && (
                                                                        <span className='bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full text-xs'>
                                                                            {child.children.length}
                                                                        </span>
                                                                    )}
                                                                </div>
                                                                <div className='text-xs text-gray-500'>{child.title_en}</div>
                                                            </div>
                                                            {child._id === formik.values.parent && (
                                                                <div className='flex-shrink-0'>
                                                                    <div className='w-2 h-2 bg-blue-500 rounded-full'></div>
                                                                </div>
                                                            )}
                                                        </div>
                                                    ))}
                                                </div>
                                            )}
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className='text-center py-8 text-gray-500'>
                                    <svg className='w-12 h-12 mx-auto mb-3 text-gray-300' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1} d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z' />
                                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1} d='M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z' />
                                    </svg>
                                    <p className='text-sm font-medium text-gray-400 mb-1'>
                                        {searchTerm ? 'نتیجه‌ای یافت نشد' : 'دسته‌ای موجود نیست'}
                                    </p>
                                    <p className='text-xs text-gray-400'>
                                        {searchTerm ? 'کلمه جستجو را تغییر دهید' : 'برای شروع، دسته‌ای جدید ایجاد کنید'}
                                    </p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default UpdateCategory
