/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect } from "react";
import { Formik } from "formik";
import { Input, Select } from "./LoanInputs";
import { loanValidationSchema } from "../../lib/utils/loanValidation";

interface LoanApplicationFormProps {
  onSubmit: (data: any) => void;
  onCancel: () => void;
  onChange?: (data: any) => void;
}

export const LoanApplicationForm: React.FC<LoanApplicationFormProps> = ({
  onSubmit,
  onCancel,
  onChange,
}) => {
  const employmentOptions = [
    { value: "Employed", label: "Employed" },
    { value: "Self-Employed", label: "Self-Employed" },
    { value: "Unemployed", label: "Unemployed" },
  ];

  const tenureOptions = [
    { value: "3", label: "3 months" },
    { value: "6", label: "6 months" },
    { value: "9", label: "9 months" },
    { value: "12", label: "12 months" },
  ];

  const salaryDayOptions = Array.from({ length: 28 }, (_, i) => ({
    value: (i + 1).toString(),
    label: `Day ${i + 1}`,
  }));

  return (
    <Formik
      initialValues={{
        employmentStatus: "Employed",
        houseAddress: "",
        companyName: "",
        salaryAmount: "",
        salaryPayDay: "",
        firstGuarantorName: "",
        firstGuarantorRelationship: "",
        firstGuarantorPhoneNumber: "",
        secondGuarantorName: "",
        secondGuarantorRelationship: "",
        secondGuarantorPhoneNumber: "",
        bankName: "",
        accountNumber: "",
        loanPurpose: "",
        loanAmount: "50000",
        loanTenure: "6",
      }}
      validationSchema={loanValidationSchema}
      validateOnChange
      validateOnBlur
      onSubmit={onSubmit}
    >
      {({ values, handleBlur, handleChange, errors, touched }) => {
        // Report form updates to parent

        useEffect(() => {
          if (onChange) onChange(values);
        }, [values, onChange]); 

        return (
          <div className="space-y-6">
            {/* EMPLOYMENT & ADDRESS */}
            <div className="border-b pb-6">
              <Select
                label="Employment Status"
                name="employmentStatus"
                value={values.employmentStatus}
                onChange={handleChange}
                onBlur={handleBlur}
                options={employmentOptions}
                error={touched.employmentStatus ? errors.employmentStatus : undefined}
              />
              <Input
                label="House Address"
                name="houseAddress"
                value={values.houseAddress}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter your residential address"
                error={touched.houseAddress ? errors.houseAddress : undefined}
              />
            </div>
            {/* WORK INFORMATION */}
            <div className="border-b pb-6">
              <Input
                label="Company Name"
                name="companyName"
                value={values.companyName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter your company name"
                error={touched.companyName ? errors.companyName : undefined}
              />
              <Input
                label="Monthly Salary"
                name="salaryAmount"
                type="number"
                value={values.salaryAmount}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter your monthly salary"
                error={touched.salaryAmount ? errors.salaryAmount : undefined}
              />
              <Select
                label="Salary Pay Day"
                name="salaryPayDay"
                value={values.salaryPayDay}
                onChange={handleChange}
                onBlur={handleBlur}
                options={salaryDayOptions}
                error={touched.salaryPayDay ? errors.salaryPayDay : undefined}
              />
            </div>
            {/* GUARANTOR SECTION */}
            <div className="border-b pb-6">
              <Input
                label="Guarantor's Name"
                name="firstGuarantorName"
                value={values.firstGuarantorName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter guarantor's full name"
                error={touched.firstGuarantorName ? errors.firstGuarantorName : undefined}
              />
              <Input
                label="Relationship"
                name="firstGuarantorRelationship"
                value={values.firstGuarantorRelationship}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Friend / Sibling / Colleague"
                error={
                  touched.firstGuarantorRelationship ?
                  errors.firstGuarantorRelationship : undefined
                }
              />
              <Input
                label="Phone Number"
                name="firstGuarantorPhoneNumber"
                type="tel"
                value={values.firstGuarantorPhoneNumber}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter phone number"
                error={
                  touched.firstGuarantorPhoneNumber ?
                  errors.firstGuarantorPhoneNumber : undefined
                }
              />
            </div>

            {/* BANK INFORMATION */}
            <div className="border-b pb-6">
              <Input
                label="Bank Name"
                name="bankName"
                value={values.bankName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter your bank name"
                error={touched.bankName ? errors.bankName : undefined}
              />
              <Input
                label="Account Number"
                name="accountNumber"
                type="text"
                maxLength={10}
                value={values.accountNumber}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter your account number"
                error={touched.accountNumber ? errors.accountNumber : undefined}
              />
            </div>
            {/* LOAN DETAILS */}
            <div>
              <Input
                label="Loan Purpose"
                name="loanPurpose"
                value={values.loanPurpose}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="What will you use the loan for?"
                error={touched.loanPurpose ? errors.loanPurpose : undefined}
              />
              <Input
                label="Loan Amount"
                name="loanAmount"
                type="number"
                value={values.loanAmount}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Enter loan amount"
                error={touched.loanAmount ? errors.loanAmount : undefined}
              />
              <Select
                label="Loan Tenure"
                name="loanTenure"
                value={values.loanTenure}
                onChange={handleChange}
                onBlur={handleBlur}
                options={tenureOptions}
                error={touched.loanTenure ? errors.loanTenure : undefined}
              />
            </div>
          </div>
        );
      }}
    </Formik>
  );
};