// EditCourseCategory.tsx
import { useFormik } from "formik";
import * as Yup from "yup";
import Modal from "../../../components/Modals";

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (id: number, data: any) => Promise<boolean>;
    data: any;
    // Remove 'id' prop if you have it - you can get id from data
}

const EditCourseCategory = ({ open, onClose, onSave, data }: Props) => {
    const validationSchema = Yup.object({
        name: Yup.string()
            .required("Course category name is required")
            .min(3, "Name must be at least 3 characters"),
        description: Yup.string().nullable(),
    });

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            name: data?.name || "",
            description: data?.description || "",
        },
        validationSchema,
        onSubmit: async (values, { setSubmitting }) => {
            // Use data.id instead of a separate id prop
            const success = await onSave(data?.id, values);
            if (success) {
                onClose();
            }
            setSubmitting(false);
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Update Course Category"
            maxWidth="max-w-lg"
            footer={
                <>
                    <button
                        onClick={() => {
                            formik.resetForm();
                            onClose();
                        }}
                        className="btn btn-outline-danger"
                        type="button"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={formik.isSubmitting}
                    >
                        {formik.isSubmitting ? "Updating..." : "Update Course Category"}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-12">
                    <label className="block mb-2">Course Category Name *</label>
                    <input
                        name="name"
                        className="form-input w-full"
                        value={formik.values.name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter course category name"
                    />
                    {formik.touched.name && formik.errors.name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.name as string}</p>
                    )}
                </div>
                <div className="col-span-12">
                    <label className="block mb-2">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 EditCourseCategory;