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

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

interface LeadOption {
    value: string;
    label: string;
    name: string;
    mobile: string;
}
type OptionType = {
  value: string;
  label: string;
};
const AddStudent = ({ open, onClose, onSave, data }: Props) => {
    const [leadOptions, setLeadOptions] = useState<LeadOption[]>([]);
    const [courseOptions, setCourseOptions] = useState<OptionType[]>([]);
    const [batchOptions, setBatchOptions] = useState<OptionType[]>([]);
    const [loading, setLoading] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
    const [usernameChecking, setUsernameChecking] = useState(false);
    const [usernameAvailable, setUsernameAvailable] = useState<boolean | null>(null);
    const [usernameSuggestions, setUsernameSuggestions] = useState<string[]>([]);
    const [selectedLead, setSelectedLead] = useState<LeadOption | null>(null);

    // Reset everything when modal opens
    useEffect(() => {
        if (open) {
            // Reset selected lead
            setSelectedLead(null);
            // Reset username states
            setUsernameAvailable(null);
            setUsernameSuggestions([]);
            // Formik will reset via enableReinitialize if data changes
        }
    }, [open]);

    // Validation Schema
    const validationSchema = Yup.object({
        dob: Yup.date().nullable(),
        enrollment_date: Yup.date().required("Enrollment date is required"),
        address: Yup.string().nullable(),
        emergency_name: Yup.string().nullable(),
        emergency_phone: Yup.string()
            .nullable()
            .matches(/^[0-9]{10}$/, "Invalid phone number (must be 10 digits)"),
        course_id: Yup.number().required("Course is required"),
        lead_id: Yup.number().required("Lead is required"),
        batch_id: Yup.number().required("Batch/Class is required"),
        total_fees: Yup.number()
            .typeError("Must be a number")
            .required("Total fees is required")
            .min(0, "Total fees cannot be negative"),
        fees_paid: Yup.number()
            .typeError("Must be a number")
            .min(0, "Initial payment cannot be negative")
            .test(
                "less-than-total",
                "Initial payment cannot exceed total fees",
                function (value) {
                    const { total_fees } = this.parent;
                    return !value || value <= total_fees;
                }
            ),
        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"),
        notes: Yup.string().nullable(),
    });

    // Formik initialization
    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            dob: data?.date_of_birth || "",
            enrollment_date: new Date().toISOString().split('T')[0],
            address: data?.address || "",
            emergency_name: data?.emergency_contact_name || "",
            emergency_phone: data?.emergency_contact_number || "",
            course_id: "",
            lead_id: data?.id || "",
            batch_id: "",
            total_fees: "",
            fees_paid: "0",
            user_name: "",
            password: "",
            notes: "",
        },
        validationSchema,
        onSubmit: async (values) => {
            setLoading(true);
            try {
                const response = await api.post('/student/create', {
                    ...values,
                    lead_id: data?.id || values.lead_id,
                    fees_paid: Number(values.fees_paid) || 0,
                    total_fees: Number(values.total_fees),
                    date_of_birth: values.dob,
                    emergency_contact_name: values.emergency_name,
                    emergency_contact_number: values.emergency_phone,
                });

                if (response.data.status === true || response.data.status === 200) {
                    toast.success(response.data.message || 'Student created successfully');

                    if (response.data.data?.invoice_number) {
                        toast.info(`Invoice: ${response.data.data.invoice_number}`, {
                            autoClose: 5000,
                        });
                    }

                    formik.resetForm();
                    setSelectedLead(null);
                    setUsernameAvailable(null);
                    setUsernameSuggestions([]);
                    onClose();
                    onSave(response.data.data);
                }
            } catch (error: any) {
                const errorMsg = error.response?.data?.message || 'Failed to create student';
                toast.error(errorMsg);
            } finally {
                setLoading(false);
            }
        },
    });

    // Handle lead selection - now properly stores the full option
    const handleLeadChange = (option: any) => {
        formik.setFieldValue("lead_id", option?.value || "");
        formik.setFieldTouched("lead_id", true);

        if (option) {
            setSelectedLead({
                value: option.value,
                label: option.label,
                name: option.name || '',
                mobile: option.mobile || ''
            });
            console.log("Selected Lead:", { name: option.name, mobile: option.mobile });
        } else {
            setSelectedLead(null);
        }
    };

    // Check username availability - Fixed dependency
    const checkUsername = useCallback(async (username: string) => {
        if (!username || username.length < 3) {
            setUsernameAvailable(null);
            setUsernameSuggestions([]);
            return;
        }

        setUsernameChecking(true);
        try {
            // Get name and mobile from selectedLead or data prop
            const name = selectedLead?.name || data?.lead_name || data?.student_name || '';
            const mobile = selectedLead?.mobile || data?.lead_mobile || data?.student_mobile || '';

            console.log("Checking username with:", { username, name, mobile });

            const response = await api.post('/lead/username-check', {
                username: username,
                name: name,
                mobile: mobile
            });

            if (response.data.available) {
                setUsernameAvailable(true);
                setUsernameSuggestions([]);
            } else {
                setUsernameAvailable(false);
                setUsernameSuggestions(response.data.suggestions || []);
            }
        } catch (error) {
            console.error('Error checking username:', error);
            setUsernameAvailable(null);
        } finally {
            setUsernameChecking(false);
        }
    }, [selectedLead, data]); // Now depends on selectedLead

    // Fetch leads from correct API
    useEffect(() => {
        const fetchLeads = async () => {
            if (!open) return;

            try {
                // Changed from /student/list to /lead/lists
                const response = await api.get('/student/list');
                console.log("Leads API Response:", response.data);

                if (response.data.status === true || response.data.status === 200) {
                    const leadData = response.data.data?.data || response.data.data || [];
                    const options: LeadOption[] = leadData.map((lead: any) => ({
                        value: lead.id,
                        label: `${lead.lead_name || lead.name || 'Unknown'} (${lead.lead_mobile || lead.phone || 'N/A'})`,
                        name: lead.lead_name || lead.name || '',
                        mobile: lead.lead_mobile || lead.phone || ''
                    }));
                    setLeadOptions(options);
                }
            } catch (error) {
                console.error('Error fetching leads:', error);
                toast.error('Failed to load leads');
            }
        };

        fetchLeads();
    }, [open]);

    // Fetch courses
    useEffect(() => {
        const fetchCourses = async () => {
            if (!open) return;

            try {
                const response = await api.get('/course/lists');
                if (response.data.status === true || response.data.status === 200) {
                    const courseData = response.data.data?.data || response.data.data || [];
                    const options = courseData.map((course: any) => ({
                        value: course.id,
                        label: course.course_name || course.name
                    }));
                    setCourseOptions(options);
                }
            } catch (error) {
                console.error('Error fetching courses:', error);
                toast.error('Failed to load courses');
            }
        };

        fetchCourses();
    }, [open]);

    // Fetch batches based on selected course
    useEffect(() => {
        const fetchBatches = async () => {
            const courseId = formik.values.course_id;
            if (!courseId || !open) {
                setBatchOptions([]);
                return;
            }

            try {
                const response = await api.get(`/batch/list-by-course/${courseId}`);
                if (response.data.status === true || response.data.status === 200) {
                    const batchData = response.data.data?.data || response.data.data || [];
                    const options = batchData.map((batch: any) => ({
                        value: batch.id,
                        label: `${batch.batch_name || batch.name} (${batch.batch_timing || ''})`
                    }));
                    setBatchOptions(options);
                }
            } catch (error) {
                console.error('Error fetching batches:', error);
                toast.error('Failed to load batches');
            }
        };

        fetchBatches();
    }, [open, formik.values.course_id]);

    const remaining = Math.max(0, Number(formik.values.total_fees || 0) - Number(formik.values.fees_paid || 0));

    const applySuggestion = (suggestion: string) => {
        formik.setFieldValue("user_name", suggestion);
        // Trigger username check with the new value
        checkUsername(suggestion);
    };

    // Handle modal close with proper reset
    const handleClose = () => {
        formik.resetForm();
        setSelectedLead(null);
        setUsernameAvailable(null);
        setUsernameSuggestions([]);
        setBatchOptions([]);
        onClose();
    };

    return (
        <Modal
            open={open}
            onClose={handleClose}
            title={data ? "Convert Lead to Student" : "Add New Student"}
            maxWidth="max-w-2xl"
            footer={
                <>
                    <button
                        onClick={handleClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>

                    <button
                        onClick={() => formik.handleSubmit()}
                        disabled={!formik.isValid || loading}
                        className="btn btn-primary disabled:opacity-50"
                        type="button"
                    >
                        {loading ? (
                            <span className="flex items-center gap-2">
                                <span className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
                                Converting...
                            </span>
                        ) : (
                            data ? "Convert to Student" : "Add Student"
                        )}
                    </button>
                </>
            }
        >
            <form className="space-y-4">
                {/* Lead Selection (only if no data provided) */}
                {!data && (
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Lead <span className='text-danger'>*</span>
                        </label>
                        <Select
                            options={leadOptions}
                            value={leadOptions.find(o => o.value === formik.values.lead_id) || null}
                            onChange={(val: any) => handleLeadChange(val)}
                            placeholder="Select Lead"
                            isLoading={leadOptions.length === 0 && open}
                        />
                        {formik.touched.lead_id && formik.errors.lead_id && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.lead_id as string}</p>
                        )}

                        {/* Show selected lead info */}
                        {selectedLead && (
                            <div className="mt-2 p-2 bg-blue-50 rounded-md text-xs text-blue-700">
                                <div>Name: <strong>{selectedLead.name}</strong></div>
                                <div>Mobile: <strong>{selectedLead.mobile}</strong></div>
                            </div>
                        )}
                    </div>
                )}

                <div className="grid grid-cols-2 gap-3">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Date of Birth
                        </label>
                        <Datepicker
                            value={formik.values.dob}
                            onChange={(val) => {
                                formik.setFieldValue("dob", val);
                                formik.setFieldTouched("dob", true);
                            }}
                            placeholder="Pick date"
                            maxDate={new Date()}
                        />
                        {formik.touched.dob && formik.errors.dob && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.dob as string}</p>
                        )}
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Enrollment Date <span className='text-danger'>*</span>
                        </label>
                        <Datepicker
                            value={formik.values.enrollment_date}
                            onChange={(val) => {
                                formik.setFieldValue("enrollment_date", val);
                                formik.setFieldTouched("enrollment_date", true);
                            }}
                            placeholder="Pick date"
                        />
                        {formik.touched.enrollment_date && formik.errors.enrollment_date && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.enrollment_date as string}</p>
                        )}
                    </div>
                </div>

                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Address
                    </label>
                    <textarea
                        name="address"
                        rows={2}
                        value={formik.values.address}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        className="form-textarea w-full"
                        placeholder="Enter full address"
                    />
                    {formik.touched.address && formik.errors.address && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.address as string}</p>
                    )}
                </div>

                <div className="grid grid-cols-2 gap-3">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Emergency Contact Name
                        </label>
                        <input
                            name="emergency_name"
                            value={formik.values.emergency_name}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            className="form-input w-full"
                            placeholder="Emergency contact person"
                        />
                        {formik.touched.emergency_name && formik.errors.emergency_name && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.emergency_name as string}</p>
                        )}
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Emergency Phone
                        </label>
                        <input
                            name="emergency_phone"
                            value={formik.values.emergency_phone}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            className="form-input w-full"
                            placeholder="10 digit mobile number"
                            maxLength={10}
                        />
                        {formik.touched.emergency_phone && formik.errors.emergency_phone && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.emergency_phone as string}</p>
                        )}
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-3">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Course <span className='text-danger'>*</span>
                        </label>
                        <Select
                            options={courseOptions}
                            value={courseOptions.find(o => o.value === formik.values.course_id)}
                            onChange={(val: any) => {
                                formik.setFieldValue("course_id", val?.value || "");
                                formik.setFieldValue("batch_id", "");
                                formik.setFieldTouched("course_id", true);
                            }}
                            placeholder="Select course"
                            isLoading={courseOptions.length === 0 && open}
                        />
                        {formik.touched.course_id && formik.errors.course_id && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.course_id as string}</p>
                        )}
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Batch / Class <span className='text-danger'>*</span>
                        </label>
                        <Select
                            options={batchOptions}
                            value={batchOptions.find(o => o.value === formik.values.batch_id)}
                            onChange={(val: any) => {
                                formik.setFieldValue("batch_id", val?.value || "");
                                formik.setFieldTouched("batch_id", true);
                            }}
                            placeholder={formik.values.course_id ? "Select batch" : "Select course first"}
                            isDisabled={!formik.values.course_id}
                            isLoading={batchOptions.length === 0 && !!formik.values.course_id}
                        />
                        {formik.touched.batch_id && formik.errors.batch_id && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.batch_id as string}</p>
                        )}
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-3">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Total Fees <span className='text-danger'>*</span>
                        </label>
                        <div className="relative">
                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
                            <input
                                name="total_fees"
                                type="number"
                                value={formik.values.total_fees}
                                onChange={formik.handleChange}
                                onBlur={formik.handleBlur}
                                className="form-input w-full pl-8"
                                placeholder="Enter total fees"
                            />
                        </div>
                        {formik.touched.total_fees && formik.errors.total_fees && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.total_fees as string}</p>
                        )}
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Initial Payment
                        </label>
                        <div className="relative">
                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
                            <input
                                name="fees_paid"
                                type="number"
                                value={formik.values.fees_paid}
                                onChange={formik.handleChange}
                                onBlur={formik.handleBlur}
                                className="form-input w-full pl-8"
                                placeholder="Enter initial payment"
                            />
                        </div>
                        {formik.touched.fees_paid && formik.errors.fees_paid && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.fees_paid as string}</p>
                        )}
                    </div>
                </div>

                {/* Remaining Balance Display */}
                <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span className="text-sm font-medium text-gray-700">Remaining Balance:</span>
                    <span className={`text-lg font-bold ${remaining > 0 ? 'text-orange-600' : 'text-green-600'}`}>
                        ₹{remaining.toLocaleString()}
                    </span>
                </div>

                <div className="grid grid-cols-2 gap-3">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Username <span className='text-danger'>*</span>
                        </label>
                        <div className="relative">
                            <input
                                name="user_name"
                                value={formik.values.user_name}
                                onChange={(e) => {
                                    formik.handleChange(e);
                                    setUsernameAvailable(null);
                                }}
                                onBlur={(e) => {
                                    formik.handleBlur(e);
                                    if (formik.values.user_name) {
                                        checkUsername(formik.values.user_name);
                                    }
                                }}
                                className="form-input w-full pr-20"
                                placeholder="Choose a username"
                            />
                            <div className="absolute right-2 top-1/2 -translate-y-1/2">
                                {usernameChecking && (
                                    <div className="animate-spin rounded-full h-5 w-5 border-2 border-primary border-t-transparent"></div>
                                )}
                                {usernameAvailable === true && !usernameChecking && (
                                    <span className="text-green-500 text-lg">✓</span>
                                )}
                                {usernameAvailable === false && !usernameChecking && (
                                    <span className="text-red-500 text-lg">✗</span>
                                )}
                            </div>
                        </div>
                        {formik.touched.user_name && formik.errors.user_name && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.user_name as string}</p>
                        )}

                        {/* Username Suggestions */}
                        {usernameSuggestions.length > 0 && (
                            <div className="mt-2">
                                <p className="text-xs text-gray-500 mb-1.5">Suggestions:</p>
                                <div className="flex flex-wrap gap-1.5">
                                    {usernameSuggestions.map((suggestion, idx) => (
                                        <button
                                            key={idx}
                                            type="button"
                                            onClick={() => applySuggestion(suggestion)}
                                            className="text-xs bg-primary/5 hover:bg-primary/10 text-primary px-2.5 py-1 rounded-md border border-primary/20 transition-colors"
                                        >
                                            {suggestion}
                                        </button>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Password <span className='text-danger'>*</span>
                        </label>
                        <div className="relative">
                            <input
                                name="password"
                                type={showPassword ? "text" : "password"}
                                value={formik.values.password}
                                onChange={formik.handleChange}
                                onBlur={formik.handleBlur}
                                className="form-input w-full pr-10"
                                placeholder="Choose a password"
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                            >
                                {showPassword ? <IconEyeOff className="w-4 h-4" /> : <IconEye className="w-4 h-4" />}
                            </button>
                        </div>
                        {formik.touched.password && formik.errors.password && (
                            <p className="text-red-500 text-xs mt-1">{formik.errors.password as string}</p>
                        )}
                        <p className="text-xs text-gray-400 mt-1">Minimum 6 characters</p>
                    </div>
                </div>

                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Notes
                    </label>
                    <textarea
                        name="notes"
                        rows={2}
                        value={formik.values.notes}
                        onChange={formik.handleChange}
                        className="form-textarea w-full"
                        placeholder="Additional notes (optional)"
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddStudent;