'use client';

import CustomModal from '@/components/common/custom-modal';
import PrimaryButton from '@/components/common/primary-button';
import { useFormik } from 'formik';
import * as Yup from 'yup';

type LeadSourceForm = {
  name: string;
  description: string;
};

export default function LeadSourceModal({
  open,
  onClose,
  onSubmit,
  initialData,
}: any) {
  const formik = useFormik<LeadSourceForm>({
    enableReinitialize: true,
    initialValues: {
      name: initialData?.name || '',
      description: initialData?.description || '',
    },

    validationSchema: Yup.object({
      name: Yup.string().required('Name is required'),
      description: Yup.string().required('Description is required'),
    }),

    onSubmit: (values, { resetForm }) => {
      onSubmit({
        ...values,
        id: initialData?.id,
        status: initialData?.status ?? true,
      });

      resetForm();
      onClose();
    },
  });

  return (
    <CustomModal
      open={open}
      onClose={onClose}
      title={initialData ? 'Edit Lead Source' : 'Create Lead Source'}
    >
      <form onSubmit={formik.handleSubmit} className="space-y-5">
        <div>
          <label className="text-sm font-medium">Name</label>
          <input
            name="name"
            value={formik.values.name}
            onChange={formik.handleChange}
            className="w-full border rounded-lg px-3 py-2 mt-1"
            placeholder="Enter lead source name"
          />
          <p className="text-red-500 text-sm">{formik.errors.name}</p>
        </div>
        <div>
          <label className="text-sm font-medium">Description</label>
          <textarea
            name="description"
            value={formik.values.description}
            onChange={formik.handleChange}
            className="w-full border rounded-lg px-3 py-2 mt-1"
            placeholder="Enter description"
          />
          <p className="text-red-500 text-sm">
            {formik.errors.description}
          </p>
        </div>
        <div className="flex justify-end gap-2">
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 border rounded-lg"
          >
            Cancel
          </button>

          <PrimaryButton type="submit">
            {initialData ? 'Update' : 'Create'}
          </PrimaryButton>
        </div>
      </form>
    </CustomModal>
  );
}