'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 { DatePicker } from '../../ui/datepicker';
import Select from 'react-select';

type LeadFormValues = {
  name: string;
  mobile: string;
  lead_score: string;
  email: string;
  gender: string;
  birthDate: Date | null;
  source: { label: string; value: string } | null;
  skills: { label: string; value: string }[];
  address: string;
  pincode: string;
  assignedTo: { label: string; value: string } | null;
};

const sourceOptions = [
  { label: 'Website', value: 'Website' },
  { label: 'Facebook', value: 'Facebook' },
  { label: 'Instagram', value: 'Instagram' },
  { label: 'Referral', value: 'Referral' },
];

const staffOptions = [
  { label: 'Arun', value: 'Arun' },
  { label: 'Karthik', value: 'Karthik' },
  { label: 'Vijay', value: 'Vijay' },
];

const skillOptions = [
  { label: 'Budget', value: 'Budget' },
  { label: 'Premium', value: 'Premium' },
  { label: 'Hot', value: 'Hot' },
  { label: 'Cold', value: 'Cold' },
];



export default function LeadModal({
  open,
  onClose,
  onSubmit,
  initialData,
}: any) {
  const formik = useFormik<LeadFormValues>({
    enableReinitialize: true,
    initialValues: {
      name: initialData?.name || '',
      mobile: initialData?.mobile || '',
      lead_score: initialData?.lead_score || '',
      email: initialData?.email || '',
      gender: initialData?.gender || '',
      birthDate: initialData?.birthDate
        ? new Date(initialData.birthDate)
        : null,
      source: initialData?.source || null,
      skills:
        initialData?.tags?.map((t: string) => ({
          label: t,
          value: t,
      })) || [],
      address: initialData?.address || '',
      pincode: initialData?.pincode || '',
      assignedTo: initialData?.assignedTo || null,
    },

    validationSchema: Yup.object({
      name: Yup.string()
        .required('Lead name is required'),

      mobile: Yup.string()
        .required('Mobile is required')
        .matches(/^[0-9]{10}$/, 'Enter valid 10-digit mobile'),

      source: Yup.object()
        .nullable()
        .required('Lead source is required'),

      skills: Yup.array()
        .min(1, 'Select at least one tag')
        .required('Tags are required'),
    }),

    onSubmit: (values, { resetForm }) => {
      onSubmit({
        ...values,
        id: initialData?.id,
        source: values.source?.value,
        assignedTo: values.assignedTo?.value,
        tags: values.skills.map((s) => s.value),
      });

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

  return (
    <CustomModal
      open={open}
      onClose={onClose}
      title={initialData ? 'Edit Lead' : 'Create Lead'}
    >
      <form onSubmit={formik.handleSubmit} className="space-y-6">
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Lead Name
          </label>
          <input
            name="name"
            placeholder="Enter lead name"
            className="w-full rounded-lg border px-4 py-2"
            value={formik.values.name}
            onChange={formik.handleChange}
          />
          <p className="text-red-500 text-sm">
            {formik.touched.name && formik.errors.name}
          </p>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium mb-1 text-gray-700">
              Mobile
            </label>
            <input
              name="mobile"
              placeholder="Enter mobile"
              className="w-full rounded-lg border px-4 py-2"
              value={formik.values.mobile}
              onChange={formik.handleChange}
            />
            <p className="text-red-500 text-sm">
              {formik.touched.mobile && formik.errors.mobile}
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium mb-1 text-gray-700">
              Email
            </label>
            <input
              name="email"
              placeholder="Enter email"
              className="w-full rounded-lg border px-4 py-2"
              value={formik.values.email}
              onChange={formik.handleChange}
            />
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium mb-2 text-gray-700">
            Gender
          </label>
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="gender"
                value="male"
                checked={formik.values.gender === 'male'}
                onChange={formik.handleChange}
              />
              <span className="text-sm">Male</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="gender"
                value="female"
                checked={formik.values.gender === 'female'}
                onChange={formik.handleChange}
              />
              <span className="text-sm">Female</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="gender"
                value="other"
                checked={formik.values.gender === 'other'}
                onChange={formik.handleChange}
              />
              <span className="text-sm">Other</span>
            </label>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium mb-1 text-gray-700">
              Date of Birth
            </label>
            <DatePicker
              selected={formik.values.birthDate}
              onChange={(d) => formik.setFieldValue('birthDate', d)}
              inputProps={{ placeholder: 'Select date' }}
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1 text-gray-700">
              Lead Score
            </label>
            <input
              name="lead_score"
              placeholder="Enter Lead Score"
              className="w-full rounded-lg border px-4 py-2"
              value={formik.values.lead_score}
              onChange={formik.handleChange}
            />
            <p className="text-red-500 text-sm">
              {formik.touched.lead_score && formik.errors.lead_score}
            </p>
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Lead Source
          </label>
          <Select
            options={sourceOptions}
            value={formik.values.source}
            onChange={(v) => formik.setFieldValue('source', v)}
            onBlur={() => formik.setFieldTouched('source', true)}
          />
          <p className="text-red-500 text-sm">
            {formik.touched.source && (formik.errors.source as string)}
          </p>
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Assign To
          </label>
          <Select
            options={staffOptions}
            value={formik.values.assignedTo}
            onChange={(v) => formik.setFieldValue('assignedTo', v)}
            placeholder="Select staff"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Tags
          </label>
          <Select
            isMulti
            options={skillOptions}
            value={formik.values.skills}
            onChange={(v) => formik.setFieldValue('skills', v)}
            onBlur={() => formik.setFieldTouched('skills', true)}
          />
          <p className="text-red-500 text-sm">
            {formik.touched.skills && (formik.errors.skills as string)}
          </p>
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Address
          </label>
          <textarea
            name="address"
            placeholder="Enter address"
            className="w-full rounded-lg border px-4 py-2"
            value={formik.values.address}
            onChange={formik.handleChange}
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Pincode
          </label>
          <input
            name="pincode"
            placeholder="Enter pincode"
            className="w-full rounded-lg border px-4 py-2"
            value={formik.values.pincode}
            onChange={formik.handleChange}
          />
        </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>
  );
}