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

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

interface Department {
    value: string;
    label: string;
}

interface Staff {
    value: string;
    label: string;
    email?: string;
}

const AssignTicket = ({ open, onClose, onSave, data }: Props) => {
    const [departments, setDepartments] = useState<Department[]>([]);
    const [staffList, setStaffList] = useState<Staff[]>([]);
    const [loading, setLoading] = useState(false);
    const [loadingDepartments, setLoadingDepartments] = useState(false);
    const [loadingStaff, setLoadingStaff] = useState(false);
    const [selectedDepartment, setSelectedDepartment] = useState<string>('');

    // Fetch departments
    useEffect(() => {
        const fetchDepartments = async () => {
            setLoadingDepartments(true);
            try {
                const response = await api.get('/assets/departments/list');
                if (response.data.status === 200) {
                    const formattedDepartments = response.data.data.map((dept: any) => ({
                        value: String(dept.id), // Convert to string
                        label: dept.name
                    }));
                    setDepartments(formattedDepartments);
                }
            } catch (error) {
                console.error("Error fetching departments:", error);
                toast.error("Failed to fetch departments");
            } finally {
                setLoadingDepartments(false);
            }
        };

        if (open) {
            fetchDepartments();
            // Reset form when modal opens
            formik.resetForm();
            setSelectedDepartment('');
            setStaffList([]);
        }
    }, [open]);

    // Fetch staff when department changes
    useEffect(() => {
        const fetchStaffByDepartment = async () => {
            if (!selectedDepartment) return;

            setLoadingStaff(true);
            try {
                const response = await api.get(`/assets/staff/list/${selectedDepartment}`);
                if (response.data.status === 200) {
                    const formattedStaff = response.data.data.items.map((staff: any) => ({
                        value: String(staff.id), // Convert to string
                        label: staff.staff_name,
                        email: staff.email
                    }));
                    setStaffList(formattedStaff);
                }
            } catch (error) {
                console.error("Error fetching staff:", error);
                toast.error("Failed to fetch staff list");
            } finally {
                setLoadingStaff(false);
            }
        };

        fetchStaffByDepartment();
    }, [selectedDepartment]);

    const validationSchema = Yup.object({
        department: Yup.string().required("Department is required"),
        staff: Yup.string().required("Staff is required"),
    });

    const formik = useFormik({
        initialValues: {
            department: "",
            staff: "",
        },
        validationSchema,
        onSubmit: async (values) => {
            console.log("Form Values:", values); // Debug: Check what values are being submitted

            setLoading(true);
            try {
                // Prepare the payload
                const payload = {
                    staff_id: values.staff,  // Send staff ID
                    department_id: values.department, // Send department ID
                    ticket_id: data?.id // Include ticket ID if needed
                };

                console.log("Payload being sent:", payload); // Debug

                await onSave(payload);
                formik.resetForm();
                setSelectedDepartment('');
                setStaffList([]);
                toast.success('Ticket assigned successfully');
                onClose(); // Close modal after successful assignment
            } catch (error) {
                console.error("Assignment error:", error);
                toast.error('Failed to assign ticket');
            } finally {
                setLoading(false);
            }
        },
    });

    // Handle department change
    const handleDepartmentChange = (val: any) => {
        const departmentValue = val.value;
        setSelectedDepartment(departmentValue);
        formik.setFieldValue("department", departmentValue);
        formik.setFieldValue("staff", ""); // Reset staff when department changes
        setTimeout(() => {
            formik.setFieldTouched("department", true);
            formik.validateField("department");
        }, 0);
    };

    // Handle staff change
    const handleStaffChange = (val: any) => {
        const staffValue = val.value;
        formik.setFieldValue("staff", val?.value || "");
        setTimeout(() => {
            formik.setFieldTouched("staff", true);
            formik.validateField("staff");
        }, 0);
        console.log("Selected staff ID:", staffValue); // Debug
    };

    if (!data) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Assign Ticket"
            maxWidth="max-w-xl"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={loading || loadingDepartments || loadingStaff || !formik.values.staff}
                    >
                        {loading ? 'Assigning...' : 'Assign Ticket'}
                    </button>
                </>
            }
        >
            <div className="grid grid-cols-12 gap-4">
                <div className="col-span-12 flex gap-2 items-center">
                    <div className='p-4 rounded-xl bg-[#FCE7F3] text-primary'>
                        <IconBox />
                    </div>
                    <div className="flex flex-col">
                        <label className="font-semibold text-lg text-primary mb-0">{data.ticket_name || data.ticket}</label>
                        <label className="text-sm text-gray-600 mb-0">{data.reason}</label>
                    </div>
                </div>
                <div className="col-span-12 border-b"></div>
                <div className="col-span-12">
                    <form className="grid grid-cols-12 gap-4">
                        <div className="col-span-12 md:col-span-6">
                            <label className="block text-sm font-medium mb-1">Department <span className="text-red-500">*</span></label>
                            <Select
                                options={departments}
                                placeholder={loadingDepartments ? "Loading departments..." : "Select department"}
                                value={departments.find(o => o.value === formik.values.department)}
                                onChange={handleDepartmentChange}
                                isDisabled={loading || loadingDepartments}
                                isLoading={loadingDepartments}
                            />
                            {formik.touched.department && formik.errors.department && (
                                <p className="text-red-500 text-sm mt-1">{formik.errors.department}</p>
                            )}
                        </div>
                        <div className="col-span-12 md:col-span-6">
                            <label className="block text-sm font-medium mb-1">Staff <span className="text-red-500">*</span></label>
                            <Select
                                options={staffList}
                                placeholder={
                                    !formik.values.department
                                        ? "Please select department first"
                                        : loadingStaff
                                            ? "Loading staff..."
                                            : "Select staff"
                                }
                                value={staffList.find(o => o.value === formik.values.staff)}
                                onChange={handleStaffChange}
                                isDisabled={loading || !formik.values.department || loadingStaff}
                                isLoading={loadingStaff}
                            />
                            {formik.touched.staff && formik.errors.staff && (
                                <p className="text-red-500 text-sm mt-1">{formik.errors.staff}</p>
                            )}
                            {formik.values.department && staffList.length === 0 && !loadingStaff && (
                                <p className="text-gray-500 text-sm mt-1">No staff found in this department</p>
                            )}
                        </div>
                    </form>

                </div>
            </div>
        </Modal>
    );
};

export default AssignTicket;