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?: number;
}

interface FormValues {
    materials: string[];
    items: string[];
}

interface MaterialKit {
    id: number;
    name: string;
    description?: string;
}

interface MaterialStock {
    id: number;
    name: string;
    stock_count: number;
    code?: string;
}

const AssignMaterial = ({ open, onClose, onSave, studentId }: Props) => {
    const [materialOptions, setMaterialOptions] = useState<{ value: string; label: string }[]>([]);
    const [itemsOptions, setItemsOptions] = useState<{ value: string; label: string; quantity: number }[]>([]);
    const [loading, setLoading] = useState(false);
    const [submitting, setSubmitting] = useState(false);

    const validationSchema = Yup.object({
        materials: Yup.array()
            .min(0, "Select at least one material kit")
            .nullable(),
        items: Yup.array()
            .min(0, "Select at least one item")
            .nullable(),
    }).test('at-least-one', 'Please select at least one material or item', function(values) {
        const materials = values.materials || [];
        const items = values.items || [];
        return materials.length > 0 || items.length > 0;
    });

    // Fetch Material Kits
    useEffect(() => {
        const fetchMaterialKits = async () => {
            if (!open) return;

            try {
                setLoading(true);
                const response = await api.get('/student/material_kits/lists');
                if (response.data.status === true || response.data.status === 200) {
                    const materialKits = response.data.data?.data || response.data.data || [];
                    const options = materialKits.map((kit: MaterialKit) => ({
                        value: String(kit.id),
                        label: kit.name
                    }));
                    setMaterialOptions(options);
                }
            } catch (error) {
                console.error('Error fetching material kits:', error);
                toast.error('Failed to load material kits');
            } finally {
                setLoading(false);
            }
        };

        fetchMaterialKits();
    }, [open]);

    // Fetch Material Stock Items
    useEffect(() => {
        const fetchMaterialStock = async () => {
            if (!open) return;

            try {
                setLoading(true);
                const response = await api.get('/student/material_stock/lists');
                if (response.data.status === true || response.data.status === 200) {
                    const stockItems = response.data.data?.data || response.data.data || [];
                    const options = stockItems
                        .filter((item: MaterialStock) => item.stock_count > 0) // Only show items with stock
                        .map((item: MaterialStock) => ({
                            value: String(item.id),
                            label: `${item.name} ${item.code ? `(${item.code})` : ''} - Stock: ${item.stock_count}`,
                            quantity: item.stock_count
                        }));
                    setItemsOptions(options);
                }
            } catch (error) {
                console.error('Error fetching material stock:', error);
                toast.error('Failed to load material items');
            } finally {
                setLoading(false);
            }
        };

        fetchMaterialStock();
    }, [open]);

    const formik = useFormik<FormValues>({
        initialValues: {
            materials: [],
            items: [],
        },
        validationSchema,
        onSubmit: async (values) => {
            if (!studentId) {
                toast.error('Student ID is missing');
                return;
            }

            // Check if at least one item is selected
            if (values.materials.length === 0 && values.items.length === 0) {
                toast.error('Please select at least one material kit or item');
                return;
            }

            setSubmitting(true);
            try {
                const response = await api.post(`/student/${studentId}/assign-material`, {
                    materials: values.materials,
                    items: values.items
                });

                if (response.data.status === true || response.status === 200) {
                    toast.success(response.data.message || 'Materials assigned successfully');
                    onSave(response.data.data);
                    onClose();
                    formik.resetForm();
                } else {
                    toast.error(response.data.message || 'Failed to assign materials');
                }
            } catch (error: any) {
                console.error('Error assigning materials:', 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 assign materials');
                }
            } finally {
                setSubmitting(false);
            }
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Assign Material to Student"
            maxWidth="max-w-lg"
            footer={
                <div className="flex justify-end gap-3">
                    <button
                        type="button"
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        disabled={submitting}
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary border border-transparent rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                        disabled={submitting}
                    >
                        {submitting ? 'Assigning...' : 'Assign Material'}
                    </button>
                </div>
            }
        >
            <form className="space-y-4">
                {loading && (
                    <div className="text-center py-4">
                        <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                        <p className="text-sm text-gray-500 mt-2">Loading materials...</p>
                    </div>
                )}

                {!loading && (
                    <>
                        {/* Material Kits Section */}
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                                Material Kits
                                <span className='text-danger'>*</span>
                            </label>
                            <Select
                                options={materialOptions}
                                isMulti
                                placeholder="Select material kits..."
                                value={materialOptions.filter(opt =>
                                    formik.values.materials.includes(opt.value)
                                )}
                                onChange={(selected: any) => {
                                    const values = selected ? selected.map((item: any) => item.value) : [];
                                    formik.setFieldValue("materials", values);
                                    formik.setFieldTouched("materials", true);
                                }}
                                isDisabled={submitting}
                            />
                            {formik.touched.materials && formik.errors.materials && (
                                <p className="mt-1 text-sm text-red-600">{formik.errors.materials}</p>
                            )}

                        </div>

                        {/* Material Items Section */}
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                                Material Items
                                <span className='text-danger'>*</span>
                            </label>
                            <Select
                                options={itemsOptions}
                                isMulti
                                placeholder="Select material items..."
                                value={itemsOptions.filter(opt =>
                                    formik.values.items.includes(opt.value)
                                )}
                                onChange={(selected: any) => {
                                    const values = selected ? selected.map((item: any) => item.value) : [];
                                    formik.setFieldValue("items", values);
                                    formik.setFieldTouched("items", true);
                                }}
                                isDisabled={submitting}
                            />
                            {formik.touched.items && formik.errors.items && (
                                <p className="mt-1 text-sm text-red-600">{formik.errors.items}</p>
                            )}

                        </div>

                        {/* Summary Section */}
                        {(formik.values.materials.length > 0 || formik.values.items.length > 0) && (
                            <div className="mt-4 p-3 bg-gray-50 rounded-md">
                                <h4 className="text-sm font-medium text-gray-700 mb-2">Summary</h4>
                                {formik.values.materials.length > 0 && (
                                    <p className="text-sm text-gray-600">
                                        Material Kits: {formik.values.materials.length} selected
                                    </p>
                                )}
                                {formik.values.items.length > 0 && (
                                    <p className="text-sm text-gray-600">
                                        Material Items: {formik.values.items.length} selected
                                    </p>
                                )}
                            </div>
                        )}
                    </>
                )}
            </form>
        </Modal>
    );
};

export default AssignMaterial;