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 { useEffect, useState } from "react";
import api from '../../api/axios';
import { toast } from "react-toastify";

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    data: any;
}
type OptionType = {
  value: string;
  label: string;
};
const EditEvent = ({ open, onClose, onSave, data }: Props) => {
    const [eventTypeOptions, setEventTypeOptions] = useState<OptionType[]>([]);
    const [branchOptions, setBranchOptions] = useState([]);
    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({
        enableReinitialize: true,
        initialValues: {
            event_name: data?.event_name || "",
            start_date: data?.start_date || "",
            end_date: data?.end_date || "",
            event_type_id: data?.event_type_id?.toString() || "",
            location: data?.location || "",
            target_lead: data?.target_lead || "",
        },
        validationSchema,
        onSubmit: async (values) => {
            try {
                const response = await api.post(`/marketing/${data?.id}/update`, values);
                if (response.data.status) {
                    toast.success('Event updated successfully');
                    onSave(response.data.data);
                    onClose();
                }
            } 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 update 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);
        }
    };
    const formatDateToYMD = (date: any) => {
        if (!date) return "";

        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, "0");
        const day = String(d.getDate()).padStart(2, "0");

        return `${year}-${month}-${day}`;
    };
    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="Edit 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 ? 'Updating...' : 'Update 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") as string}</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 || "");
                            formik.setFieldTouched("event_type_id", true);
                        }}
                        placeholder="Select Event Type"
                        isLoading={loading}
                    />
                    {showError("event_type_id") && (
                        <p className="text-red-500 text-sm mt-1">{showError("event_type_id") as string}</p>
                    )}
                </div>



                <div>
                    <label>Start Date <span className="text-danger">*</span></label>
                    <Datepicker
                        value={formik.values.start_date}
                        onChange={(val) => {
                            formik.setFieldValue(
                                "start_date",
                                formatDateToYMD(val)
                            );
                            formik.setFieldTouched("start_date", true);
                        }}
                    />
                    {showError("start_date") && (
                        <p className="text-red-500 text-sm mt-1">{showError("start_date") as string}</p>
                    )}
                </div>

                <div>
                    <label>End Date <span className="text-danger">*</span></label>
                    <Datepicker
                        value={formik.values.end_date}
                        onChange={(val) => {
                            formik.setFieldValue(
                                "end_date",
                                formatDateToYMD(val)
                            );
                            formik.setFieldTouched("end_date", true);
                        }}
                    />
                    {showError("end_date") && (
                        <p className="text-red-500 text-sm mt-1">{showError("end_date") as string}</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") as string}</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 EditEvent;