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

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

    // Fetch staff list
    useEffect(() => {
        const fetchStaff = async () => {
            try {
                const response = await api.get('/staff/lists');
                if (response.data.status === 200) {
                    const options = response.data.data.map((staff: any) => ({
                        value: staff.id.toString(),
                        label: staff.staff_name
                    }));
                    setStaffOptions(options);
                }
            } catch (error) {
                console.error('Error fetching staff:', error);
                toast.error('Failed to load staff list');
            }
        };

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

    const validationSchema = Yup.object({
        assign_staff_id: Yup.string()
            .required("Staff is required")
            .min(1, "Please select a staff member"),
    });

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            assign_staff_id: data?.assign_to ? String(data.assign_to) : "",
        },
        validationSchema,
        onSubmit: async (values, { setSubmitting }) => {
            setSubmitting(true);
            try {
                // Convert to number if your API expects number
                const submitValues = {
                    ...values,
                    assign_staff_id: values.assign_staff_id ? Number(values.assign_staff_id) : null
                };
                const success = await onSave(submitValues);
                if (success) {
                    onClose();
                }
            } catch (error) {
                console.error('Error assigning staff:', error);
            } finally {
                setSubmitting(false);
            }
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Assign Staff to Lead"
            maxWidth="max-w-lg"
            footer={
                <>
                    <button
                         onClick={() => {
                            formik.resetForm();
                            onClose();
                        }}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={formik.isSubmitting}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        disabled={!formik.isValid || formik.isSubmitting}
                        className="btn btn-primary disabled:opacity-50"
                        type="button"
                    >
                        {formik.isSubmitting ? "Assigning..." : "Assign Staff"}
                    </button>
                </>
            }
        >
            <form className="space-y-4">
                {/* Lead Information Display */}
                <div className="bg-gray-100 rounded-lg p-4 text-sm">
                    <label className="text-black font-semibold text-base mb-2 block">
                        Lead Information
                    </label>
                    <div className="space-y-2">
                        <div className="flex items-center gap-2">
                            <IconUser className="w-4 h-4 text-gray-500" />
                            <span className="font-medium">Name:</span>
                            <span>{data?.lead_name || data?.name || "-"}</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <IconMail className="w-4 h-4 text-gray-500" />
                            <span className="font-medium">Email:</span>
                            <span>{data?.lead_email || data?.email || "-"}</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <IconPhone className="w-4 h-4 text-gray-500" />
                            <span className="font-medium">Phone:</span>
                            <span>{data?.lead_mobile || data?.phone || "-"}</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <IconUser className="w-4 h-4 text-gray-500" />
                            <span className="font-medium">Current Staff:</span>
                            <span className="text-primary">
                                {data?.assign_staff?.staff_name || data?.assignedTo || "Not Assigned"}
                            </span>
                        </div>
                    </div>
                </div>

                {/* Staff Selection */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Select Staff Member <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={staffOptions}
                        value={staffOptions.find(o => o.value === formik.values.assign_staff_id)}
                        onChange={(val: any) => {
                            formik.setFieldValue("assign_staff_id", val?.value || "");

                            setTimeout(() => {
                                formik.setFieldTouched("assign_staff_id", true);
                                formik.validateField("assign_staff_id");
                            }, 0);
                        }}
                        placeholder="Choose staff to assign"
                    />
                    {formik.touched.assign_staff_id && formik.errors.assign_staff_id && (
                        <p className="text-red-500 text-xs mt-1">
                            {formik.errors.assign_staff_id as string}
                        </p>
                    )}
                </div>
            </form>
        </Modal>
    );
};

export default AssignStaff;