"use client";

import { Float, MeshDistortMaterial } from "@react-three/drei";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useCallback, useEffect, useMemo, useRef } from "react";
import * as THREE from "three";

type HeroSceneVariant =
  | "command"
  | "launch"
  | "rescue"
  | "signal"
  | "diagnostic"
  | "portrait";

function ParticleField({ count = 2000 }: { count?: number }) {
  const mesh = useRef<THREE.Points>(null);
  const mouseRef = useRef({ x: 0, y: 0 });

  const [positions, velocities] = useMemo(() => {
    const pos = new Float32Array(count * 3);
    const vel = new Float32Array(count * 3);
    for (let i = 0; i < count; i++) {
      const i3 = i * 3;
      pos[i3] = (Math.random() - 0.5) * 20;
      pos[i3 + 1] = (Math.random() - 0.5) * 20;
      pos[i3 + 2] = (Math.random() - 0.5) * 15;
      vel[i3] = (Math.random() - 0.5) * 0.002;
      vel[i3 + 1] = (Math.random() - 0.5) * 0.002;
      vel[i3 + 2] = (Math.random() - 0.5) * 0.001;
    }
    return [pos, vel];
  }, [count]);

  const sizes = useMemo(() => {
    const s = new Float32Array(count);
    for (let i = 0; i < count; i++) {
      s[i] = Math.random() * 2 + 0.5;
    }
    return s;
  }, [count]);

  const handlePointerMove = useCallback(
    (e: { clientX: number; clientY: number }) => {
      mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
      mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
    },
    [],
  );

  useFrame((state) => {
    if (!mesh.current) return;
    const geo = mesh.current.geometry;
    const posAttr = geo.getAttribute("position") as THREE.BufferAttribute;
    const arr = posAttr.array as Float32Array;
    const time = state.clock.elapsedTime;

    for (let i = 0; i < count; i++) {
      const i3 = i * 3;
      arr[i3] += velocities[i3] + Math.sin(time * 0.3 + i) * 0.001;
      arr[i3 + 1] += velocities[i3 + 1] + Math.cos(time * 0.2 + i) * 0.001;
      arr[i3 + 2] += velocities[i3 + 2];

      // Mouse influence
      const dx = mouseRef.current.x * 5 - arr[i3];
      const dy = mouseRef.current.y * 5 - arr[i3 + 1];
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 3) {
        const force = (3 - dist) * 0.0003;
        arr[i3] += dx * force;
        arr[i3 + 1] += dy * force;
      }

      // Wrap around
      if (arr[i3] > 10) arr[i3] = -10;
      if (arr[i3] < -10) arr[i3] = 10;
      if (arr[i3 + 1] > 10) arr[i3 + 1] = -10;
      if (arr[i3 + 1] < -10) arr[i3 + 1] = 10;
      if (arr[i3 + 2] > 7.5) arr[i3 + 2] = -7.5;
      if (arr[i3 + 2] < -7.5) arr[i3 + 2] = 7.5;
    }
    posAttr.needsUpdate = true;

    // Slow rotation
    mesh.current.rotation.y = time * 0.02;
    mesh.current.rotation.x = Math.sin(time * 0.01) * 0.1;
  });

  useEffect(() => {
    window.addEventListener("pointermove", handlePointerMove);
    return () => window.removeEventListener("pointermove", handlePointerMove);
  }, [handlePointerMove]);

  return (
    <points ref={mesh}>
      <bufferGeometry>
        <bufferAttribute
          attach="attributes-position"
          args={[positions, 3]}
          count={count}
        />
        <bufferAttribute
          attach="attributes-size"
          args={[sizes, 1]}
          count={count}
        />
      </bufferGeometry>
      <pointsMaterial
        color="#ccff00"
        size={0.03}
        transparent
        opacity={0.6}
        sizeAttenuation
        blending={THREE.AdditiveBlending}
        depthWrite={false}
      />
    </points>
  );
}

