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

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
}
type OptionType = {
    value: string;
    label: string;
};
const AddEvent = ({ open, onClose, onSave }: Props) => {
    const [branchOptions, setBranchOptions] = useState([]);
    const [eventTypeOptions, setEventTypeOptions] = useState<OptionType[]>([]);
    const [loading, setLoading] = useState(false);

    const validationSchema = Yup.object({
        event_name: Yup.string()
            .trim()
            .min(3, "Event name must be at least 3 characters")
            .max(100, "Event name is too long")
            .required("Event name is required"),
        event_type_id: Yup.string().required("Event type is required"),
        start_date: Yup.string().required("Start date is required"),
        end_date: Yup.string()
            .required("End date is required")
            .test('is-after', 'End date must be after or equal to start date', function(value) {
                const { start_date } = this.parent;
                if (!start_date || !value) return true;
                return new Date(value) >= new Date(start_date);
            }),
        location: Yup.string()
            .trim()
            .min(3, "Location must be at least 3 characters")
            .max(150, "Location is too long")
            .required("Location is required"),
        target_lead: Yup.number().min(0, "Target leads must be positive").nullable(),
    });

    const formik = useFormik({
        initialValues: {
            event_name: "",
            start_date: "",
            end_date: "",
            event_type_id: "",
            location: "",
            target_lead: "",
        },
        validationSchema,
        onSubmit: async (values) => {
            try {
                const response = await api.post('/marketing/add', values);
                if (response.data.status) {
                    toast.success('Event created successfully');
                    onSave(response.data.data);
                    onClose();
                    formik.resetForm();
                }
            } catch (error: any) {
                if (error.response?.data?.errors) {
                    Object.keys(error.response.data.errors).forEach(key => {
                        formik.setFieldError(key, error.response.data.errors[key][0]);
                    });
                }
                toast.error(error.response?.data?.message || 'Failed to create event');
            }
        },
    });

    const fetchOptions = async () => {
        setLoading(true);
        try {
            const [eventTypes] = await Promise.all([
                api.get('/event_type_list'),
            ]);

            if (eventTypes.data.status) {
                setEventTypeOptions(eventTypes.data.data.map((item: any) => ({
                    value: item.id.toString(),
                    label: item.name
                })));
            }

        } catch (error) {
            console.error('Failed to fetch options:', error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (open) {
            fetchOptions();
        }
    }, [open]);

    const showError = (field: keyof typeof formik.values) => {
        return formik.touched[field] && formik.errors[field];
    };

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Create Event"
            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 ? 'Creating...' : 'Create Event'}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                    <label>Event Name <span className="text-danger">*</span></label>
                    <input
                        name="event_name"
                        className="form-input w-full"
                        value={formik.values.event_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {showError("event_name") && (
                        <p className="text-red-500 text-sm mt-1">{showError("event_name")}</p>
                    )}
                </div>

                <div>
                    <label>Event Type <span className="text-danger">*</span></label>
                    <Select
                        options={eventTypeOptions}
                        value={eventTypeOptions.find(o => o.value === formik.values.event_type_id)}
                        onChange={(val: any) => {
                            formik.setFieldValue("event_type_id", val?.value || "");

                            setTimeout(() => {
                                formik.setFieldTouched("event_type_id", true);
                                formik.validateField("event_type_id");
                            }, 0);
                        }}
                        placeholder="Select Event Type"
                        isLoading={loading}
                    />
                    {showError("event_type_id") && (
                        <p className="text-red-500 text-sm mt-1">{showError("event_type_id")}</p>
                    )}
                </div>

                <div>
                    <label>Start Date <span className="text-danger">*</span></label>
                    <Datepicker
                        value={formik.values.start_date || undefined}
                        onChange={(val) => {
                            formik.setFieldValue("start_date", val, true);
                            formik.setFieldTouched("start_date", true, false);
                        }}
                        placeholder="Pick start date"
                    />

                    {formik.touched.start_date && formik.errors.start_date && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.start_date}
                        </p>
                    )}
                </div>

                <div>
                    <label>End Date <span className="text-danger">*</span></label>
                    <Datepicker
                        value={formik.values.start_date || undefined}
                        onChange={(val) => {
                            formik.setFieldValue("end_date", val, true);
                            formik.setFieldTouched("end_date", true, false);
                        }}
                        placeholder="Pick end date"
                    />

                    {formik.touched.start_date && formik.errors.start_date && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.start_date}
                        </p>
                    )}
                </div>

                <div>
                    <label>Location <span className="text-danger">*</span></label>
                    <input
                        name="location"
                        className="form-input w-full"
                        value={formik.values.location}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {showError("location") && (
                        <p className="text-red-500 text-sm mt-1">{showError("location")}</p>
                    )}
                </div>

                <div>
                    <label>Target Lead</label>
                    <input
                        name="target_lead"
                        type="number"
                        className="form-input w-full"
                        value={formik.values.target_lead}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddEvent;