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

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

const EditAssets = ({ open, onClose, onSave, data, id }: Props) => {
    const [roomOptions, setRoomOptions] = useState<{ value: string; label: string }[]>([]);
    const [loading, setLoading] = useState(false);
    const [initialLoading, setInitialLoading] = useState(true);
    const [assetData, setAssetData] = useState<any>(null);

    // Category options
    const CategoryOption = [
        { value: "Computer", label: "Computer" },
        { value: "Project", label: "Project" },
        { value: "Furniture", label: "Furniture" },
        { value: "Lab Equipment", label: "Lab Equipment" },
        { value: "Machinery", label: "Machinery" },
        { value: "Equipment", label: "Equipment" },
        { value: "Training Tools", label: "Training Tools" },
    ];

    // Fetch asset data if not provided
    useEffect(() => {
        const fetchAssetData = async () => {
            if (open && id && !data) {
                setInitialLoading(true);
                try {
                    const response = await api.get(`/inventory/assets/view/${id}`);
                    if (response.data.status === 200) {
                        setAssetData(response.data.data);
                    }
                } catch (error) {
                    console.error("Error fetching asset data:", error);
                    toast.error("Failed to fetch asset data");
                } finally {
                    setInitialLoading(false);
                }
            } else if (data) {
                setAssetData(data);
                setInitialLoading(false);
            }
        };

        fetchAssetData();
    }, [open, id, data]);

    // Fetch rooms for dropdown
    useEffect(() => {
        const fetchRooms = async () => {
            setLoading(true);
            try {
                const response = await api.get('/assets/rooms/list');
                if (response.data.status === true) {
                    const rooms = response.data.data.map((room: any) => ({
                        value: room.id?.toString() || room.value?.toString(),
                        label: room.name || room.label || room.room_name
                    }));
                    setRoomOptions(rooms);
                }
            } catch (error) {
                console.error('Error fetching rooms:', error);
            } finally {
                setLoading(false);
            }
        };

        if (open) {
            fetchRooms();
        }
    }, [open]);

    // Validation schema
    const validationSchema = Yup.object({
        asset_name: Yup.string().required("Asset Name is required"),
        category: Yup.string().required("Category is required"),
        room_id: Yup.string().required("Room is required"),
        purchase_date: Yup.string().required("Purchase Date is required"),
        warranty: Yup.string().nullable(),
        description: Yup.string().nullable(),
    });

    // Formik
    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            asset_name: assetData?.asset_name || data?.asset_name || "",
            category: assetData?.category || data?.category || "",
            room_id: assetData?.room_id || data?.room_id || data?.room || "",
            purchase_date: assetData?.purchase_date || data?.purchase_date || data?.date || "",
            warranty: assetData?.warranty || data?.warranty || "",
            description: assetData?.description || data?.description || ""
        },
        validationSchema,
        onSubmit: async (values) => {
            try {
                const submitData = {
                    asset_name: values.asset_name,
                    category: values.category,
                    room_id: values.room_id,
                    purchase_date: values.purchase_date,
                    warranty: values.warranty || null,
                    description: values.description || null
                };

                // Call the update API
                const response = await api.put(`/assets/update/${id}`, submitData);

                if (response.data.status === 200) {
                    toast.success("Asset updated successfully");
                    onSave(response.data.data);
                    onClose();
                    formik.resetForm();
                }
            } catch (error: any) {
                console.error("Error updating asset:", error);
                toast.error(error.response?.data?.message || "Failed to update asset");
            }
        },
    });

    if (!open) return null;

    if (initialLoading) {
        return (
            <Modal open={open} onClose={onClose} title="Edit Asset" maxWidth="max-w-2xl">
                <div className="flex justify-center items-center py-12">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                </div>
            </Modal>
        );
    }

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Edit Asset"
            maxWidth="max-w-2xl"
            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}
                    >
                        {formik.isSubmitting ? "Updating..." : "Update Asset"}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Asset Name <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="asset_name"
                        className="form-input w-full"
                        value={formik.values.asset_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.asset_name && formik.errors.asset_name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.asset_name as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Category <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={CategoryOption}
                        value={CategoryOption.find(o => o.value === formik.values.category)}
                        onChange={(val: any) => {
                            formik.setFieldValue("category", val?.value || "");
                            formik.setFieldTouched("category", true);
                        }}
                    />
                    {formik.touched.category && formik.errors.category && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.category as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Room <span className="text-red-500">*</span>
                    </label>
                    <Select
                        options={roomOptions}
                        isLoading={loading}
                        placeholder="Select Room"
                        value={roomOptions.find(o => o.value === formik.values.room_id)}
                        onChange={(val: any) => {
                            formik.setFieldValue("room_id", val?.value || "");
                            formik.setFieldTouched("room_id", true);
                        }}
                    />
                    {formik.touched.room_id && formik.errors.room_id && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.room_id as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Purchase Date <span className="text-red-500">*</span>
                    </label>
                    <Datepicker
                        value={formik.values.purchase_date || undefined}
                        onChange={(val) => {
                            formik.setFieldValue("purchase_date", val);
                            formik.setFieldTouched("purchase_date", true);
                        }}
                        placeholder="Select purchase date"
                    />
                    {formik.touched.purchase_date && formik.errors.purchase_date && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.purchase_date as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Warranty (In Years)
                    </label>
                    <input
                        name="warranty"
                        type="number"
                        step="0.5"
                        className="form-input w-full"
                        value={formik.values.warranty}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="e.g., 2 or 1.5"
                    />
                </div>

                <div className="col-span-12">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Description
                    </label>
                    <textarea
                        name="description"
                        rows={3}
                        className="form-textarea w-full"
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Optional description..."
                    />
                </div>
            </form>
        </Modal>
    );
};

export default EditAssets;