'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';
import { HexColorPicker } from 'react-colorful';

type LeadStatusForm = {
  name: string;
  description: string;
  textColor: string;
  bgColor: string;
};

export default function LeadStatusModal({
  open,
  onClose,
  onSubmit,
  initialData,
}: any) {
  const formik = useFormik<LeadStatusForm>({
    enableReinitialize: true,
    initialValues: {
      name: initialData?.name || '',
      description: initialData?.description || '',
      textColor: initialData?.textColor || '#000000',
      bgColor: initialData?.bgColor || '#E5E7EB',
    },

    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,
      });

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

  return (
    <CustomModal
      open={open}
      onClose={onClose}
      title={initialData ? 'Edit Lead Status' : 'Create Lead Status'}
    >
      <form onSubmit={formik.handleSubmit} className="space-y-5">
        <div>
          <label className="text-sm font-medium">Status 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="e.g. New, Contacted"
          />
          <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="grid grid-cols-2 gap-3">
          <div>
            <label className="text-sm font-medium">Text Color</label>
            <div className="mt-2">
              <HexColorPicker
                color={formik.values.textColor}
                onChange={(color) => formik.setFieldValue('textColor', color)}
              />
            </div>
          </div>
          <div>
            <label className="text-sm font-medium">Background Color</label>
            <div className="mt-2">
              <HexColorPicker
                color={formik.values.bgColor}
                onChange={(color) => formik.setFieldValue('bgColor', color)}
              />
            </div>
          </div>
        </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>
  );
}