import React, { useCallback, useState } from 'react';
import { UploadIcon } from './icons/UploadIcon';

interface BulkImporterProps {
  onProcess: (files: FileList) => void;
  isProcessing: boolean;
}

export const BulkImporter: React.FC<BulkImporterProps> = ({ onProcess, isProcessing }) => {
  const [isDragging, setIsDragging] = useState(false);

  const handleFiles = (files: FileList | null) => {
    if (files && files.length > 0 && !isProcessing) {
      onProcess(files);
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    handleFiles(e.target.files);
    // Reset input value to allow selecting the same file again
    e.target.value = '';
  };

  const handleDragEnter = useCallback((e: React.DragEvent<HTMLLabelElement>) => {
    e.preventDefault();
    e.stopPropagation();
    if (!isProcessing) setIsDragging(true);
  }, [isProcessing]);

  const handleDragLeave = useCallback((e: React.DragEvent<HTMLLabelElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }, []);

  const handleDrop = useCallback((e: React.DragEvent<HTMLLabelElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    if (!isProcessing && e.dataTransfer.files) {
      handleFiles(e.dataTransfer.files);
    }
  }, [isProcessing, onProcess]);

  const borderColor = isDragging ? 'border-brand-primary' : 'border-gray-300 dark:border-gray-600';
  const bgColor = isDragging ? 'bg-brand-light/50 dark:bg-brand-dark/20' : 'bg-gray-50 dark:bg-gray-800';

  return (
    <div className="flex flex-col items-center justify-center w-full">
        <label
            htmlFor="bulk-file-upload"
            onDragEnter={handleDragEnter}
            onDragOver={handleDragEnter}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            className={`flex flex-col items-center justify-center w-full h-48 border-2 ${borderColor} border-dashed rounded-lg transition-colors duration-300 ${isProcessing ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'}`}
        >
            <div className="flex flex-col items-center justify-center pt-5 pb-6 text-center">
                <UploadIcon className="w-10 h-10 mb-3 text-gray-400" />
                {isProcessing ? (
                     <p className="mb-2 text-sm text-gray-600 dark:text-gray-300 font-semibold">
                        Processing, please wait...
                    </p>
                ) : (
                    <>
                        <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                            <span className="font-semibold text-brand-primary">Click to upload</span> or drag and drop
                        </p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, WEBP, or PDF</p>
                    </>
                )}
            </div>
            <input id="bulk-file-upload" type="file" className="hidden" accept="image/png, image/jpeg, image/webp, application/pdf" onChange={handleFileChange} disabled={isProcessing} multiple />
        </label>
    </div>
  );
};