import { Control } from "react-hook-form";
import { HomeImprovementFormData } from "../schema";
import FormInput from "@/src/components/form/FormInput";
import FormSelect from "@/src/components/form/FormSelect";
import FormRadio from "@/src/components/form/FormRadio";
import FormSection from "@/src/components/form/FormSection";

interface Step1Props {
  control: Control<HomeImprovementFormData>;
  errors: any;
  isReadOnly: boolean;
  watch: any;
  countryOptions: { label: string; value: string }[];
  stateOptions: { label: string; value: string }[];
  cityOptions: { label: string; value: string }[];
  onCountryChange: (value: string) => void;
  onStateChange: (value: string) => void;
}

export default function Step1({
  control,
  errors,
  isReadOnly,
  watch,
  countryOptions,
  stateOptions,
  cityOptions,
  onCountryChange,
  onStateChange,
}: Step1Props) {
  const isCurrentlyEmployed = watch("isCurrentlyEmployed");
  return (
    <div className="space-y-8">
      <FormSection title="Applicant Information">

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormInput
            name="applicantName"
            control={control}
            label="Applicant's Name(s)"
            placeholder="Applicant Name"
            required
            disabled={isReadOnly}
            error={errors.applicantName}
          />

          <FormInput
            name="email"
            control={control}
            label="E-Mail Address"
            type="email"
            placeholder="Email"
            required
            disabled={isReadOnly}
            error={errors.email}
          />

          <FormSelect
            name="country"
            control={control}
            label="Country"
            options={countryOptions}
            placeholder="Select country"
            required
            disabled={isReadOnly}
            error={errors.country}
            onChange={onCountryChange}
          />

          <FormSelect
            name="state"
            control={control}
            label="State"
            options={stateOptions}
            placeholder="Select State"
            required
            disabled={isReadOnly || !stateOptions.length}
            error={errors.state}
            onChange={onStateChange}
          />

          <FormSelect
            name="city"
            control={control}
            label="City"
            options={cityOptions}
            placeholder="Select City"
            required
            disabled={isReadOnly || !cityOptions.length}
            error={errors.city}
          />

          <FormInput
            name="applicantProperty"
            control={control}
            label="Area"
            placeholder="Area"
            required
            disabled={isReadOnly}
            error={errors.applicantProperty}
          />

          <FormInput
            name="phoneCell"
            control={control}
            label="Phone # (Cell)"
            type="number"
            placeholder="Phone number (Cell)"
            required
            disabled={isReadOnly}
            error={errors.phoneCell}
          />

          <FormInput
            name="phoneWork"
            control={control}
            label="Phone # (Work)"
            type="number"
            placeholder="Phone number (Work)"
            disabled={isReadOnly}
            error={errors.phoneWork}
          />

          <FormInput
            name="phoneHome"
            control={control}
            label="Phone # (Home)"
            type="number"
            placeholder="Phone number (Home)"
            disabled={isReadOnly}
            error={errors.phoneHome}
          />
        </div>
      </FormSection>
      <FormSection title="Property Status">

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormRadio
            name="resideAddress"
            control={control}
            label="Do you currently reside at this address?"
            options={[
              { label: "Yes", value: "yes" },
              { label: "No", value: "no" },
            ]}
            required
            disabled={isReadOnly}
            error={errors.resideAddress}
          />

          <FormInput
            name="propertyOwnedDuration"
            control={control}
            label="How long have you owned the property?"
            placeholder="e.g., 5 years"
            required
            disabled={isReadOnly}
            error={errors.propertyOwnedDuration}
          />

          <FormRadio
            name="taxesPaid"
            control={control}
            label="Are Town/County/School Taxes Paid to Date?"
            options={[
              { label: "Yes", value: "yes" },
              { label: "No", value: "no" },
            ]}
            required
            disabled={isReadOnly}
            error={errors.taxesPaid}
          />
        </div>
      </FormSection>

      <FormSection title="Employment Status">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormRadio
            name="isCurrentlyEmployed"
            control={control}
            label="Are you currently employed?"
            options={[
              { label: "Yes", value: "yes" },
              { label: "No", value: "no" },
            ]}
            required
            disabled={isReadOnly}
            error={errors.isCurrentlyEmployed}
          />
        </div>
      </FormSection>

      {isCurrentlyEmployed === "yes" && (
        <FormSection title="Current Employment">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <FormInput
              name="applicantEmployerName"
              control={control}
              label="Employer Name (Applicant)"
              placeholder="Enter employer name"
              required
              disabled={isReadOnly}
              error={errors.applicantEmployerName}
            />

            <FormInput
              name="applicantEmployerAddress"
              control={control}
              label="Employer Address (Applicant)"
              placeholder="Enter employer address"
              required
              disabled={isReadOnly}
              error={errors.applicantEmployerAddress}
            />

            <FormInput
              name="coApplicantEmployerName"
              control={control}
              label="Employer Name (Co-Applicant)"
              placeholder="Enter employer name"
              disabled={isReadOnly}
              error={errors.coApplicantEmployerName}
            />

            <FormInput
              name="coApplicantEmployerAddress"
              control={control}
              label="Employer Address (Co-Applicant)"
              placeholder="Enter employer address"
              disabled={isReadOnly}
              error={errors.coApplicantEmployerAddress}
            />
          </div>
        </FormSection>
      )}
    </div>
  );
}