import { Control, Controller, useFieldArray } from "react-hook-form";
import { HomeImprovementFormData } from "../schema";
import FormInput from "@/src/components/form/FormInput";
import Radio from "@/src/components/admin/form/input/Radio";
import FormSection from "@/src/components/form/FormSection";

interface Step4Props {
  control: Control<HomeImprovementFormData>;
  errors: any;
  isReadOnly: boolean;
  watch: any;
}

export default function Step4({ control, errors, isReadOnly, watch }: Step4Props) {
  const hasMortgage = watch("hasMortgage");

  const { fields, append, remove } = useFieldArray({
    control,
    name: "monthlyLiabilities",
  });

  return (
    <div className="space-y-8">
     
      <FormSection title="Mortgage Information">

        <div>
          <label className="text-sm font-medium text-gray-700 mb-2 block">
            Do you have a mortgage on the property?
          </label>
          <div className={`flex gap-6 ${isReadOnly ? "pointer-events-none" : ""}`}>
            <Controller
              name="hasMortgage"
              control={control}
              render={({ field }) => (
                <>
                  <Radio
                    id="mortgageYes"
                    name="hasMortgage"
                    value="yes"
                    checked={field.value === "yes"}
                    onChange={field.onChange}
                    disabled={isReadOnly}
                    label="Yes"
                  />
                  <Radio
                    id="mortgageNo"
                    name="hasMortgage"
                    value="no"
                    checked={field.value === "no"}
                    onChange={field.onChange}
                    disabled={isReadOnly}
                    label="No"
                  />
                </>
              )}
            />
          </div>
          {errors.hasMortgage && (
            <p className="text-red-500 text-xs mt-1">{errors.hasMortgage.message}</p>
          )}
        </div>

        {hasMortgage === "yes" && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 p-4 bg-gray-50 rounded-lg">
            <FormInput
              name="mortgageAmount"
              control={control}
              label="Mortgage Payment Amount"
              type="number"
              placeholder="Amount"
              required
              disabled={isReadOnly}
              error={errors.mortgageAmount}
            />

            <FormInput
              name="mortgageBalance"
              control={control}
              label="Mortgage Balance"
              type="number"
              placeholder="Balance"
              required
              disabled={isReadOnly}
              error={errors.mortgageBalance}
            />

            <FormInput
              name="paymentStatus"
              control={control}
              label="Payment Status"
              placeholder="e.g., Current"
              required
              disabled={isReadOnly}
              error={errors.paymentStatus}
            />

            <FormInput
              name="mortgagee"
              control={control}
              label="Mortgagee"
              placeholder="Lender name"
              required
              disabled={isReadOnly}
              error={errors.mortgagee}
            />
          </div>
        )}
     </FormSection>

      <FormSection title="Monthly Liabilities">

        <div className="space-y-4">
          {fields.map((field, index) => (
            <div key={field.id} className="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
              <FormInput
                name={`monthlyLiabilities.${index}.payee`}
                control={control}
                label="Payee"
                placeholder="Payee name"
                disabled={isReadOnly}
                error={errors.monthlyLiabilities?.[index]?.payee}
              />

              <div className="flex gap-3 items-end">
                <div className="flex-1">
                  <FormInput
                    name={`monthlyLiabilities.${index}.amount`}
                    control={control}
                    label="Amount"
                    type="number"
                    placeholder="Amount"
                    disabled={isReadOnly}
                    error={errors.monthlyLiabilities?.[index]?.amount}
                  />
                </div>
                {!isReadOnly && fields.length > 1 && (
                  <button
                    type="button"
                    onClick={() => remove(index)}
                    className="h-[45px] px-4 border border-red-500 text-red-600 rounded-md hover:bg-red-50"
                  >
                    Remove
                  </button>
                )}
              </div>
            </div>
          ))}

          {!isReadOnly && (
            <button
              type="button"
              onClick={() => append({ payee: "", amount: "" })}
              className="text-teal-600 text-sm font-medium hover:underline"
            >
              + Add another liability
            </button>
          )}
        </div>
      </FormSection>
    </div>
  );
}