function FloatingGeometry({ variant }: { variant: HeroSceneVariant }) {
  const meshRef = useRef<THREE.Mesh>(null);
  const mesh2Ref = useRef<THREE.Mesh>(null);
  const mesh3Ref = useRef<THREE.Mesh>(null);

  const layout = {
    command: {
      a: [4, 1.5, -3] as [number, number, number],
      b: [-5, -2, -4] as [number, number, number],
      c: [2, -3, -5] as [number, number, number],
      scale: [1.2, 0.8, 1.5] as [number, number, number],
    },
    launch: {
      a: [3.8, 2.1, -3] as [number, number, number],
      b: [0, -1.4, -4] as [number, number, number],
      c: [-3.8, -2.6, -5] as [number, number, number],
      scale: [0.9, 0.9, 1.8] as [number, number, number],
    },
    rescue: {
      a: [-3.6, 1.2, -3] as [number, number, number],
      b: [3.6, 1.2, -4] as [number, number, number],
      c: [0, -2.8, -5] as [number, number, number],
      scale: [1, 1, 1.4] as [number, number, number],
    },
    signal: {
      a: [-4.2, -1, -3] as [number, number, number],
      b: [0.2, 1.6, -4] as [number, number, number],
      c: [4.2, -0.6, -5] as [number, number, number],
      scale: [0.7, 0.7, 1.2] as [number, number, number],
    },
    diagnostic: {
      a: [4.6, 0.6, -3] as [number, number, number],
      b: [-3.5, 1.8, -4] as [number, number, number],
      c: [-1.2, -2.8, -5] as [number, number, number],
      scale: [1.4, 0.7, 1.1] as [number, number, number],
    },
    portrait: {
      a: [3.2, 0.4, -3] as [number, number, number],
      b: [4.8, 2.1, -4] as [number, number, number],
      c: [-3.6, -2.4, -5] as [number, number, number],
      scale: [1.8, 0.5, 1.1] as [number, number, number],
    },
  }[variant];

  useFrame((state) => {
    const t = state.clock.elapsedTime;
    if (meshRef.current) {
      meshRef.current.rotation.x = t * 0.15;
      meshRef.current.rotation.y = t * 0.1;
      meshRef.current.position.y = layout.a[1] + Math.sin(t * 0.4) * 0.3;
    }
    if (mesh2Ref.current) {
      mesh2Ref.current.rotation.x = t * 0.1;
      mesh2Ref.current.rotation.z = t * 0.12;
      mesh2Ref.current.position.y = layout.b[1] + Math.cos(t * 0.3) * 0.5;
    }
    if (mesh3Ref.current) {
      mesh3Ref.current.rotation.y = t * 0.08;
      mesh3Ref.current.rotation.z = t * 0.06;
    }
  });

  return (
    <>
      <Float speed={1.5} rotationIntensity={0.4} floatIntensity={0.6}>
        <mesh ref={meshRef} position={layout.a} scale={layout.scale[0]}>
          {variant === "diagnostic" ? (
            <boxGeometry args={[1.4, 1.8, 0.08, 3, 3, 1]} />
          ) : variant === "portrait" ? (
            <capsuleGeometry args={[0.55, 1.25, 6, 12]} />
          ) : (
            <icosahedronGeometry args={[1, 1]} />
          )}
          <MeshDistortMaterial
            color="#ccff00"
            wireframe
            transparent
            opacity={variant === "portrait" ? 0.1 : 0.15}
            distort={0.3}
            speed={2}
          />
        </mesh>
      </Float>

      <Float speed={1.2} rotationIntensity={0.3} floatIntensity={0.8}>
        <mesh ref={mesh2Ref} position={layout.b} scale={layout.scale[1]}>
          {variant === "launch" ? (
            <coneGeometry args={[0.8, 1.6, 4]} />
          ) : variant === "signal" ? (
            <sphereGeometry args={[0.55, 16, 16]} />
          ) : (
            <octahedronGeometry args={[1, 0]} />
          )}
          <MeshDistortMaterial
            color="#ffffff"
            wireframe
            transparent
            opacity={0.08}
            distort={0.2}
            speed={1.5}
          />
        </mesh>
      </Float>

      <Float speed={0.8} rotationIntensity={0.2} floatIntensity={0.5}>
        <mesh ref={mesh3Ref} position={layout.c} scale={layout.scale[2]}>
          {variant === "rescue" ? (
            <boxGeometry args={[1.4, 1.4, 1.4, 2, 2, 2]} />
          ) : variant === "signal" ? (
            <torusKnotGeometry args={[0.7, 0.16, 80, 8]} />
          ) : (
            <torusGeometry args={[1, 0.3, 16, 32]} />
          )}
          <meshStandardMaterial
            color="#ccff00"
            wireframe
            transparent
            opacity={0.06}
          />
        </mesh>
      </Float>
    </>
  );
}

