import { type FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetFaqDetail, useUpdateFaq } from './hooks/useSettingData'
import { useFormik } from 'formik'
import { type CreateFaqType } from './types/Types'
import { FaqPageEnum } from './enum/Enum'
import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import Select from '../../components/Select'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import { Pages } from '@/config/Pages'
import PageLoading from '../../components/PageLoading'
import Error from '../../components/Error'

const FaqUpdate: FC = () => {
    const navigate = useNavigate()
    const { id } = useParams<{ id: string }>()
    const { data: faqDetail, isLoading: faqDetailLoading, error: faqDetailError } = useGetFaqDetail(id!)
    const updateFaq = useUpdateFaq()

    const formik = useFormik<CreateFaqType>({
        initialValues: {
            question: faqDetail?.results?.faq?.question || '',
            answer: faqDetail?.results?.faq?.answer || '',
            page: faqDetail?.results?.faq?.page as FaqPageEnum || FaqPageEnum.Faq,
        },
        enableReinitialize: true,
        validationSchema: Yup.object({
            question: Yup.string().required('سوال الزامی است'),
            answer: Yup.string().required('جواب الزامی است'),
            page: Yup.string().required('صفحه الزامی است'),
        }),
        onSubmit: (values) => {
            updateFaq.mutate({ id: id!, params: values }, {
                onSuccess: () => {
                    toast.success('سوال متداول با موفقیت به‌روزرسانی شد')
                    navigate(Pages.pages.faq)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        }
    })

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

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

    const pageOptions = [
        { value: FaqPageEnum.Faq, label: 'سوالات متداول' },
        { value: FaqPageEnum.Seller, label: 'فروشندگان' },
        { value: FaqPageEnum.ProductTag, label: 'برچسب محصول' },
        { value: FaqPageEnum.ProductDescription, label: 'توضیحات محصول' },
        { value: FaqPageEnum.ProductBenefit, label: 'مزایای محصول' },
        { value: FaqPageEnum.ShipmentProcess, label: 'فرآیند ارسال' },
        { value: FaqPageEnum.Policy, label: 'سیاست‌ها' },
    ]

    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={updateFaq.isPending}
                        disabled={!formik.isValid || updateFaq.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'>
                        <Input
                            label='سوال'
                            placeholder='سوال متداول را وارد کنید...'
                            {...formik.getFieldProps('question')}
                            error_text={formik.touched.question && formik.errors.question ? formik.errors.question : ''}
                        />

                        <Textarea
                            label='جواب'
                            placeholder='جواب سوال را وارد کنید...'
                            {...formik.getFieldProps('answer')}
                            error_text={formik.touched.answer && formik.errors.answer ? formik.errors.answer : ''}
                        />

                        <Select
                            label='صفحه مربوطه'
                            placeholder='انتخاب صفحه'
                            items={pageOptions}
                            {...formik.getFieldProps('page')}
                            error_text={formik.touched.page && formik.errors.page ? formik.errors.page : ''}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default FaqUpdate