import { useRef, useState } from "react";
import "../../styles/ImageUploadModal.css";

export default function ImageUploadModal({ itemName, onConfirm, onSkip, onCancel }) {
  const [selectedImage, setSelectedImage] = useState(null);
  const [imagePreview, setImagePreview] = useState(null);
  const cameraInputRef = useRef(null);
  const galleryInputRef = useRef(null);

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedImage(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const removeImage = () => {
    setSelectedImage(null);
    setImagePreview(null);
  };

  const handleConfirm = () => {
    onConfirm(selectedImage);
  };

  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    }
  };

  const handleCameraClick = () => {
    cameraInputRef.current?.click();
  };

  const handleGalleryClick = () => {
    galleryInputRef.current?.click();
  };

  return (
    <div className="image-upload-modal-overlay" onClick={handleCancel}>
      <div className="image-upload-modal" onClick={(e) => e.stopPropagation()}>
        <h2>Add Image for "{itemName}"</h2>
        <p className="image-upload-subtitle">This is a new item. Would you like to add a verification image?</p>

        <div className="image-upload-content">
          {!imagePreview ? (
            <div className="image-upload-options">
              <button onClick={handleCameraClick} className="image-upload-option-btn camera">
                📷 Use Camera
              </button>
              <button onClick={handleGalleryClick} className="image-upload-option-btn gallery">
                🖼️ Choose from Gallery
              </button>
            </div>
          ) : (
            <div className="modal-image-preview">
              <img src={imagePreview} alt="Preview" />
              <button type="button" onClick={removeImage} className="modal-remove-image">
                ×
              </button>
            </div>
          )}
        </div>

        <input
          ref={cameraInputRef}
          type="file"
          accept="image/*"
          capture="environment"
          onChange={handleImageChange}
          style={{ display: "none" }}
        />

        <input
          ref={galleryInputRef}
          type="file"
          accept="image/*"
          onChange={handleImageChange}
          style={{ display: "none" }}
        />

        <div className="image-upload-actions">
          <button onClick={handleCancel} className="image-upload-cancel">
            Cancel
          </button>
          <button onClick={onSkip} className="image-upload-skip">
            Skip
          </button>
          <button onClick={handleConfirm} className="image-upload-confirm" disabled={!selectedImage}>
            {selectedImage ? "Add with Image" : "Select an Image"}
          </button>
        </div>
      </div>
    </div>
  );
}