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

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

const EditShiftTime = ({ open, onClose, onSave, data, id }: Props) => {

    // Helper: Convert Date to time string (HH:MM)
    const dateToTimeString = (date: Date | null): string => {
        if (!date) return "";
        const hours = date.getHours();
        const minutes = date.getMinutes();
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
    };

    // Helper: Convert time string to Date object for Timepicker
    const timeStringToDate = (timeStr: string): Date | null => {
        if (!timeStr) return null;
        const [hours, minutes] = timeStr.split(':').map(Number);
        const date = new Date();
        date.setHours(hours, minutes, 0, 0);
        return date;
    };

    // State to store Date objects for Timepicker
    const [startTimeDate, setStartTimeDate] = useState<Date | null>(null);
    const [endTimeDate, setEndTimeDate] = useState<Date | null>(null);

    // Validation Schema
    const validationSchema = Yup.object({
        shift_name: Yup.string()
            .required("Shift name is required")
            .min(3, "Shift name must be at least 3 characters"),
        shift_start: Yup.string().required("Start time is required"),
        shift_end: Yup.string()
            .required("End time is required")
            .test('is-greater', 'End time must be after start time', function(value) {
                const { shift_start } = this.parent;
                if (!shift_start || !value) return true;
                return value > shift_start;
            }),
        description: Yup.string().nullable(),
    });

    // Formik with initial values from data
    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            shift_name: data?.name || "",
            shift_start: data?.start_time || "",
            shift_end: data?.end_time || "",
            description: data?.description || "",
        },
        validationSchema,
        onSubmit: (values) => {
            // Prepare data for API
            const payload = {
                id: id,
                name: values.shift_name,
                start_time: values.shift_start,
                end_time: values.shift_end,
                description: values.description || null,
            };
            onSave(payload);
            formik.resetForm();
        },
    });

    // Update Date objects when formik values change
    useEffect(() => {
        setStartTimeDate(timeStringToDate(formik.values.shift_start));
    }, [formik.values.shift_start]);

    useEffect(() => {
        setEndTimeDate(timeStringToDate(formik.values.shift_end));
    }, [formik.values.shift_end]);

    // Reset form when modal closes or data changes
    useEffect(() => {
        if (open && data) {
            formik.setValues({
                shift_name: data.name || "",
                shift_start: data.start_time || "",
                shift_end: data.end_time || "",
                description: data.description || "",
            });
        }
    }, [open, data]);

    return (
        <Modal
            open={open}
            onClose={() => {
                onClose();
                formik.resetForm();
            }}
            title="Update Shift Time"
            maxWidth="max-w-2xl"
            footer={
                <>
                    <button
                        onClick={() => {
                            onClose();
                            formik.resetForm();
                        }}
                        className="btn btn-outline-danger"
                        type="button"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                    >
                        Update Shift Time
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-12">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Shift Name <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="shift_name"
                        placeholder="Enter shift name"
                        className="form-input w-full"
                        value={formik.values.shift_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.shift_name && formik.errors.shift_name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.shift_name as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Shift Start Time <span className="text-red-500">*</span>
                    </label>
                    <Timepicker
                        value={startTimeDate}
                        onChange={(val) => {
                            // val is Date object from Timepicker
                            if (val) {
                                const timeString = dateToTimeString(val);
                                formik.setFieldValue("shift_start", timeString);
                            } else {
                                formik.setFieldValue("shift_start", "");
                            }
                            formik.setFieldTouched("shift_start", true);
                        }}
                        placeholder="Pick start time"
                    />
                    {formik.touched.shift_start && formik.errors.shift_start && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.shift_start as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Shift End Time <span className="text-red-500">*</span>
                    </label>
                    <Timepicker
                        value={endTimeDate}
                        onChange={(val) => {
                            // val is Date object from Timepicker
                            if (val) {
                                const timeString = dateToTimeString(val);
                                formik.setFieldValue("shift_end", timeString);
                            } else {
                                formik.setFieldValue("shift_end", "");
                            }
                            formik.setFieldTouched("shift_end", true);
                        }}
                        placeholder="Pick end time"
                    />
                    {formik.touched.shift_end && formik.errors.shift_end && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.shift_end as string}</p>
                    )}
                </div>

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

export default EditShiftTime;