'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 Select from 'react-select';
import { PiPhone, PiTag, PiTarget, PiUser } from 'react-icons/pi';

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

export default function AssignLeadModal({
  open,
  onClose,
  onSubmit,
  leadData,
}: any) {
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      assignedTo: leadData?.assignedTo
        ? { label: leadData.assignedTo, value: leadData.assignedTo }
        : null,
    },

    validationSchema: Yup.object({
      assignedTo: Yup.object()
        .nullable()
        .required('Please select staff'),
    }),

    onSubmit: (values) => {
      onSubmit({
        id: leadData.id,
        assignedTo: values.assignedTo?.value,
      });
      onClose();
    },
  });

  return (
    <CustomModal open={open} onClose={onClose} title="Assign Lead">
      <form onSubmit={formik.handleSubmit} className="space-y-6">
        <div className="p-4 border rounded-lg bg-gray-50 space-y-2 grid grid-cols-1 md:grid-cols-2">
          <div>
            <div className='flex items-center gap-1'>
              <PiUser/>
              <span className="text-xs text-gray-500">Lead Name</span>
            </div>
            <div className="font-medium">{leadData?.name}</div>
          </div>
          <div>
            <div className='flex items-center gap-1'>
              <PiPhone/>
              <span className="text-xs text-gray-500">Mobile</span>
            </div>
            <div className="font-medium">{leadData?.mobile}</div>
          </div>
          <div>
            <div className='flex items-center gap-1'>
              <PiTarget/>
              <span className="text-xs text-gray-500">Source</span>
            </div>
            <div className="font-medium">{leadData?.source}</div>
          </div>
          <div>
            <div className='flex items-center gap-1'>
              <PiTag/>
              <span className="text-xs text-gray-500">Tags</span>
            </div>
            <div className="flex gap-2 flex-wrap mt-1">
              {leadData?.tags?.map((tag: string, i: number) => (
                <span
                  key={i}
                  className="px-2 py-1 text-xs bg-gray-200 rounded flex items-center gap-1"
                >
                  <PiTag/>
                  {tag}
                </span>
              ))}
            </div>
          </div>
        </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)}
            onBlur={() => formik.setFieldTouched('assignedTo', true)}
            placeholder="Select staff"
          />

          <p className="text-red-500 text-sm mt-1">
            {formik.touched.assignedTo &&
              (formik.errors.assignedTo as string)}
          </p>
        </div>

        {/* ✅ Actions */}
        <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">
            Assign
          </PrimaryButton>
        </div>
      </form>
    </CustomModal>
  );
}