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

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: { kra_title: string; weightage: number; description: string; month_year: string }) => void;
    staffId?: number;
}

const AddKRA = ({ open, onClose, onSave, staffId }: Props) => {
    const [loading, setLoading] = useState(false);
    const [selectedMonth, setSelectedMonth] = useState<Date>(new Date());

    const validationSchema = Yup.object({
        kra_title: Yup.string()
            .required('Title is required')
            .min(3, 'Minimum 3 characters'),
        weightage: Yup.number()
            .typeError('Weightage must be a number')
            .required('Weightage is required')
            .min(1, 'Minimum 1%')
            .max(100, 'Maximum 100%'),
        description: Yup.string()
            .required('Description is required')
            .min(5, 'Minimum 5 characters'),
        month_year: Yup.string().required('Month/Year is required'),
    });

    const formik = useFormik({
        initialValues: {
            kra_title: '',
            weightage: '',
            description: '',
            month_year: '',
        },
        validationSchema,
        onSubmit: async (values) => {
            if (!staffId) {
                toast.error('Staff ID is missing');
                return;
            }

            setLoading(true);
            try {
                const payload = {
                    kra_title: values.kra_title,
                    weightage: Number(values.weightage),
                    description: values.description,
                    month_year: values.month_year,
                };

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

                if (response.data.status) {
                    onSave(response.data.data);
                    formik.resetForm();
                    setSelectedMonth(new Date());
                    onClose();
                }
            } catch (error: any) {
                console.error('Failed to create KRA:', error);
                toast.error(error.response?.data?.message || 'Failed to create KRA');
            } finally {
                setLoading(false);
            }
        },
    });

    const handleMonthChange = (date: Date | null) => {
        if (date) {
            setSelectedMonth(date);
            const formattedDate = date.toISOString().split('T')[0];
            formik.setFieldValue('month_year', formattedDate);
            formik.setFieldTouched('month_year', true);
        }
    };

    const handleClose = () => {
        formik.resetForm();
        setSelectedMonth(new Date());
        onClose();
    };

    const formatMonthYear = (date: Date) => {
        return date.toLocaleString('default', { month: 'long', year: 'numeric' });
    };

    return (
        <Modal
            open={open}
            onClose={handleClose}
            title="Create KRA"
            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 ? 'Creating...' : 'Save'}
                    </button>
                </>
            }
        >
            <form onSubmit={formik.handleSubmit} className="space-y-4">
                {/* Month/Year Selection */}
                <div>
                    <label className="block mb-1 font-medium">
                        Select Month/Year <span className="text-red-500">*</span>
                    </label>
                    <MonthPicker
                        value={selectedMonth}
                        onChange={handleMonthChange}
                    />
                    {formik.touched.month_year && formik.errors.month_year && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.month_year}
                        </p>
                    )}
                    <p className="text-xs text-gray-500 mt-1">
                        Selected: {formatMonthYear(selectedMonth)}
                    </p>
                </div>

                <div>
                    <label className="block mb-1 font-medium">
                        KRA Title <span className="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        className="form-input w-full"
                        placeholder="Enter KRA title (e.g., Branch Profitability)"
                        {...formik.getFieldProps('kra_title')}
                        disabled={loading}
                    />
                    {formik.touched.kra_title && formik.errors.kra_title && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.kra_title}
                        </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('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>

                <div>
                    <label className="block mb-1 font-medium">
                        Description <span className="text-red-500">*</span>
                    </label>
                    <textarea
                        className="form-textarea w-full"
                        rows={3}
                        placeholder="Enter description"
                        {...formik.getFieldProps('description')}
                        disabled={loading}
                    />
                    {formik.touched.description && formik.errors.description && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.description}
                        </p>
                    )}
                </div>
            </form>
        </Modal>
    );
};

export default AddKRA;