'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';

type PaymentForm = {
  amount: string;
  paymentMode: any;
  referenceNo: string;
};

const paymentOptions = [
  { value: 'cheque', label: 'Cheque' },
  { value: 'net_banking', label: 'Net Banking' },
  { value: 'upi', label: 'UPI' },
  { value: 'cash', label: 'Cash' },
];

export default function RecordPaymentModal({
  open,
  onClose,
  onSubmit,
  initialAmount,
}: any) {
  const formik = useFormik<PaymentForm>({
    enableReinitialize: true,
    initialValues: {
      amount: initialAmount || '',
      paymentMode: null,
      referenceNo: '',
    },
    validationSchema: Yup.object({
      amount: Yup.string().required('Amount is required'),
      paymentMode: Yup.object().required('Payment mode required'),
      referenceNo: Yup.string().required('Reference number required'),
    }),
    onSubmit: (values, { resetForm }) => {
      onSubmit(values);
      resetForm();
      onClose();
    },
  });

  return (
    <CustomModal
      open={open}
      onClose={onClose}
      title="Record Payment"
    >
      <form onSubmit={formik.handleSubmit} className="space-y-5">

        {/* Amount */}
        <div>
          <label className="text-sm font-medium">Amount</label>
          <input
            name="amount"
            value={formik.values.amount}
            onChange={formik.handleChange}
            className="w-full border rounded-lg px-3 py-2 mt-1"
          />
          <p className="text-red-500 text-sm">{formik.errors.amount}</p>
        </div>

        {/* Payment Mode */}
        <div>
          <label className="text-sm font-medium">Payment Mode</label>
          <Select
            options={paymentOptions}
            value={formik.values.paymentMode}
            onChange={(val) => formik.setFieldValue('paymentMode', val)}
          />
          <p className="text-red-500 text-sm">{formik.errors.paymentMode as any}</p>
        </div>

        {/* Reference No */}
        <div>
          <label className="text-sm font-medium">Reference No.</label>
          <input
            name="referenceNo"
            value={formik.values.referenceNo}
            onChange={formik.handleChange}
            className="w-full border rounded-lg px-3 py-2 mt-1"
          />
          <p className="text-red-500 text-sm">{formik.errors.referenceNo}</p>
        </div>

        {/* Buttons */}
        <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">
            Save Payment
          </PrimaryButton>
        </div>
      </form>
    </CustomModal>
  );
}