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

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    staffId?: number;
    kraList?: any[];
}

const AddSingleKPI = ({ open, onClose, onSave, staffId, kraList }: Props) => {
    const [loading, setLoading] = useState(false);
    const [selectedKraMonth, setSelectedKraMonth] = useState<string>('');

    const validationSchema = Yup.object({
        kra_id: Yup.number().required('Please select a KRA'),
        metric_name: Yup.string().required('Metric name is required').min(3, 'Minimum 3 characters'),
        target: Yup.string().required('Target is required'),
        current: Yup.string(),
        weightage: Yup.number()
            .typeError('Weightage must be a number')
            .required('Weightage is required')
            .min(1, 'Minimum 1%')
            .max(100, 'Maximum 100%'),
        score: Yup.number()
            .typeError('Score must be a number')
            .min(0, 'Minimum 0')
            .max(100, 'Maximum 100'),
    });

    const formik = useFormik({
        initialValues: {
            kra_id: kraList && kraList.length > 0 ? kraList[0].id : '',
            metric_name: '',
            target: '',
            current: '',
            weightage: '',
            score: '',
        },
        validationSchema,
        onSubmit: async (values) => {
            if (!staffId) {
                toast.error('Staff ID is missing');
                return;
            }

            if (!values.kra_id) {
                toast.error('Please select a KRA');
                return;
            }

            setLoading(true);
            try {
                // Find the selected KRA to get its month
                const selectedKra = kraList?.find(k => k.id === Number(values.kra_id));

                const payload = {
                    kra_id: Number(values.kra_id),
                    metric_name: values.metric_name,
                    target: values.target,
                    current: values.current || '0',
                    score: values.score ? Number(values.score) : null,
                    weightage: Number(values.weightage),
                    month_year: selectedKra?.month_year || null, // Use KRA's month
                };

                const response = await api.post(`/staff/kpi/${staffId}`, payload);

                if (response.data.status) {
                    toast.success('KPI added successfully');
                    onSave(response.data.data);
                    formik.resetForm();
                    if (kraList && kraList.length > 0) {
                        formik.setFieldValue('kra_id', kraList[0].id);
                    }
                    onClose();
                }
            } catch (error: any) {
                console.error('Failed to add KPI:', error);
                toast.error(error.response?.data?.message || 'Failed to add KPI');
            } finally {
                setLoading(false);
            }
        },
    });

    // Update selected month when KRA selection changes
    useEffect(() => {
        if (formik.values.kra_id && kraList) {
            const selectedKra = kraList.find(k => k.id === Number(formik.values.kra_id));
            setSelectedKraMonth(selectedKra?.month_year || '');
        }
    }, [formik.values.kra_id, kraList]);

    const handleClose = () => {
        formik.resetForm();
        if (kraList && kraList.length > 0) {
            formik.setFieldValue('kra_id', kraList[0].id);
        }
        setSelectedKraMonth('');
        onClose();
    };

    return (
        <Modal
            open={open}
            onClose={handleClose}
            title="Add KPI Metric"
            maxWidth="max-w-md"
            footer={
                <>
                    <button
                        onClick={handleClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                        disabled={loading}
                    >
                        {loading ? 'Saving...' : 'Save KPI'}
                    </button>
                </>
            }
        >
            <form onSubmit={formik.handleSubmit} className="space-y-4">
                {/* KRA Selection Dropdown */}
                <div>
                    <label className="block text-sm font-medium mb-1">
                        Select KRA <span className="text-red-500">*</span>
                    </label>
                    <select
                        className="form-select w-full"
                        {...formik.getFieldProps('kra_id')}
                        disabled={loading}
                    >
                        <option value="">Select a KRA</option>
                        {kraList?.map((kra) => (
                            <option key={kra.id} value={kra.id}>
                                {kra.kra_title} ({kra.weightage}%) - {kra.month_year ? new Date(kra.month_year).toLocaleString('default', { month: 'long', year: 'numeric' }) : 'No month set'}
                            </option>
                        ))}
                    </select>
                    {formik.touched.kra_id && formik.errors.kra_id && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.kra_id as string}
                        </p>
                    )}
                </div>

                {/* Show KRA's month (read-only) */}
                {selectedKraMonth && (
                    <div className="bg-blue-50 p-3 rounded-lg">
                        <label className="block text-sm font-medium mb-1 text-blue-700">
                            KRA Month/Year
                        </label>
                        <p className="text-blue-600 font-medium">
                            {new Date(selectedKraMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}
                        </p>
                        <p className="text-xs text-gray-500 mt-1">
                            KPI will be added for the same month as the selected KRA
                        </p>
                    </div>
                )}

                {/* KPI Title */}
                <div>
                    <label className="block text-sm font-medium mb-1">
                        KPI Title <span className="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        className="form-input w-full"
                        placeholder="Enter KPI Title (e.g., Enrollment Target)"
                        {...formik.getFieldProps('metric_name')}
                        disabled={loading}
                    />
                    {formik.touched.metric_name && formik.errors.metric_name && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.metric_name}
                        </p>
                    )}
                </div>

                {/* Target */}
                <div>
                    <label className="block text-sm font-medium mb-1">
                        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')}
                        disabled={loading}
                    />
                    {formik.touched.target && formik.errors.target && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.target}
                        </p>
                    )}
                </div>

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

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

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

export default AddSingleKPI;