'use client';
import { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Float, Torus, Cylinder, Box, Octahedron, MeshTransmissionMaterial } from '@react-three/drei';
import * as THREE from 'three';

function BikeIcon() {
  const mesh = useRef<THREE.Mesh>(null);
  useFrame((_, delta) => {
    if (mesh.current) {
      mesh.current.rotation.y += delta;
      mesh.current.rotation.x += delta * 0.5;
    }
  });
  return (
    <Float floatIntensity={2} speed={2}>
      <Torus ref={mesh} args={[1.2, 0.4, 16, 32]} rotation={[Math.PI / 2, 0, 0]}>
        <meshStandardMaterial color="#f97316" roughness={0.1} metalness={0.8} />
      </Torus>
    </Float>
  );
}

function InvestorIcon() {
  const mesh = useRef<THREE.Mesh>(null);
  useFrame((_, delta) => {
    if (mesh.current) {
      mesh.current.rotation.y += delta * 1.5;
    }
  });
  return (
    <Float floatIntensity={2} speed={2}>
      <Cylinder ref={mesh} args={[1.2, 1.2, 0.4, 32]} rotation={[Math.PI / 2, 0, 0]}>
        <meshStandardMaterial color="#eab308" roughness={0.2} metalness={0.9} />
      </Cylinder>
    </Float>
  );
}

function SwapIcon() {
  const mesh = useRef<THREE.Mesh>(null);
  useFrame((_, delta) => {
    if (mesh.current) {
      mesh.current.rotation.x += delta;
      mesh.current.rotation.y += delta * 1.2;
    }
  });
  return (
    <Float floatIntensity={2} speed={2}>
      <Box ref={mesh} args={[1.5, 1.5, 1.5]}>
        <MeshTransmissionMaterial 
          color="#a855f7" 
          thickness={0.5} 
          roughness={0.1}
          transmission={0.9} 
          ior={1.5} 
        />
      </Box>
      <Box args={[0.8, 0.8, 0.8]}>
        <meshStandardMaterial color="#d8b4fe" emissive="#a855f7" emissiveIntensity={0.5} />
      </Box>
    </Float>
  );
}

function MerchantIcon() {
  const mesh = useRef<THREE.Mesh>(null);
  useFrame((_, delta) => {
    if (mesh.current) {
      mesh.current.rotation.x += delta * 0.5;
      mesh.current.rotation.y += delta;
    }
  });
  return (
    <Float floatIntensity={2} speed={2}>
      <Octahedron ref={mesh} args={[1.5]}>
        <meshStandardMaterial color="#00bc84" roughness={0.1} metalness={0.7} />
      </Octahedron>
    </Float>
  );
}

export default function CardIcon3D({ type }: { type: 'bike' | 'investor' | 'swap' | 'merchant' }) {
  return (
    <div className="w-full h-full relative z-10 transition-transform duration-300 group-hover:scale-125">
      <Canvas camera={{ position: [0, 0, 4], fov: 50 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} intensity={1} />
        <pointLight position={[-5, -5, -5]} intensity={0.5} />
        {type === 'bike' && <BikeIcon />}
        {type === 'investor' && <InvestorIcon />}
        {type === 'swap' && <SwapIcon />}
        {type === 'merchant' && <MerchantIcon />}
      </Canvas>
    </div>
  );
}
