import { useFormik } from 'formik';
import * as Yup from 'yup';
import Modal from '../../components/Modals';
import api from '../../api/axios';
import { toast } from 'react-toastify';
import { useState } from 'react';

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: { role: string; description: string }) => void;
}

const AddRole = ({ open, onClose, onSave }: Props) => {
    const [isSubmitting, setIsSubmitting] = useState(false);

    // Yup validation schema
    const validationSchema = Yup.object({
        role: Yup.string()
            .required('Role is required')
            .min(3, 'Minimum 3 characters')
            .max(255, 'Maximum 255 characters'),
        description: Yup.string()
            .max(500, 'Maximum 500 characters'),
    });

    // Formik
    const formik = useFormik({
        initialValues: {
            role: '',
            description: '',
        },
        validationSchema,
        onSubmit: async (values, { resetForm }) => {
            setIsSubmitting(true);
            try {
                const response = await api.post('/roles/add', {
                    role: values.role,
                    description: values.description
                });

                if (response.data.status) {
                    toast.success(response.data.message || 'Role created successfully');
                    onSave(values);
                    resetForm();
                    onClose();
                }
            } catch (err: any) {
                const response = err?.response?.data;
                if (response?.errors) {
                    Object.values(response.errors).forEach((fieldErrors: any) => {
                        fieldErrors.forEach((msg: string) => toast.error(msg));
                    });
                } else {
                    toast.error(response?.message || 'Failed to create role');
                }
            } finally {
                setIsSubmitting(false);
            }
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Create Role"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={isSubmitting}
                    >
                        Cancel
                    </button>

                    <button
                        onClick={formik.handleSubmit as any}
                        className="btn btn-primary"
                        type="button"
                        disabled={isSubmitting}
                    >
                        {isSubmitting ? 'Saving...' : 'Save'}
                    </button>
                </>
            }
        >
            <form className="space-y-4" onSubmit={formik.handleSubmit}>
                {/* Role */}
                <div>
                    <label className="block mb-1 font-medium">
                        Role<span className='text-danger'>*</span>
                    </label>
                    <input
                        name="role"
                        type="text"
                        className="form-input w-full"
                        placeholder="Enter role name"
                        value={formik.values.role}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        disabled={isSubmitting}
                    />
                    {formik.touched.role && formik.errors.role && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.role}
                        </p>
                    )}
                </div>

                {/* Description */}
                <div>
                    <label className="block mb-1 font-medium">Description</label>
                    <textarea
                        name="description"
                        className="form-textarea w-full"
                        rows={3}
                        placeholder="Enter role description (optional)"
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        disabled={isSubmitting}
                    />
                    {formik.touched.description && formik.errors.description && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.description}
                        </p>
                    )}
                </div>
            </form>
        </Modal>
    );
};

export default AddRole;