
import { type FC, useState } 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 { useCreateCategory, useGetCategories, useSingleUpload } from './hooks/useCategoryData'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { Pages } from '../../config/Pages'

const CreateCategory: FC = () => {

    const navigate = useNavigate()
    const [iconFile, setIconFile] = useState<File>()
    const [imageFile, setImageFile] = useState<File>()
    const [searchTerm, setSearchTerm] = useState('')
    const singleUpload = useSingleUpload()
    const [isActive, setIsActive] = useState(true)

    const createCategoryMutation = useCreateCategory()
    const getCategories = useGetCategories()

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

            if (!iconFile || !imageFile) {
                toast.error('آیکون و تصویر دسته الزامی است')
                return
            }

            if (iconFile) {
                const res = await singleUpload.mutateAsync(iconFile)
                values.icon = res.results?.url?.url

            }
            if (imageFile) {
                const response = await singleUpload.mutateAsync(imageFile)
                values.imageUrl = response.results?.url?.url
            }

            createCategoryMutation.mutate(values, {
                onSuccess: () => {
                    navigate(Pages.category.list)
                },
            })
        },
    })

    // تبدیل داده‌های API به فرمت مورد نیاز
    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)
    }

    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={createCategoryMutation.isPending}
                        disabled={!formik.isValid || createCategoryMutation.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={(files) => setIconFile(files[0])}
                                />
                                {formik.errors.icon && formik.touched.icon && (
                                    <p className='text-red-500 text-xs mt-1'>{formik.errors.icon}</p>
                                )}
                            </div>

                            <div>
                                <UploadBox
                                    label='تصویر دسته'
                                    onChange={(files) => setImageFile(files[0])}
                                />
                                {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>

                        {formik.values.parent && (
                            <div className='mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg'>
                                <div className='text-sm font-medium text-blue-700 mb-1'>دسته انتخاب شده:</div>
                                <div className='text-xs text-blue-600'>
                                    {(() => {
                                        const findCategory = (cats: CategoryTreeNode[], id: string): CategoryTreeNode | null => {
                                            for (const cat of cats) {
                                                if (cat._id === id) return cat
                                                if (cat.children.length > 0) {
                                                    const found = findCategory(cat.children, id)
                                                    if (found) return found
                                                }
                                            }
                                            return null
                                        }
                                        const selected = findCategory(categoriesData, formik.values.parent)
                                        return selected ? selected.title_fa : 'نامشخص'
                                    })()}
                                </div>
                            </div>
                        )}

                        {/* جستجو */}
                        <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 CreateCategory