'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 LeadScoreForm = {
  scoreName: string;
  score: number | '';
  description: string;
};

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

    validationSchema: Yup.object({
      scoreName: Yup.string().required('Score name is required'),
      score: Yup.number()
        .typeError('Score must be a number')
        .required('Score 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 Score' : 'Create Lead Score'}
    >
      <form onSubmit={formik.handleSubmit} className="space-y-5">
        <div>
          <label className="text-sm font-medium">Score Name</label>
          <input
            name="scoreName"
            value={formik.values.scoreName}
            onChange={formik.handleChange}
            className="w-full border rounded-lg px-3 py-2 mt-1"
            placeholder="Enter score name"
          />
          <p className="text-red-500 text-sm">{formik.errors.scoreName}</p>
        </div>

        <div>
          <label className="text-sm font-medium">Score</label>
          <input
            name="score"
            type="number"
            value={formik.values.score}
            onChange={formik.handleChange}
            className="w-full border rounded-lg px-3 py-2 mt-1"
            placeholder="Enter score value"
          />
          <p className="text-red-500 text-sm">{formik.errors.score}</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>
  );
}