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 api from '../../api/axios';
import { toast } from 'react-toastify';

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

interface FormValues {
    studentId: string;
    amount: string;
    paymentMethod: string;
    transactionRef: string;
    remarks: string;
    paymentDate: string;
}

interface StudentOption {
    id: number;
    name: string;
    std_id: string;
    total_overdue: number;
    overdue_count: number;
}

interface PaymentMode {
    id: number;
    name: string;
    code: string;
}

const CollectFee = ({ open, onClose, onSave, studentId, studentName }: Props) => {
    const [studentOptions, setStudentOptions] = useState<{ value: string; label: string; overdue: number }[]>([]);
    const [modeOptions, setModeOptions] = useState<{ value: string; label: string }[]>([]);
    const [loading, setLoading] = useState(false);
    const [selectedStudentDetails, setSelectedStudentDetails] = useState<any>(null);
    const [feeDetails, setFeeDetails] = useState<any>(null);

    // Fetch payment modes
    useEffect(() => {
        const fetchPaymentModes = async () => {
            if (!open) return;

            try {
                const response = await api.get('/accounts/payment-mode');
                if (response.data.status === true || response.data.status === 200) {
                    const modes = response.data.data || [];
                    const options = modes.map((mode: PaymentMode) => ({
                        value: String(mode.id),
                        label: mode.name
                    }));
                    setModeOptions(options);
                }
            } catch (error) {
                console.error('Error fetching payment modes:', error);
                // Fallback default options
                setModeOptions([
                    { value: "cash", label: "Cash" },
                    { value: "online", label: "Online Transfer" },
                    { value: "card", label: "Card" },
                    { value: "cheque", label: "Cheque" },
                ]);
            }
        };

        fetchPaymentModes();
    }, [open]);

    // Fetch students with overdue payments
    useEffect(() => {
        const fetchStudents = async () => {
            if (!open || studentId) return;

            try {
                setLoading(true);
                const response = await api.get('/accounts/pending-list');
                if (response.data.status === true) {
                    const students = response.data.data || [];
                    const options = students.map((student: StudentOption) => ({
                        value: String(student.id),
                        label: `${student.name} (${student.std_id}) - Overdue: ₹${student.total_overdue}`,
                        overdue: student.total_overdue
                    }));
                    setStudentOptions(options);
                }
            } catch (error) {
                console.error('Error fetching students:', error);
                toast.error('Failed to load students');
            } finally {
                setLoading(false);
            }
        };

        fetchStudents();
    }, [open, studentId]);

    // Fetch fee details when student is selected
    const fetchFeeDetails = async (id: string) => {
        try {
            const response = await api.get(`/accounts/${id}/fee-details`);
            if (response.data.status === true) {
                setFeeDetails(response.data.data);
                return response.data.data;
            }
        } catch (error) {
            console.error('Error fetching fee details:', error);
            toast.error('Failed to load fee details');
        }
        return null;
    };

    const validationSchema = Yup.object({
        studentId: Yup.string().required("Student is required"),
        amount: Yup.number()
            .typeError("Amount must be a number")
            .required("Amount is required")
            .positive("Amount must be positive")
            .test('max-amount', 'Amount exceeds total overdue', function(value) {
                if (feeDetails && feeDetails.total_overdue) {
                    return value <= feeDetails.total_overdue;
                }
                return true;
            }),
        paymentMethod: Yup.string().required("Payment method is required"),
        transactionRef: Yup.string(),
        remarks: Yup.string(),
        paymentDate: Yup.string(),
    });

    const formik = useFormik<FormValues>({
        initialValues: {
            studentId: studentId || "",
            amount: "",
            paymentMethod: "1",
            transactionRef: "",
            remarks: "",
            paymentDate: new Date().toISOString().split('T')[0],
        },
        validationSchema,
        onSubmit: async (values) => {
            try {
                setLoading(true);
                const response = await api.post('/accounts/collect-payment', {
                    student_id: values.studentId,
                    pay_amount: parseFloat(values.amount),
                    payment_mode: Number(values.paymentMethod),
                    transaction_id: values.transactionRef,
                    remarks: values.remarks,
                    payment_date: values.paymentDate,
                });

                if (response.data.status === true) {
                    toast.success(response.data.message || 'Payment collected successfully');
                    onSave(response.data.data);
                    onClose();
                    formik.resetForm();
                } else {
                    toast.error(response.data.message || 'Failed to process payment');
                }
            } catch (error: any) {
                console.error('Error processing payment:', error);
                if (error.response?.data?.errors) {
                    const errors = error.response.data.errors;
                    Object.keys(errors).forEach(key => {
                        toast.error(errors[key][0]);
                    });
                } else {
                    toast.error(error.response?.data?.message || 'Failed to process payment');
                }
            } finally {
                setLoading(false);
            }
        },
    });

    // Handle student selection change
    const handleStudentChange = async (studentId: string) => {
        formik.setFieldValue("studentId", studentId);
        if (studentId) {
            const details = await fetchFeeDetails(studentId);
            if (details) {
                setSelectedStudentDetails(details.student);
                // Set default amount to total overdue (non-editable amount)
                if (details.total_overdue > 0) {
                    formik.setFieldValue("amount", details.total_overdue.toString());
                }
            }
        } else {
            setSelectedStudentDetails(null);
            setFeeDetails(null);
            formik.setFieldValue("amount", "");
        }
    };

    // When studentId prop is provided, fetch details on mount
    useEffect(() => {
        if (studentId && open) {
            formik.setFieldValue("studentId", studentId);
            handleStudentChange(studentId);
        }
    }, [studentId, open]);

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Collect Fee"
            maxWidth="max-w-lg"
            footer={
                <div className="flex justify-end gap-3">
                    <button
                        type="button"
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        disabled={loading}
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary rounded-md hover:bg-blue-700 disabled:opacity-50"
                        disabled={loading}
                    >
                        {loading ? 'Processing...' : 'Collect Fee'}
                    </button>
                </div>
            }
        >
            <form className="space-y-4">
                {/* Student Selection */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Student <span className="text-red-500">*</span>
                    </label>
                    {studentId ? (
                        <div className="p-2 bg-gray-50 rounded-md">
                            <p className="font-semibold">{studentName}</p>
                            {feeDetails && (
                                <p className="text-sm text-red-600 mt-1">
                                    Overdue Amount: ₹{feeDetails.total_overdue?.toLocaleString()}
                                </p>
                            )}
                        </div>
                    ) : (
                        <Select
                            options={studentOptions}
                            placeholder="Select student..."
                            value={studentOptions.find(opt => opt.value === formik.values.studentId)}
                            onChange={(val: any) => handleStudentChange(val?.value || "")}
                            isDisabled={loading}
                        />
                    )}
                    {formik.touched.studentId && formik.errors.studentId && (
                        <p className="mt-1 text-sm text-red-600">{formik.errors.studentId}</p>
                    )}
                </div>

                {/* Amount - READ ONLY */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Payment Amount <span className="text-red-500">*</span>
                    </label>
                    <div className="relative">
                        <span className="absolute left-3 top-2 text-gray-500">₹</span>
                        <input
                            type="number"
                            className="form-input pl-7 bg-gray-100 cursor-not-allowed"
                            placeholder="Enter amount"
                            value={formik.values.amount}
                            readOnly  // Make amount read-only
                            disabled={loading}
                        />
                    </div>
                    {feeDetails && feeDetails.total_overdue > 0 && (
                        <p className="mt-1 text-xs text-gray-500">
                            Amount is fixed to total overdue: ₹{feeDetails.total_overdue.toLocaleString()}
                        </p>
                    )}
                    {formik.touched.amount && formik.errors.amount && (
                        <p className="mt-1 text-sm text-red-600">{formik.errors.amount}</p>
                    )}
                </div>

                {/* Payment Method */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Payment Mode <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={modeOptions}
                        value={modeOptions.find(opt => opt.value === formik.values.paymentMethod) || null}
                        onChange={(val: any) =>
                            formik.setFieldValue("paymentMethod", val?.value || "")
                        }
                        isDisabled={loading}
                    />
                    {formik.touched.paymentMethod && formik.errors.paymentMethod && (
                        <p className="mt-1 text-sm text-red-600">{formik.errors.paymentMethod}</p>
                    )}
                </div>

                {/* Transaction Reference */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Transaction ID / Reference No
                    </label>
                    <input
                        type="text"
                        className="form-input"
                        placeholder="Enter reference number"
                        value={formik.values.transactionRef}
                        onChange={(e) => formik.setFieldValue("transactionRef", e.target.value)}
                        disabled={loading}
                    />
                </div>

                {/* Remarks */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Remarks
                    </label>
                    <textarea
                        className="form-textarea"
                        rows={3}
                        placeholder="Optional notes..."
                        value={formik.values.remarks}
                        onChange={(e) => formik.setFieldValue("remarks", e.target.value)}
                        disabled={loading}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default CollectFee;