import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Upload, File, Image, Music, X } from 'lucide-react';
import { validateFile, formatFileSize } from '../../utils/fileValidation';

const FileUpload = ({ onFileSelect, multiple = false, acceptedTypes = [] }) => {
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach(file => {
      try {
        validateFile(file);
        onFileSelect(file);
      } catch (error) {
        alert(`Error with file ${file.name}: ${error.message}`);
      }
    });
  }, [onFileSelect]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    multiple,
    accept: acceptedTypes.length > 0 ? acceptedTypes.reduce((acc, type) => {
      acc[type] = [];
      return acc;
    }, {}) : undefined
  });

  const getFileIcon = (file) => {
    if (file.type.startsWith('image/')) return <Image className="w-8 h-8" />;
    if (file.type.startsWith('audio/')) return <Music className="w-8 h-8" />;
    return <File className="w-8 h-8" />;
  };

  return (
    <div
      {...getRootProps()}
      className={`file-upload-zone ${isDragActive ? 'active' : ''}`}
    >
      <input {...getInputProps()} />
      
      <div className="text-center">
        <Upload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
        
        {isDragActive ? (
          <p className="text-lg font-medium text-primary-600 dark:text-primary-400">
            Drop the files here...
          </p>
        ) : (
          <>
            <p className="text-lg font-medium text-gray-900 dark:text-white mb-2">
              Drag & drop files here
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              or click to select files
            </p>
          </>
        )}
        
        <div className="mt-4 text-xs text-gray-500 dark:text-gray-400">
          Supports: Images, Audio, PDF, Text files (Max: 50MB)
        </div>
      </div>
    </div>
  );
};

export default FileUpload;