Nhost Storage

const STORAGE_BASE_URL = `https://${nhostSubdomain}.storage.${nhostRegion}.nhost.run/v1/files`;

import { nhost } from '../api/client';

const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB

async function uploadFile(file: File): Promise<string> {
  // 1. Valider le fichier
  if (file.size > MAX_FILE_SIZE) {
    throw new Error('Fichier trop volumineux (max 2MB)');
  }
  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
    throw new Error('Format non supporté. Utilisez JPEG, PNG, GIF ou WebP');
  }

  // 2. Upload vers Nhost Storage
  const { error, fileMetadata } = await nhost.storage.upload({
    file,
    bucketId: 'default',
  });

  if (error) throw new Error(`Erreur upload: ${error.message}`);

  // 3. Construire l'URL publique
  const fileId = fileMetadata.id;
  return `${STORAGE_BASE_URL}/${fileId}`;
}

const handleLogoUpload = async (file: File) => {
  try {
    const logoUrl = await uploadFile(file);

    // Sauvegarder l'URL dans la table tools via GraphQL
    await toolsApi.update(toolId, { logo_url: logoUrl });

    toast.success('Logo uploadé avec succès');
  } catch (error) {
    toast.error(error.message);
  }
};

// L'URL est stockée dans tool.logo_url
<img src={tool.logo_url} alt={`Logo ${tool.name}`} loading="lazy" />

function ToolLogo({ url, name, size = 'md' }) {
  const [error, setError] = useState(false);

  if (!url || error) {
    // Fallback : initiales du nom
    return (
      <div className="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center">
        <span className="text-indigo-600 font-semibold">
          {name.charAt(0).toUpperCase()}
        </span>
      </div>
    );
  }

  return (
    <img
      src={url}
      alt={`Logo ${name}`}
      className="w-12 h-12 rounded-lg object-cover"
      onError={() => setError(true)}
      loading="lazy"
    />
  );
}