import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';

interface BeaconProps {
    position: [number, number, number];
    color?: string;
    height?: number;
}

export function Beacon({ position, color = '#00ffff', height = 30 }: BeaconProps) {
    const beamRef = useRef<THREE.Mesh>(null);
    const ringRef = useRef<THREE.Mesh>(null);
    const pulseRef = useRef<THREE.Mesh>(null);

    // Animate the beacon
    useFrame((state) => {
        const elapsed = state.clock.elapsedTime;

        // Pulsing vertical beam
        if (beamRef.current) {
            const pulse = Math.sin(elapsed * 4) * 0.2 + 0.7;
            (beamRef.current.material as THREE.MeshBasicMaterial).opacity = pulse;
        }

        // Expanding ring
        if (ringRef.current) {
            const t = (elapsed % 1.5) / 1.5;
            ringRef.current.scale.set(1 + t * 4, 1, 1 + t * 4);
            (ringRef.current.material as THREE.MeshBasicMaterial).opacity = 0.8 * (1 - t);
        }

        // Pulsing center sphere
        if (pulseRef.current) {
            const scale = 1 + Math.sin(elapsed * 6) * 0.3;
            pulseRef.current.scale.set(scale, scale, scale);
        }
    });

    return (
        <group position={position}>
            {/* Bright vertical beam - more visible */}
            <mesh ref={beamRef} position={[0, height / 2, 0]}>
                <cylinderGeometry args={[0.3, 0.8, height, 16, 1, true]} />
                <meshBasicMaterial
                    color={color}
                    transparent
                    opacity={0.7}
                    side={THREE.DoubleSide}
                    depthWrite={false}
                    blending={THREE.AdditiveBlending}
                />
            </mesh>

            {/* Top cap glow */}
            <mesh position={[0, height, 0]}>
                <sphereGeometry args={[0.6, 16, 16]} />
                <meshBasicMaterial
                    color={color}
                    transparent
                    opacity={0.9}
                    blending={THREE.AdditiveBlending}
                />
            </mesh>

            {/* Expanding ground ring */}
            <mesh ref={ringRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.1, 0]}>
                <ringGeometry args={[0.5, 1.0, 32]} />
                <meshBasicMaterial
                    color={color}
                    transparent
                    opacity={0.8}
                    side={THREE.DoubleSide}
                    depthWrite={false}
                    blending={THREE.AdditiveBlending}
                />
            </mesh>

            {/* Center pulsing sphere */}
            <mesh ref={pulseRef} position={[0, 0.5, 0]}>
                <sphereGeometry args={[0.4, 16, 16]} />
                <meshBasicMaterial
                    color={color}
                    transparent
                    opacity={0.9}
                    blending={THREE.AdditiveBlending}
                />
            </mesh>

            {/* Bright point light */}
            <pointLight color={color} intensity={5} distance={20} />
        </group>
    );
}
