import { useFormik } from 'formik'
import { type FC } from 'react'
import { useGetPermissions, useCreateAdmin } from './hooks/useAdminData'
import type { CreateAdminType } 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 Create: FC = () => {
    const navigate = useNavigate()
    const { data: permissionsData } = useGetPermissions()
    const createAdminMutation = useCreateAdmin()

    const formik = useFormik<CreateAdminType>({
        initialValues: {
            fullName: "",
            userName: "",
            email: "",
            phoneNumber: "",
            permissions: [],
            password: "",
        },
        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("دسترسی های الزامی است"),
            password: Yup.string().min(6, "رمز عبور باید حداقل ۶ کاراکتر باشد").required("رمز عبور الزامی است"),
        }),
        onSubmit: async (values) => {
            createAdminMutation.mutate(values, {
                onSuccess: () => {
                    toast.success('ادمین با موفقیت ایجاد شد')
                    navigate(Pages.admin.list)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        }
    })

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

    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={createAdminMutation.isPending}
                        disabled={!formik.isValid || createAdminMutation.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>

                        <Input
                            label='رمز عبور'
                            placeholder='رمز عبور را وارد کنید'
                            type='password'
                            {...formik.getFieldProps('password')}
                            error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                        />
                    </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 Create