import { type FC, useState, useEffect } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { useNavigate, useParams } from 'react-router-dom'
import Button from '@/components/Button'
import CreateProductSidebar from './components/CreateProductSidebar'
import BasicInfoSection from './components/BasicInfoSection'
import type { CreateProductType } from './types/Types'
import { useQueryClient } from '@tanstack/react-query'
import { useUpdateProduct, useGetProductDetails, useGetCategories } from './hooks/useProductData'
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'

const UpdateProduct: FC = () => {
  const { id } = useParams<{ id: string }>()
  const queryClient = useQueryClient()
  const { data: productData, isLoading } = useGetProductDetails(id || '')
  const { data: categoriesData } = useGetCategories()
  const [isActive, setIsActive] = useState<boolean>(true)
  const [isSpecial, setIsSpecial] = useState<boolean>(false)
  const [imageFiles, setImageFiles] = useState<File[]>([])
  const [existingImages, setExistingImages] = useState<string[]>([])
  const { mutate: updateProduct, isPending } = useUpdateProduct()
  const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload()
  const navigate = useNavigate()
  const categories = categoriesData?.data ?? []

  const product = productData?.data

  const formik = useFormik<CreateProductType>({
    initialValues: {
      categoryId: '',
      title: '',
      attribute: '',
      variants: [],
      desc: '',
      price: 0,
      isActive: true,
      images: [],
      discount: 0,
      isSpecialOffer: false,
      order: 0,
      stock: undefined,
      maxPurchaseQuantity: undefined
    },
    validationSchema: Yup.object().shape({
      title: Yup.string().required('نام کالا الزامی است'),
      categoryId: Yup.string().required('دسته‌بندی الزامی است'),
      price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
      discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
      attribute: Yup.string(),
      variants: Yup.array().of(
        Yup.object().shape({
          id: Yup.string(),
          value: Yup.string(),
          price: Yup.number().min(0)
        })
      )
    }),
    onSubmit: (values) => {
      if (!id) {
        toast.error('شناسه کالا یافت نشد')
        return
      }

      const submitProduct = (newImageUrls: string[] = []) => {
        const allImages = [...values.images, ...newImageUrls]
        const variants =
          values.variants.length > 0
            ? values.variants.map((v) => ({
              ...(v.id && { id: v.id }),
              value: v.value ?? '',
              price: v.price ?? 0,
              ...(v.stock !== undefined && v.stock !== null && { stock: v.stock })
            }))
            : [{ value: '', price: values.price, ...(values.stock !== undefined && values.stock !== null && { stock: values.stock }) }]
        const productData: CreateProductType = {
          ...values,
          variants,
          isActive,
          isSpecialOffer: isSpecial,
          images: allImages
        }

        updateProduct({ id, params: productData }, {
          onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['product', id] })
            queryClient.invalidateQueries({ queryKey: ['products'] })
            toast.success('کالا با موفقیت به‌روزرسانی شد')
            navigate(Pages.products.list)
          },
          onError: (error: ErrorType) => {
            toast.error(extractErrorMessage(error))
          }
        })
      }

      if (imageFiles.length > 0) {
        multipleUpload(imageFiles, {
          onSuccess: (response) => {
            const imageUrls = response?.data?.map(item => item.url) || []
            submitProduct(imageUrls)
          },
          onError: (error: ErrorType) => {
            toast.error(extractErrorMessage(error, 'خطا در آپلود تصاویر'))
          }
        })
      } else {
        submitProduct()
      }
    }
  })

  useEffect(() => {
    if (product) {
      const variants = product.variants || []
      const priceFromVariant = variants.length > 0 ? variants[0].price : product.price
      formik.setValues({
        categoryId: product.category?.id || '',
        title: product.title || '',
        attribute: product.attribute || '',
        variants,
        desc: product.desc || '',
        price: priceFromVariant ?? product.price ?? 0,
        isActive: product.isActive || false,
        images: product.images || [],
        discount: product.discount || 0,
        isSpecialOffer: product.isSpecialOffer || false,
        order: product.order ?? 0,
        stock: product.variants?.[0]?.stock,
        maxPurchaseQuantity: product.maxPurchaseQuantity
      })
      setIsActive(product.isActive || false)
      setIsSpecial(product.isSpecialOffer || false)
      setExistingImages(product.images || [])
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [product])

  useEffect(() => {
    formik.setFieldValue('images', existingImages)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [existingImages])

  if (isLoading) {
    return (
      <div className='w-full mt-4 flex justify-center items-center'>
        <div>در حال بارگذاری...</div>
      </div>
    )
  }

  if (!product) {
    return (
      <div className='w-full mt-4 flex justify-center items-center'>
        <div>کالا یافت نشد</div>
      </div>
    )
  }

  return (
    <div className='w-full mt-4'>
      <div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
        <div className='text-lg font-light'>
          ویرایش کالا
        </div>
        <div>
          <Button
            className='px-5 w-full sm:w-auto'
            onClick={() => formik.handleSubmit()}
            isloading={isPending || isUploading}
          >
            <div className='flex gap-2 items-center'>
              <TickCircle className='size-5' color='white' />
              <div>ذخیره تغییرات</div>
            </div>
          </Button>
        </div>
      </div>

      <div className='flex flex-col lg:flex-row gap-6 mt-6'>
        <div className='flex-1'>
          <div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
            <BasicInfoSection
              formik={formik}
              categories={categories}
              initialHasVariants={
                (product?.variants?.length ?? 0) > 1 ||
                ((product?.variants?.length === 1) && (product.variants[0].value ?? '') !== '')
              }
            />
          </div>
        </div>

        <div className='w-full lg:w-auto'>
          <CreateProductSidebar
            isActive={isActive}
            isSpecial={isSpecial}
            onChangeActive={setIsActive}
            onChangeSpecial={setIsSpecial}
            onChangeImages={setImageFiles}
            existingImages={existingImages}
            onChangeExistingImages={setExistingImages}
          />
        </div>
      </div>
    </div>
  )
}

export default UpdateProduct
