import React, { useState, useCallback, useRef } from 'react';
import { FileIcon, XIcon, UploadIcon } from './Icons';

interface FileUploadProps {
  onFileChange: (file: File | null) => void;
}

export const FileUpload: React.FC<FileUploadProps> = ({ onFileChange }) => {
  const [fileName, setFileName] = useState<string | null>(null);
  const [isDragOver, setIsDragOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setFileName(file.name);
      onFileChange(file);
    }
  }, [onFileChange]);

  const handleRemoveFile = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    e.preventDefault();
    setFileName(null);
    onFileChange(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  }, [onFileChange]);

  const onDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragOver(true);
  }, []);

  const onDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragOver(false);
  }, []);

  const onDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) {
      setFileName(file.name);
      onFileChange(file);
    }
  }, [onFileChange]);

  return (
    <div className="w-full">
      {!fileName ? (
        <label
          htmlFor="file-upload"
          onDragOver={onDragOver}
          onDragLeave={onDragLeave}
          onDrop={onDrop}
          className={`
                group relative flex flex-col items-center justify-center w-full h-64 
                rounded-2xl border-2 border-dashed cursor-pointer transition-all duration-300
                ${isDragOver
              ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-900/20 scale-[0.99]'
              : 'border-slate-300 dark:border-slate-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-slate-50/50 dark:hover:bg-slate-800/50'
            }
            `}
        >
          <div className="flex flex-col items-center justify-center pt-5 pb-6 text-center">
            <div className={`
                    p-4 rounded-full mb-4 transition-transform duration-300 group-hover:scale-110 
                    ${isDragOver ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 group-hover:bg-blue-50 group-hover:text-blue-500 dark:group-hover:bg-slate-700'}
                `}>
              <UploadIcon className="w-8 h-8" />
            </div>
            <p className="mb-2 text-lg font-medium text-slate-700 dark:text-slate-200">
              Clique ou arraste seu arquivo aqui
            </p>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              PDF, JPG ou PNG (máx. 10MB)
            </p>
          </div>
          <input
            ref={fileInputRef}
            id="file-upload"
            name="file-upload"
            type="file"
            className="hidden"
            onChange={handleFileSelect}
            accept="image/*,application/pdf"
          />
        </label>
      ) : (
        <div className="group relative w-full p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md transition-all flex items-center justify-between animate-fade-in">
          <div className="flex items-center gap-4 overflow-hidden">
            <div className="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400">
              <FileIcon className="w-6 h-6" />
            </div>
            <div className="flex flex-col min-w-0">
              <span className="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate pr-4">{fileName}</span>
              <span className="text-xs text-green-600 dark:text-green-400 font-medium">Pronto para análise</span>
            </div>
          </div>
          <button
            onClick={handleRemoveFile}
            className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-all"
            title="Remover arquivo"
          >
            <XIcon className="w-5 h-5" />
          </button>
        </div>
      )}
    </div>
  );
};