"use client";

import { Canvas } from "@react-three/fiber";
import { AdaptiveDpr } from "@react-three/drei";

const visible = usePageVisibility();
const reducedMotion = useMediaQuery(
  "(prefers-reduced-motion: reduce)",
);
const mobile = useMediaQuery(
  "(max-width: 760px), (pointer: coarse)",
);

return (
  <div className="hologram-experience">
    <SourceCodeRain
      paused={!visible}
      reducedMotion={reducedMotion}
    />
    <Canvas
      className="artifact-canvas"
      frameloop={visible ? "always" : "never"}
    >
      <AdaptiveDpr pixelated />
      <Scene
        mobile={mobile}
        reducedMotion={reducedMotion}
      />
    </Canvas>
  </div>
);

"use client";

import { Canvas } from "@react-three/fiber";
import { AdaptiveDpr } from "@react-three/drei";

const visible = usePageVisibility();
const reducedMotion = useMediaQuery(
  "(prefers-reduced-motion: reduce)",
);
const mobile = useMediaQuery(
  "(max-width: 760px), (pointer: coarse)",
);

return (
  <div className="hologram-experience">
    <SourceCodeRain
      paused={!visible}
      reducedMotion={reducedMotion}
    />
    <Canvas
      className="artifact-canvas"
      frameloop={visible ? "always" : "never"}
    >
      <AdaptiveDpr pixelated />
      <Scene
        mobile={mobile}
        reducedMotion={reducedMotion}
      />
    </Canvas>
  </div>
);

const controllerRef = useRef(null);
const timeRef = useRef(0);
const glitchRef = useRef(0);
const activationRef = useRef(0);
const hoverRef = useRef(false);

const triggerGlitch = useCallback(() => {
  controllerRef.current?.trigger();
}, []);

<GlitchController
  ref={controllerRef}
  reducedMotion={reducedMotion}
  timeRef={timeRef}
  glitchRef={glitchRef}
  activationRef={activationRef}
/>
<CameraRig
  mobile={mobile}
  reducedMotion={reducedMotion}
  timeRef={timeRef}
/>
<HolographicLogo
  mobile={mobile}
  reducedMotion={reducedMotion}
  timeRef={timeRef}
  glitchRef={glitchRef}
  activationRef={activationRef}
  hoverRef={hoverRef}
  onTrigger={triggerGlitch}
/>

const controllerRef = useRef(null);
const timeRef = useRef(0);
const glitchRef = useRef(0);
const activationRef = useRef(0);
const hoverRef = useRef(false);

const triggerGlitch = useCallback(() => {
  controllerRef.current?.trigger();
}, []);

<GlitchController
  ref={controllerRef}
  reducedMotion={reducedMotion}
  timeRef={timeRef}
  glitchRef={glitchRef}
  activationRef={activationRef}
/>
<CameraRig
  mobile={mobile}
  reducedMotion={reducedMotion}
  timeRef={timeRef}
/>
<HolographicLogo
  mobile={mobile}
  reducedMotion={reducedMotion}
  timeRef={timeRef}
  glitchRef={glitchRef}
  activationRef={activationRef}
  hoverRef={hoverRef}
  onTrigger={triggerGlitch}
/>

const logoTexture = useTexture("/ciacsa-logo.png");
const geometry = useMemo(
  () => new PlaneGeometry(4.4, 1.896, 96, 42),
  [],
);

const delta = Math.min(frameDelta, 1 / 30);
motionPhaseRef.current = (
  motionPhaseRef.current +
  delta * (hoverRef.current ? 0.38 : 0.22)
) % (Math.PI * 2);

group.rotation.y = mobile
  ? Math.sin(motionPhaseRef.current) * 0.56
  : motionPhaseRef.current;
group.rotation.x = Math.sin(
  timeRef.current * 0.31 + 0.8
) * 0.018;

uniforms.uTime.value = timeRef.current;
uniforms.uGlitchIntensity.value = glitchRef.current;
uniforms.uMouse.value.x = MathUtils.damp(
  uniforms.uMouse.value.x,
  pointer.x,
  5,
  delta,
);

