import { type FC, useEffect, useState } from 'react'
import { useGetSiteSetting, useUpdateSiteSetting } from './hooks/useSettingData'
import { SiteSettingPageEnum } from './enum/Enum'
import { useFormik } from 'formik'
import type { UpdateSiteSetting } from './types/Types'
import { toast } from 'react-toastify'
import { Pages } from '@/config/Pages'
import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom'
import Button from '@/components/Button'
import TextEditor from '@/components/TextEditor'
import PageLoading from '@/components/PageLoading'
import Error from '@/components/Error'
import { TickCircle } from 'iconsax-react'

const PrivacyPage: FC = () => {
    const navigate = useNavigate()
    const { data: siteSetting, isLoading: siteSettingLoading, error: siteSettingError } = useGetSiteSetting(SiteSettingPageEnum.policyContent)
    const updateSiteSettingMutation = useUpdateSiteSetting()
    const [formData, setFormData] = useState<UpdateSiteSetting>({ policyContent: '' })

    const formik = useFormik<UpdateSiteSetting>({
        initialValues: formData,
        validationSchema: Yup.object({
            policyContent: Yup.string().required('حریم خصوصی الزامی است'),
        }),
        onSubmit: (values) => {
            updateSiteSettingMutation.mutate(values, {
                onSuccess: () => {
                    toast.success('حریم خصوصی با موفقیت ویرایش شد')
                    navigate(Pages.pages.privacy)
                }
            })
        },
        enableReinitialize: true
    })

    useEffect(() => {
        if (siteSetting?.results?.siteSetting?.policyContent) {
            const newData = { policyContent: siteSetting.results.siteSetting.policyContent }
            setFormData(newData)
        }
    }, [siteSetting])

    if (siteSettingLoading) {
        return (
            <div className="flex justify-center items-center min-h-[400px]">
                <PageLoading />
            </div>
        )
    }

    if (siteSettingError) {
        return (
            <div className="flex justify-center items-center min-h-[400px]">
                <Error errorText="خطا در بارگذاری اطلاعات حریم خصوصی" />
            </div>
        )
    }

    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={updateSiteSettingMutation.isPending}
                        disabled={!formik.isValid || updateSiteSettingMutation.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'>
                    <div className='bg-white rounded-lg shadow-sm border p-6'>
                        <div className='mb-4'>
                            <div className='mb-4'>
                                متن حریم خصوصی
                            </div>
                            <TextEditor
                                value={formik.values.policyContent || ''}
                                onChange={(value) => formik.setFieldValue('policyContent', value)}
                                placeholder='متن حریم خصوصی را وارد کنید...'
                            />
                            {formik.touched.policyContent && formik.errors.policyContent && (
                                <div className='text-red-500 text-sm mt-12'>
                                    {formik.errors.policyContent}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default PrivacyPage