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

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => Promise<boolean>;
}
type OptionType = {
  value: string;
  label: string;
};
const AddCourse = ({ open, onClose, onSave }: Props) => {
    const [categories, setCategories] = useState<OptionType[]>([]);
    const [loading, setLoading] = useState(false);

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

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

    const validationSchema = Yup.object({
        course_name: Yup.string()
            .required("Course name is required")
            .min(3, "Course name must be at least 3 characters"),
        course_code: Yup.string()
            .required("Course code is required")
            .min(3, "Course code must be at least 3 characters"),
        skills: Yup.array()
            .min(1, "At least one skill is required")
            .required("Skills are required"),
        course_category_id: Yup.number()
            .required("Category is required"),
        duration: Yup.number()
             .min(1, "Duration  must be positive")
            .required("Duration is required"),
        fees: Yup.number()
            .min(1, "Fee must be positive")
            .required("Fee is required"),
        leave_limit: Yup.number()
            .min(1, "Leave limit must be positive")
            .required("Leave limit is required"),
        description: Yup.string().nullable(),
    });

    const formik = useFormik({
        initialValues: {
            course_name: "",
            course_code: "",
            skills: [] as string[], // Changed to array
            course_category_id: "",
            duration: "",
            fees: "",
            leave_limit: "",
            description: ""
        },
        validationSchema,
        onSubmit: async (values, { resetForm, setSubmitting }) => {
            const success = await onSave(values);
            if (success) {
                resetForm();
                onClose();
            }
            setSubmitting(false);
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Add New Course"
            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"
                        disabled={formik.isSubmitting}
                    >
                        {formik.isSubmitting ? "Adding..." : "Add New Course"}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-12">
                    <label className="block mb-2">Course Name <span className="text-danger">*</span></label>
                    <input
                        name="course_name"
                        className="form-input w-full"
                        value={formik.values.course_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter course name"
                    />
                    {formik.touched.course_name && formik.errors.course_name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.course_name}</p>
                    )}
                </div>

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

                <div className="col-span-6">
                    <label className="block mb-2">Course Code <span className="text-danger">*</span></label>
                    <input
                        name="course_code"
                        className="form-input w-full"
                        value={formik.values.course_code}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="e.g., CR-2516"
                    />
                    {formik.touched.course_code && formik.errors.course_code && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.course_code}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block mb-2">Duration <span className="text-danger">*</span></label>
                    <input
                        name="duration"
                        className="form-input w-full"
                        value={formik.values.duration}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="e.g., 6"
                    />
                    {formik.touched.duration && formik.errors.duration && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.duration}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block mb-2">Leave Limit (days) <span className="text-danger">*</span></label>
                    <input
                        name="leave_limit"
                        type="number"
                        className="form-input w-full"
                        value={formik.values.leave_limit}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Number of leaves allowed"
                    />
                    {formik.touched.leave_limit && formik.errors.leave_limit && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.leave_limit}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block mb-2">Fees (₹) <span className="text-danger">*</span></label>
                    <input
                        name="fees"
                        type="number"
                        className="form-input w-full"
                        value={formik.values.fees}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Course fees in rupees"
                    />
                    {formik.touched.fees && formik.errors.fees && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.fees}</p>
                    )}
                </div>

                <div className="md:col-span-12">
                    <label>Skill Tags <span className="text-danger">*</span></label>
                    <TagInput
                        label="Skills"
                        value={formik.values.skills}
                        onChange={(newTags: string[]) => {
                            formik.setFieldValue("skills", newTags);
                            formik.setFieldTouched("skills", true);
                        }}
                        placeholder="Add skills..."
                    />
                    {formik.touched.skills && formik.errors.skills && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.skills}</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 course description (optional)"
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddCourse;