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

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

export default function Step3({ control, errors, isReadOnly, watch }: Step3Props) {
  const maintenanceFields = [
    { name: "maintenanceHeatingCooling", label: "Heating / Cooling", textField: "maintenanceHeatingCoolingText" },
    { name: "maintenancePlumbing", label: "Plumbing", textField: "maintenancePlumbingText" },
    { name: "maintenanceElectrical", label: "Electrical", textField: "maintenanceElectricalText" },
    { name: "maintenanceAppliances", label: "Appliances", textField: "maintenanceAppliancesText" },
    { name: "maintenanceDoorsWindows", label: "Doors / Windows", textField: "maintenanceDoorsWindowsText" },
    { name: "maintenanceFlooringWalls", label: "Flooring / Walls", textField: "maintenanceFlooringWallsText" },
    { name: "maintenancePest", label: "Pest Concerns", textField: "maintenancePestText" },
    { name: "maintenanceSafety", label: "Safety Issue", textField: "maintenanceSafetyText" },
  ];

  return (
    <div className="space-y-8">
      <FormSection title="Renovation Details">
        <Controller
          name="renovationDetails"
          control={control}
          render={({ field }) => (
            <TextArea
              label="Renovation Improvements Requested"
              placeholder="Describe all renovation improvements..."
              rows={6}
              value={field.value}
              onChange={(e) => field.onChange(e.target.value)}
              disabled={isReadOnly}
              error={!!errors.renovationDetails}
              errorMessage={errors.renovationDetails?.message}
            />
          )}
        />
      </FormSection>

      <FormSection title="Maintenance Requests">

        <div className="space-y-4">
          {maintenanceFields.map((field) => (
            <div key={field.name} className="space-y-2">
              <Controller
                name={field.name as any}
                control={control}
                render={({ field: checkboxField }) => (
                  <Checkbox
                    name={field.name}
                    label={field.label}
                    checked={checkboxField.value}
                    onChange={checkboxField.onChange}
                    disabled={isReadOnly}
                  />
                )}
              />
              {watch(field.name) && (
                <FormInput
                  name={field.textField as any}
                  control={control}
                  label=""
                  placeholder={`Describe ${field.label} work`}
                  disabled={isReadOnly}
                  error={errors[field.textField as keyof typeof errors]}
                />
              )}
            </div>
          ))}

          <FormInput
            name="maintenanceOtherText"
            control={control}
            label="Other (specify)"
            placeholder="Specify other requests"
            disabled={isReadOnly}
            error={errors.maintenanceOtherText}
          />
        </div>
      </FormSection>
    </div>
  );
}