import React, { useRef, useEffect } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { useSceneStore } from '../store/useSceneStore'

// The exact calculated world coordinates of the 10 street light heads in the scene
const streetLightsData = [
  { pos: [0, 4.2, -4.56], target: [0, 0, -4.56] },
  { pos: [9.113, 4.2, 0.944], target: [9.113, 0, 0.944] },
  { pos: [-10.158, 4.2, -9.874], target: [-10.158, 0, -9.874] },
  { pos: [3.513, 4.2, 9.195], target: [3.513, 0, 9.195] },
  { pos: [3.96, 4.2, -21.17], target: [3.96, 0, -21.17] },
  { pos: [12.25, 4.2, -16.7], target: [12.25, 0, -16.7] },
  { pos: [3.052, 4.2, -12.335], target: [3.052, 0, -12.335] },
  { pos: [-2.03, 4.2, -16.89], target: [-2.03, 0, -16.89] },
  { pos: [-27.151, 3.98, -9], target: [-27.151, 0, -9] }
]

const bulbOffColor = new THREE.Color('#333333')
const bulbOnColor = new THREE.Color('#ffdf6d')
const emissiveOffColor = new THREE.Color('#000000')
const emissiveOnColor = new THREE.Color('#ffdf6d')

function SingleStreetLight({ pos, targetPos }) {
  const lightRef = useRef()
  const targetRef = useRef()
  const bulbRef = useRef()

  useEffect(() => {
    if (lightRef.current && targetRef.current) {
      lightRef.current.target = targetRef.current
      lightRef.current.target.updateMatrixWorld()
    }
  }, [])

  useFrame(() => {
    // Day-to-Night factor (disabled: streetlights stay off)
    const nightFactor = 0

    // Smoothly scale spotlights intensity
    if (lightRef.current) {
      lightRef.current.intensity = nightFactor * 12.0
    }

    // Interpolate light bulb material colors to simulate glowing filament
    if (bulbRef.current) {
      bulbRef.current.material.color.lerpColors(bulbOffColor, bulbOnColor, nightFactor)
      bulbRef.current.material.emissive.lerpColors(emissiveOffColor, emissiveOnColor, nightFactor)
    }
  })

  return (
    <group>
      {/* Spotlight casting cone of light downward */}
      <spotLight
        ref={lightRef}
        position={pos}
        intensity={0}
        distance={12}
        angle={Math.PI / 4.5}
        penumbra={0.6}
        decay={1.2}
        color="#ffdf6d"
        castShadow={false} // Disabled for peak frame rate, main shadow is cast by directionalLight
      />
      {/* Glowing bulb mesh placed exactly at the light coordinates */}
      <mesh ref={bulbRef} position={pos}>
        <sphereGeometry args={[0.16, 16, 16]} />
        <meshStandardMaterial
          color="#333333"
          emissive="#000000"
          emissiveIntensity={3.5}
          roughness={0.1}
        />
      </mesh>
      <object3D ref={targetRef} position={targetPos} />
    </group>
  )
}

export default React.memo(function StreetLights() {
  return (
    <group>
      {streetLightsData.map((light, index) => (
        <SingleStreetLight
          key={index}
          pos={light.pos}
          targetPos={light.target}
        />
      ))}
    </group>
  )
})