import Button from '@/components/Button'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Select from '@/components/Select'
import DatePickerComponent from '@/components/DatePicker'
import { useState, type FC, useMemo } from 'react'
import { useParams } from 'react-router-dom'
import { useGetVariantById, useUpdateVariant } from '../hooks/useProductData'
import type { ProductVariantDetailType, UpdateVariantRequestType } from '../types/Types'
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>
    form: { values: { discount_type: string } }
}

interface UpdateVariantProps {
    variant: ProductVariantDetailType
    onUpdate?: () => void
}

const UpdateVariant: FC<UpdateVariantProps> = ({ variant, onUpdate }) => {

    const { id } = useParams()
    const { data: variantData, isLoading, error } = useGetVariantById(id!, variant._id)

    const updateVariant = useUpdateVariant()

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

    const discountTypeOptions = [
        { value: 'percent', label: 'درصدی (%)' },
        { value: 'fixed', label: 'مبلغ ثابت (تومان)' }
    ]

    const validationSchema = Yup.object().shape({
        retailPrice: Yup.number().required('قیمت فروش الزامی است').min(0, 'قیمت نمی‌تواند منفی باشد'),
        order_limit: Yup.number().required('محدودیت سفارش الزامی است').min(1, 'حداقل ۱ عدد'),
        sellerSpecialCode: Yup.string().required('کد ویژه فروشنده الزامی است'),
        stock: Yup.number().required('موجودی انبار الزامی است').min(0, 'موجودی نمی‌تواند منفی باشد'),
        discount_type: Yup.string().oneOf(['fixed', 'percent'], 'نوع تخفیف باید fixed یا percent باشد').required('نوع تخفیف الزامی است'),
        discount_value: Yup.number().when('discount_type', {
            is: 'fixed',
            then: (schema) => schema.min(0, 'مقدار تخفیف نمی‌تواند منفی باشد'),
            otherwise: (schema) => schema.min(0, 'تخفیف نمی‌تواند منفی باشد').max(100, 'تخفیف نمی‌تواند بیش از ۱۰۰٪ باشد')
        }),
        specialSale_order_limit: Yup.number().min(0, 'محدودیت فروش ویژه نمی‌تواند منفی باشد'),
        specialSale_quantity: Yup.number().min(0, 'تعداد فروش ویژه نمی‌تواند منفی باشد'),
        specialSale_endDate: Yup.string()
    })

    const initialValues = useMemo(() => ({
        retailPrice: variantData?.results?.productVariant?.price?.retailPrice?.toString() || '',
        order_limit: variantData?.results?.productVariant?.price?.order_limit?.toString() || '',
        sellerSpecialCode: variantData?.results?.productVariant?.sellerSpecialCode,
        stock: variantData?.results?.productVariant?.stock?.toString() || '',
        discount_type: 'percent',
        discount_value: variantData?.results?.productVariant?.price?.discount_percent?.toString() || '0',
        specialSale_order_limit: variantData?.results?.productVariant?.price?.specialSale_order_limit?.toString() || '',
        specialSale_quantity: variantData?.results?.productVariant?.price?.specialSale_quantity?.toString() || '',
        specialSale_endDate: variantData?.results?.productVariant?.price?.specialSale_endDate || ''
    }), [variantData])

    const handleSubmit = (values: typeof initialValues) => {
        const discountValue = parseFloat(values.discount_value as string) || 0

        const baseData = {
            productId: id!,
            variantId: variant._id,
            retailPrice: parseFloat(values.retailPrice as string),
            order_limit: parseInt(values.order_limit as string),
            sellerSpecialCode: values.sellerSpecialCode!,
            stock: parseInt(values.stock as string),
            saleFormat: { wholeSale: [] }, // فعلاً خالی می‌گذاریم
            discount_type: values.discount_type as "fixed" | "percent",
            ...(values.discount_type === 'fixed' ? {
                discount_value: discountValue
            } : {
                discount_percent: discountValue
            }),
            specialSale_order_limit: parseInt(values.specialSale_order_limit as string) || 0,
            specialSale_quantity: parseInt(values.specialSale_quantity as string) || 0,
            specialSale_endDate: values.specialSale_endDate || ''
        } as UpdateVariantRequestType

        updateVariant.mutate(baseData, {
            onSuccess: () => {
                setShowModal(false)
                toast.success('تنوع با موفقیت بروزرسانی شد')
                onUpdate?.()
            },
            onError: (error) => {
                toast.error(extractErrorMessage(error))
            }
        })
    }

    if (isLoading) {
        return (
            <div className="text-center py-4">
                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"></div>
                <p className="mt-2 text-sm text-gray-600">در حال بارگذاری...</p>
            </div>
        )
    }

    if (error) {
        return (
            <div className="text-center py-4">
                <p className="text-red-500 text-sm">خطا در بارگذاری اطلاعات تنوع</p>
                <p className="text-gray-500 text-xs mt-1">{extractErrorMessage(error)}</p>
            </div>
        )
    }

    return (
        <div>
            <Button
                className='text-xs px-3 py-1'
                variant="outline"
                label='ویرایش'
                onClick={() => setShowModal(true)}
                disabled={!variantData?.results?.productVariant}
            />

            {variantData?.results?.productVariant && (
                <DefaulModal
                    open={showModal}
                    close={() => setShowModal(false)}
                    isHeader={true}
                    title_header='ویرایش تنوع'
                    width={600}
                >
                    <Formik
                        key={variantData?.results?.productVariant?._id} // برای force re-render وقتی variant تغییر کند
                        initialValues={initialValues}
                        validationSchema={validationSchema}
                        onSubmit={handleSubmit}
                    >
                        {({ setFieldValue }) => (
                            <Form className="space-y-4">
                                {/* اطلاعات قیمت و موجودی */}
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <Field name="retailPrice">
                                            {({ field }: FormikFieldProps) => (
                                                <Input
                                                    {...field}
                                                    label="قیمت فروش (تومان)"
                                                    placeholder="مثال: 100000"
                                                    type="number"
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('retailPrice', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="retailPrice" 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 className="grid grid-cols-2 gap-4">
                                    <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>
                                        <Field name="discount_type">
                                            {({ field }: FormikFieldProps) => (
                                                <Select
                                                    {...field}
                                                    label="نوع تخفیف"
                                                    placeholder="انتخاب کنید"
                                                    items={discountTypeOptions}
                                                    value={field.value}
                                                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFieldValue('discount_type', e.target.value)}
                                                />
                                            )}
                                        </Field>
                                        <ErrorMessage name="discount_type" component="div" className="text-red-500 text-sm mt-1" />
                                    </div>
                                </div>

                                <div>
                                    <Field name="discount_value">
                                        {({ field, form }: FormikFieldProps) => (
                                            <Input
                                                {...field}
                                                label={form.values.discount_type === 'percent' ? 'درصد تخفیف (%)' : 'مقدار تخفیف (تومان)'}
                                                placeholder={form.values.discount_type === 'percent' ? 'مثال: 10' : 'مثال: 50000'}
                                                type="number"
                                                value={field.value}
                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('discount_value', e.target.value)}
                                            />
                                        )}
                                    </Field>
                                    <ErrorMessage name="discount_value" 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="specialSale_order_limit">
                                                {({ field }: FormikFieldProps) => (
                                                    <Input
                                                        {...field}
                                                        label="محدودیت سفارش فروش ویژه"
                                                        placeholder="مثال: 5"
                                                        type="number"
                                                        value={field.value}
                                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('specialSale_order_limit', e.target.value)}
                                                    />
                                                )}
                                            </Field>
                                            <ErrorMessage name="specialSale_order_limit" component="div" className="text-red-500 text-sm mt-1" />
                                        </div>

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

                                    <div className="mt-4">
                                        <DatePickerComponent
                                            label="تاریخ پایان فروش ویژه"
                                            placeholder="انتخاب تاریخ"
                                            defaulValue={initialValues.specialSale_endDate}
                                            onChange={(date: string) => setFieldValue('specialSale_endDate', date)}
                                        />
                                        <ErrorMessage name="specialSale_endDate" component="div" className="text-red-500 text-sm mt-1" />
                                    </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={updateVariant.isPending}
                                    >
                                        {updateVariant.isPending ? 'در حال بروزرسانی...' : 'بروزرسانی'}
                                    </Button>
                                </div>
                            </Form>
                        )}
                    </Formik>
                </DefaulModal>
            )}
        </div>
    )
}

export default UpdateVariant
