import { Control, FieldErrors } from "react-hook-form";
import { Controller } from "react-hook-form";
import SignatureBox from "@/src/components/admin/SignatureBox";
import FormInput from "@/src/components/form/FormInput";
import { RMApplicationFormData } from "../schema";

interface Step7Props {
  control: Control<RMApplicationFormData>;
  errors: FieldErrors<RMApplicationFormData>;
  isReadOnly: boolean;
}

export default function Step5({ control, errors, isReadOnly }: Step7Props) {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-semibold text-gray-900 mb-2">Signature</h2>
        <p className="text-gray-600">Please sign below to submit your maintenance request.</p>
      </div>

      <div className="bg-gray-50 p-6 rounded-lg">
        <h3 className="text-lg font-medium text-gray-900 mb-4">Tenant Certification</h3>
        <p className="text-sm text-gray-700 mb-4">
          I certify that the information provided in this maintenance request is true and accurate. 
          I understand that this request will be processed according to the maintenance policies 
          and procedures outlined in my lease agreement.
        </p>
        
        <div className="space-y-4">
          <Controller
            name="tenantSignature"
            control={control}
            render={({ field }) => (
              <SignatureBox
                title="Tenant Signature"
                value={field.value  || ""}
                onChange={field.onChange}
                error={errors.tenantSignature?.message}
                readOnly={isReadOnly}
              />
            )}
          />

          <FormInput
            name="signerLegalName"
            control={control}
            label="Legal Name of Signer"
            placeholder="Enter your full legal name"
            required
            disabled={isReadOnly}
            error={errors.signerLegalName}
          />

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Date & Time
            </label>
            <p className="text-sm text-gray-600">
              {new Date().toLocaleString()}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}