"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";

/**
 * Site-wide depth layer: a sparse field of drifting azure micro-octahedra
 * rendered as a fixed screen-blend overlay. It reads as floating data-dust
 * over dark sections and vanishes over light ones — pure atmosphere.
 */

const COUNT = 220;

function Dust({ paused }: { paused: boolean }) {
  const mesh = useRef<THREE.InstancedMesh>(null);
  const dummy = useMemo(() => new THREE.Object3D(), []);
  const seeds = useMemo(() => {
    const arr: { x: number; y: number; z: number; s: number; v: number; p: number }[] = [];
    for (let i = 0; i < COUNT; i++) {
      arr.push({
        x: (((i * 73) % 100) / 50 - 1) * 14,
        y: (((i * 37) % 100) / 50 - 1) * 8,
        z: -3 - ((i * 53) % 100) / 12,
        s: 0.015 + (((i * 29) % 100) / 100) * 0.05,
        v: 0.08 + (((i * 17) % 100) / 100) * 0.22,
        p: ((i * 61) % 628) / 100,
      });
    }
    return arr;
  }, []);
  const scrollY = useRef(0);

  useEffect(() => {
    const onScroll = () => {
      scrollY.current = window.scrollY;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useFrame((state) => {
    const m = mesh.current;
    if (!m || paused) return;
    const t = state.clock.elapsedTime;
    const parallax = (scrollY.current % 4000) * 0.0006;
    seeds.forEach((sd, i) => {
      const y = ((sd.y + t * sd.v * 0.35 + parallax * sd.v * 8 + 8) % 16) - 8;
      dummy.position.set(sd.x + Math.sin(t * 0.2 + sd.p) * 0.6, y, sd.z);
      dummy.rotation.set(t * 0.3 + sd.p, t * 0.2 + sd.p, 0);
      dummy.scale.setScalar(sd.s);
      dummy.updateMatrix();
      m.setMatrixAt(i, dummy.matrix);
    });
    m.instanceMatrix.needsUpdate = true;
  });

  return (
    <instancedMesh ref={mesh} args={[undefined, undefined, COUNT]} frustumCulled={false}>
      <octahedronGeometry args={[1, 0]} />
      <meshBasicMaterial color="#5FA8E8" transparent opacity={0.55} depthWrite={false} />
    </instancedMesh>
  );
}

export default function AmbientDepth() {
  const [ready, setReady] = useState(false);
  const [reduced, setReduced] = useState(false);
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    setReduced(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
    // defer mount until after first paint so it never competes with LCP
    const id = window.setTimeout(() => setReady(true), 600);
    const onVis = () => setHidden(document.hidden);
    document.addEventListener("visibilitychange", onVis);
    return () => {
      window.clearTimeout(id);
      document.removeEventListener("visibilitychange", onVis);
    };
  }, []);

  if (!ready || reduced) return null;

  return (
    <div
      className="fixed inset-0 z-[15] opacity-45 mix-blend-screen [&_*]:pointer-events-none"
      style={{ pointerEvents: "none" }}
      aria-hidden="true"
    >
      <Canvas
        camera={{ position: [0, 0, 6], fov: 50 }}
        dpr={[1, 1.4]}
        gl={{ antialias: false, alpha: true, powerPreference: "low-power" }}
        frameloop={hidden ? "demand" : "always"}
        style={{ pointerEvents: "none" }}
      >
        <Dust paused={hidden} />
      </Canvas>
    </div>
  );
}