import { useFormik } from "formik";
import * as Yup from "yup";
import { useEffect, useState } from "react";
import Modal from "../../../components/Modals";
import ColorPicker from "../../../components/ColorPicker";

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

const EditLeadStatus = ({ open, onClose, onSave, data }: Props) => {
    const validationSchema = Yup.object({
        name: Yup.string()
            .required("Status name is required")
            .min(2, "Name must be at least 2 characters")
            .max(50, "Name must be less than 50 characters"),
        bg_color: Yup.string(),
        text_color: Yup.string(),
        description: Yup.string().max(500, "Description too long"),
    });

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            id: data?.id || "",
            name: data?.name || "",
            bg_color: data?.bg_color || "#E5E7EB",
            text_color: data?.text_color || "#000000",
            description: data?.description || "",
        },
        validationSchema,
        onSubmit: async (values, { resetForm }) => {
            const success = await onSave(values, true);
            if (success) {
                resetForm();
                onClose();
            }
        },
    });

    return (
        <Modal
            open={open}
            onClose={() => {
                formik.resetForm();
                onClose();
            }}
            title="Update Lead Status"
            maxWidth="max-w-lg"
            footer={
                <>
                    <button
                        onClick={() => {
                            formik.resetForm();
                            onClose();
                        }}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={formik.isSubmitting}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={formik.isSubmitting}
                    >
                        {formik.isSubmitting ? 'Updating...' : 'Update Lead Status'}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-12">
                    <label className="block text-sm font-medium mb-1">
                        Status Name <span className="text-red-500">*</span>
                    </label>
                    <input
                        name="name"
                        className={`form-input w-full ${formik.errors.name && formik.touched.name ? 'border-red-500' : ''}`}
                        value={formik.values.name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter status name"
                        disabled={formik.isSubmitting}
                    />
                    {formik.touched.name && formik.errors.name && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.name as string}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">Background Color</label>
                    <ColorPicker
                        value={formik.values.bg_color}
                        onChange={(val) => formik.setFieldValue("bg_color", val)}
                    />
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">Text Color</label>
                    <ColorPicker
                        value={formik.values.text_color}
                        onChange={(val) => formik.setFieldValue("text_color", val)}
                    />
                </div>

                <div className="col-span-12">
                    <label className="block text-sm font-medium 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="Enter description (optional)"
                        disabled={formik.isSubmitting}
                    />
                </div>

                {/* Preview Section */}
                <div className="col-span-12 mt-2 p-4 bg-gray-50 rounded-lg">
                    <p className="text-sm font-medium mb-2">Preview:</p>
                    <span
                        className="inline-block px-4 py-2 rounded-full text-sm font-semibold"
                        style={{
                            backgroundColor: formik.values.bg_color || '#E5E7EB',
                            color: formik.values.text_color || '#000000'
                        }}
                    >
                        {formik.values.name || 'Status Preview'}
                    </span>
                </div>
            </form>
        </Modal>
    );
};

export default EditLeadStatus;