"use client";

import { useRef, useMemo, useEffect, useState, useCallback } from "react";

import { Canvas, useFrame, useThree } from "@react-three/fiber";

import { Text, Line } from "@react-three/drei";

import * as THREE from "three";

import type { HealthResponse, DataSource } from "@/lib/types";

const SOURCE_CONFIG: Record<DataSource, { label: string; basePos: [number, number, number] }> = {

  proxmox:          { label: "PROXMOX",       basePos: [-4.0,  2.2, -0.4] },

  "white-pc":       { label: "WHITE-PC",      basePos: [ 3.8,  2.6,  0.2] },

  "3060":           { label: "RTX 3060",      basePos: [ 2.8, -1.8,  0.7] },

  "browser-history":{ label: "BROWSER",       basePos: [ 0.5,  3.8,  0.3] },

  agents:           { label: "AGENTS",        basePos: [-1.8, -3.4,  0.0] },

  rag:              { label: "RAG",           basePos: [-3.6, -0.6,  0.9] },

  cbm:              { label: "CBM",           basePos: [ 2.4,  1.0, -1.0] },

  serena:           { label: "SERENA",        basePos: [-1.0,  2.6, -1.6] },

  memgraph:         { label: "MEMGRAPH",      basePos: [ 0.3, -2.6, -1.0] },

  inbox:            { label: "INBOX",         basePos: [ 4.4, -0.6, -0.3] },

};

const SOURCES = Object.keys(SOURCE_CONFIG) as DataSource[];

const CONNECTIONS: [DataSource, DataSource][] = [

  ["rag", "proxmox"],

  ["rag", "agents"],

  ["rag", "cbm"],

  ["cbm", "serena"],

  ["cbm", "proxmox"],

  ["agents", "memgraph"],

  ["agents", "inbox"],

  ["serena", "proxmox"],

  ["memgraph", "rag"],

  ["inbox", "agents"],

  ["3060", "agents"],

  ["white-pc", "rag"],

  ["browser-history", "memgraph"],

];

const TEAL = new THREE.Color("#16e0c8");

const TEAL_DIM = new THREE.Color("#0d9e8e");

const GREY = new THREE.Color("#3a3a3a");

const DEAD = new THREE.Color("#1a1a1a");

function healthColor(staleness_h: number, status: "up" | "down"): THREE.Color {

  if (status === "down") return DEAD;

  if (staleness_h < 2) return TEAL;

  if (staleness_h < 12) return TEAL_DIM;

  if (staleness_h < 24) return GREY;

  return DEAD;

}

function healthScale(staleness_h: number, status: "up" | "down"): number {

  if (status === "down") return 0.3;

  if (staleness_h > 24) return 0.4;

  if (staleness_h > 12) return 0.7;

  return 1.0;

}

interface NodeProps {

  id: DataSource;

  targetPos: [number, number, number];

  color: THREE.Color;

  scale: number;

  label: string;

  cursorWorld: React.MutableRefObject<THREE.Vector3>;

  spawnProgress: number;

  isStale: boolean;

  collapse: React.MutableRefObject<number>;

}

function OrgNode({ id, targetPos, color, scale, label, cursorWorld, spawnProgress, isStale, collapse }: NodeProps) {

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

  const currentPos = useRef(new THREE.Vector3(0, 0, 0));

  const target = useMemo(() => new THREE.Vector3(...targetPos), [targetPos]);

  const glowRef = useRef<THREE.PointLight>(null);

  const timeRef = useRef(Math.random() * Math.PI * 2);

  useFrame((_, delta) => {

    if (!meshRef.current) return;

    timeRef.current += delta;

    const attraction = new THREE.Vector3().copy(cursorWorld.current).sub(target);

    const dist = attraction.length();

    const pull = dist < 4 ? (1 - dist / 4) * 0.4 : 0;

    const pullTarget = new THREE.Vector3()

      .copy(target)

      .addScaledVector(attraction.normalize(), pull * -1);

    pullTarget.multiplyScalar(1 - collapse.current * 0.82);

    currentPos.current.lerp(pullTarget.multiplyScalar(spawnProgress), 0.08);

    meshRef.current.position.copy(currentPos.current);

    const breathe = 1 + Math.sin(timeRef.current * 0.7 + timeRef.current) * 0.05;

    const finalScale = scale * breathe * spawnProgress * (1 - collapse.current * 0.35);

    meshRef.current.scale.setScalar(finalScale);

    if (glowRef.current) {

      const intensity = isStale ? 0 : 0.5 + Math.sin(timeRef.current * 1.2) * 0.2;

      glowRef.current.intensity = intensity * spawnProgress;

    }

  });

  return (

    <group>

      <mesh ref={meshRef}>

        {}

        <sphereGeometry args={[0.32, 24, 24]} />

        <meshStandardMaterial

          color={color}

          emissive={color}

          emissiveIntensity={isStale ? 0.08 : 0.8}

          roughness={0.15}

          metalness={0.4}

        />

      </mesh>

      <pointLight

        ref={glowRef}

        color={color}

        intensity={0}

        distance={3.5}

        position={[...targetPos] as [number, number, number]}

      />

      <Text

        position={[targetPos[0], targetPos[1] + 0.55, targetPos[2]]}

        fontSize={0.15}

        letterSpacing={0.06}

        color={isStale ? "#3a3a3a" : "#16e0c8"}

        anchorX="center"

        anchorY="bottom"

        outlineWidth={0}

        material-toneMapped={false}

      >

        {label}

      </Text>

    </group>

  );

}

interface SceneProps {

  healthData: HealthResponse | null;

  focusMode: boolean;

}

