"use client";

import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, PerspectiveCamera, useTexture } from '@react-three/drei';
import * as THREE from 'three';

function RotatingCube() {
  const meshRef = useRef<THREE.Mesh>(null);
  
  // Animation loop
  useFrame((state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.x += delta * 0.2;
      meshRef.current.rotation.y += delta * 0.3;
    }
  });

  return (
    <mesh ref={meshRef} position={[0, 0, 0]} castShadow receiveShadow>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial 
        color="#D53F8C" 
        metalness={0.6}
        roughness={0.2}
        emissive="#300020"
        emissiveIntensity={0.3}
      />
    </mesh>
  );
}

function FloatingGlobe() {
  const meshRef = useRef<THREE.Mesh>(null);
  
  useFrame((state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.y += delta * 0.1;
      meshRef.current.position.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.2;
    }
  });

  return (
    <mesh ref={meshRef} position={[0, 0, 0]} castShadow>
      <sphereGeometry args={[1.5, 64, 64]} />
      <meshStandardMaterial 
        color="#111111"
        metalness={0.8}
        roughness={0.1}
        emissive="#D53F8C"
        emissiveIntensity={0.2}
        wireframe={true}
      />
    </mesh>
  );
}

export default function HeroModel() {
  return (
    <div className="w-full h-[300px] md:h-[400px]">
      <Canvas shadows dpr={[1, 2]}>
        <ambientLight intensity={0.5} />
        <directionalLight 
          position={[10, 10, 5]} 
          intensity={1} 
          castShadow 
          shadow-mapSize-width={1024} 
          shadow-mapSize-height={1024}
        />
        <pointLight position={[-10, -10, -10]} color="#D53F8C" intensity={1} />
        
        <FloatingGlobe />
        
        <PerspectiveCamera makeDefault position={[0, 0, 6]} fov={40} />
        <OrbitControls 
          enableZoom={false}
          enablePan={false}
          rotateSpeed={0.5}
          autoRotate
          autoRotateSpeed={0.5}
        />
      </Canvas>
    </div>
  );
}