import { Suspense, useEffect, useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'
import { Loader2, Box, RefreshCw } from 'lucide-react'
import { toast } from 'sonner'
import { getMediaAssets } from '../../api/media'
import { generateGltfGeometry } from '../../api/cad'
import { useAuthStore } from '../../store/auth'

function GlbModel({ url }: { url: string }) {
  const { scene } = useGLTF(url)
  return <primitive object={scene} />
}

export default function InlineCadViewer({
  cadFileId,
  thumbnailUrl,
}: {
  cadFileId: string
  thumbnailUrl?: string | null
}) {
  const token = useAuthStore((s) => s.token)
  const qc = useQueryClient()
  const [glbBlobUrl, setGlbBlobUrl] = useState<string | null>(null)
  const [loadingGlb, setLoadingGlb] = useState(false)
  const [generating, setGenerating] = useState(false)

  const { data: gltfAssets } = useQuery({
    queryKey: ['media-assets', cadFileId, 'gltf_geometry'],
    queryFn: () => getMediaAssets({ cad_file_id: cadFileId, asset_types: ['gltf_geometry'] }),
    staleTime: 30_000,
    refetchInterval: generating ? 4_000 : false,
  })

  // Stop polling once asset appears
  useEffect(() => {
    if (generating && gltfAssets && gltfAssets.length > 0) setGenerating(false)
  }, [generating, gltfAssets])

  const latestAsset = gltfAssets?.[0]
  const downloadUrl = latestAsset?.download_url

  // Fetch GLB with auth when download URL is available
  useEffect(() => {
    if (!downloadUrl || !token) return
    setLoadingGlb(true)
    let blobUrl = ''
    fetch(downloadUrl, { headers: { Authorization: `Bearer ${token}` } })
      .then((r) => r.blob())
      .then((blob) => {
        blobUrl = URL.createObjectURL(blob)
        setGlbBlobUrl(blobUrl)
      })
      .catch(() => toast.error('Failed to load 3D model'))
      .finally(() => setLoadingGlb(false))
    return () => {
      if (blobUrl) URL.revokeObjectURL(blobUrl)
    }
  }, [downloadUrl, token])

  const generateMut = useMutation({
    mutationFn: () => generateGltfGeometry(cadFileId),
    onSuccess: () => {
      toast.info('Generating 3D model…')
      setGenerating(true)
      qc.invalidateQueries({ queryKey: ['media-assets', cadFileId, 'gltf_geometry'] })
    },
    onError: () => toast.error('Failed to queue GLB generation'),
  })

  // Show GLB viewer
  if (glbBlobUrl) {
    return (
      <div
        className="w-full rounded-lg overflow-hidden border border-border-default bg-gray-950"
        style={{ height: 280 }}
      >
        <Canvas camera={{ position: [0, 0, 2], fov: 45 }}>
          <ambientLight intensity={1.2} />
          <directionalLight position={[5, 5, 5]} intensity={1} />
          <Suspense fallback={null}>
            <GlbModel url={glbBlobUrl} />
          </Suspense>
          <OrbitControls makeDefault />
        </Canvas>
      </div>
    )
  }

  // Loading GLB
  if (loadingGlb) {
    return (
      <div
        className="w-full rounded-lg border border-border-default bg-surface-muted flex items-center justify-center"
        style={{ height: 280 }}
      >
        <div className="flex flex-col items-center gap-2 text-content-muted">
          <Loader2 size={28} className="animate-spin" />
          <span className="text-xs">Loading 3D model…</span>
        </div>
      </div>
    )
  }

  // No GLB yet — show thumbnail + generate button
  return (
    <div
      className="w-full rounded-lg border border-border-default bg-surface-muted flex flex-col items-center justify-center gap-3"
      style={{ height: 280 }}
    >
      {thumbnailUrl ? (
        <img src={thumbnailUrl} alt="CAD thumbnail" className="max-h-40 object-contain" />
      ) : (
        <Box size={48} className="text-content-muted" />
      )}
      <button
        className="btn-secondary text-xs"
        onClick={() => generateMut.mutate()}
        disabled={generateMut.isPending || generating}
        title="Export STL to GLB and load 3D viewer"
      >
        <RefreshCw size={12} className={generating ? 'animate-spin' : ''} />
        {generating ? 'Generating…' : generateMut.isPending ? 'Queuing…' : 'Load 3D Model'}
      </button>
    </div>
  )
}
