import { useFormik } from "formik";
import * as Yup from "yup";
import { useState, useEffect } from "react";
import Modal from "../../../components/Modals";
import Select from "../../../components/Select";
import api from '../../../api/axios';

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    initialData?: any;
    isEdit?: boolean;
}

const AddStock = ({ open, onClose, onSave, initialData, isEdit }: Props) => {
    const [categories, setCategories] = useState<{ value: string; label: string }[]>([]);
    const [units, setUnits] = useState<{ value: string; label: string }[]>([]);
    const [suppliers, setSuppliers] = useState<{ value: string; label: string }[]>([]);
    const [loading, setLoading] = useState(false);

    // Validation
    const validationSchema = Yup.object({
        item_name: Yup.string().required("Item Name is required"),
        category: Yup.string().required("Category is required"),
        unit: Yup.string().required("Unit is required"),
        quantity: Yup.number()
            .required("Quantity is required")
            .min(0, "Quantity must be greater than or equal to 0"),
        cost: Yup.number()
            .required("Cost per unit is required")
            .min(0, "Cost must be greater than or equal to 0"),
        threshold: Yup.number()
            .required("Threshold is required")
            .min(0, "Threshold must be greater than or equal to 0"),
        supplier_id: Yup.string().required("Supplier is required"),
        description: Yup.string().optional(),
    });

    // Formik
    const formik = useFormik({
        initialValues: {
            item_name: initialData?.item_name || "",
            category: initialData?.category || "",
            unit: initialData?.unit || "",
            quantity: initialData?.qty || "",
            cost: initialData?.cost || "",
            threshold: initialData?.reorderAt || "",
            supplier_id: initialData?.supplier_id || "",
            description: initialData?.description || ""
        },
        validationSchema,
        enableReinitialize: true,
        onSubmit: (values) => {
            const submitData = {
                item_name: values.item_name,
                category_id: values.category,
                unit_id: values.unit,
                quantity: Number(values.quantity),
                cost: Number(values.cost),
                stock_count: Number(values.threshold),
                supplier_id: values.supplier_id,
                description: values.description
            };
            onSave(submitData);
            onClose();
            if (!isEdit) {
                formik.resetForm();
            }
        },
    });

    useEffect(() => {
        if (!open && !isEdit) {
            formik.resetForm();
        }
    }, [open]);

    // Fetch categories for dropdown
    useEffect(() => {
        const fetchCategories = async () => {
            setLoading(true);
            try {
                const response = await api.get('/inventory/category/list');
                if (response.data.status === 200) {
                    const categoryOptions = response.data.data.map((cat: any) => ({
                        value: cat.id?.toString() || cat.value?.toString(),
                        label: cat.name || cat.label
                    }));
                    setCategories(categoryOptions);
                }
            } catch (error) {
                console.error('Error fetching categories:', error);
            } finally {
                setLoading(false);
            }
        };

        if (open) {
            fetchCategories();
        }
    }, [open]);

    // Fetch units for dropdown
    useEffect(() => {
        const fetchUnits = async () => {
            setLoading(true);
            try {
                const response = await api.get('/inventory/unit/list');
                if (response.data.status === 200) {
                    const unitOptions = response.data.data.map((unit: any) => ({
                        value: unit.id?.toString() || unit.value?.toString(),
                        label: unit.name || unit.label
                    }));
                    setUnits(unitOptions);
                }
            } catch (error) {
                console.error('Error fetching units:', error);
            } finally {
                setLoading(false);
            }
        };

        if (open) {
            fetchUnits();
        }
    }, [open]);

    // Fetch suppliers for dropdown
    useEffect(() => {
        const fetchSuppliers = async () => {
            setLoading(true);
            try {
                const response = await api.get('/inventory/supplier/list');
                if (response.data.status === 200) {
                    const supplierOptions = response.data.data.map((sup: any) => ({
                        value: sup.id?.toString() || sup.value?.toString(),
                        label: sup.supplier_name || sup.name || sup.label
                    }));
                    setSuppliers(supplierOptions);
                }
            } catch (error) {
                console.error('Error fetching suppliers:', error);
            } finally {
                setLoading(false);
            }
        };

        if (open) {
            fetchSuppliers();
        }
    }, [open]);

    return (
        <Modal
            open={open}
            onClose={onClose}
            title={isEdit ? "Edit Item" : "Add Item"}
            maxWidth="max-w-2xl"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        type="button"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                    >
                        {isEdit ? "Update Item" : "Add Item"}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Item Name <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="item_name"
                        className="form-input w-full"
                        value={formik.values.item_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.item_name && formik.errors.item_name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.item_name as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Category <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={categories}
                        isLoading={loading}
                        placeholder="Select category"
                        value={categories.find(o => o.value === formik.values.category)}
                        onChange={(val: any) => {
                            formik.setFieldValue("category", val?.value || "");
                            formik.setFieldTouched("category", true);
                        }}
                    />
                    {formik.touched.category && formik.errors.category && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.category as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <div className="grid grid-cols-12 gap-2">
                        <div className="col-span-6">
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                                Quantity <span className="text-red-500">*</span>
                            </label>
                            <input
                                name="quantity"
                                type="number"
                                className="form-input w-full"
                                value={formik.values.quantity}
                                onChange={formik.handleChange}
                                onBlur={formik.handleBlur}
                            />
                            {formik.touched.quantity && formik.errors.quantity && (
                                <p className="text-red-500 text-sm mt-1">{formik.errors.quantity as string}</p>
                            )}
                        </div>
                        <div className="col-span-6">
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                                Unit <span className="text-red-500">*</span>
                            </label>
                            <Select
                                options={units}
                                isLoading={loading}
                                placeholder="Select Unit"
                                value={units.find(o => o.value === formik.values.unit)}
                                onChange={(val: any) => {
                                    formik.setFieldValue("unit", val?.value || "");
                                    formik.setFieldTouched("unit", true);
                                }}
                            />
                            {formik.touched.unit && formik.errors.unit && (
                                <p className="text-red-500 text-sm mt-1">{formik.errors.unit as string}</p>
                            )}
                        </div>
                    </div>
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Cost per unit (₹) <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="cost"
                        type="number"
                        step="0.01"
                        className="form-input w-full"
                        value={formik.values.cost}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.cost && formik.errors.cost && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.cost as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Minimum Stock Threshold <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="threshold"
                        type="number"
                        className="form-input w-full"
                        value={formik.values.threshold}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.threshold && formik.errors.threshold && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.threshold as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Supplier <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={suppliers}
                        isLoading={loading}
                        placeholder="Select Supplier"
                        value={suppliers.find(o => o.value === formik.values.supplier_id)}
                        onChange={(val: any) => {
                            formik.setFieldValue("supplier_id", val?.value || "");
                            formik.setFieldTouched("supplier_id", true);
                        }}
                    />
                    {formik.touched.supplier_id && formik.errors.supplier_id && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.supplier_id as string}</p>
                    )}
                </div>

                <div className="col-span-12">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Description
                    </label>
                    <textarea
                        name="description"
                        rows={3}
                        className="form-textarea w-full"
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddStock;