import React from 'react';
import {useDropzone} from 'react-dropzone';

function DragOverlay() {
  const {
    getRootProps,
    getInputProps,
    isDragGlobal,
    isDragActive,
    isDragAccept,
    isDragReject,
    acceptedFiles
  } = useDropzone({
    accept: {
      'image/*': ['.png', '.jpg', '.jpeg', '.gif']
    }
  });

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div style={{ minHeight: '100vh', padding: '20px' }}>
      {isDragGlobal && !isDragActive && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 123, 255, 0.1)',
          border: '3px dashed #007bff',
          pointerEvents: 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000,
        }}>
          <h2 style={{ color: '#007bff' }}>Drop files anywhere on this page...</h2>
        </div>
      )}

      <section className="container">
        <div {...getRootProps({
          className: 'dropzone',
          style: {
            border: '2px dashed #ccc',
            borderRadius: '8px',
            padding: '40px',
            textAlign: 'center',
            backgroundColor: isDragAccept ? '#d4edda' : isDragReject ? '#f8d7da' : 'white',
            transition: 'all 0.2s',
          }
        })}>
          <input {...getInputProps()} />
          {isDragGlobal && !isDragActive && (
            <p style={{ color: '#007bff', fontWeight: 'bold' }}>
              🌐 Drag detected on page!
            </p>
          )}
          
          {isDragActive && !isDragAccept && !isDragReject && (
            <p style={{ color: '#6c757d' }}>Drop files here...</p>
          )}
          
          {isDragAccept && (
            <p style={{ color: '#28a745', fontWeight: 'bold' }}>
              ✅ Drop to upload these files
            </p>
          )}
          
          {isDragReject && (
            <p style={{ color: '#dc3545', fontWeight: 'bold' }}>
              ❌ Some files will be rejected
            </p>
          )}
          
          {!isDragGlobal && !isDragActive && (
            <p>Drag 'n' drop images here, or click to select files</p>
          )}
        </div>

        <aside>
          <h4>Accepted files</h4>
          <ul>{files}</ul>
        </aside>
      </section>
    </div>
  );
}

<DragOverlay />