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

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

const EditExpense = ({ open, onClose, onSave, data, id }: Props) => {
    const [loading, setLoading] = useState(false);

    // Validation schema
    const validationSchema = Yup.object({
        expense_name: Yup.string()
            .required("Expense name is required")
            .min(3, "Minimum 3 characters required"),
        category: Yup.string().required("Category is required"),
        amount: Yup.number()
            .required("Amount is required")
            .positive("Amount must be positive")
            .typeError("Amount must be a valid number"),
        start_date: Yup.string().required("Date is required"),
        description: Yup.string().nullable(),
    });

    // Formik with proper initial values
    const formik = useFormik({
        initialValues: {
            expense_name: data?.expense_name || "",
            category: data?.category || "",
            amount: data?.amount || "",
            start_date: data?.date || "",
            description: data?.description || "",
        },
        enableReinitialize: true, // Important: Reinitialize when data changes
        validationSchema,
        onSubmit: async (values) => {
            setLoading(true);
            try {
                await onSave(values);
                onClose();
            } catch (error) {
                console.error("Error updating expense:", error);
            } finally {
                setLoading(false);
            }
        },
    });

    // Category options (fixed duplicates)
    const CategoryOption = [
        { value: "Rent", label: "Rent" },
        { value: "Utilities", label: "Utilities" },
        { value: "Maintenance", label: "Maintenance" },
        { value: "Marketing", label: "Marketing" },
        { value: "Supplies", label: "Supplies" },
        { value: "Salaries", label: "Salaries" },
        { value: "Other", label: "Other" },
    ];

    // Reset form when modal opens with new data
    useEffect(() => {
        if (open && data) {
            formik.setValues({
                expense_name: data.expense_name || "",
                category: data.category || "",
                amount: data.amount || "",
                start_date: data.date || "",
                description: data.description || "",
            });
        }
    }, [open, data]);

    if (!data) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Update Expense"
            maxWidth="max-w-2xl"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>

                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={loading}
                    >
                        {loading ? "Updating..." : "Update Expense"}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Expense <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="expense_name"
                        type="text"
                        className="form-input w-full"
                        value={formik.values.expense_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter expense name"
                    />
                    {formik.touched.expense_name && formik.errors.expense_name && (
                        <p className="text-red-500 text-xs mt-1">
                            {formik.errors.expense_name as string}
                        </p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Category <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={CategoryOption}
                        value={CategoryOption.find(o => o.value === formik.values.category)}
                         onChange={(val: any) => {
                            formik.setFieldValue("category", val?.value || "");

                            setTimeout(() => {
                                formik.setFieldTouched("category", true);
                                formik.validateField("category");
                            }, 0);
                        }}
                        placeholder="Select category"
                    />
                    {formik.touched.category && formik.errors.category && (
                        <p className="text-red-500 text-xs mt-1">
                            {formik.errors.category as string}
                        </p>
                    )}
                </div>

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

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Date <span className="text-red-500">*</span>
                    </label>
                    <Datepicker
                        value={formik.values.start_date || undefined}
                        onChange={(val) => {
                            formik.setFieldValue("start_date", val);
                            formik.setFieldTouched("start_date", true);
                        }}
                        placeholder="Select date"
                    />
                    {formik.touched.start_date && formik.errors.start_date && (
                        <p className="text-red-500 text-xs mt-1">
                            {formik.errors.start_date as string}
                        </p>
                    )}
                </div>

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

export default EditExpense;