audio-ui/components/editor/FileUpload.tsx

'use client';

import * as React from 'react';
import { Upload, Music } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { isSupportedAudioFormat } from '@/lib/audio/decoder';

export interface FileUploadProps {
  onFileSelect: (file: File) => void;
  className?: string;
}

export function FileUpload({ onFileSelect, className }: FileUploadProps) {
  const [isDragging, setIsDragging] = React.useState(false);
  const fileInputRef = React.useRef<HTMLInputElement>(null);

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);

    const files = Array.from(e.dataTransfer.files);
    const audioFile = files.find(isSupportedAudioFormat);

    if (audioFile) {
      onFileSelect(audioFile);
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file && isSupportedAudioFormat(file)) {
      onFileSelect(file);
    }
  };

  const handleClick = () => {
    fileInputRef.current?.click();
  };

  return (
    <div
      className={cn(
        'relative flex flex-col items-center justify-center w-full p-8 border-2 border-dashed rounded-lg transition-colors cursor-pointer',
        isDragging
          ? 'border-primary bg-primary/10'
          : 'border-border hover:border-primary/50 hover:bg-accent/50',
        className
      )}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
      onClick={handleClick}
    >
      <input
        ref={fileInputRef}
        type="file"
        accept="audio/*"
        onChange={handleFileChange}
        className="hidden"
      />

      <div className="flex flex-col items-center gap-4">
        {isDragging ? (
          <Upload className="h-12 w-12 text-primary animate-pulseSubtle" />
        ) : (
          <Music className="h-12 w-12 text-muted-foreground" />
        )}

        <div className="text-center">
          <p className="text-lg font-medium text-foreground">
            {isDragging ? 'Drop your audio file here' : 'Upload Audio File'}
          </p>
          <p className="text-sm text-muted-foreground mt-1">
            Click to browse or drag and drop
          </p>
          <p className="text-xs text-muted-foreground mt-2">
            Supported formats: WAV, MP3, OGG, FLAC, AAC, M4A
          </p>
        </div>
      </div>
    </div>
  );
}