'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 { TimePicker } from '../../ui/timepicker';
import { PiPhone, PiTag, PiTarget, PiUser } from 'react-icons/pi';

export default function FollowupModal({
  open,
  onClose,
  onSubmit,
  leadData,
}: any) {

  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      followupDate: null,
      followupTime: null,
      comments: '',
    },

    validationSchema: Yup.object({
      followupDate: Yup.date().required('Follow-up date required'),
      followupTime: Yup.date().required('Follow-up time required'),
      comments: Yup.string().required('Comments required'),
    }),

    onSubmit: (values) => {
      onSubmit({
        id: leadData.id,
        followupDate: values.followupDate,
        followupTime: values.followupTime,
        comments: values.comments,
      });
      onClose();
    },
  });

  return (
    <CustomModal open={open} onClose={onClose} title="Schedule Follow-up">
      <form onSubmit={formik.handleSubmit} className="space-y-6">

        {/* 🔹 Lead Info */}
        <div className="p-4 border rounded-lg bg-gray-50 grid grid-cols-1 md:grid-cols-2 gap-3">
          
          <div>
            <div className="flex items-center gap-1 text-xs text-gray-500">
              <PiUser /> Lead Name
            </div>
            <div className="font-medium">{leadData?.name}</div>
          </div>

          <div>
            <div className="flex items-center gap-1 text-xs text-gray-500">
              <PiPhone /> Mobile
            </div>
            <div className="font-medium">{leadData?.mobile}</div>
          </div>

          <div>
            <div className="flex items-center gap-1 text-xs text-gray-500">
              <PiTarget /> Source
            </div>
            <div className="font-medium">{leadData?.source}</div>
          </div>

          <div>
            <div className="flex items-center gap-1 text-xs text-gray-500">
              <PiTag /> Tags
            </div>
            <div className="flex flex-wrap gap-2 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 className="grid grid-cols-1 md:grid-cols-2 gap-2">
          <div>
            <label className="block text-sm font-medium mb-1 text-gray-700">
              Follow-up Date
            </label>
            <DatePicker
              selected={formik.values.followupDate}
              onChange={(d) => formik.setFieldValue('followupDate', d)}
              inputProps={{ placeholder: 'Select date' }}
            />
            <p className="text-red-500 text-sm mt-1">
              {formik.touched.followupDate && formik.errors.followupDate}
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium mb-1 text-gray-700">
              Follow-up Time
            </label>
            <TimePicker
              selected={formik.values.followupTime}
              onChange={(t) => formik.setFieldValue('followupTime', t)}
              inputProps={{ placeholder: 'Select time' }}
            />
            <p className="text-red-500 text-sm mt-1">
              {formik.touched.followupTime && formik.errors.followupTime}
            </p>
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Comments
          </label>
          <textarea
            name="comments"
            placeholder="Enter comments"
            className="w-full rounded-lg border px-4 py-2"
            value={formik.values.comments}
            onChange={formik.handleChange}
          />
          <p className="text-red-500 text-sm mt-1">
            {formik.touched.comments && formik.errors.comments}
          </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">
            Schedule
          </PrimaryButton>
        </div>

      </form>
    </CustomModal>
  );
}