import { type FC } from 'react'
import { useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useCreateDmenuRestaurant, useDirectLogin, useGetSubscription } from './hooks/useServiceData'
import { useFormik } from 'formik'
import { DmenuCreateRestaurantType } from './types/ServiecTypes'
import * as Yup from 'yup'
import { toast } from '../../components/Toast'
import { ErrorType } from '../../helpers/types'
import Input from '../../components/Input'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import { Helmet } from 'react-helmet-async'

export const ManageRestaurant: FC = () => {
    const { t } = useTranslation('global')
    const { subscriptionId } = useParams()
    const createDmenuRestaurant = useCreateDmenuRestaurant()
    const getSubscription = useGetSubscription(subscriptionId || '')
    const { mutate: directLogin } = useDirectLogin()

    const handleDirectLogin = () => {
        if (!subscriptionId) {
            toast(t('errors.required') || 'شناسه اشتراک یافت نشد', 'error')
            return
        }

        directLogin(subscriptionId, {
            onSuccess: (data) => {
                const serviceLink = getSubscription?.data?.data?.userSubscription?.plan?.service?.link
                if (serviceLink && data?.data?.tokens?.accessToken?.token && data?.data?.tokens?.refreshToken?.token) {
                    window.location.href = `${serviceLink}?token=${data.data.tokens.accessToken.token}&refreshToken=${data.data.tokens.refreshToken.token}`
                } else {
                    toast('خطا در دریافت اطلاعات سرویس', 'error')
                }
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message?.[0] || 'خطا در ورود مستقیم', 'error')
            }
        })
    }

    const formik = useFormik<DmenuCreateRestaurantType>({
        initialValues: {
            name: '',
            slug: '',
            establishedYear: 0,
            phone: '',
            userSubscriptionId: subscriptionId || ''
        },
        enableReinitialize: true,
        validationSchema: Yup.object({
            name: Yup.string().required(t('errors.required')),
            slug: Yup.string().required(t('errors.required')),
            establishedYear: Yup.number()
                .required(t('errors.required'))
                .min(1300, 'سال باید حداقل ۱۳۰۰ باشد')
                .max(1500, 'سال باید حداکثر ۱۵۰۰ باشد'),
            phone: Yup.string().required(t('errors.required')),
            userSubscriptionId: Yup.string().required(t('errors.required'))
        }),
        onSubmit: (values) => {
            const submitValues = {
                ...values,
                establishedYear: Number(values.establishedYear)
            }
            createDmenuRestaurant.mutate(submitValues, {
                onSuccess: () => {
                    toast(t('success') || 'با موفقیت انجام شد', 'success')
                    formik.resetForm()
                    handleDirectLogin()
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message?.[0] || 'خطا در ایجاد رستوران', 'error')
                }
            })
        }
    })

    return (
        <>
            <Helmet>
                <title>{t('restaurant.manage')}</title>
            </Helmet>
            <div className='mt-4'>
                <div className='text-lg font-semibold mb-2'>
                    {t('restaurant.manage') || 'مدیریت رستوران'}
                </div>

                <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
                    <div className='mt-4'>
                        <div className='mb-6'>
                            <div className='text-base font-medium mb-2'>
                                {t('restaurant.restaurant_info') || 'اطلاعات رستوران'}
                            </div>
                            <div className='text-description text-xs'>
                                {t('restaurant.enter_restaurant_info') || 'لطفا اطلاعات رستوران خود را وارد کنید'}
                            </div>
                        </div>

                        <div className='flex flex-col gap-6'>
                            <div className='flex xl:flex-row flex-col xl:gap-6 gap-3'>
                                <Input
                                    label={t('restaurant.name') || 'نام رستوران'}
                                    {...formik.getFieldProps('name')}
                                    error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                                    placeholder={t('restaurant.enter_name') || 'نام رستوران را وارد کنید'}
                                />

                                <Input
                                    label={t('restaurant.slug') || 'اسلاگ'}
                                    {...formik.getFieldProps('slug')}
                                    error_text={formik.touched.slug && formik.errors.slug ? formik.errors.slug : ''}
                                    placeholder={t('restaurant.enter_slug') || 'اسلاگ را وارد کنید'}
                                />
                            </div>

                            <div className='flex xl:flex-row flex-col xl:gap-6 gap-3'>
                                <Input
                                    label={t('restaurant.established_year') || 'سال تأسیس'}
                                    {...formik.getFieldProps('establishedYear')}
                                    error_text={formik.touched.establishedYear && formik.errors.establishedYear ? formik.errors.establishedYear : ''}
                                    placeholder={t('restaurant.enter_year') || 'سال تأسیس را وارد کنید'}
                                    type='number'
                                    min={1300}
                                    max={1500}
                                />

                                <Input
                                    label={t('auth.phonen_number') || 'شماره تماس'}
                                    {...formik.getFieldProps('phone')}
                                    error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                                    placeholder={t('auth.enter_phone_number') || 'شماره تماس را وارد کنید'}
                                />
                            </div>

                            <div className='mt-4 flex justify-end'>
                                <Button
                                    className='xl:w-fit px-7'
                                    onClick={() => formik.handleSubmit()}
                                    isLoading={createDmenuRestaurant.isPending}
                                >
                                    <div className='flex gap-2 items-center'>
                                        <TickCircle
                                            size={24}
                                            color='white'
                                        />
                                        <div>{t('save') || 'ذخیره'}</div>
                                    </div>
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}