'use client'

import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { Stage, OrbitControls } from '@react-three/drei'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

function resolveAssetUrl(requestedUrl: string, assetUrls: Record<string, string>) {
  if (requestedUrl.startsWith('blob:') || requestedUrl.startsWith('data:')) {
    return requestedUrl
  }

  const cleanUrl = decodeURIComponent(requestedUrl.split(/[?#]/)[0] || '')
  const filename = cleanUrl.split(/[\\/]/).pop()?.toLowerCase()

  return filename ? assetUrls[filename] || requestedUrl : requestedUrl
}

function Model({ url, assetUrls }: { url: string; assetUrls: Record<string, string> }) {
  const { scene } = useLoader(GLTFLoader, url, (loader) => {
    loader.manager.setURLModifier((requestedUrl) => resolveAssetUrl(requestedUrl, assetUrls))
  })

  return <primitive object={scene} />
}

export default function SceneViewer({ url, assetUrls }: { url: string; assetUrls: Record<string, string> }) {
  return (
    <Canvas dpr={[1, 2]} camera={{ fov: 50 }}>
      <Suspense fallback={null}>
        <Stage environment="city" intensity={0.6} adjustCamera={1.2}>
          <Model url={url} assetUrls={assetUrls} />
        </Stage>
      </Suspense>
      <OrbitControls makeDefault autoRotate autoRotateSpeed={0.5} />
    </Canvas>
  )
}