import React from 'react';
import {
  Download,
  FileText,
  Image,
  Film,
  Music,
  Archive,
  AlertCircle,
} from 'lucide-react';
import { getSecureFileUrl } from '@/utils/fileUrl';

const FileAttachment = ({
  fileName,
  fileSize,
  fileType,
  fileUrl,
  onDownload = null,
}) => {
  const secureUrl = getSecureFileUrl(fileUrl);
  // Obtenir l'icône en fonction du type de fichier
  const getFileIcon = (type) => {
    if (type.startsWith('image/')) {
      return <Image className="w-6 h-6 text-blue-500" />;
    }
    if (type.startsWith('video/')) {
      return <Film className="w-6 h-6 text-purple-500" />;
    }
    if (type.startsWith('audio/')) {
      return <Music className="w-6 h-6 text-green-500" />;
    }
    if (type.includes('pdf')) {
      return <FileText className="w-6 h-6 text-red-500" />;
    }
    if (type.includes('zip') || type.includes('rar')) {
      return <Archive className="w-6 h-6 text-yellow-500" />;
    }
    return <FileText className="w-6 h-6 text-gray-500" />;
  };

  // Formater la taille du fichier
  const formatFileSize = (bytes) => {
    if (!bytes) return '';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  // Gérer le téléchargement
  const handleDownload = () => {
    if (onDownload) {
      onDownload();
    } else if (secureUrl) {
      const link = document.createElement('a');
      link.href = secureUrl;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  // Vérifier si c'est une image pour afficher un aperçu
  const isImage = fileType && fileType.startsWith('image/');

  return (
    <div className="max-w-sm">
      {isImage && secureUrl ? (
        // Affichage pour les images
        <div className="relative group">
          <img
            src={secureUrl}
            alt={fileName}
            className="max-w-full h-auto rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
            onClick={() => window.open(secureUrl, '_blank')}
          />
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all rounded-lg flex items-center justify-center">
            <button
              onClick={handleDownload}
              className="opacity-0 group-hover:opacity-100 bg-white bg-opacity-90 hover:bg-opacity-100 rounded-full p-2 transition-all"
            >
              <Download className="w-4 h-4 text-gray-700" />
            </button>
          </div>
          {fileName && (
            <p className="mt-1 text-xs text-gray-500 truncate">{fileName}</p>
          )}
        </div>
      ) : (
        // Affichage pour les autres fichiers
        <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors">
          <div className="flex-shrink-0">{getFileIcon(fileType)}</div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-gray-900 truncate">
              {fileName || 'Fichier sans nom'}
            </p>
            {fileSize && (
              <p className="text-xs text-gray-500">
                {formatFileSize(fileSize)}
              </p>
            )}
          </div>
          <button
            onClick={handleDownload}
            className="flex-shrink-0 p-1 text-gray-400 hover:text-gray-600 transition-colors"
            title="Télécharger"
          >
            <Download className="w-4 h-4" />
          </button>
        </div>
      )}
    </div>
  );
};

export default FileAttachment;
