import { useState, useCallback, useRef } from 'react';
import { isSupported } from '@/core/format-utils';
import { Badge } from '@/components/ui/badge';
import {
  Upload,
  FileAudio,
  FileImage,
} from 'lucide-react';
import { cn } from '@/lib/utils';

export default function DropZone({
  onFilesAdded,
  disabled,
}: {
  onFilesAdded: (files: File[]) => void;
  disabled?: boolean;
}) {
  const [isDragging, setIsDragging] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleDrag = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  }, []);

  const handleDragIn = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      setIsDragging(true);
    }
  }, []);

  const handleDragOut = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }, []);

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

      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
        const files = Array.from(e.dataTransfer.files).filter(isSupported);
        if (files.length > 0) {
          onFilesAdded(files);
        }
        e.dataTransfer.clearData();
      }
    },
    [onFilesAdded]
  );

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files && e.target.files.length > 0) {
        const files = Array.from(e.target.files).filter(isSupported);
        if (files.length > 0) {
          onFilesAdded(files);
        }
      }
      // Reset input value so the same file can be selected again
      e.target.value = '';
    },
    [onFilesAdded]
  );

  return (
    <div
      className={cn(
        'relative flex flex-col items-center justify-center w-full min-h-[200px] p-8',
        'border-2 border-dashed rounded-xl transition-all duration-300',
        'bg-linear-to-b from-muted/30 to-muted/60',
        isDragging
          ? 'border-primary bg-primary/10 scale-[1.02]'
          : 'border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/80',
        disabled && 'opacity-50 cursor-not-allowed'
      )}
      onDragEnter={handleDragIn}
      onDragLeave={handleDragOut}
      onDragOver={handleDrag}
      onDrop={handleDrop}
      onClick={() => !disabled && inputRef.current?.click()}
    >
      <input
        ref={inputRef}
        type="file"
        multiple
        accept="image/*,audio/*,.heic,.heif"
        onChange={handleChange}
        className="hidden"
        disabled={disabled}
      />

      <div className={cn(
        'flex flex-col items-center gap-3 transition-transform duration-200',
        isDragging && 'scale-110'
      )}>
        <div className="p-4 rounded-full bg-primary/10">
          <Upload className="w-8 h-8 text-primary" />
        </div>
        <div className="text-center">
          <p className="text-lg font-medium">
            {isDragging ? 'Drop files here' : 'Drag & drop files here'}
          </p>
          <p className="text-sm text-muted-foreground mt-1">
            or click to browse
          </p>
        </div>
        <div className="flex gap-2 mt-2">
          <Badge variant="secondary" className="gap-1">
            <FileImage className="w-3 h-3" /> Images
          </Badge>
          <Badge variant="secondary" className="gap-1">
            <FileAudio className="w-3 h-3" /> Audio
          </Badge>
        </div>
      </div>
    </div>
  );
}