'use client'

import { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'
import { Environment, MeshReflectorMaterial } from '@react-three/drei'
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing'
import * as THREE from 'three'
import type { Trophy } from '@/types'

function TrophyMesh({ trophy, position, onHover }: {
  trophy: Trophy
  position: [number, number, number]
  onHover: (id: string | null) => void
}) {
  const groupRef = useRef<THREE.Group>(null)
  const [hovered, setHovered] = useState(false)
  const spotRef = useRef<THREE.SpotLight>(null)

  useFrame((_, delta) => {
    if (!groupRef.current) return
    const targetY = hovered ? position[1] + 0.4 : position[1]
    groupRef.current.position.y += (targetY - groupRef.current.position.y) * delta * 4
    groupRef.current.rotation.y += delta * 0.5

    if (spotRef.current) {
      spotRef.current.intensity += ((hovered ? 12 : 4) - spotRef.current.intensity) * delta * 4
    }
  })

  const goldMat = (
    <meshStandardMaterial
      color="#FFD700"
      metalness={0.92}
      roughness={0.08}
      envMapIntensity={2}
    />
  )

  return (
    <group
      ref={groupRef}
      position={position}
      onPointerOver={() => { setHovered(true); onHover(trophy.id) }}
      onPointerOut={() => { setHovered(false); onHover(null) }}
    >
      {/* Base plate */}
      <mesh position={[0, 0.06, 0]}>
        <cylinderGeometry args={[0.22, 0.28, 0.12, 16]} />
        {goldMat}
      </mesh>
      {/* Mid stem */}
      <mesh position={[0, 0.35, 0]}>
        <cylinderGeometry args={[0.05, 0.08, 0.5, 12]} />
        {goldMat}
      </mesh>
      {/* Cup body */}
      <mesh position={[0, 0.72, 0]}>
        <cylinderGeometry args={[0.22, 0.08, 0.42, 16, 1, true]} />
        <meshStandardMaterial
          color="#FFD700"
          metalness={0.92}
          roughness={0.08}
          envMapIntensity={2}
          side={THREE.DoubleSide}
        />
      </mesh>
      {/* Cup rim */}
      <mesh position={[0, 0.95, 0]}>
        <torusGeometry args={[0.22, 0.02, 8, 24]} />
        {goldMat}
      </mesh>

      {/* Spotlight */}
      <spotLight
        ref={spotRef}
        position={[0, 4, 0]}
        angle={0.25}
        penumbra={0.5}
        intensity={4}
        color="#FFFACC"
        castShadow
        target-position={[0, 0, 0]}
      />
      {/* Glow sphere */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry args={[0.4, 8, 8]} />
        <meshBasicMaterial
          color="#FFD700"
          transparent
          opacity={hovered ? 0.08 : 0.03}
          blending={THREE.AdditiveBlending}
        />
      </mesh>
    </group>
  )
}

interface Props {
  trophies: Trophy[]
  mouseX: number
  onTrophyHover: (id: string | null) => void
}

export function TrophyScene({ trophies, mouseX, onTrophyHover }: Props) {
  const spacing = 2.4
  const totalWidth = (trophies.length - 1) * spacing
  const startX = -totalWidth / 2

  useFrame((state) => {
    state.camera.position.x += (mouseX * 2 - state.camera.position.x) * 0.03
    state.camera.lookAt(0, 0.5, 0)
  })

  return (
    <>
      <color attach="background" args={['#020209']} />
      <fog attach="fog" args={['#020209', 12, 25]} />
      <ambientLight intensity={0.03} />
      <Environment preset="studio" />

      {/* Trophies */}
      {trophies.map((t, i) => (
        <TrophyMesh
          key={t.id}
          trophy={t}
          position={[startX + i * spacing, 0, 0]}
          onHover={onTrophyHover}
        />
      ))}

      {/* Reflective floor */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.05, 0]} receiveShadow>
        <planeGeometry args={[30, 20]} />
        <MeshReflectorMaterial
          blur={[200, 100]}
          resolution={512}
          mixBlur={1}
          mixStrength={20}
          roughness={1}
          depthScale={0.8}
          minDepthThreshold={0.4}
          maxDepthThreshold={1.4}
          color="#050520"
          metalness={0.5}
          mirror={0}
        />
      </mesh>

      {/* Post-processing */}
      <EffectComposer>
        <Bloom
          luminanceThreshold={0.7}
          luminanceSmoothing={0.3}
          intensity={2.5}
          radius={0.8}
        />
        <Vignette eskil={false} offset={0.1} darkness={0.8} />
      </EffectComposer>
    </>
  )
}