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';

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

const AddAssets = ({ open, onClose, onSave, initialData, isEdit }: Props) => {
    const [roomOptions, setRoomOptions] = useState<{ value: string; label: string }[]>([]);
    const [loading, setLoading] = useState(false);

    // Validation
    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().optional(),
        description: Yup.string().optional(),
    });

    // Formik
    const formik = useFormik({
        initialValues: {
            asset_name: initialData?.asset_name || "",
            category: initialData?.category || "",
            warranty: initialData?.warranty || "",
            room_id: initialData?.room_id || "",
            purchase_date: initialData?.purchase_date || "",
            description: initialData?.description || ""
        },
        validationSchema,
        enableReinitialize: true,
        onSubmit: (values) => {
            const submitData = {
                asset_name: values.asset_name,
                category: values.category,
                warranty: values.warranty,
                room_id: values.room_id,
                purchase_date: values.purchase_date,
                description: values.description
            };
            onSave(submitData);
            onClose();
            if (!isEdit) {
                formik.resetForm();
            }
        },
    });

    useEffect(() => {
        if (!open && !isEdit) {
            formik.resetForm();
        }
    }, [open]);

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

    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" },
    ];

    return (
        <Modal
            open={open}
            onClose={onClose}
            title={isEdit ? "Edit Asset" : "Add 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"
                    >
                        {isEdit ? "Update Asset" : "Add 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 AddAssets;