import React, { useMemo, useRef } from 'react';
import { CatmullRomCurve3 } from 'three';
import { useFrame } from '@react-three/fiber';
import { Mesh } from 'three';
import { getDigitPathImproved } from './DigitGeometries';

interface GelDigitProps {
    value: string;
    position: [number, number, number];
    color: string;
}

export const GelDigit: React.FC<GelDigitProps> = ({ value, position, color }) => {
    const meshRef = useRef<Mesh>(null);
    const radius = 0.40;

    const curve = useMemo(() => {
        const points = getDigitPathImproved(value);
        if (!points || points.length === 0) return null;
        const isClosed = ['0', '8', '6', '9'].includes(value);
        return new CatmullRomCurve3(points, isClosed, 'centripetal', 0.5);
    }, [value]);

    const points = useMemo(() => getDigitPathImproved(value), [value]);

    useFrame(({ clock }) => {
        if (meshRef.current) {
            meshRef.current.position.y = position[1] + Math.sin(clock.getElapsedTime() + position[0]) * 0.02;
            meshRef.current.rotation.z = Math.sin(clock.getElapsedTime() * 0.5 + position[0]) * 0.02;
        }
    });

    if (!curve || !points) return null;

    const isClosed = ['0', '8'].includes(value);

    return (
        <group position={[position[0], position[1], position[2]]}>
            <group ref={meshRef}>
                {/* Main Tube */}
                <mesh>
                    <tubeGeometry args={[curve, 64, radius, 32, isClosed]} />
                    <meshPhysicalMaterial
                        transmission={0.95}   // Very transparent
                        roughness={0.15}      // Glossy but soft
                        metalness={0.05}
                        thickness={2.5}       // Volume
                        ior={1.4}
                        color={color}
                        attenuationColor={color}
                        attenuationDistance={3.0} // Clearer, less dark absorption
                        emissive={color}
                        emissiveIntensity={0.15}
                        clearcoat={1}
                        clearcoatRoughness={0.2} // Soft reflections
                    />
                </mesh>

                {/* End Caps for Open Tubes */}
                {!isClosed && (
                    <>
                        <mesh position={points[0]}>
                            <sphereGeometry args={[radius, 32, 32]} />
                            <meshPhysicalMaterial
                                transmission={0.95} roughness={0.15} metalness={0.05} thickness={2.5} ior={1.4}
                                color={color} attenuationColor={color} attenuationDistance={3.0}
                                emissive={color} emissiveIntensity={0.15} clearcoat={1} clearcoatRoughness={0.2}
                            />
                        </mesh>
                        <mesh position={points[points.length - 1]}>
                            <sphereGeometry args={[radius, 32, 32]} />
                            <meshPhysicalMaterial
                                transmission={0.95} roughness={0.15} metalness={0.05} thickness={2.5} ior={1.4}
                                color={color} attenuationColor={color} attenuationDistance={3.0}
                                emissive={color} emissiveIntensity={0.15} clearcoat={1} clearcoatRoughness={0.2}
                            />
                        </mesh>
                    </>
                )}
            </group>
        </group>
    );
};
