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

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

const EditKPI = ({ open, onClose, onSave, kpiData }: Props) => {
    const [loading, setLoading] = useState(false);

    const validationSchema = Yup.object({
        kpi_title: Yup.string()
            .required('Title is required')
            .min(3, 'Minimum 3 characters'),

        // Target section
        target_target: Yup.string()
            .required('Target is required'),
        target_weightage: Yup.number()
            .typeError('Weightage must be a number')
            .required('Weightage is required')
            .min(1, 'Minimum 1%')
            .max(100, 'Maximum 100%'),
        target_score: Yup.number()
            .typeError('Score must be a number')
            .min(0)
            .max(100),

        // Achieved section
        achieved_current: Yup.string(),
        achieved_weightage: Yup.number()
            .typeError('Weightage must be a number')
            .min(1, 'Minimum 1%')
            .max(100, 'Maximum 100%'),
        achieved_score: Yup.number()
            .typeError('Score must be a number')
            .min(0)
            .max(100),
    });

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            kpi_title: kpiData?.metric_name || '',

            // Target (Planned) values
            target_target: kpiData?.target || '',
            target_weightage: kpiData?.weightage || '',
            target_score: kpiData?.score || '',

            // Actual (Achieved) values
            achieved_current: kpiData?.actual_current || '',
            achieved_score: kpiData?.actual_score || '',
            achieved_weightage: kpiData?.actual_weightage || kpiData?.weightage || '',
        },
        validationSchema,
        onSubmit: async (values) => {
            setLoading(true);
            try {
                const payload = {
                    metric_name: values.kpi_title,
                    target: values.target_target,
                    weightage: Number(values.target_weightage),
                    score: values.target_score ? Number(values.target_score) : null,
                    actual_current: values.achieved_current || '',
                    actual_score: values.achieved_score ? Number(values.achieved_score) : null,
                    actual_weightage: values.achieved_weightage ? Number(values.achieved_weightage) : null,
                };

                const response = await api.put(`/staff/kpi_update/${kpiData?.id}`, payload);

                if (response.data.status) {
                    toast.success('KPI updated successfully');
                    onSave(response.data.data);
                    onClose();
                }
            } catch (error: any) {
                console.error('Failed to update KPI:', error);
                toast.error(error.response?.data?.message || 'Failed to update KPI');
            } finally {
                setLoading(false);
            }
        },
    });

    const getError = (error: any) => {
        return typeof error === 'string' ? error : '';
    };

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Update KPI"
            maxWidth="max-w-2xl"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={loading}
                    >
                        {loading ? 'Updating...' : 'Update KPI'}
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                {/* KPI Title */}
                <div className="col-span-12">
                    <label className="block mb-1 font-medium">
                        KPI Title <span className="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        className="form-input w-full"
                        {...formik.getFieldProps('kpi_title')}
                        disabled={loading}
                    />
                    {formik.touched.kpi_title && getError(formik.errors.kpi_title) && (
                        <p className="text-red-500 text-sm mt-1">
                            {getError(formik.errors.kpi_title)}
                        </p>
                    )}
                </div>

                {/* KPI TARGET Section */}
                <div className="col-span-6">
                    <h3 className="block font-medium text-primary mb-3 border-b pb-2">
                         KPI Target (Planned)
                    </h3>

                    <div className="space-y-4">
                        <div>
                            <label className="block mb-1 font-medium">
                                Target <span className="text-red-500">*</span>
                            </label>
                            <input
                                type="text"
                                className="form-input w-full"
                                placeholder="Enter target (e.g., 100, 50%, ₹10L)"
                                {...formik.getFieldProps('target_target')}
                                disabled={loading}
                            />
                            {formik.touched.target_target && getError(formik.errors.target_target) && (
                                <p className="text-red-500 text-sm mt-1">
                                    {getError(formik.errors.target_target)}
                                </p>
                            )}
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">
                                Weightage (%) <span className="text-red-500">*</span>
                            </label>
                            <input
                                type="number"
                                className="form-input w-full"
                                placeholder="Enter weightage (1-100)"
                                {...formik.getFieldProps('target_weightage')}
                                disabled={loading}
                                min="1"
                                max="100"
                            />
                            {formik.touched.target_weightage && getError(formik.errors.target_weightage) && (
                                <p className="text-red-500 text-sm mt-1">
                                    {getError(formik.errors.target_weightage)}
                                </p>
                            )}
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">
                                Score (%)
                            </label>
                            <input
                                type="number"
                                className="form-input w-full"
                                placeholder="Enter target score (0-100)"
                                {...formik.getFieldProps('target_score')}
                                disabled={loading}
                                min="0"
                                max="100"
                            />
                        </div>
                    </div>
                </div>

                {/* ACHIEVED Section */}
                <div className="col-span-6">
                    <h3 className="block font-medium text-success mb-3 border-b pb-2">
                         Achieved (Actual)
                    </h3>

                    <div className="space-y-4">
                        <div>
                            <label className="block mb-1 font-medium">
                                Current Value
                            </label>
                            <input
                                type="text"
                                className="form-input w-full"
                                placeholder="Enter achieved current value"
                                {...formik.getFieldProps('achieved_current')}
                                disabled={loading}
                            />
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">
                                Weightage (%)
                            </label>
                            <input
                                type="number"
                                className="form-input w-full"
                                placeholder="Enter achieved weightage (1-100)"
                                {...formik.getFieldProps('achieved_weightage')}
                                disabled={loading}
                                min="1"
                                max="100"
                            />
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">
                                Score (%)
                            </label>
                            <input
                                type="number"
                                className="form-input w-full"
                                placeholder="Enter achieved score (0-100)"
                                {...formik.getFieldProps('achieved_score')}
                                disabled={loading}
                                min="0"
                                max="100"
                            />
                        </div>
                    </div>
                </div>
            </form>
        </Modal>
    );
};

export default EditKPI;