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

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

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

    const validationSchema = Yup.object({
        company_name: Yup.string()
            .required("Company name is required")
            .min(2, "Company name must be at least 2 characters"),
        job_role: Yup.string()
            .required("Job role is required")
            .min(2, "Job role must be at least 2 characters"),
        address: Yup.string()
            .required("Address is required")
            .min(5, "Please enter complete address"),
        date: Yup.string()
            .required("Date is required"),
        time: Yup.string()
            .required("Time is required"),
        package: Yup.string()
            .required("Package is required"),
        description: Yup.string()
    });

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            company_name: editData?.company_name || "",
            job_role: editData?.job_role || "",
            address: editData?.address || "",
            date: editData?.date || "",
            time: editData?.time || "",
            package: editData?.package || "",
            description: editData?.description || "",
        },
        validationSchema,
        onSubmit: async (values) => {
            setLoading(true);
            try {
                const response = await api.put(`/placement/interview/update/${editData?.id}`, values);

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

    // Move the return condition after all hooks
    if (!open) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Update Interview Schedule"
            maxWidth="max-w-2xl"
            footer={
                <div className="flex items-center justify-end gap-3">
                    <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 Interview Schedule'}
                    </button>
                </div>
            }
        >
            <form className="grid grid-cols-12 gap-4" onSubmit={(e) => e.preventDefault()}>
                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Company name <span className='text-red-500'>*</span>
                    </label>
                    <input
                        name="company_name"
                        className="form-input w-full"
                        value={formik.values.company_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter company name"
                        disabled={loading}
                    />
                    {formik.touched.company_name && formik.errors.company_name && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.company_name as string}
                        </p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Job Role <span className='text-red-500'>*</span>
                    </label>
                    <input
                        name="job_role"
                        className="form-input w-full"
                        value={formik.values.job_role}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter job role"
                        disabled={loading}
                    />
                    {formik.touched.job_role && formik.errors.job_role && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.job_role as string}
                        </p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Date <span className='text-red-500'>*</span>
                    </label>
                    <Datepicker
                        value={formik.values.date ? new Date(formik.values.date) : undefined}
                        onChange={(val) => {
                            const date = val instanceof Date ? val.toISOString().split('T')[0] : '';
                            formik.setFieldValue("date", date);
                            formik.setFieldTouched("date", true);
                        }}
                        placeholder="Pick date"
                        minDate={new Date()}
                        disabled={loading}
                    />
                    {formik.touched.date && formik.errors.date && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.date as string}
                        </p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Time <span className='text-red-500'>*</span>
                    </label>
                    <Timepicker
                        value={formik.values.time}
                        onChange={(val) => {
                            formik.setFieldValue("time", val);
                            formik.setFieldTouched("time", true);
                        }}
                        placeholder="Pick time"
                        disabled={loading}
                    />
                    {formik.touched.time && formik.errors.time && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.time as string}
                        </p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Package <span className='text-red-500'>*</span>
                    </label>
                    <input
                        name="package"
                        className="form-input w-full"
                        value={formik.values.package}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="e.g., 5.5 LPA"
                        disabled={loading}
                    />
                    {formik.touched.package && formik.errors.package && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.package as string}
                        </p>
                    )}
                </div>

                <div className="col-span-6">
                    <label className="block text-sm font-medium mb-1">
                        Address <span className='text-red-500'>*</span>
                    </label>
                    <textarea
                        name="address"
                        rows={2}
                        className="form-textarea w-full"
                        value={formik.values.address}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter complete address"
                        disabled={loading}
                    />
                    {formik.touched.address && formik.errors.address && (
                        <p className="text-red-500 text-sm mt-1">
                            {formik.errors.address as string}
                        </p>
                    )}
                </div>

                <div className="col-span-12">
                    <label className="block text-sm font-medium mb-1">
                        Description (Optional)
                    </label>
                    <textarea
                        name="description"
                        rows={3}
                        className="form-textarea w-full"
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Additional details about the interview"
                        disabled={loading}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default EditInterview;