import { useParams, useNavigate } from 'react-router-dom'
import { ArrowLeft } from 'lucide-react'
import ThreeDViewer from '../components/cad/ThreeDViewer'

/**
 * Route: /cad/:id
 *
 * Renders the full-screen 3D viewer for a specific CAD file.
 * When the viewer is closed the user is navigated back.
 */
export default function CadPreviewPage() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()

  if (!id) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-content-muted gap-4 p-8">
        <p className="text-lg">No CAD file ID provided.</p>
        <button
          onClick={() => navigate(-1)}
          className="flex items-center gap-2 text-sm text-accent hover:underline"
        >
          <ArrowLeft size={16} />
          Go back
        </button>
      </div>
    )
  }

  return (
    <ThreeDViewer
      cadFileId={id}
      onClose={() => navigate(-1)}
    />
  )
}
