veza/apps/web/src/components/upload/FileUploadZone.tsx

import React, { useCallback, useState } from 'react';
import { UploadCloud } from 'lucide-react';
import { useToast } from '../../context/ToastContext';

interface FileUploadZoneProps {
  onFilesSelected: (files: File[]) => void;
  acceptedFormats?: string[];
  maxSizeInMB?: number;
}

export const FileUploadZone: React.FC<FileUploadZoneProps> = ({ 
  onFilesSelected, 
  acceptedFormats = ['.wav', '.mp3', '.aiff', '.flac', '.zip'], 
  maxSizeInMB = 500 
}) => {
  const { addToast } = useToast();
  const [isDragging, setIsDragging] = useState(false);

  const validateFile = (file: File): boolean => {
    // Check size
    if (file.size > maxSizeInMB * 1024 * 1024) {
      addToast(`File ${file.name} exceeds ${maxSizeInMB}MB limit`, 'error');
      return false;
    }
    // Check extension (simple check)
    const ext = `.${  file.name.split('.').pop()?.toLowerCase()}`;
    if (!acceptedFormats.includes(ext)) {
      addToast(`Format ${ext} not supported for ${file.name}`, 'error');
      return false;
    }
    return true;
  };

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    
    const droppedFiles = Array.from(e.dataTransfer.files);
    const validFiles = droppedFiles.filter(validateFile);
    
    if (validFiles.length > 0) {
      onFilesSelected(validFiles);
    }
  }, [onFilesSelected]);

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const selectedFiles = Array.from(e.target.files);
      const validFiles = selectedFiles.filter(validateFile);
      if (validFiles.length > 0) {
        onFilesSelected(validFiles);
      }
    }
  };

  return (
    <div 
      onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
      onDragLeave={() => setIsDragging(false)}
      onDrop={handleDrop}
      className={`
        border-2 border-dashed rounded-xl p-10 flex flex-col items-center justify-center text-center transition-all duration-300 group cursor-pointer
        ${isDragging 
          ? 'border-kodo-cyan bg-kodo-cyan/10 scale-[1.02]' 
          : 'border-kodo-steel/50 bg-kodo-ink/30 hover:bg-kodo-ink/50 hover:border-kodo-cyan/50'}
      `}
    >
      <input 
        type="file" 
        multiple 
        className="hidden" 
        id="file-upload-input"
        onChange={handleFileInput}
        accept={acceptedFormats.join(',')}
      />
      <label htmlFor="file-upload-input" className="cursor-pointer w-full flex flex-col items-center">
        <div className={`
          w-20 h-20 rounded-full flex items-center justify-center mb-6 transition-all duration-300 shadow-lg
          ${isDragging ? 'bg-kodo-cyan text-black scale-110' : 'bg-kodo-slate text-kodo-cyan group-hover:scale-110 group-hover:bg-kodo-steel'}
        `}>
          <UploadCloud className="w-10 h-10" />
        </div>
        
        <h3 className="text-2xl font-display font-bold text-white mb-2">
          {isDragging ? 'Drop Files Here' : 'Drag & Drop or Click'}
        </h3>
        <p className="text-gray-400 mb-6 max-w-sm">
          Upload audio stems, project archives, or sample packs.
        </p>
        
        <div className="flex flex-wrap justify-center gap-2 max-w-md">
          {acceptedFormats.map(fmt => (
            <span key={fmt} className="px-2 py-1 bg-black/30 rounded text-[10px] font-mono text-gray-500 border border-white/5 uppercase">
              {fmt.replace('.', '')}
            </span>
          ))}
        </div>
        <p className="mt-4 text-[10px] text-gray-600">Max file size: {maxSizeInMB}MB</p>
      </label>
    </div>
  );
};