import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  dropzone: {
    border: '2px dashed #cccccc',
    borderRadius: '8px',
    padding: '40px 20px',
    textAlign: 'center',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    backgroundColor: '#fafafa',
    minHeight: '200px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    '&:hover': {
      borderColor: '#999999',
      backgroundColor: '#f0f0f0'
    }
  },
  dropzoneActive: {
    borderColor: '#4CAF50',
    backgroundColor: '#e8f5e8'
  },
  dropzoneText: {
    fontSize: '18px',
    fontFamily: 'roboto',
    color: '#666666',
    margin: '10px 0'
  },
  dropzoneSubtext: {
    fontSize: '14px',
    color: '#999999',
    fontFamily: 'roboto'
  },
  fileCount: {
    fontSize: '16px',
    color: '#4CAF50',
    fontWeight: 'bold',
    marginTop: '10px'
  }
});

function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
  const classes = useStyles();

  const onDrop = useCallback((acceptedFiles) => {
    // Filter nur Bilddateien
    const imageFiles = acceptedFiles.filter(file => 
      file.type.startsWith('image/')
    );
    
    if (imageFiles.length !== acceptedFiles.length) {
      alert('Nur Bilddateien sind erlaubt!');
    }
    
    onImagesSelected(imageFiles);
  }, [onImagesSelected]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.bmp', '.webp']
    },
    multiple: true,
    maxSize: 10 * 1024 * 1024 // 10MB pro Datei
  });

  return (
    <div 
      {...getRootProps()} 
      className={`${classes.dropzone} ${isDragActive ? classes.dropzoneActive : ''}`}
    >
      <input {...getInputProps()} />
      
      <div className={classes.dropzoneText}>
        {isDragActive ? 
          'Bilder hierher ziehen...' : 
          'Mehrere Bilder hier hinziehen oder klicken zum Auswählen'
        }
      </div>
      
      <div className={classes.dropzoneSubtext}>
        Unterstützte Formate: JPG, PNG, GIF, WebP (max. 10MB pro Datei)
      </div>
      
      {selectedImages.length > 0 && (
        <div className={classes.fileCount}>
          📸 {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} ausgewählt
        </div>
      )}
    </div>
  );
}

export default MultiImageDropzone;