const logoTexture = useTexture("/ciacsa-logo.png");
const geometry = useMemo(
  () => new PlaneGeometry(4.4, 1.896, 96, 42),
  [],
);

const delta = Math.min(frameDelta, 1 / 30);
motionPhaseRef.current = (
  motionPhaseRef.current +
  delta * (hoverRef.current ? 0.38 : 0.22)
) % (Math.PI * 2);

group.rotation.y = mobile
  ? Math.sin(motionPhaseRef.current) * 0.56
  : motionPhaseRef.current;
group.rotation.x = Math.sin(
  timeRef.current * 0.31 + 0.8
) * 0.018;

uniforms.uTime.value = timeRef.current;
uniforms.uGlitchIntensity.value = glitchRef.current;
uniforms.uMouse.value.x = MathUtils.damp(
  uniforms.uMouse.value.x,
  pointer.x,
  5,
  delta,
);

precision highp float;

uniform float uTime;
uniform float uGlitchIntensity;
uniform float uScanLineDensity;
uniform float uNoiseIntensity;
uniform float uFresnelStrength;
uniform float uGlowIntensity;
uniform sampler2D uLogoMap;

void main() {
  vec4 logoSample = texture2D(
    uLogoMap,
    vLogoUv
  );
  float logoMask = logoSample.a;
  if (logoMask < 0.012) discard;

  float facing = abs(dot(
    normal,
    viewDirection
  ));
  float fresnel = pow(
    1.0 - facing,
    uFresnelStrength
  );
  float scan = 0.89 +
    0.11 * sin(scanPhase);
  color *= channelScan;
}

precision highp float;

uniform float uTime;
uniform float uGlitchIntensity;
uniform float uScanLineDensity;
uniform float uNoiseIntensity;
uniform float uFresnelStrength;
uniform float uGlowIntensity;
uniform sampler2D uLogoMap;

void main() {
  vec4 logoSample = texture2D(
    uLogoMap,
    vLogoUv
  );
  float logoMask = logoSample.a;
  if (logoMask < 0.012) discard;

  float facing = abs(dot(
    normal,
    viewDirection
  ));
  float fresnel = pow(
    1.0 - facing,
    uFresnelStrength
  );
  float scan = 0.89 +
    0.11 * sin(scanPhase);
  color *= channelScan;
}

const effect = useMemo(
  () => new ChromaticAberrationEffect({
    offset: new Vector2(0, 0),
    radialModulation: true,
    modulationOffset: 0.34,
  }),
  [],
);

useFrame((_, frameDelta) => {
  const activeEffect = effectRef.current;
  const delta = Math.min(frameDelta, 1 / 30);
  const target = reducedMotion
    ? 0
    : glitchRef.current * 0.0012;
  activeEffect.offset.x = MathUtils.damp(
    activeEffect.offset.x,
    target,
    18,
    delta,
  );
});

<Bloom
  mipmapBlur
  luminanceThreshold={0.84}
  luminanceSmoothing={0.22}
/>
<AnimatedChromatic
  reducedMotion={reducedMotion}
  glitchRef={glitchRef}
/>

const effect = useMemo(
  () => new ChromaticAberrationEffect({
    offset: new Vector2(0, 0),
    radialModulation: true,
    modulationOffset: 0.34,
  }),
  [],
);

useFrame((_, frameDelta) => {
  const activeEffect = effectRef.current;
  const delta = Math.min(frameDelta, 1 / 30);
  const target = reducedMotion
    ? 0
    : glitchRef.current * 0.0012;
  activeEffect.offset.x = MathUtils.damp(
    activeEffect.offset.x,
    target,
    18,
    delta,
  );
});

<Bloom
  mipmapBlur
  luminanceThreshold={0.84}
  luminanceSmoothing={0.22}
/>
<AnimatedChromatic
  reducedMotion={reducedMotion}
  glitchRef={glitchRef}
/>