"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import {
  Bounds,
  ContactShadows,
  Html,
  OrbitControls,
  useGLTF,
} from "@react-three/drei";
import type { Group } from "three";
import { cn } from "@/lib/utils";

function Loader() {
  return (
    <Html center>
      <span className="flex items-center gap-2 text-xs text-muted-foreground">
        <span className="size-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
        Loading model…
      </span>
    </Html>
  );
}

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

/** Rendered when no src prop is provided, so this is never a blank box. */
function FallbackObject({ color }: { color: string }) {
  const ref = React.useRef<Group>(null);

  useFrame((state, delta) => {
    if (!ref.current) return;
    ref.current.rotation.y += delta * 0.4;
    ref.current.position.y = Math.sin(state.clock.elapsedTime) * 0.06;
  });

  return (
    <group ref={ref}>
      <mesh castShadow>
        <icosahedronGeometry args={[1, 1]} />
        <meshStandardMaterial color={color} flatShading roughness={0.3} metalness={0.6} />
      </mesh>
      <mesh scale={1.28}>
        <icosahedronGeometry args={[1, 1]} />
        <meshBasicMaterial color={color} wireframe transparent opacity={0.18} />
      </mesh>
    </group>
  );
}

export interface GltfModelViewerProps {
  /** URL of a .glb / .gltf file. Omit to render the procedural fallback. */
  src?: string;
  color?: string;
  height?: number;
  autoRotate?: boolean;
  className?: string;
}

export function GltfModelViewer({
  src,
  color = "#8b5cf6",
  height = 400,
  autoRotate = true,
  className,
}: GltfModelViewerProps) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-background", className)}
      style={{ height }}
    >
      <Canvas shadows camera={{ position: [3, 2, 4], fov: 45 }} dpr={[1, 2]}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[5, 6, 4]} intensity={2.2} castShadow />
        <pointLight position={[-4, 1, -3]} intensity={12} color="#38bdf8" />

        <React.Suspense fallback={<Loader />}>
          {src ? (
            <Bounds fit clip observe margin={1.2}>
              <Model url={src} />
            </Bounds>
          ) : (
            <FallbackObject color={color} />
          )}
        </React.Suspense>

        <ContactShadows position={[0, -1.35, 0]} opacity={0.4} scale={9} blur={2.6} far={4} />
        <OrbitControls
          makeDefault
          enablePan={false}
          autoRotate={autoRotate}
          autoRotateSpeed={0.6}
          minDistance={2}
          maxDistance={9}
        />
      </Canvas>
    </div>
  );
}

Related components