import { Control, FieldErrors, UseFormWatch, UseFormSetValue } from "react-hook-form";
import { FirstTimeHomeBuyerFormData } from "../schema";
import FormInput from "@/src/components/form/FormInput";

interface Step3Props {
  control: Control<FirstTimeHomeBuyerFormData>;
  errors: FieldErrors<FirstTimeHomeBuyerFormData>;
  isReadOnly: boolean;
  watch: UseFormWatch<FirstTimeHomeBuyerFormData>;
  setValue: UseFormSetValue<FirstTimeHomeBuyerFormData>;
}

export default function Step3({ control, errors, isReadOnly, watch, setValue }: Step3Props) {
  const payees = watch("payees") || [];

  const addMorePayee = () => {
    setValue("payees", [...payees, { payeeName: "", amount: '' }]);
  };

  const removePayee = (index: number) => {
    setValue("payees", payees.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-6">
      {payees.map((payee, index) => (
        <div key={index} className="grid grid-cols-12 gap-4 items-end">
          {/* Payee Name */}
          <div className={`${isReadOnly ? "col-span-12 md:col-span-9" : "col-span-12 md:col-span-7"}`}>
            <FormInput
              name={`payees.${index}.payeeName`}
              control={control}
              label="Payee Name"
              placeholder="Payee name"
              disabled={isReadOnly}
              error={errors.payees?.[index]?.payeeName}
            />
          </div>

          {/* Amount */}
          <div className={`${isReadOnly ? "col-span-12 md:col-span-3" : "col-span-8 md:col-span-3"}`}>
            <div className="relative">
              <FormInput
                name={`payees.${index}.amount`}
                control={control}
                label="Amount"
                 type="text"
                placeholder="0.00"
                disabled={isReadOnly}
                error={errors.payees?.[index]?.amount}
                className="pl-7"
              />
              <span className="absolute left-3 top-9 text-gray-500 pointer-events-none">$</span>
            </div>
          </div>

          {/* Remove Button - Hidden in ReadOnly mode */}
          {!isReadOnly && (
            <div className="col-span-4 md:col-span-2 flex">
              {payees.length > 1 && (
                <button
                  type="button"
                  onClick={() => removePayee(index)}
                  className="h-[45px] w-full border border-red-500 text-red-600 rounded-md text-sm hover:bg-red-50 mt-6"
                >
                  Remove
                </button>
              )}
            </div>
          )}
        </div>
      ))}

      {/* GLOBAL PAYEE ERROR */}
      {errors.payees && !isReadOnly && (
        <p className="text-red-500 text-sm">{errors.payees.message}</p>
      )}

      {/* Add More Button - Hidden in ReadOnly mode */}
      {!isReadOnly && (
        <button
          type="button"
          onClick={addMorePayee}
          className="text-teal-600 text-sm font-medium hover:underline flex items-center gap-1"
        >
          <span className="text-lg">+</span> Add More Payee
        </button>
      )}
    </div>
  );
}