import { type FC, useState, useEffect } from 'react'
import PageTitle from '../../components/PageTitle'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useGetShop, useUpdateShop } from './hooks/useSettingData'
import { type UpdateShopType } from './types/Types'
import Button from '../../components/Button'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import { useSingleUpload } from '../category'

// Validation schema برای UpdateShopType
const validationSchema = Yup.object().shape({
    shopName: Yup.string().required('نام شاپ الزامی است'),
    shopDescription: Yup.string().required('توضیحات شاپ الزامی است'),
    telephoneNumber: Yup.string().required('شماره تلفن الزامی است'),
    shopPostalCode: Yup.string().required('کد پستی الزامی است'),
})

const Shop: FC = () => {
    const { data: shopDetail, isLoading: shopDetailLoading, error: shopDetailError } = useGetShop()
    const updateShopMutation = useUpdateShop()
    const uploadSingle = useSingleUpload()
    const [logoFile, setLogoFile] = useState<File[]>([])

    const formik = useFormik<UpdateShopType>({
        initialValues: {
            shopName: '',
            shopDescription: '',
            telephoneNumber: '',
            shopPostalCode: '',
            logo: undefined
        },
        validationSchema,
        onSubmit: async (values) => {

            if (logoFile.length > 0) {
                const logoResponse = await uploadSingle.mutateAsync(logoFile[0])
                values.logo = logoResponse.results?.url?.url || undefined
            } else {
                values.logo = undefined
            }

            const submitData = {
                ...values,
            }

            updateShopMutation.mutate(submitData, {
                onSuccess: () => {
                    toast.success('اطلاعات شاپ با موفقیت بروزرسانی شد')
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        }
    })


    useEffect(() => {
        if (shopDetail?.results?.shop) {
            const shop = shopDetail.results.shop

            formik.setValues({
                shopName: shop.shopName || '',
                shopDescription: shop.shopDescription || '',
                telephoneNumber: shop.telephoneNumber || '',
                shopPostalCode: shop.shopPostalCode || '',
                logo: shop.logo || ''
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [shopDetail])

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

    if (shopDetailError) {
        return <div className="text-red-500 text-center mt-8">خطا در بارگذاری اطلاعات شاپ</div>
    }

    return (
        <div className='mt-4'>
            <PageTitle />
            <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={updateShopMutation.isPending}
                        disabled={!formik.isValid || updateShopMutation.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('shopName')}
                                error_text={formik.touched.shopName && formik.errors.shopName ? formik.errors.shopName : ''}
                            />
                            <Input
                                label='شماره تلفن'
                                placeholder='مثال: ۰۹۱۲۳۴۵۶۷۸۹'
                                {...formik.getFieldProps('telephoneNumber')}
                                error_text={formik.touched.telephoneNumber && formik.errors.telephoneNumber ? formik.errors.telephoneNumber : ''}
                            />
                        </div>

                        <Input
                            label='کد پستی'
                            placeholder='مثال: ۱۲۳۴۵۶۷۸۹۰'
                            {...formik.getFieldProps('shopPostalCode')}
                            error_text={formik.touched.shopPostalCode && formik.errors.shopPostalCode ? formik.errors.shopPostalCode : ''}
                        />

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

export default Shop