import { Control, FieldErrors, UseFormWatch } from "react-hook-form";
import { Controller } from "react-hook-form";
import FormCheckbox from "@/src/components/form/FormCheckbox";
import FormInput from "@/src/components/form/FormInput";
import FormTextarea from "@/src/components/form/FormTextarea";
import { RMApplicationFormData } from "../schema";
import { maintenanceCategories } from "../constants";
import { useState, useEffect } from "react";
import { deleteTenantMaintenancePhoto } from "@/src/services/web/services";
import FormSection from "@/src/components/form/FormSection";

interface Step3Props {
  control: Control<RMApplicationFormData>;
  errors: FieldErrors<RMApplicationFormData>;
  isReadOnly: boolean;
  watch: UseFormWatch<RMApplicationFormData>;
  photoUrls?: string[];
  photoIds?: number[];
}

export default function Step3({ control, errors, isReadOnly, watch, photoUrls = [], photoIds = [] }: Step3Props) {
  const [existingPhotos, setExistingPhotos] = useState<{ url: string, id?: number }[]>(
    photoUrls.map((url, index) => ({ url, id: photoIds[index] }))
  );
  const [newPhotoFiles, setNewPhotoFiles] = useState<File[]>([]);
  const [newPhotoPreviews, setNewPhotoPreviews] = useState<string[]>([]);

  useEffect(() => {
    setExistingPhotos(photoUrls.map((url, index) => ({ url, id: photoIds[index] })));
  }, [photoUrls, photoIds]);

  // Cleanup preview URLs on unmount to prevent memory leaks
  useEffect(() => {
    return () => {
      newPhotoPreviews.forEach(url => URL.revokeObjectURL(url));
    };
  }, [newPhotoPreviews]);

  const handleFileChange = (files: FileList | null, onChange: (files: File[]) => void) => {
    if (!files) return;

    const fileArray = Array.from(files);
    
    // Replace existing files instead of appending to avoid duplicates
    setNewPhotoFiles(fileArray);
    onChange(fileArray);

    // Clean up previous preview URLs to prevent memory leaks
    newPhotoPreviews.forEach(url => URL.revokeObjectURL(url));
    
    const urls = fileArray.map(file => URL.createObjectURL(file));
    setNewPhotoPreviews(urls);
  };

  const removeExistingPhoto = async (index: number) => {
    const photo = existingPhotos[index];

    if (photo.id) {
      try {
        await deleteTenantMaintenancePhoto(photo.id);
      } catch (error) {
        console.error("Error deleting photo:", error);
        alert("Failed to delete photo");
        return;
      }
    }

    const newExisting = existingPhotos.filter((_, i) => i !== index);
    setExistingPhotos(newExisting);
  };

  const removeNewPhoto = (index: number, onChange: (files: File[]) => void) => {
    // Revoke the URL for the removed photo to prevent memory leaks
    if (newPhotoPreviews[index]) {
      URL.revokeObjectURL(newPhotoPreviews[index]);
    }
    
    const newFiles = newPhotoFiles.filter((_, i) => i !== index);
    setNewPhotoFiles(newFiles);
    onChange(newFiles);

    const newPreviews = newPhotoPreviews.filter((_, i) => i !== index);
    setNewPhotoPreviews(newPreviews);
  };

  return (
    <div className="space-y-6">

      <FormSection
        title="Maintenance Issues"
      >

        <div className="space-y-4">
          {maintenanceCategories.map((category) => {
            const isChecked = watch(category.key as keyof RMApplicationFormData);

            return (
              <div key={category.key} className="space-y-2">
                <FormCheckbox
                  name={category.key}
                  control={control}
                  label={category.label}
                  disabled={isReadOnly}
                  error={errors[category.key as keyof RMApplicationFormData] as any}
                />

                {isChecked && (
                  <div className="ml-7">
                    <FormInput
                      name={category.textKey}
                      control={control}
                      // label={`${category.label} Details`}
                      placeholder={`Describe the ${category.label.toLowerCase()} issue...`}
                      disabled={isReadOnly}
                      error={errors[category.textKey as keyof RMApplicationFormData] as any}
                    />
                  </div>
                )}
              </div>
            );
          })}

          <FormInput
            name="maintenanceOtherText"
            control={control}
            label="Other Issues"
            placeholder="Describe any other maintenance issues..."
            className="mb-5"
            disabled={isReadOnly}
            error={errors.maintenanceOtherText}
          />
        </div>

        <FormTextarea
          name="maintenanceDescription"
          control={control}
          label="Detailed Description"
          placeholder="Please provide a detailed description of the maintenance issue..."
          rows={4}
          required
          disabled={isReadOnly}
          error={errors.maintenanceDescription}
        />

        <div>



          <Controller
            name="photos"
            control={control}
            render={({ field }) => (
              <div className="space-y-4">
                {!isReadOnly && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700 my-3">
                      Upload Photos (Optional)
                    </label>
                    {/* <p className="text-sm text-gray-600 mb-4">Upload photos of the maintenance issue to help our team understand the problem better.</p> */}
                    <div className="space-y-2">
                      <input
                        type="file"
                        multiple
                        accept="image/*"
                        onChange={(e) => handleFileChange(e.target.files, field.onChange)}
                        className="block w-full cursor-pointer text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100"
                      />
                      {newPhotoFiles.length > 0 && (
                        <button
                          type="button"
                          onClick={() => {
                            // Clear all new photos
                            newPhotoPreviews.forEach(url => URL.revokeObjectURL(url));
                            setNewPhotoFiles([]);
                            setNewPhotoPreviews([]);
                            field.onChange([]);
                          }}
                          className="text-sm text-red-600 hover:text-red-800 underline"
                        >
                          Clear all new photos
                        </button>
                      )}
                    </div>
                    <p className="mt-1 text-sm text-gray-500">
                      You can upload multiple photos. Supported formats: JPG, PNG. Selecting new files will replace previously selected files.
                    </p>
                  </div>
                )}

                {existingPhotos.length > 0 && (
                  <div>
                    <h4 className="text-sm font-medium text-gray-700 mb-3">
                      Existing Photos
                    </h4>
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                      {existingPhotos.map((photo, index) => (
                        <div key={`existing-${index}`} className="relative">
                          <img
                            src={photo.url}
                            alt={`Existing ${index + 1}`}
                            className="w-full h-32 object-cover rounded-lg border border-gray-200"
                          />
                          {!isReadOnly && (
                            <button
                              type="button"
                              onClick={() => removeExistingPhoto(index)}
                              className="absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600"
                            >
                              ×
                            </button>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {newPhotoPreviews.length > 0 && (
                  <div>
                    <h4 className="text-sm font-medium text-gray-700 mb-3">
                      New Photos
                    </h4>
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                      {newPhotoPreviews.map((url, index) => (
                        <div key={`new-${index}`} className="relative">
                          <img
                            src={url}
                            alt={`New ${index + 1}`}
                            className="w-full h-32 object-cover rounded-lg border border-gray-200"
                          />
                          {!isReadOnly && (
                            <button
                              type="button"
                              onClick={() => removeNewPhoto(index, field.onChange)}
                              className="absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600"
                            >
                              ×
                            </button>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {errors.photos && (
                  <p className="text-sm text-red-600">{errors.photos.message}</p>
                )}
              </div>
            )}
          />
        </div>
      </FormSection>
    </div>
  );
}