import Button from '@/components/Button'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Select from '@/components/Select'
import { useState, type FC } from 'react'
import { useParams } from 'react-router-dom'
import { useCreateProductVariant, useGetProductById } from '../hooks/useProductData'
import { useGetCategoryVariants } from '@/pages/category'
import type { CreateProductVariantRequestType } from '../types/Types'
import { useGetWarranties } from '@/pages/warranty/hooks/useWarrantyData'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import type { FieldInputProps } from 'formik'
import * as Yup from 'yup'

interface FormikFieldProps {
    field: FieldInputProps<string | number>
}

const CreateVariant: FC = () => {

    const { id } = useParams()

    const { data: productData } = useGetProductById(id!)
    const { data: categoryData } = useGetCategoryVariants(productData?.results?.product?.category?._id ?? '')
    const createProductVariant = useCreateProductVariant()
    const { data: warrantiesData } = useGetWarranties()

    const [showModal, setShowModal] = useState<boolean>(false)

    const categoryTheme = productData?.results?.product?.category?.theme
    const categoryVariants = categoryData?.results?.data?.category?.categoryVariants

    const validationSchema = Yup.object().shape({
        variantId: Yup.string().required('انتخاب تنوع الزامی است'),
        warrantyId: Yup.string().required('انتخاب گارانتی الزامی است'),
        order_limit: Yup.number().required('محدودیت سفارش الزامی است').min(1, 'حداقل ۱ عدد'),
        sellerSpecialCode: Yup.string().required('کد ویژه فروشنده الزامی است'),
        retail_price: Yup.number().required('قیمت فروش الزامی است').min(0, 'قیمت نمی‌تواند منفی باشد'),
        package_weight: Yup.number().required('وزن بسته الزامی است').min(0.1, 'وزن باید حداقل ۰.۱ کیلوگرم باشد'),
        package_height: Yup.number().required('ارتفاع بسته الزامی است').min(1, 'ارتفاع باید حداقل ۱ سانتی‌متر باشد'),
        package_length: Yup.number().required('طول بسته الزامی است').min(1, 'طول باید حداقل ۱ سانتی‌متر باشد'),
        package_width: Yup.number().required('عرض بسته الزامی است').min(1, 'عرض باید حداقل ۱ سانتی‌متر باشد'),
        postingTime: Yup.number().required('زمان ارسال الزامی است').min(1, 'زمان ارسال باید حداقل ۱ روز باشد'),
        stock: Yup.number().required('موجودی انبار الزامی است').min(0, 'موجودی نمی‌تواند منفی باشد')
    })

    const initialValues = {
        variantId: '',
        warrantyId: '',
        order_limit: '',
        sellerSpecialCode: '',
        retail_price: '',
        package_weight: '',
        package_height: '',
        package_length: '',
        package_width: '',
        postingTime: '',
        stock: ''
    }

    const getVariantOptions = () => {
        switch (categoryTheme) {
            case 'Size':
                return categoryVariants?.sizes?.map(size => ({
                    value: size._id.toString(),
                    label: size.value
                })) || []
            case 'Color':
                return categoryVariants?.colors?.map((color, index) => ({
                    value: index.toString(), // استفاده از index به عنوان ID موقت
                    label: color.name
                })) || []
            case 'Meterage':
                return categoryVariants?.meterages?.map(meterage => ({
                    value: meterage._id.toString(),
                    label: meterage.value
                })) || []
            default:
                return []
        }
    }

    const getVariantLabel = () => {
        switch (categoryTheme) {
            case 'Size': return 'سایز'
            case 'Color': return 'رنگ'
            case 'Meterage': return 'متریاژ'
            default: return 'تنوع'
        }
    }

    const getWarrantyOptions = () => {
        return warrantiesData?.results?.warranties?.map(warranty => ({
            value: warranty._id.toString(),
            label: `${warranty.name} (${warranty.duration})`
        })) || []
    }

    const handleSubmit = (values: typeof initialValues) => {
        const baseData: CreateProductVariantRequestType = {
            productId: id!,
            warrantyId: parseInt(values.warrantyId),
            order_limit: parseInt(values.order_limit),
            sellerSpecialCode: values.sellerSpecialCode,
            retail_price: parseFloat(values.retail_price),
            package_weight: parseFloat(values.package_weight),
            package_height: parseFloat(values.package_height),
            package_length: parseFloat(values.package_length),
            package_width: parseFloat(values.package_width),
            postingTime: parseInt(values.postingTime),
            stock: parseInt(values.stock)
        }

        // اضافه کردن variant بر اساس theme
        let variantData: CreateProductVariantRequestType

        if (categoryTheme === 'Size') {
            variantData = { ...baseData, sizeId: parseInt(values.variantId) }
        } else if (categoryTheme === 'Color') {
            // برای رنگ‌ها از index به عنوان ID استفاده می‌کنیم
            variantData = { ...baseData, colorId: parseInt(values.variantId) + 1 } // +1 برای اینکه ID از 1 شروع شود
        } else if (categoryTheme === 'Meterage') {
            variantData = { ...baseData, meterageId: parseInt(values.variantId) }
        } else {
            variantData = baseData
        }

        createProductVariant.mutate(variantData, {
            onSuccess: () => {
                setShowModal(false)
                toast.success('تنوع جدید با موفقیت ایجاد شد')
            },
            onError: (error) => {
                toast.error(extractErrorMessage(error))
            }
        })
    }

    return (
        <div className='flex justify-end mt-5'>
            <Button className='w-fit' label='ساخت تنوع جدید' onClick={() => setShowModal(true)} />

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader={true}
                title_header='ساخت تنوع جدید'
                width={600}
            >
                <Formik
                    initialValues={initialValues}
                    validationSchema={validationSchema}
                    onSubmit={handleSubmit}
                >
                    {({ setFieldValue }) => (
                        <Form className="space-y-4">
                            {/* انتخاب variant */}
                            <div>
                                <label className="text-sm font-medium text-gray-700 mb-1 block">
                                    {getVariantLabel()}
                                </label>
                                <Field name="variantId">
                                    {({ field }: FormikFieldProps) => (
                                        <Select
                                            {...field}
                                            placeholder={`انتخاب ${getVariantLabel().toLowerCase()}`}
                                            value={field.value}
                                            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFieldValue('variantId', e.target.value)}
                                            items={getVariantOptions()}
                                        />
                                    )}
                                </Field>
                                <ErrorMessage name="variantId" component="div" className="text-red-500 text-sm mt-1" />
                            </div>

                            {/* اطلاعات پایه */}
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="text-sm font-medium text-gray-700 mb-1 block">
                                        گارانتی
                                    </label>
                                    <Field name="warrantyId">
                                        {({ field }: FormikFieldProps) => (
                                            <Select
                                                {...field}
                                                placeholder="انتخاب گارانتی"
                                                value={field.value}
                                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFieldValue('warrantyId', e.target.value)}
                                                items={getWarrantyOptions()}
                                            />
                                        )}
                                    </Field>
                                    <ErrorMessage name="warrantyId" component="div" className="text-red-500 text-sm mt-1" />
                                </div>

                                <div>
                                    <Field name="order_limit">
                                        {({ field }: FormikFieldProps) => (
                                            <Input
                                                {...field}
                                                label="محدودیت سفارش"
                                                placeholder="مثال: 10"
                                                type="number"
                                                value={field.value}
                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('order_limit', e.target.value)}
                                            />
                                        )}
                                    </Field>
                                    <ErrorMessage name="order_limit" component="div" className="text-red-500 text-sm mt-1" />
                                </div>
                            </div>

                            <div>
                                <Field name="sellerSpecialCode">
                                    {({ field }: FormikFieldProps) => (
                                        <Input
                                            {...field}
                                            label="کد ویژه فروشنده"
                                            placeholder="کد ویژه فروشنده را وارد کنید"
                                            value={field.value}
                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('sellerSpecialCode', e.target.value)}
                                        />
                                    )}
                                </Field>
                                <ErrorMessage name="sellerSpecialCode" component="div" className="text-red-500 text-sm mt-1" />
                            </div>

                            <div>
                                <Field name="retail_price">
                                    {({ field }: FormikFieldProps) => (
                                        <Input
                                            {...field}
                                            label="قیمت فروش (تومان)"
                                            placeholder="مثال: 100000"
                                            type="number"
                                            value={field.value}
                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('retail_price', e.target.value)}
                                        />
                                    )}
                                </Field>
                                <ErrorMessage name="retail_price" component="div" className="text-red-500 text-sm mt-1" />
                            </div>

                            {/* اطلاعات بسته‌بندی */}
                            <div className="border-t pt-4">
                                <h3 className="text-lg font-medium mb-4">اطلاعات بسته‌بندی</h3>
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <Field name="package_weight">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="وزن بسته (کیلوگرم)"
                                                    placeholder="مثال: 1.5"
                                                    type="number"
                                                    step="0.1"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('package_weight', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="package_weight" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>

                                    <div>
                                        <Field name="package_height">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="ارتفاع بسته (سانتی متر)"
                                                    placeholder="مثال: 20"
                                                    type="number"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('package_height', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="package_height" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>

                                    <div>
                                        <Field name="package_length">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="طول بسته (سانتی متر)"
                                                    placeholder="مثال: 30"
                                                    type="number"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('package_length', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="package_length" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>

                                    <div>
                                        <Field name="package_width">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="عرض بسته (سانتی متر)"
                                                    placeholder="مثال: 15"
                                                    type="number"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('package_width', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="package_width" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>
                                </div>
                            </div>

                            {/* اطلاعات انبارداری */}
                            <div className="border-t pt-4">
                                <h3 className="text-lg font-medium mb-4">اطلاعات انبارداری</h3>
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <Field name="postingTime">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="زمان ارسال (روز)"
                                                    placeholder="مثال: 2"
                                                    type="number"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('postingTime', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="postingTime" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>

                                    <div>
                                        <Field name="stock">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="موجودی انبار"
                                                    placeholder="مثال: 50"
                                                    type="number"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('stock', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="stock" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>
                                </div>
                            </div>

                            {/* دکمه‌ها */}
                            <div className="flex gap-3 pt-4 border-t">
                                <Button
                                    type="button"
                                    variant="outline"
                                    className="flex-1"
                                    onClick={() => setShowModal(false)}
                                >
                                    انصراف
                                </Button>
                                <Button
                                    type="submit"
                                    variant="primary"
                                    className="flex-1"
                                    disabled={createProductVariant.isPending}
                                >
                                    {createProductVariant.isPending ? 'در حال ایجاد...' : 'ایجاد تنوع'}
                                </Button>
                            </div>
                        </Form>
                    )}
                </Formik>
            </DefaulModal>
        </div>
    )
}

export default CreateVariant