import { useFormik } from "formik";
import * as Yup from "yup";
import Modal from "../../components/Modals";
import Select from "../../components/Select";
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>;
    selectedCount?: number;
}

type OptionType = {
  value: string;
  label: string;
};
const BulkAssignStaff = ({ open, onClose, onSave, selectedCount = 0 }: 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,
                        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.number()
            .required("Staff is required")
            .min(1, "Please select a staff member"),
    });

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            assign_staff_id: "",
        },
        validationSchema,
        onSubmit: async (values, { setSubmitting }) => {
            setSubmitting(true);
            try {
                const success = await onSave(values);
                if (success) {
                    onClose();
                }
            } catch (error) {
                console.error('Error bulk assigning staff:', error);
            } finally {
                setSubmitting(false);
            }
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Bulk Assign Staff"
            maxWidth="max-w-md"
            footer={
                <>
                    <button
                        onClick={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 to ${selectedCount} Lead${selectedCount > 1 ? 's' : ''}`}
                    </button>
                </>
            }
        >
            <form className="space-y-4">
                {/* Info Banner */}
                {/* <div className="bg-primary-50 p-3 rounded-lg border border-primary-200">
                    <p className="text-sm text-primary-800">
                        You are about to assign staff to <strong>{selectedCount}</strong> selected lead{selectedCount > 1 ? 's' : ''}.
                    </p>
                </div> */}

                {/* Staff Selection */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Select Staff Member <span className='text-danger'>*</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 || "");
                            formik.setFieldTouched("assign_staff_id", true);
                        }}
                        placeholder="Choose staff to assign"
                        isLoading={staffOptions.length === 0}
                    />
                    {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>

                {/* Warning Message */}
                <div className="bg-yellow-50 p-3 rounded-lg">
                    <p className="text-xs text-yellow-800">
                        <span className="font-medium">Warning:</span> This will override existing staff assignments
                        for all selected leads. Previous staff will no longer have access to these leads.
                    </p>
                </div>
            </form>
        </Modal>
    );
};

export default BulkAssignStaff;