function OrganismScene({ healthData, focusMode }: SceneProps) {

  const { camera, gl } = useThree();

  const cursorWorld = useRef(new THREE.Vector3(0, 0, 0));

  const [spawnProgress, setSpawnProgress] = useState(0);

  const startTime = useRef(Date.now());

  const collapse = useRef(0);

  const centerGlowRef = useRef<THREE.PointLight>(null);

  useEffect(() => {

    camera.position.set(0, 0, 6);

  }, [camera]);

  useEffect(() => {

    let rafId: number;

    function tick() {

      const elapsed = (Date.now() - startTime.current) / 1200;

      const t = Math.min(elapsed, 1);

      const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);

      setSpawnProgress(eased);

      if (t < 1) rafId = requestAnimationFrame(tick);

    }

    rafId = requestAnimationFrame(tick);

    return () => cancelAnimationFrame(rafId);

  }, []);

  useEffect(() => {

    const canvas = gl.domElement;

    function onMouseMove(e: MouseEvent) {

      const rect = canvas.getBoundingClientRect();

      const nx = ((e.clientX - rect.left) / rect.width) * 2 - 1;

      const ny = -((e.clientY - rect.top) / rect.height) * 2 + 1;

      const vec = new THREE.Vector3(nx, ny, 0.5);

      vec.unproject(camera);

      vec.sub(camera.position).normalize();

      const dist = -camera.position.z / vec.z;

      const pos = new THREE.Vector3().addVectors(camera.position, vec.multiplyScalar(dist));

      cursorWorld.current.copy(pos);

    }

    canvas.addEventListener("mousemove", onMouseMove, { passive: true });

    return () => canvas.removeEventListener("mousemove", onMouseMove);

  }, [camera, gl]);

  const healthMap = useMemo(() => {

    const map = new Map<string, { staleness_h: number; status: "up" | "down" }>();

    if (healthData) {

      for (const eng of healthData.engines) {

        map.set(eng.engine, { staleness_h: eng.staleness_h, status: eng.status });

      }

    }

    return map;

  }, [healthData]);

  const groupRef = useRef<THREE.Group>(null);

  useFrame((_, delta) => {

    if (groupRef.current) {

      groupRef.current.rotation.y += delta * 0.04;

      groupRef.current.rotation.x += delta * 0.01;

    }

    const collapseTarget = focusMode ? 1 : 0;

    collapse.current += (collapseTarget - collapse.current) * Math.min(1, delta * 4.5);

    if (centerGlowRef.current) {

      centerGlowRef.current.intensity = (1.5 + collapse.current * 2.5) * spawnProgress;

    }

  });

  return (

    <>

      {}

      <ambientLight intensity={0.25} />

      <pointLight position={[0, 0, 4]} intensity={0.6} color="#ffffff" />

      <pointLight position={[-4, 3, 2]} intensity={0.3} color="#16e0c8" distance={12} />

      <pointLight ref={centerGlowRef} position={[0, 0, 0]} intensity={2.0} color="#16e0c8" distance={10} />

      <group ref={groupRef}>

        {}

        {CONNECTIONS.map(([a, b], i) => {

          const aPos = SOURCE_CONFIG[a].basePos;

          const bPos = SOURCE_CONFIG[b].basePos;

          const aHealth = healthMap.get(a);

          const bHealth = healthMap.get(b);

          const bothHealthy =

            (!aHealth || aHealth.staleness_h < 12) &&

            (!bHealth || bHealth.staleness_h < 12);

          return (

            <Line

              key={i}

              points={[aPos, bPos]}

              color={bothHealthy ? "#16e0c8" : "#222"}

              lineWidth={bothHealthy ? 0.8 : 0.4}

              transparent

              opacity={bothHealthy ? 0.35 * spawnProgress : 0.1 * spawnProgress}

            />

          );

        })}

        {}

        {SOURCES.map((id) => {

          const cfg = SOURCE_CONFIG[id];

          const h = healthMap.get(id) ?? { staleness_h: 0, status: "up" as const };

          return (

            <OrgNode

              key={id}

              id={id}

              targetPos={cfg.basePos}

              color={healthColor(h.staleness_h, h.status)}

              scale={healthScale(h.staleness_h, h.status)}

              label={cfg.label}

              cursorWorld={cursorWorld}

              spawnProgress={spawnProgress}

              isStale={h.staleness_h > 12 || h.status === "down"}

              collapse={collapse}

            />

          );

        })}

      </group>

    </>

  );

}

interface DarwinOrganismProps {

  healthData: HealthResponse | null;

  focusMode?: boolean;

}

function RenderGate() {

  const invalidate = useThree((s) => s.invalidate);

  const gl = useThree((s) => s.gl);

  const visibleRef = useRef(true);

  const accRef = useRef(0);

  useEffect(() => {

    const el = gl.domElement;

    const io = new IntersectionObserver(

      (entries) => {

        const entry = entries[0];

        visibleRef.current = entry.isIntersecting;

        if (entry.isIntersecting) invalidate();

      },

      { threshold: 0 }

    );

    io.observe(el);

    return () => io.disconnect();

  }, [gl, invalidate]);

  useFrame((_, delta) => {

    if (!visibleRef.current) return;

    accRef.current += delta;

    if (accRef.current >= 1 / 30) {

      accRef.current = 0;

      invalidate();

    }

  });

  return null;

}

export default function DarwinOrganism({ healthData, focusMode = false }: DarwinOrganismProps) {

  return (

    <Canvas

      frameloop="demand"

      dpr={[1, 2]}

      gl={{ antialias: true, alpha: true }}

      style={{ background: "transparent" }}

      camera={{ fov: 60, near: 0.1, far: 100 }}

    >

      <RenderGate />

      <OrganismScene healthData={healthData} focusMode={focusMode} />

    </Canvas>

  );

}