import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { useOrbState } from '../../hooks/useOrbState.js';
import { ShaderCanvas } from './ShaderCanvas.js';
import { auraFragmentShader } from './Aura.shaders.js';

const STATE_CONFIG = {
    idle: { speed: 10, amplitude: 1.2, frequency: 0.4, brightness: 1.0, scale: 0.2 },
    listening: { speed: 20, amplitude: 1.0, frequency: 0.7, brightness: 1.75, scale: 0.3 },
    thinking: { speed: 30, amplitude: 0.5, frequency: 1.0, brightness: 1.5, scale: 0.3 },
    speaking: { speed: 70, amplitude: 0.75, frequency: 1.25, brightness: 1.5, scale: 0.3 },
};
// ── Hex → RGB helper ─────────────────────────────────────────────────────────
function hexToRgb(hex) {
    const h = hex.replace("#", "");
    const num = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
    return [(num >> 16) / 255, ((num >> 8) & 0xff) / 255, (num & 0xff) / 255];
}
// ── Aura component ───────────────────────────────────────────────────────────
const Aura = ({ color = "#1FD5F9", colorShift = 0.3, speed = 10, amplitude = 2.0, frequency = 0.5, scale = 0.2, blur = 1.0, brightness = 1.5, themeMode = "dark", state, }) => {
    const rgb = useMemo(() => hexToRgb(color), [color]);
    const propValues = useMemo(() => ({ speed, amplitude, frequency, brightness, scale }), [speed, amplitude, frequency, brightness, scale]);
    const { valuesRef, tick } = useOrbState(state, STATE_CONFIG, propValues);
    // Stable uniform object — mutated in-place each frame via the getter ref
    const uniforms = useMemo(() => ({
        u_color: rgb,
        u_colorShift: colorShift,
        u_speed: speed,
        u_amplitude: amplitude,
        u_frequency: frequency,
        u_scale: scale,
        u_blur: blur,
        u_brightness: brightness,
        u_bloom: 0.4,
        u_spacing: 0.5,
        u_variance: 0.1,
        u_smoothing: 1.0,
        u_lightMode: themeMode === "light" ? 1.0 : 0.0,
    }), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []);
    // Sync non-interpolated props every render
    uniforms.u_color = rgb;
    uniforms.u_colorShift = colorShift;
    uniforms.u_blur = blur;
    uniforms.u_lightMode = themeMode === "light" ? 1.0 : 0.0;
    // Custom ref whose getter ticks interpolation + writes interpolated values
    // into the uniform object right before ShaderCanvas reads it each frame.
    const tickingRef = useMemo(() => {
        let lastT = 0;
        return {
            get current() {
                const now = performance.now() / 1000;
                if (lastT > 0) {
                    tick(Math.min(now - lastT, 0.1));
                }
                lastT = now;
                const v = valuesRef.current;
                uniforms.u_speed = v.speed;
                uniforms.u_amplitude = v.amplitude;
                uniforms.u_frequency = v.frequency;
                uniforms.u_brightness = v.brightness;
                uniforms.u_scale = v.scale;
                return uniforms;
            },
            set current(_v) {
                // no-op — ShaderCanvas never writes to this ref
            },
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [tick]);
    return (jsx("div", { className: "absolute inset-0", children: jsx(ShaderCanvas, { fragmentShader: auraFragmentShader, uniformsRef: tickingRef }) }));
};

export { Aura };
