import { FC, useEffect } from 'react'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import { useTranslation } from 'react-i18next'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { CreateCompanyType } from './types/CompanyTypes'
import { useState } from 'react'
import { useMultiUpload, useSingleUpload } from '../service/hooks/useServiceData'
import { useGetCompanyDetail, useUpdateCompany } from './hooks/useCompanyData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import { Pages } from '../../config/Pages'
import { useNavigate, useParams } from 'react-router-dom'
import CompanyServices from './components/CompanyServices'
import CompanyProducts from './components/CompanyProducts'
import DatePickerComponent from '../../components/DatePicker'
import moment from 'moment-jalaali'
import UpdateSidebar from './components/UpdateSideBar'

type ServiceType = {
    id: string;
    title: string;
    imageUrl: string;
    company: string;
}

type ProductType = {
    id: string;
    title: string;
    imageUrl: string;
    company: string;
}

const UpdateCompany: FC = () => {
    const navigate = useNavigate()
    const { id } = useParams()
    const { t } = useTranslation('global')
    const [profileImage, setProfileImage] = useState<File | null>(null)
    const [coverImage, setCoverImage] = useState<File | null>(null)
    const multiUpload = useMultiUpload()
    const singleUpload = useSingleUpload()
    const updateCompany = useUpdateCompany()
    const { data: companyDetail } = useGetCompanyDetail(id)

    const formik = useFormik<CreateCompanyType>({
        initialValues: {
            phone: '',
            firstName: '',
            lastName: '',
            nationalCode: '',
            password: '',
            name: '',
            email: '',
            identificationNumber: '',
            dateOfEstablishment: '',
            address: '',
            mapAddressLink: '',
            description: '',
            websiteUrl: '',
            profileImageUrl: '',
            coverImageUrl: '',
            isActive: true,
            industryId: '',
            products: [],
            services: [],
        },
        validationSchema: Yup.object({
            phone: Yup.string().required(t('errors.required')),
            firstName: Yup.string().required(t('errors.required')),
            lastName: Yup.string().required(t('errors.required')),
            nationalCode: Yup.string().required(t('errors.required')),
            name: Yup.string().required(t('errors.required')),
            email: Yup.string().email(t('errors.invalid_email')).required(t('errors.required')),
            identificationNumber: Yup.string().required(t('errors.required')),
            dateOfEstablishment: Yup.string().required(t('errors.required')),
            address: Yup.string().required(t('errors.required')),
            mapAddressLink: Yup.string().url(t('errors.invalid_url')),
            description: Yup.string().required(t('errors.required')),
            websiteUrl: Yup.string().url(t('errors.invalid_url')).required(t('errors.required')),
            isActive: Yup.boolean().required(t('errors.required')),
            industryId: Yup.string().required(t('errors.required')),
            // products and services validation can be added if needed
        }),
        onSubmit: async (values) => {
            // آپلود تصاویر خدمات
            let serviceImages: string[] = []
            const serviceImageIndices: number[] = []
            if (services.length > 0) {
                const formDataServices = new FormData()
                services.forEach((s, index) => {
                    if (s.image) {
                        formDataServices.append('files', s.image)
                        serviceImageIndices.push(index)
                    }
                })

                // فقط تصاویر جدید را آپلود کن
                if (formDataServices.getAll('files').length > 0) {
                    const serviceUploadRes = await multiUpload.mutateAsync(formDataServices)
                    serviceImages = serviceUploadRes.data.map((item: { url: string }) => item?.url)
                }
            }

            // آپلود تصاویر محصولات
            let productImages: string[] = []
            const productImageIndices: number[] = []
            if (products.length > 0) {
                const formDataProducts = new FormData()
                products.forEach((p, index) => {
                    if (p.image) {
                        formDataProducts.append('files', p.image)
                        productImageIndices.push(index)
                    }
                })

                // فقط تصاویر جدید را آپلود کن
                if (formDataProducts.getAll('files').length > 0) {
                    const productUploadRes = await multiUpload.mutateAsync(formDataProducts)
                    productImages = productUploadRes.data.map((item: { url: string }) => item?.url)
                }
            }

            // مقداردهی به values
            values.services = services.map((s, idx) => {
                if (s.existingImageUrl) {
                    return {
                        title: s.title,
                        imageUrl: s.existingImageUrl
                    }
                }

                if (s.image) {
                    const imageIndex = serviceImageIndices.indexOf(idx)
                    if (imageIndex !== -1 && serviceImages[imageIndex]) {
                        return {
                            title: s.title,
                            imageUrl: serviceImages[imageIndex]
                        }
                    }
                }

                return {
                    title: s.title,
                    imageUrl: ''
                }
            })

            values.products = products.map((p, idx) => {
                if (p.existingImageUrl) {
                    return {
                        title: p.title,
                        imageUrl: p.existingImageUrl
                    }
                }

                if (p.image) {
                    const imageIndex = productImageIndices.indexOf(idx)
                    if (imageIndex !== -1 && productImages[imageIndex]) {
                        return {
                            title: p.title,
                            imageUrl: productImages[imageIndex]
                        }
                    }
                }

                return {
                    title: p.title,
                    imageUrl: ''
                }
            })

            if (profileImage) {
                const formDataProfile = new FormData()
                formDataProfile.append('file', profileImage)
                const profileUploadRes = await singleUpload.mutateAsync(formDataProfile)
                values.profileImageUrl = profileUploadRes.data.url
            }

            if (coverImage) {
                const formDataCover = new FormData()
                formDataCover.append('file', coverImage)
                const coverUploadRes = await singleUpload.mutateAsync(formDataCover)
                values.coverImageUrl = coverUploadRes.data.url
            }

            await updateCompany.mutateAsync({ id: id || '', params: values }, {
                onSuccess: () => {
                    toast.success('شرکت با موفقیت ثبت شد')
                    navigate(Pages.company.list)
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error?.message[0])
                }
            })
        }
    })

    useEffect(() => {
        if (companyDetail) {
            formik.setValues(companyDetail?.data?.company)
            formik.setFieldValue('dateOfEstablishment', moment(companyDetail?.data?.company?.dateOfEstablishment).format('YYYY-MM-DD'))
            formik.setFieldValue('firstName', companyDetail?.data?.company?.user?.firstName)
            formik.setFieldValue('lastName', companyDetail?.data?.company?.user?.lastName)
            formik.setFieldValue('nationalCode', companyDetail?.data?.company?.user?.nationalCode)
            formik.setFieldValue('phone', companyDetail?.data?.company?.user?.phone)
            formik.setFieldValue('email', companyDetail?.data?.company?.user?.email)
            formik.setFieldValue('address', companyDetail?.data?.company?.address)
            formik.setFieldValue("industryId", companyDetail?.data?.company?.industry?.id)

            // ذخیره سرویس‌ها با URL تصاویر موجود
            setServices(companyDetail?.data?.company?.services?.map((s: ServiceType) => ({
                title: s.title,
                existingImageUrl: s.imageUrl
            })) || [])

            // ذخیره محصولات با URL تصاویر موجود
            setProducts(companyDetail?.data?.company?.products?.map((p: ProductType) => ({
                title: p.title,
                existingImageUrl: p.imageUrl
            })) || [])
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [companyDetail])

    const [services, setServices] = useState<{ title: string; image?: File; existingImageUrl?: string }[]>([])
    const [products, setProducts] = useState<{ title: string; image?: File; existingImageUrl?: string }[]>([])

    console.log(formik.errors);


    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    ویرایش شرکت
                </div>

                <Button
                    className='w-fit px-4'
                    onClick={() => formik.handleSubmit()}
                    isLoading={updateCompany.isPending || singleUpload.isPending || multiUpload.isPending}
                >
                    <div className='flex items-center gap-2'>
                        <TickCircle size={20} color='white' />
                        <div>بروزرسانی شرکت</div>
                    </div>
                </Button>
            </div>

            <div className='flex gap-6'>
                <div className='flex-1'>
                    <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                        <div>اطلاعات شرکت</div>

                        <div className='mt-6'>
                            <Input
                                label='نام شرکت'
                                name='name'
                                value={formik.values.name}
                                onChange={formik.handleChange}
                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                            />
                        </div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label='نام'
                                name='firstName'
                                value={formik.values.firstName}
                                onChange={formik.handleChange}
                                error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
                            />
                            <Input
                                label='نام خانوادگی'
                                name='lastName'
                                value={formik.values.lastName}
                                onChange={formik.handleChange}
                                error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                            />
                        </div>
                        <div className='rowTwoInput mt-6'>
                            <Input
                                label='کد ملی'
                                name='nationalCode'
                                value={formik.values.nationalCode}
                                onChange={formik.handleChange}
                                error_text={formik.touched.nationalCode && formik.errors.nationalCode ? formik.errors.nationalCode : ''}
                            />
                            <Input
                                label='رمز عبور'
                                name='password'
                                type='password'
                                value={formik.values.password}
                                onChange={formik.handleChange}
                                error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                            />
                        </div>
                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.phone_number')}
                                name='phone'
                                value={formik.values.phone}
                                onChange={formik.handleChange}
                                error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                            />
                            <Input
                                label={t('company.email')}
                                name='email'
                                value={formik.values.email}
                                onChange={formik.handleChange}
                                error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
                            />
                        </div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.national_id')}
                                name='identificationNumber'
                                value={formik.values.identificationNumber}
                                onChange={formik.handleChange}
                                error_text={formik.touched.identificationNumber && formik.errors.identificationNumber ? formik.errors.identificationNumber : ''}
                            />

                            <DatePickerComponent
                                label={t('company.establishment_date')}
                                placeholder='تاریخ تاسیس'
                                onChange={(date) => formik.setFieldValue('dateOfEstablishment', moment(date).format('YYYY-MM-DD'))}
                                error_text={formik.touched.dateOfEstablishment && formik.errors.dateOfEstablishment ? formik.errors.dateOfEstablishment : ''}
                                defaulValue={formik.values.dateOfEstablishment}
                            />
                        </div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.map_link')}
                                name='mapAddressLink'
                                value={formik.values.mapAddressLink}
                                onChange={formik.handleChange}
                                error_text={formik.touched.mapAddressLink && formik.errors.mapAddressLink ? formik.errors.mapAddressLink : ''}
                            />
                        </div>

                        <div className='mt-6'>
                            <Input
                                label={t('company.address')}
                                name='address'
                                value={formik.values.address}
                                onChange={formik.handleChange}
                                error_text={formik.touched.address && formik.errors.address ? formik.errors.address : ''}
                            />
                        </div>

                        <div className='mt-6'>
                            <Input
                                label={t('company.short_description')}
                                name='description'
                                value={formik.values.description}
                                onChange={formik.handleChange}
                                error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                            />
                        </div>

                        <CompanyServices value={services} onChange={setServices} />
                        <CompanyProducts value={products} onChange={setProducts} />
                    </div>


                </div>

                <UpdateSidebar formik={formik} setProfileImage={setProfileImage} setCoverImage={setCoverImage} />
            </div>
        </div>
    )
}

export default UpdateCompany