function GridFloor() {
  const meshRef = useRef<THREE.Mesh>(null);

  useFrame((state) => {
    if (meshRef.current) {
      const material = meshRef.current.material as THREE.ShaderMaterial;
      if (material.uniforms) {
        material.uniforms.uTime.value = state.clock.elapsedTime;
      }
    }
  });

  const gridShader = useMemo(
    () => ({
      uniforms: {
        uTime: { value: 0 },
        uColor: { value: new THREE.Color("#ccff00") },
      },
      vertexShader: `
        varying vec2 vUv;
        varying vec3 vPosition;
        void main() {
          vUv = uv;
          vPosition = position;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform float uTime;
        uniform vec3 uColor;
        varying vec2 vUv;
        varying vec3 vPosition;

        void main() {
          vec2 grid = abs(fract(vPosition.xz * 0.5) - 0.5) / fwidth(vPosition.xz * 0.5);
          float line = min(grid.x, grid.y);
          float alpha = 1.0 - min(line, 1.0);

          // Distance fade
          float dist = length(vPosition.xz) * 0.08;
          alpha *= max(0.0, 1.0 - dist);
          alpha *= 0.12;

          // Pulse wave
          float wave = sin(length(vPosition.xz) * 0.3 - uTime * 0.8) * 0.5 + 0.5;
          alpha *= 0.5 + wave * 0.5;

          gl_FragColor = vec4(uColor, alpha);
        }
      `,
    }),
    [],
  );

  return (
    <mesh ref={meshRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, -4, 0]}>
      <planeGeometry args={[40, 40, 1, 1]} />
      <shaderMaterial
        {...gridShader}
        transparent
        side={THREE.DoubleSide}
        depthWrite={false}
      />
    </mesh>
  );
}

function CameraRig() {
  const { camera } = useThree();
  const mouseRef = useRef({ x: 0, y: 0 });

  useFrame(() => {
    const targetX = mouseRef.current.x * 0.5;
    const targetY = mouseRef.current.y * 0.3 + 0.5;
    camera.position.x += (targetX - camera.position.x) * 0.02;
    camera.position.y += (targetY - camera.position.y) * 0.02;
    camera.lookAt(0, 0, 0);
  });

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
      mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
    };
    window.addEventListener("mousemove", handler);
    return () => window.removeEventListener("mousemove", handler);
  }, []);

  return null;
}

export default function HeroScene({
  variant = "command",
}: {
  variant?: HeroSceneVariant;
}) {
  return (
    <div
      className="absolute inset-0 z-0"
      style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
    >
      <Canvas
        camera={{ position: [0, 0.5, 8], fov: 60, near: 0.1, far: 100 }}
        dpr={[1, 1.5]}
        gl={{
          antialias: false,
          alpha: true,
          powerPreference: "high-performance",
        }}
        style={{
          background: "transparent",
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          display: "block",
        }}
      >
        <fog attach="fog" args={["#0a0a0a", 5, 25]} />
        <ambientLight intensity={0.3} />
        <directionalLight
          position={[5, 5, 5]}
          intensity={0.5}
          color="#ccff00"
        />
        <pointLight position={[-5, 3, -5]} intensity={0.3} color="#ffffff" />

        <CameraRig />
        <ParticleField count={1500} />
        <FloatingGeometry variant={variant} />
        <GridFloor />
      </Canvas>
    </div>
  );
}