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: any) => void;
}

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

    const validationSchema = Yup.object({
        branch_name: Yup.string()
            .required("Branch name is required")
            .min(3, "Minimum 3 characters"),
        mobile: Yup.string()
            .required("Contact number is required")
            .matches(/^[0-9]{10}$/, "Mobile number must be 10 digits"),
        branch_head: Yup.string()
            .required("Branch head is required"),
        gst_no: Yup.string()
            .required("GST number is required")
            .matches(
                /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/,
                "Enter a valid GST number"
            ),
        email: Yup.string().email("Enter a valid email"),
        address: Yup.string().max(500, "Maximum 500 characters"),
    });

    const formik = useFormik({
        initialValues: {
            branch_name: "",
            mobile: "",
            branch_head: "",
            gst_no: "",
            email: "",
            address: "",
        },
        validationSchema,
        onSubmit: async (values, { resetForm }) => {
            setIsSubmitting(true);
            try {
                const response = await api.post('/branches/add', {
                    branch_name: values.branch_name,
                    mobile: values.mobile,
                    branch_head: values.branch_head,
                    gst_no: values.gst_no,
                    email: values.email,
                    address: values.address,
                });

                if (response.data.status) {
                    toast.success(response.data.message || 'Branch created successfully');
                    onSave(response.data.data);
                     formik.resetForm();
                    onClose();
                }
            } catch (error: any) {
                const response = error?.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 branch');
                }
            } finally {
                setIsSubmitting(false);
            }
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Create Branch"
            maxWidth="max-w-2xl"
            footer={
                <>
                    <button
                        onClick={() => {
                            formik.resetForm();
                            onClose();
                        }}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={isSubmitting}
                    >
                        Cancel
                    </button>

                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={isSubmitting}
                    >
                        {isSubmitting ? 'Creating...' : 'Create Branch'}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label>Branch Name <span className="text-red-500">*</span></label>
                    <input
                        name="branch_name"
                        className="form-input w-full"
                        value={formik.values.branch_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.branch_name && formik.errors.branch_name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.branch_name}</p>
                    )}
                </div>
                <div>
                    <label>GST Number <span className="text-red-500">*</span></label>
                    <input
                        name="gst_no"
                        className="form-input w-full"
                        value={formik.values.gst_no}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.gst_no && formik.errors.gst_no && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.gst_no}</p>
                    )}
                </div>
                <div>
                    <label>Branch Head <span className="text-red-500">*</span></label>
                    <input
                        name="branch_head"
                        className="form-input w-full"
                        value={formik.values.branch_head}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.branch_head && formik.errors.branch_head && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.branch_head}</p>
                    )}
                </div>
                <div>
                    <label>Contact Number <span className="text-red-500">*</span></label>
                    <input
                        name="mobile"
                        className="form-input w-full"
                        value={formik.values.mobile}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.mobile && formik.errors.mobile && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.mobile}</p>
                    )}
                </div>
                <div>
                    <label>Email</label>
                    <input
                        name="email"
                        className="form-input w-full"
                        value={formik.values.email}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.email && formik.errors.email && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.email}</p>
                    )}
                </div>
                <div className="md:col-span-2">
                    <label>Address</label>
                    <textarea
                        name="address"
                        rows={2}
                        className="form-textarea w-full"
                        value={formik.values.address}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddBranch;