import { useState } from "react";
import type { UploadedImage } from "~/types/image";
import { ImageUploadService } from "~/services/imageUploadService";
import { captureStructuredError } from "~/utils/sentry";

export const useImageUpload = () => {
  const [uploadedImage, setUploadedImage] = useState<UploadedImage | null>(
    null
  );
  const [isUploading, setIsUploading] = useState(false);

  const uploadImage = async (file: File) => {
    try {
      setIsUploading(true);

      const compressed = await ImageUploadService.compressImage(file);
      const credentials = await ImageUploadService.getUploadCredentials(
        compressed.format
      );
      const imageUrl = await ImageUploadService.uploadImage(
        credentials,
        compressed.file
      );

      setUploadedImage({
        url: imageUrl,
        preview: compressed.preview,
        name: file.name,
        size: compressed.file.size
      });
    } catch (error) {
      alert("Failed to upload image");
      captureStructuredError(error as Error, {
        operation: "imageUpload",
        additionalData: {
          file_name: file.name,
          file_size: file.size,
          file_type: file.type,
        },
      });
    } finally {
      setIsUploading(false);
    }
  };

  const removeImage = () => {
    if (uploadedImage?.preview) {
      URL.revokeObjectURL(uploadedImage.preview);
    }

    setUploadedImage(null);
  };

  const handleFileSelect = () => {
    const input = document.createElement("input");

    input.type = "file";
    input.accept = "image/jpeg,image/jpg,image/webp,image/png,image/heic";

    input.onchange = (e) => {
      const selectedFile = (e.target as HTMLInputElement).files?.[0];

      if (selectedFile) {
        uploadImage(selectedFile);
      }
    };

    input.click();
  };

  return {
    uploadedImage,
    isUploading,
    handleFileSelect,
    removeImage
  };
};