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 { useEffect, useState, useCallback } from "react";
import IconEyeOff from "../../components/Icon/IconEyeOff";
import IconEye from "../../components/Icon/IconEye";
import api from '../../api/axios';
import { toast } from 'react-toastify';

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    data: any;
}
type OptionType = {
  value: string;
  label: string;
};
const EditStudent = ({ open, onClose, onSave, data }: Props) => {
    const [profile, setProfile] = useState<string | null>(null);
    const [profileFile, setProfileFile] = useState<File | null>(null);
    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[]>([]);
    useEffect(() => {

    }, [open, data]);
    // Validation Schema
    const validationSchema = Yup.object({
        student_name: Yup.string().required("Student name is required"),
        student_mobile: Yup.string()
            .required("Phone number is required")
            .matches(/^[0-9]{10}$/, "Invalid phone number (must be 10 digits)"),
        student_email: Yup.string().email("Invalid email").nullable(),
        date_of_birth: Yup.date().nullable(),
        emergency_contact_name: Yup.string().nullable(),
        emergency_contact_number: Yup.string()
            .nullable()
            .matches(/^[0-9]{10}$/, "Invalid phone number (must be 10 digits)"),
        address: Yup.string().nullable(),
        course_id: Yup.number().required("Course 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()
            .nullable()
            .min(6, "Password must be at least 6 characters"),
        notes: Yup.string().nullable(),
        status: Yup.string().nullable(),
    });

    // Formik initialization
    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            student_name: data?.student_name || "",
            student_mobile: data?.student_mobile || "",
            student_email: data?.student_email || "",
            date_of_birth: data?.date_of_birth || "",
            enrollment_date: data?.enrollment_date || new Date().toISOString().split('T')[0],
            emergency_contact_name: data?.emergency_contact_name || "",
            emergency_contact_number: data?.emergency_contact_number || "",
            address: data?.address || "",
            course_id: data?.course_id || "",
            batch_id: data?.batch_id || "",
            total_fees: data?.total_fees || "",
            fees_paid: data?.fees_paid || "0",
            user_name: data?.user_name || "",
            password: "",
            decode: data?.decode || "",
            notes: data?.notes || "",
            status: data?.status || "",
        },
        validationSchema,
        onSubmit: async (values) => {
            setLoading(true);
            try {
                // Create FormData for file upload
                const formData = new FormData();
                // Helper function to format date
                const formatDate = (date: any): string => {
                    if (!date) return '';

                    // If it's already in Y-m-d format, return as is
                    if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
                        return date;
                    }

                    // Handle Date objects or date strings
                    try {
                        const d = new Date(date);
                        if (isNaN(d.getTime())) return '';

                        const year = d.getFullYear();
                        const month = String(d.getMonth() + 1).padStart(2, '0');
                        const day = String(d.getDate()).padStart(2, '0');
                        return `${year}-${month}-${day}`;
                    } catch {
                        return '';
                    }
                };

                // Format dates before sending
                const formattedValues = {
                    ...values,
                    date_of_birth: formatDate(values.date_of_birth),
                    enrollment_date: formatDate(values.enrollment_date),
                };
                Object.entries(formattedValues).forEach(([key, value]) => {
                    if (value !== null && value !== undefined && value !== '') {
                        formData.append(key, value.toString());
                    }
                });

                // Append profile image if selected
                if (profileFile) {
                    formData.append('profile_image', profileFile);
                }

                const response = await api.post(`/student/update/${data?.id}`, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });

                if (response.data.status === true || response.data.status === 200) {
                    toast.success(response.data.message || 'Student updated successfully');
                    formik.resetForm();
                    setProfileFile(null);
                    onClose();
                    onSave(response.data.data);
                }
            } catch (error: any) {
                const errorMsg = error.response?.data?.message || 'Failed to update student';
                toast.error(errorMsg);
            } finally {
                setLoading(false);
            }
        },
    });

    const formatDate = (date: any) => {
        if (!date) return null;

        return new Date(date).toISOString().split('T')[0];
    };

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

        setUsernameChecking(true);
        try {
            const response = await api.post('/lead/username-check', {
                username: username,
                student_id: data?.id, // Pass student ID to exclude from check
                name: formik.values.student_name,
                mobile: formik.values.student_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);
        }
    }, [data?.id, formik.values.student_name, formik.values.student_mobile]);

    // 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]);

    // Set profile image when data changes
    useEffect(() => {
        if (data?.profile_photo) {
            setProfile(data.profile_photo);
        } else {
            setProfile(null);
        }
    }, [data]);

    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);
        checkUsername(suggestion);
    };

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

    // Helper for error display
    const showError = (field: keyof typeof formik.values): string | undefined => {
        const error = formik.touched[field] && formik.errors[field];
        return typeof error === "string" ? error : undefined;
    };

    return (
        <Modal
            open={open}
            onClose={handleClose}
            title="Update Student"
            maxWidth="max-w-3xl"
            footer={
                <>
                    <button
                        onClick={handleClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary disabled:opacity-50"
                        disabled={loading}
                        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>
                                Updating...
                            </span>
                        ) : (
                            'Update Student'
                        )}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* Student Name */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Student Name <span className='text-danger'>*</span>
                    </label>
                    <input
                        name="student_name"
                        className="form-input w-full"
                        value={formik.values.student_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter student name"
                    />
                    {showError("student_name") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.student_name as string}</p>
                    )}
                </div>

                {/* Phone */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Phone <span className='text-danger'>*</span>
                    </label>
                    <input
                        name="student_mobile"
                        className="form-input w-full"
                        value={formik.values.student_mobile}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="10 digit mobile number"
                        maxLength={10}
                    />
                    {showError("student_mobile") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.student_mobile as string}</p>
                    )}
                </div>

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

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

                {/* Emergency Contact Name */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Emergency Contact Name
                    </label>
                    <input
                        name="emergency_contact_name"
                        className="form-input w-full"
                        value={formik.values.emergency_contact_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Emergency contact person"
                    />
                </div>

                {/* Emergency Contact Number */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Emergency Contact Number
                    </label>
                    <input
                        name="emergency_contact_number"
                        className="form-input w-full"
                        value={formik.values.emergency_contact_number}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="10 digit mobile number"
                        maxLength={10}
                    />
                    {showError("emergency_contact_number") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.emergency_contact_number as string}</p>
                    )}
                </div>

                {/* Username */}
                <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"
                            className="form-input w-full pr-20"
                            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);
                                }
                            }}
                            placeholder="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>
                    {showError("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>

                {/* Password */}
                <div className='relative'>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Password <span className="text-xs text-gray-400">(leave blank to keep current)</span>
                    </label>
                    <input
                        name="password"
                        type={showPassword ? 'text' : 'password'}
                        className="form-input w-full pr-10"
                        value={formik.values.password}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter new password"
                    />
                     <p className="text-red-500 text-sm mt-1">Password: {formik.values.decode}</p>
                    <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 top-9 -translate-y-1/2 text-gray-500"
                    >
                        {showPassword ? <IconEyeOff className="w-4 h-4" /> : <IconEye className="w-4 h-4" />}
                    </button>
                    {showError("password") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.password as string}</p>
                    )}
                </div>

                {/* Address - Full Width */}
                <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Address
                    </label>
                    <textarea
                        name="address"
                        className="form-textarea w-full"
                        rows={2}
                        value={formik.values.address}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter full address"
                    />
                </div>

                {/* Course */}
                <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", ""); // Reset batch when course changes
                            formik.setFieldTouched("course_id", true);
                        }}
                        placeholder="Select course"
                        isLoading={courseOptions.length === 0 && open}
                    />
                    {showError("course_id") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.course_id as string}</p>
                    )}
                </div>

                {/* Batch */}
                <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}
                    />
                    {showError("batch_id") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.batch_id as string}</p>
                    )}
                </div>

                {/* Total Fees */}
                <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"
                            className="form-input w-full pl-8"
                            value={formik.values.total_fees}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            placeholder="Enter total fees"
                        />
                    </div>
                    {showError("total_fees") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.total_fees as string}</p>
                    )}
                </div>

                {/* Fees Paid */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Fees Paid
                    </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"
                            className="form-input w-full pl-8"
                            value={formik.values.fees_paid}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            placeholder="Enter paid amount"
                        />
                    </div>
                    {showError("fees_paid") && (
                        <p className="text-red-500 text-xs mt-1">{formik.errors.fees_paid as string}</p>
                    )}
                    <span className={`text-xs font-medium mt-1 block ${
                        remaining > 0 ? 'text-orange-600' : 'text-green-600'
                    }`}>
                        Remaining Balance: ₹{remaining.toLocaleString()}
                    </span>
                </div>

                {/* Profile Image - Full Width */}
                <div className="md:col-span-2">
                    <label className="block mb-2 text-sm font-medium text-gray-700">
                        Profile 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">
                            <img
                                src={profile || user}
                                alt="profile"
                                className="w-full h-full object-cover"
                                onError={(e) => {
                                    (e.target as HTMLImageElement).src = user;
                                }}
                            />
                        </div>
                        <div className="flex gap-2">
                            <label className="cursor-pointer px-4 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-colors">
                                Upload
                                <input
                                    type="file"
                                    className="hidden"
                                    accept="image/*"
                                    onChange={(e) => {
                                        const file = e.target.files?.[0];
                                        if (file) {
                                            setProfile(URL.createObjectURL(file));
                                            setProfileFile(file);
                                        }
                                    }}
                                />
                            </label>
                            {profile && (
                                <button
                                    type="button"
                                    className="px-4 py-2 text-sm bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
                                    onClick={() => {
                                        setProfile(null);
                                        setProfileFile(null);
                                    }}
                                >
                                    Remove
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            </form>
        </Modal>
    );
};

export default EditStudent;