upload-gltf/components/ModelViewer.tsx

'use client'

import { useEffect, useState } from 'react'

interface ModelViewerProps {
  url: string
  assetUrls: Record<string, string>
  filename: string
  size: string
}

export default function ModelViewer({ url, assetUrls, filename, size }: ModelViewerProps) {
  const canPreview = filename.toLowerCase().endsWith('.gltf')
  const [Scene, setScene] = useState<React.ComponentType<{ url: string; assetUrls: Record<string, string> }> | null>(null)

  useEffect(() => {
    if (!canPreview) return

    let cancel = false

    import('./SceneViewer').then((mod) => {
      if (!cancel) setScene(() => mod.default)
    })

    return () => { cancel = true }
  }, [canPreview])

  if (!canPreview) {
    return (
      <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
        <p className="text-sm text-gray-400 px-6 text-center">
          La preview 3D locale n&apos;est pas disponible pour les dossiers <span className="font-mono">model.gltf</span> avec fichiers associes.
        </p>
      </div>
    )
  }

  if (!Scene) {
    return (
      <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
        <div className="w-6 h-6 border-2 border-gray-500 border-t-gray-300 rounded-full animate-spin" />
      </div>
    )
  }

  return (
    <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden relative">
      <div className="absolute top-3 left-3 z-10 flex items-center gap-2">
        <span className="text-xs text-gray-400 font-mono bg-black-900/60 px-2 py-1 rounded">
          {filename}
        </span>
        <span className="text-xs text-gray-500 bg-black-900/60 px-2 py-1 rounded">
          {size}
        </span>
      </div>
      <Scene url={url} assetUrls={assetUrls} />
    </div>
  )
}