import { useFormik } from 'formik'
import { type FC, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { useGetPermissions, useGetAdminDetail, useUpdateAdmin } from './hooks/useAdminData'
import type { UpdateAdminType } from './types/Types'
import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom'
import Input from '../../components/Input'
import MultiSelectSearchable from '../../components/MultiSelectSearchable'
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'

const Update: FC = () => {
    const navigate = useNavigate()
    const { id } = useParams<{ id: string }>()
    const { data: permissionsData } = useGetPermissions()
    const { data: adminDetail, isLoading: adminDetailLoading, error: adminDetailError } = useGetAdminDetail(id!)
    const updateAdminMutation = useUpdateAdmin()

    const formik = useFormik<UpdateAdminType>({
        initialValues: {
            fullName: "",
            userName: "",
            email: "",
            phoneNumber: "",
            permissions: [],
        },
        validationSchema: Yup.object({
            fullName: Yup.string().required("نام کامل الزامی است"),
            userName: Yup.string().required("نام کاربری الزامی است"),
            email: Yup.string().email("ایمیل معتبر نیست").required("ایمیل الزامی است"),
            phoneNumber: Yup.string().required("شماره تلفن الزامی است"),
            permissions: Yup.array().min(1, "دسترسی های الزامی است").required("دسترسی های الزامی است"),
        }),
        onSubmit: async (values) => {
            updateAdminMutation.mutate({ id: id!, ...values }, {
                onSuccess: () => {
                    toast.success('ادمین با موفقیت ویرایش شد')
                    navigate(Pages.admin.list)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        }
    })

    useEffect(() => {
        if (adminDetail) {
            formik.setValues({
                fullName: adminDetail.results.admin.fullName,
                userName: adminDetail.results.admin.userName,
                email: adminDetail.results.admin.email,
                phoneNumber: adminDetail.results.admin.phoneNumber,
                permissions: adminDetail.results.admin.permissions,
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [adminDetail])

    const permissionsOptions = permissionsData?.results?.permissions?.map((permission) => ({
        value: permission._id,
        label: permission.name
    })) || []

    if (adminDetailLoading) {
        return <div>در حال بارگذاری...</div>
    }

    if (adminDetailError) {
        return <div>خطا در بارگذاری داده‌ها</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={updateAdminMutation.isPending}
                        disabled={!formik.isValid || updateAdminMutation.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('fullName')}
                                error_text={formik.touched.fullName && formik.errors.fullName ? formik.errors.fullName : ''}
                            />
                            <Input
                                label='نام کاربری'
                                placeholder='مثال: ali_ahmadi'
                                {...formik.getFieldProps('userName')}
                                error_text={formik.touched.userName && formik.errors.userName ? formik.errors.userName : ''}
                            />
                        </div>

                        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                            <Input
                                label='ایمیل'
                                placeholder='مثال: ali@example.com'
                                type='email'
                                {...formik.getFieldProps('email')}
                                error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
                            />
                            <Input
                                label='شماره تلفن'
                                placeholder='مثال: ۰۹۱۲۳۴۵۶۷۸۹'
                                {...formik.getFieldProps('phoneNumber')}
                                error_text={formik.touched.phoneNumber && formik.errors.phoneNumber ? formik.errors.phoneNumber : ''}
                            />
                        </div>
                    </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'>
                            <MultiSelectSearchable
                                label='دسترسی‌های ادمین'
                                placeholder='انتخاب دسترسی‌ها'
                                options={permissionsOptions}
                                value={formik.values.permissions}
                                onChange={(value) => formik.setFieldValue('permissions', value)}
                                error_text={formik.touched.permissions && formik.errors.permissions ? String(formik.errors.permissions) : ''}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Update
