import { type FC } from 'react'
import type { FormikProps } from 'formik'
import { Magicpen } from 'iconsax-react'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import { extractErrorMessage } from '@/config/func'
import { toast } from 'react-toastify'
import type { CreateFoodType } from '../types/Types'
import { useGenerateFoodDescription } from '../hooks/useFoodData'

type BasicInfoSectionProps = {
  formik: FormikProps<CreateFoodType>
  categories: Array<{ label: string; value: string }>
}

const parseDescription = (data: { answer?: string } | undefined): string => {
  return data?.answer?.trim() || ''
}

const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) => {
  const { mutate: generateDescription, isPending: isGeneratingDesc } = useGenerateFoodDescription()

  const handleGenerateDescription = () => {
    const foodName = formik.values.title.trim()
    if (!foodName) {
      toast.error('لطفاً ابتدا نام کامل غذا را وارد کنید')
      return
    }

    generateDescription(
      { foodName },
      {
        onSuccess: (response) => {
          const description = parseDescription(response.data)
          if (!description) {
            toast.error('توضیحی از هوش مصنوعی دریافت نشد')
            return
          }
          formik.setFieldValue('desc', description)
          toast.success('توضیحات با موفقیت تولید شد')
        },
        onError: (error) => {
          toast.error(extractErrorMessage(error))
        },
      },
    )
  }

  return (
    <>
      <Input
        label='نام غذا'
        name='title'
        placeholder=''
        value={formik.values.title}
        onChange={formik.handleChange}
        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
      />

      <div className='mt-5'>
        <Select
          items={categories}
          label='دسته بندی'
          placeholder='انتخاب کنید'
          name='categoryId'
          value={formik.values.categoryId}
          onChange={(e) => {
            const value = e.target.value
            formik.setFieldValue('categoryId', value)
          }}
          error_text={formik.touched.categoryId && formik.errors.categoryId ? String(formik.errors.categoryId) : ''}
        />
      </div>

      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mt-5'>
        <Input
          name='price'
          label='قیمت'
          placeholder='تومان'
          type='number'
          seprator={true}
          value={formik.values.price}
          onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
          error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
        />

        <Input
          name='discount'
          label='تخفیف'
          placeholder='تومان'
          type='number'
          seprator={true}
          value={formik.values.discount}
          onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
          error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
        />

        <Input
          name='prepareTime'
          label='زمان آماده سازی'
          placeholder='دقیقه'
          type='number'
          value={formik.values.prepareTime}
          onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
          error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
        />

        <Input
          name='dailyStock'
          label='موجودی روزانه'
          placeholder='عدد'
          type='number'
          seprator={true}
          value={formik.values.dailyStock}
          onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
          error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
        />

        <Input
          name='availableStock'
          label='موجودی فعلی'
          placeholder='عدد'
          type='number'
          seprator={true}
          value={formik.values.availableStock}
          onChange={(e) => formik.setFieldValue('availableStock', Number(e.target.value))}
          error_text={formik.touched.availableStock && formik.errors.availableStock ? formik.errors.availableStock : ''}
        />
      </div>

      <div className='mt-5'>
        <div className='flex items-center justify-between mb-1'>
          <div className='text-sm'>توضیحات غذا</div>
          <Button
            type='button'
            className='w-auto h-8 px-3 bg-transparent text-primary border border-primary text-xs gap-1.5'
            onClick={handleGenerateDescription}
            isloading={isGeneratingDesc}
            colorLoading='black'
            disabled={!formik.values.title.trim() || isGeneratingDesc}
          >
            <Magicpen size={16} color='currentColor' />
            تولید با AI
          </Button>
        </div>
        <Textarea
          name='desc'
          placeholder=''
          value={formik.values.desc}
          onChange={formik.handleChange}
          error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
        />
      </div>

      <div className='mt-5'>
        <Input
          name='order'
          label='اولویت'
          placeholder='عدد'
          type='number'
          value={formik.values.order}
          onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
          error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
        />
      </div>
    </>
  )
}

export default BasicInfoSection