"use client";

import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { EffectComposer, Bloom, Vignette } from "@react-three/postprocessing";
import { KernelSize } from "postprocessing";
import * as THREE from "three";
import { C, WAYPOINTS } from "./theme";
import { clamp01, damp, lerp, smoothstep } from "./math";
import Brain from "./Brain";
import City from "./City";
import Routes from "./Routes";
import Network from "./Network";
import SLAClock from "./SLAClock";

type Props = {
  progress: React.RefObject<number>;
  reduced?: boolean;
  isMobile?: boolean;
  active?: boolean;
};

const posTarget = new THREE.Vector3();
const lookTarget = new THREE.Vector3();

/**
 * Cinematic camera that flies along the waypoint spline by scroll progress.
 * Adjacent waypoints are smoothstep-interpolated, then the camera exponentially
 * damps toward the result so even fast/flung scrolls glide instead of snapping.
 */
function CameraRig({ progress }: { progress: React.RefObject<number> }) {
  const lookCurrent = useRef(new THREE.Vector3(0, 6, 0));
  const inited = useRef(false);

  useFrame((state, dt) => {
    const p = clamp01(progress.current ?? 0);

    // Locate the active waypoint segment.
    let i = 0;
    for (let k = 0; k < WAYPOINTS.length - 1; k++) {
      if (p >= WAYPOINTS[k].at && p <= WAYPOINTS[k + 1].at) { i = k; break; }
      if (p > WAYPOINTS[WAYPOINTS.length - 1].at) i = WAYPOINTS.length - 2;
    }
    const a = WAYPOINTS[i];
    const b = WAYPOINTS[i + 1];
    const span = b.at - a.at || 1;
    const lt = smoothstep(0, 1, clamp01((p - a.at) / span));

    posTarget.set(
      lerp(a.pos[0], b.pos[0], lt),
      lerp(a.pos[1], b.pos[1], lt),
      lerp(a.pos[2], b.pos[2], lt),
    );
    lookTarget.set(
      lerp(a.look[0], b.look[0], lt),
      lerp(a.look[1], b.look[1], lt),
      lerp(a.look[2], b.look[2], lt),
    );

    // Very subtle idle breathing so the shot isn't dead-static — kept tiny (~70%
    // smaller than before) so the camera reads as a fixed map view, not a fly-through.
    const t = state.clock.elapsedTime;
    posTarget.x += Math.sin(t * 0.16) * 0.14;
    posTarget.y += Math.sin(t * 0.21) * 0.07;

    const cam = state.camera;
    if (!inited.current) {
      cam.position.copy(posTarget);
      lookCurrent.current.copy(lookTarget);
      inited.current = true;
    } else {
      cam.position.x = damp(cam.position.x, posTarget.x, 2.6, dt);
      cam.position.y = damp(cam.position.y, posTarget.y, 2.6, dt);
      cam.position.z = damp(cam.position.z, posTarget.z, 2.6, dt);
      lookCurrent.current.x = damp(lookCurrent.current.x, lookTarget.x, 3, dt);
      lookCurrent.current.y = damp(lookCurrent.current.y, lookTarget.y, 3, dt);
      lookCurrent.current.z = damp(lookCurrent.current.z, lookTarget.z, 3, dt);
    }
    cam.lookAt(lookCurrent.current);
  });
  return null;
}

function LogisticsBrainCanvas({ progress, reduced = false, isMobile = false, active = true }: Props) {
  return (
    <Canvas
      flat
      dpr={[1, isMobile || reduced ? 1.3 : 1.7]}
      camera={{ position: WAYPOINTS[0].pos, fov: 52, near: 0.1, far: 200 }}
      gl={{ antialias: !isMobile, powerPreference: "high-performance", alpha: false }}
      frameloop={active ? "always" : "never"}
    >
      <color attach="background" args={[C.bg]} />
      <fog attach="fog" args={[C.bg, 40, 100]} />

      <ambientLight intensity={0.55} />
      <directionalLight position={[8, 18, 10]} intensity={0.7} color={C.sky} />
      <pointLight position={[-10, 8, -8]} intensity={40} distance={60} color={C.purple} />
      <pointLight position={[0, 9, 0]} intensity={30} distance={40} color={C.cyan} />

      <CameraRig progress={progress} />
      <City progress={progress} reduced={reduced} isMobile={isMobile} />
      <Routes progress={progress} reduced={reduced} isMobile={isMobile} />
      <Network progress={progress} reduced={reduced} isMobile={isMobile} />
      <SLAClock progress={progress} reduced={reduced} isMobile={isMobile} />
      <Brain progress={progress} reduced={reduced} isMobile={isMobile} />

      {!reduced && (
        <EffectComposer multisampling={isMobile ? 0 : 2}>
          <Bloom
            mipmapBlur
            intensity={isMobile ? 0.9 : 1.25}
            luminanceThreshold={0.12}
            luminanceSmoothing={0.045}
            radius={isMobile ? 0.65 : 0.82}
            kernelSize={KernelSize.MEDIUM}
          />
          <Vignette eskil={false} offset={0.22} darkness={0.62} />
        </EffectComposer>
      )}
    </Canvas>
  );
}

export default React.memo(LogisticsBrainCanvas);