import { useState, useCallback } from 'react';
import { useDropzone, type FileRejection } from 'react-dropzone';

interface UploadDropzoneProps {
  onFilesSelect: (files: File[]) => void;
  multiple?: boolean;
  accept?: Record<string, string[]>;
  maxSize?: number;
  disabled?: boolean;
}

export function UploadDropzone({
  onFilesSelect,
  multiple = false,
  accept = { 'video/*': ['.mp4', '.mov', '.avi', '.mkv'] },
  maxSize = 1024 * 1024 * 1024, // 1GB
  disabled = false
}: UploadDropzoneProps) {
  const [error, setError] = useState<string | null>(null);

  const onDrop = useCallback((acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
    setError(null);

    if (rejectedFiles.length > 0) {
      const rejection = rejectedFiles[0];
      if (rejection.errors.some((e) => e.code === 'file-too-large')) {
        setError(`File is too large. Maximum size is ${Math.round(maxSize / (1024 * 1024))}MB`);
      } else if (rejection.errors.some((e) => e.code === 'file-invalid-type')) {
        setError('Invalid file type. Please upload a video file.');
      } else {
        setError('File upload failed. Please try again.');
      }
      // Still process any accepted files even if some were rejected
      if (acceptedFiles.length === 0) {
        return;
      }
    }

    if (acceptedFiles.length > 0) {
      onFilesSelect(acceptedFiles);
    }
  }, [onFilesSelect, maxSize]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept,
    maxSize,
    multiple,
    disabled
  });

  return (
    <div className="w-full">
      <div
        {...getRootProps()}
        className={`
          border-2 border-dashed rounded-lg p-8 text-center cursor-pointer
          transition-colors duration-200
          ${isDragActive 
            ? 'border-blue-400 bg-blue-50' 
            : 'border-gray-300 hover:border-gray-400'
          }
          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
          ${error ? 'border-red-300 bg-red-50' : ''}
        `}
      >
        <input {...getInputProps()} />
        
        <div className="space-y-4">
          <div className="mx-auto w-12 h-12 text-gray-400">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
            </svg>
          </div>
          
          {isDragActive ? (
            <p className="text-blue-600 font-medium">
              Drop the video {multiple ? 'files' : 'file'} here
            </p>
          ) : (
            <div>
              <p className="text-gray-600 font-medium">
                Drag and drop {multiple ? 'video files' : 'a video file'} here, or click to select
              </p>
              <p className="text-sm text-gray-500 mt-2">
                Supports MP4, MOV, AVI, MKV up to {Math.round(maxSize / (1024 * 1024))}MB{multiple ? ' each' : ''}
              </p>
            </div>
          )}
        </div>
      </div>
      
      {error && (
        <div className="mt-2 text-sm text-red-600">
          {error}
        </div>
      )}
    </div>
  );
}