import React from 'react';
import { Box, Typography } from '@mui/material';

function MultiImageDropzone({ onImagesSelected, selectedImages = [], hasError = false }) {

  const handleFiles = (files) => {
    // Filter nur Bilddateien
    const imageFiles = Array.from(files).filter(file => 
      file.type.startsWith('image/')
    );
    
    if (imageFiles.length !== files.length) {
      alert('Nur Bilddateien sind erlaubt!');
    }
    
    if (imageFiles.length > 0) {
      console.log('Selected images:', imageFiles);
      onImagesSelected(imageFiles);
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragEnter = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    
    const files = e.dataTransfer.files;
    handleFiles(files);
  };

  const handleFileInputChange = (e) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      handleFiles(files);
    }
  };

  const handleClick = () => {
    const fileInput = document.getElementById('multi-file-input');
    if (fileInput) {
      fileInput.click();
    }
  };

  const dropzoneSx = {
    border: `2px dashed ${hasError ? '#d32f2f' : '#cccccc'}`,
    borderRadius: '8px',
    padding: '40px 20px',
    textAlign: 'center',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    backgroundColor: hasError ? '#fff5f5' : '#fafafa',
    minHeight: '200px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    '&:hover': {
      borderColor: hasError ? '#b71c1c' : '#999999',
      backgroundColor: hasError ? '#ffebee' : '#f0f0f0'
    }
  };

  const dropzoneTextSx = {
    fontSize: '18px',
    color: '#666666',
    margin: '10px 0'
  };

  const dropzoneSubtextSx = {
    fontSize: '14px',
    color: '#999999'
  };

  const fileCountSx = {
    fontSize: '16px',
    color: '#4CAF50',
    fontWeight: 'bold',
    marginTop: '10px'
  };

  return (
    <Box>
      <Box
        sx={dropzoneSx}
        onDragOver={handleDragOver}
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={handleClick}
      >
        <Typography sx={dropzoneTextSx}>
          Mehrere Bilder hier hinziehen oder klicken zum Auswählen
        </Typography>

        <Typography sx={dropzoneSubtextSx}>
          Unterstützte Formate: JPG, PNG, GIF, WebP (max. 10MB pro Datei)
        </Typography>

        {selectedImages.length > 0 && (
          <Typography sx={fileCountSx}>
            ✅ {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} ausgewählt
          </Typography>
        )}
      </Box>

      <input
        id="multi-file-input"
        type="file"
        multiple
        accept="image/*"
        onChange={handleFileInputChange}
        style={{ display: 'none' }}
      />
    </Box>
  );
}

export default MultiImageDropzone;