upload-gltf/components/upload/FolderCard.tsx

import dynamic from 'next/dynamic'
import type { FolderEntry } from '@/lib/client-types'
import { formatBytes } from '@/lib/format-bytes'
import { SpinnerIcon, CheckIcon, XIcon, ChevronIcon, WarningIcon } from '@/components/ui/icons'
import DriveStatusLine from './DriveStatusLine'
import WarningBanner from './WarningBanner'
import TextureDiagnosticsPanel from './TextureDiagnosticsPanel'

const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false })

interface FolderCardProps {
  entry: FolderEntry
  index: number
  onToggleViewer: (index: number) => void
  onRemove: (index: number) => void
}

export default function FolderCard({ entry, index, onToggleViewer, onRemove }: FolderCardProps) {
  return (
    <div>
      <div className="flex items-center gap-3 bg-black-800 border border-white/20 rounded-xl px-4 py-3">
        <div className="shrink-0">
          {entry.status === 'success' ? (
            <div className="w-8 h-8 rounded-full bg-green-900/30 flex items-center justify-center">
              <CheckIcon className="w-4 h-4 text-green-400" />
            </div>
          ) : entry.status === 'error' ? (
            <div className="w-8 h-8 rounded-full bg-red-900/30 flex items-center justify-center">
              <XIcon className="w-4 h-4 text-red-400" />
            </div>
          ) : entry.status === 'uploading' ? (
            <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
              <SpinnerIcon className="w-4 h-4 text-gray-300" />
            </div>
          ) : (
            <button
              onClick={() => entry.modelUrl ? onToggleViewer(index) : undefined}
              aria-label={entry.viewerOpen ? 'Fermer la preview 3D' : 'Ouvrir la preview 3D'}
              className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition ${
                entry.modelUrl ? 'bg-black-700 hover:bg-gray-700 cursor-pointer' : 'bg-black-700 cursor-default'
              }`}
            >
              <ChevronIcon className={`w-4 h-4 text-gray-500 transition-transform ${entry.viewerOpen ? 'rotate-180' : ''}`} />
            </button>
          )}
        </div>

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-200 font-mono truncate">{entry.folderName}/</span>
            <span className="shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-gray-700 text-gray-300">Dossier</span>
          </div>
          <div className="flex items-center gap-2 mt-0.5">
            <span className="text-xs text-gray-500">model : {entry.modelFile.name}</span>
            {entry.status === 'error' && entry.error && (
              <span className="text-xs text-red-400 truncate">{entry.error}</span>
            )}
            {entry.status === 'success' && entry.filename && (
              <span className="text-xs text-green-400 font-mono">Drive + Git OK</span>
            )}
          </div>

          {entry.status !== 'success' && entry.driveStatus && entry.driveStatus !== 'pending' && (
            <DriveStatusLine driveStatus={entry.driveStatus} driveError={entry.driveError} />
          )}

          {entry.uploadWarning && (
            <div className="mt-1.5 flex items-start gap-1.5 text-xs text-yellow-400">
              <WarningIcon className="mt-0.5 h-3.5 w-3.5 shrink-0" />
              <span className="line-clamp-2">{entry.uploadWarning}</span>
            </div>
          )}

          {entry.status === 'uploading' && (
            <div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
              <div
                className="h-full bg-gray-400 rounded-full transition-all duration-200"
                style={{ width: `${entry.progress}%` }}
              />
            </div>
          )}
        </div>

        {entry.status !== 'uploading' && (
          <button
            onClick={() => onRemove(index)}
            aria-label="Supprimer le dossier"
            className="shrink-0 text-gray-600 hover:text-red-400 transition"
          >
            <XIcon className="w-4 h-4" />
          </button>
        )}
      </div>

      {entry.status !== 'success' && (
        <WarningBanner warnings={entry.warnings} />
      )}

      {entry.modelUrl && entry.status !== 'success' && (
        <div
          className={`transition-all duration-300 ease-in-out overflow-hidden ${
            entry.viewerOpen ? 'max-h-[500px] opacity-100 mt-2' : 'max-h-0 opacity-0 pointer-events-none'
          }`}
        >
          <div className="grid gap-2 lg:grid-cols-[18rem_minmax(0,1fr)] lg:items-start">
            <TextureDiagnosticsPanel report={entry.textureReport} />
            <ModelViewer
              url={entry.modelUrl}
              assetUrls={entry.assetUrls}
              filename={entry.modelFile.name}
              size={formatBytes(entry.modelFile.size)}
            />
          </div>
        </div>
      )}
    </div>
  )
}