import { type FC, useState } from 'react'
import { useGetCategories, type CategoryTreeNode } from '../category'
import { useFormik } from 'formik'
import { type CreateBrandType } from './types/Types'
import * as Yup from 'yup'
import { useCreateBrand } from './hooks/useBrandData'
import { useNavigate } from 'react-router-dom'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import { useUploadMultiple, useUploadSingle } from '../uploader/hooks/useUploaderData'
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'

const Create: FC = () => {
    const navigate = useNavigate()
    const { data: categoriesData } = useGetCategories()
    const uploadSingle = useUploadSingle()
    const uploadMultiple = useUploadMultiple()
    const createBrandMutation = useCreateBrand()

    const [logoFile, setLogoFile] = useState<File[]>([])
    const [imageFiles, setImageFiles] = useState<File[]>([])

    const formik = useFormik<CreateBrandType>({
        initialValues: {
            title_fa: '',
            title_en: '',
            category: '',
            description: '',
            images: [],
            logoUrl: '',
        },
        validationSchema: Yup.object({
            title_fa: Yup.string().required('عنوان فارسی برند الزامی است'),
            title_en: Yup.string().required('عنوان انگلیسی برند الزامی است'),
            category: Yup.string().required('دسته بندی برند الزامی است'),
            description: Yup.string().required('توضیحات برند الزامی است'),
        }),
        onSubmit: async (values) => {
            let logoUrl = values.logoUrl
            let images = values.images

            if (logoFile.length > 0) {
                const logoResponse = await uploadSingle.mutateAsync(logoFile[0])
                logoUrl = logoResponse.results?.url?.url || ''
            }

            if (imageFiles.length > 0) {
                const imagesResponse = await uploadMultiple.mutateAsync(imageFiles)
                images = imagesResponse.results?.urls?.map(file => file.url) || []
            }

            const submitData = {
                ...values,
                logoUrl,
                images
            }

            createBrandMutation.mutate(submitData, {
                onSuccess: () => {
                    toast.success('برند با موفقیت ایجاد شد')
                    navigate('/brands')
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        },
    })

    const categoryOptions = categoriesData?.results?.data?.map((category: CategoryTreeNode) => ({
        value: category._id,
        label: category.title_fa
    })) || []

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div className='flex items-center gap-3'>
                    <h1>ساخت برند جدید</h1>
                </div>
                <div>
                    <Button
                        className='px-6'
                        onClick={() => formik.handleSubmit()}
                        isLoading={createBrandMutation.isPending || uploadSingle.isPending || uploadMultiple.isPending}
                        disabled={!formik.isValid || createBrandMutation.isPending || uploadSingle.isPending || uploadMultiple.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='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='مثال: Samsung'
                                {...formik.getFieldProps('title_en')}
                                error_text={formik.touched.title_en && formik.errors.title_en ? formik.errors.title_en : ''}
                            />
                        </div>

                        <Select
                            label='دسته‌بندی'
                            placeholder='انتخاب دسته‌بندی برند'
                            items={categoryOptions}
                            {...formik.getFieldProps('category')}
                            error_text={formik.touched.category && formik.errors.category ? formik.errors.category : ''}
                        />

                        <Textarea
                            label='توضیحات برند'
                            placeholder='توضیحات کامل برند را وارد کنید...'
                            {...formik.getFieldProps('description')}
                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                        />
                    </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>
                                <UploadBoxDraggble
                                    label='لوگو برند'
                                    isMultiple={false}
                                    onChange={(files) => setLogoFile(files)}
                                />
                            </div>

                            <div>
                                <UploadBoxDraggble
                                    label='تصاویر برند'
                                    isMultiple={true}
                                    onChange={(files) => setImageFiles(files)}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Create