import React, { useState, useRef } from 'react';
import { CloudUpload } from 'lucide-react';
import logger from '@/utils/logger';

export default function FileUpload({ selectionMessage, onFileSelect, uploadedFileName }) {
  const [localFileName, setLocalFileName] = useState(uploadedFileName || '');
  const fileInputRef = useRef(null); // Utilisation de useRef pour cibler l'input

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setLocalFileName(file.name);
      logger.debug('Fichier sélectionné:', file.name);
      onFileSelect(file); // Appelle la fonction passée en prop
    }
  };

  const handleFileDrop = (e) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file) {
      setLocalFileName(file.name);
      logger.debug('Fichier déposé:', file.name);
      onFileSelect(file); // Appelle la fonction passée en prop
    }
  };

  return (
    <div className="border p-4 rounded-md shadow-md">
      <h3 className="text-lg font-semibold mb-4">{`${selectionMessage}`}</h3>
      <div
        className="border-2 border-dashed border-gray-500 p-6 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-emerald-500"
        onClick={() => fileInputRef.current.click()} // Utilisation de la référence pour ouvrir l'explorateur
        onDragOver={(e) => e.preventDefault()}
        onDrop={handleFileDrop}
      >
        <CloudUpload className="w-12 h-12 text-emerald-500 mb-4" /> {/* Icône de cloud */}
        <input
          type="file"
          accept=".pdf"
          onChange={handleFileChange}
          className="hidden"
          ref={fileInputRef} // Attachement de la référence
        />
        <label htmlFor="fileInput" className="text-center text-gray-500">
          <p className="text-lg font-semibold text-gray-800">Déposez votre fichier ici</p>
          <p className="text-sm text-gray-500 mt-2">ou cliquez pour sélectionner un fichier PDF</p>
        </label>
      </div>
      {localFileName && (
        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
          <CloudUpload className="w-6 h-6 text-emerald-500" />
          <p className="text-sm font-medium text-gray-800">
            <span className="font-semibold">{localFileName}</span>
          </p>
        </div>
      )}
    </div>
  );
}