import { useFormik } from "formik";
import * as Yup from "yup";
import Modal from "../../components/Modals";
import Select from "../../components/Select";
import user from "../../assets/images/auth/user.png";
import Datepicker from "../../components/Datepicker";
import { useState, useCallback, useRef, useEffect } from "react";
import axios from "axios";
import { toast } from "react-toastify";
import api from '../../api/axios';
import TagInput from "../../components/TagInput";
interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
}

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

const AddStaff = ({ open, onClose, onSave }: Props) => {
    const [profile, setProfile] = useState<string | null>(null);
    const [isUsernameChecking, setIsUsernameChecking] = useState(false);
    const [usernameSuggestions, setUsernameSuggestions] = useState<string[]>([]);
    const [showSuggestions, setShowSuggestions] = useState(false);
    const usernameTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [tags, setTags] = useState<string[]>([]);
    // Dynamic data states
    const [branchOptions, setBranchOptions] = useState<Option[]>([]);
    const [deptOptions, setDeptOptions] = useState<Option[]>([]);
    const [roleOptions, setRoleOptions] = useState<Option[]>([]);
    const [shiftOptions, setShiftOptions] = useState<Option[]>([]);
    const [loadingData, setLoadingData] = useState(false);
    const skillOptions = [
        { value: "critical_thinking", label: "Critical Thinking" },
        { value: "communication", label: "Communication Skills" },
        { value: "research", label: "Research & Analysis" },
        { value: "problem_solving", label: "Problem Solving" },
        { value: "fashion_design", label: "Fashion Design" },
        { value: "textile_design", label: "Textile Design" },
        { value: "styling", label: "Fashion Styling" },
        { value: "trend_forecasting", label: "Trend Forecasting" },
        { value: "fashion_illustration", label: "Fashion Illustration" },
        { value: "graphic_design", label: "Graphic Design" },
        { value: "visual_communication", label: "Visual Communication" },
        { value: "sketching", label: "Sketching" },
        { value: "digital_art", label: "Digital Art" },
        { value: "photography", label: "Photography" },
        { value: "presentation_skills", label: "Presentation Skills" },
        { value: "team_work", label: "Team Work" },
        { value: "leadership", label: "Leadership" },
        { value: "time_management", label: "Time Management" },
    ];
    // Validation Schema
    const validationSchema = Yup.object({
        staff_name: Yup.string()
            .required("Staff name is required")
            .min(3, "Name must be at least 3 characters"),
        mobile: Yup.string()
            .required("Mobile number is required")
            .matches(/^[0-9]{10}$/, "Mobile number must be 10 digits"),
        email: Yup.string()
            .email("Invalid email format")
            .required("Email is required"),
        branch: Yup.string().required("Branch is required"),
        department: Yup.string().required("Department is required"),
        role: Yup.string().required("Role is required"),
        shift: Yup.string().required("Shift is required"),
        user_name: Yup.string()
            .required("Username is required")
            .min(3, "Username must be at least 3 characters"),
        password: Yup.string()
            .required("Password is required")
            .min(6, "Password must be at least 6 characters"),
        salary: Yup.number()
            .required("Salary is required")
            .positive("Salary must be positive"),
    });

    // Formik
    const formik = useFormik({
        initialValues: {
            staff_name: "",
            mobile: "",
            email: "",
            branch: "",
            department: "",
            role: "",
            shift: "",
            doj: null,
            salary: "",
            address: "",
            user_name: "",
            password: "",
            profile: null,
        },
        validationSchema,
        onSubmit: async (values) => {
            try {
                const formData = new FormData();
                formData.append('name', values.staff_name);
                formData.append('mobile', values.mobile);
                formData.append('email', values.email);
                formData.append('branch_id', values.branch);
                formData.append('department_id', values.department);
                formData.append('role_id', values.role);
                formData.append('shift_id', values.shift);
                formData.append('doj', values.doj || '');
                formData.append('salary', values.salary);
                formData.append('address', values.address);
                formData.append('user_name', values.user_name);
                formData.append('password', values.password);

                formData.append('skills', JSON.stringify(tags)); // or send as comma-separated: tags.join(',')

                if (values.profile) {
                    formData.append('image', values.profile);
                }

                const response = await api.post('/staff/add', formData, {
                    headers: { 'Content-Type': 'multipart/form-data' }
                });

                if (response.data.status) {
                    toast.success('Staff created successfully');
                    onSave(response.data.data);
                    onClose();
                    formik.resetForm();
                    setProfile(null);
                }
            } 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 create staff');
            }
        },
    });

    // Check username availability - moved after formik initialization
    const checkUsername = useCallback(async (username: string, name?: string, mobile?: string) => {
        if (!username || username.length < 3) return;

        setIsUsernameChecking(true);
        try {
            const response = await api.post('/staff/username-check', {
                username: username,
                name: name || formik.values.staff_name,
                mobile: mobile || formik.values.mobile
            });

            if (response.data.available) {
                setUsernameSuggestions([]);
                setShowSuggestions(false);
                formik.setFieldError('user_name', '');
            } else {
                setUsernameSuggestions(response.data.suggestions || []);
                setShowSuggestions(true);
                formik.setFieldError('user_name', 'Username is already taken');
            }
        } catch (error) {
            console.error('Username check failed:', error);
        } finally {
            setIsUsernameChecking(false);
        }
    }, [formik.values.staff_name, formik.values.mobile]);

    // Handle username change with debounce
    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const username = e.target.value;
        formik.setFieldValue('user_name', username);
        formik.setFieldTouched('user_name', true);

        if (usernameTimeoutRef.current) {
            clearTimeout(usernameTimeoutRef.current);
        }

        if (username.length >= 3) {
            usernameTimeoutRef.current = setTimeout(() => {
                checkUsername(username);
            }, 500);
        } else {
            setShowSuggestions(false);
        }
    };

    // Apply suggestion
    const applySuggestion = (suggestion: string) => {
        formik.setFieldValue('user_name', suggestion);
        setShowSuggestions(false);
        checkUsername(suggestion);
    };

     // Fetch dynamic data
    const fetchDynamicData = async () => {
        setLoadingData(true);
        try {
            // Fetch branches
            const branchResponse = await api.get('/branch_list');
            if (branchResponse.data.status) {
                setBranchOptions(branchResponse.data.data.map((item: any) => ({
                    value: item.id.toString(),
                    label: item.name
                })));
            }

            // Fetch departments
            const deptResponse = await api.get('/department_list');
            if (deptResponse.data.status) {
                setDeptOptions(deptResponse.data.data.map((item: any) => ({
                    value: item.id.toString(),
                    label: item.name
                })));
            }

            // Fetch roles
            const roleResponse = await api.get('/role_list');
            if (roleResponse.data.status) {
                setRoleOptions(roleResponse.data.data.map((item: any) => ({
                    value: item.id.toString(),
                    label: item.name
                })));
            }

            const shiftResponse = await api.get('/shift_times/list');
            if (shiftResponse.data.status) {
                setShiftOptions(shiftResponse.data.data.map((item: any) => ({
                    value: item.id.toString(),
                    label: `${item.name} (${item.start_time}) - ${item.end_time}`
                })));
            }


        } catch (error) {
            console.error('Failed to fetch dynamic data:', error);
            toast.error('Failed to load form data');
        } finally {
            setLoadingData(false);
        }
    };

    // Fetch data when modal opens
    useEffect(() => {
        if (open) {
            fetchDynamicData();
        }
    }, [open]);

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Create Staff"
            maxWidth="max-w-3xl"
            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 || loadingData}
                    >
                        {formik.isSubmitting ? 'Creating...' : 'Create Staff'}
                    </button>
                </>
            }
        >
            {loadingData ? (
                <div className="flex justify-center items-center py-12">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                </div>
            ) : (
                <form className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>Staff Name <span className="text-danger">*</span></label>
                        <input
                            name="staff_name"
                            className="form-input w-full"
                            value={formik.values.staff_name}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                        {formik.touched.staff_name && formik.errors.staff_name && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.staff_name}</p>
                        )}
                    </div>

                    <div>
                        <label>Mobile <span className="text-danger">*</span></label>
                        <input
                            name="mobile"
                            className="form-input w-full"
                            value={formik.values.mobile}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                        {formik.touched.mobile && formik.errors.mobile && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.mobile}</p>
                        )}
                    </div>

                    <div>
                        <label>Email <span className="text-danger">*</span></label>
                        <input
                            name="email"
                            type="email"
                            className="form-input w-full"
                            value={formik.values.email}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                        {formik.touched.email && formik.errors.email && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.email}</p>
                        )}
                    </div>

                    <div>
                        <label>Branch <span className="text-danger">*</span></label>
                        <Select
                            options={branchOptions}
                            value={branchOptions.find(o => o.value === formik.values.branch)}
                            onChange={(val: any) => {
                                formik.setFieldValue("branch", val?.value || "");

                                setTimeout(() => {
                                    formik.setFieldTouched("branch", true);
                                    formik.validateField("branch");
                                }, 0);
                            }}
                            placeholder="Select Branch"
                        />
                        {formik.touched.branch && formik.errors.branch && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.branch}</p>
                        )}
                    </div>

                    <div>
                        <label>Department <span className="text-danger">*</span></label>
                        <Select
                            options={deptOptions}
                            value={deptOptions.find(o => o.value === formik.values.department)}
                             onChange={(val: any) => {
                                formik.setFieldValue("department", val?.value || "");

                                setTimeout(() => {
                                    formik.setFieldTouched("department", true);
                                    formik.validateField("department");
                                }, 0);
                            }}
                            placeholder="Select Department"
                        />
                        {formik.touched.department && formik.errors.department && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.department}</p>
                        )}
                    </div>

                    <div>
                        <label>Role <span className="text-danger">*</span></label>
                        <Select
                            options={roleOptions}
                            value={roleOptions.find(o => o.value === formik.values.role)}
                            onChange={(val: any) => {
                                formik.setFieldValue("role", val?.value || "");

                                setTimeout(() => {
                                    formik.setFieldTouched("role", true);
                                    formik.validateField("role");
                                }, 0);
                            }}
                            placeholder="Select Role"
                        />
                        {formik.touched.role && formik.errors.role && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.role}</p>
                        )}
                    </div>

                    <div>
                        <label>Date of Joining</label>
                        <Datepicker
                            value={formik.values.doj ?? undefined}
                            onChange={(val) => {
                                formik.setFieldValue("doj", val);
                                formik.setFieldTouched("doj", true);
                            }}
                            placeholder="Pick date"
                        />
                    </div>

                    <div>
                        <label>Shift <span className="text-danger">*</span></label>
                        <Select
                            options={shiftOptions}
                            value={shiftOptions.find(o => o.value === formik.values.shift)}
                            onChange={(val: any) => {
                                formik.setFieldValue("shift", val?.value || "");

                                setTimeout(() => {
                                    formik.setFieldTouched("shift", true);
                                    formik.validateField("shift");
                                }, 0);
                            }}
                            placeholder="Select shift"
                        />
                        {formik.touched.shift && formik.errors.shift && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.shift}</p>
                        )}
                    </div>

                    <div>
                        <label>Salary <span className="text-danger">*</span></label>
                        <input
                            name="salary"
                            type="number"
                            className="form-input w-full"
                            value={formik.values.salary}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                        {formik.touched.salary && formik.errors.salary && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.salary}</p>
                        )}
                    </div>
                     <div >
                        <label>Address</label>
                        <textarea
                            name="address"
                            className="form-textarea w-full"
                            rows={1}
                            value={formik.values.address}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                    </div>

                    <div className="relative">
                        <label>User Name <span className="text-danger">*</span></label>
                        <div className="relative">
                            <input
                                name="user_name"
                                className="form-input w-full pr-10"
                                value={formik.values.user_name}
                                onChange={handleUsernameChange}
                                onBlur={formik.handleBlur}
                            />
                            {isUsernameChecking && (
                                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
                                </div>
                            )}
                        </div>
                        {formik.touched.user_name && formik.errors.user_name && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.user_name}</p>
                        )}

                        {/* Username Suggestions */}
                        {showSuggestions && usernameSuggestions.length > 0 && (
                            <div className="absolute z-10 mt-1 w-full bg-white border rounded-md shadow-lg">
                                <div className="p-2 text-sm text-gray-600 border-b">Suggestions:</div>
                                {usernameSuggestions.map((suggestion, index) => (
                                    <button
                                        key={index}
                                        type="button"
                                        onClick={() => applySuggestion(suggestion)}
                                        className="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 transition-colors"
                                    >
                                        {suggestion}
                                    </button>
                                ))}
                            </div>
                        )}
                    </div>

                    <div>
                        <label>Password <span className="text-danger">*</span></label>
                        <input
                            name="password"
                            type="password"
                            className="form-input w-full"
                            value={formik.values.password}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                        {formik.touched.password && formik.errors.password && (
                            <p className="text-red-500 text-sm mt-1">{formik.errors.password}</p>
                        )}
                    </div>


                    <div className="md:col-span-2">
                    <label>Skill Tags</label>
                        <TagInput
                            label="Skills"
                            value={tags}
                            onChange={setTags}
                            placeholder="Add skills..."
                        />
                    </div>

                    <div>
                        <label className="block mb-2 font-medium text-black">Staff Image</label>
                        <div className="flex items-center gap-4">
                            <div className="w-20 h-20 rounded-full overflow-hidden border bg-gray-100 flex items-center justify-center">
                                {profile ? (
                                    <img src={profile} alt="profile" className="w-full h-full object-cover" />
                                ) : (
                                    <img src={user} alt="profile" className="w-full h-full object-cover" />
                                )}
                            </div>
                            <div className="flex gap-2">
                                <label className="cursor-pointer px-4 py-1 bg-primary text-white rounded-md text-sm hover:opacity-90">
                                    Upload
                                    <input
                                        type="file"
                                        className="hidden"
                                        accept="image/*"
                                        onChange={(e) => {
                                            const file = e.target.files?.[0];
                                            if (file) {
                                                formik.setFieldValue("profile", file);
                                                setProfile(URL.createObjectURL(file));
                                            }
                                        }}
                                    />
                                </label>
                                <button
                                    type="button"
                                    className="px-4 py-1 text-sm bg-red-500 text-white rounded-md hover:opacity-90"
                                    onClick={() => {
                                        formik.setFieldValue("profile", null);
                                        setProfile(null);
                                    }}
                                >
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            )}
        </Modal>
    );
};

export default AddStaff;