'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function DNAHelix({ className }: { className?: string }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const W = container.clientWidth;
    const H = container.clientHeight;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(W, H);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setClearColor(0x000000, 0);
    container.appendChild(renderer.domElement);

    const scene  = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(52, W / H, 0.1, 100);
    camera.position.set(0, 0, 10);

    const matCyan = new THREE.MeshStandardMaterial({
      color:             new THREE.Color('#00F5D4'),
      emissive:          new THREE.Color('#00F5D4'),
      emissiveIntensity: 0.25,
      roughness:         0.3,
      metalness:         0.6,
      transparent:       true,
      opacity:           0.30,
    });
    const matPurple = new THREE.MeshStandardMaterial({
      color:             new THREE.Color('#8B5CF6'),
      emissive:          new THREE.Color('#8B5CF6'),
      emissiveIntensity: 0.25,
      roughness:         0.3,
      metalness:         0.6,
      transparent:       true,
      opacity:           0.30,
    });
    const matAmber = new THREE.MeshStandardMaterial({
      color:             new THREE.Color('#F59E0B'),
      emissive:          new THREE.Color('#F59E0B'),
      emissiveIntensity: 0.15,
      roughness:         0.5,
      metalness:         0.3,
      transparent:       true,
      opacity:           0.40,
    });

    const group = new THREE.Group();
    const TURNS    = 2.5;
    const HEIGHT   = 7.5;
    const RADIUS   = 1.2;
    const SEGMENTS = 140;
    const N_PAIRS  = 20;

    const pts1: THREE.Vector3[] = [];
    const pts2: THREE.Vector3[] = [];
    for (let i = 0; i <= SEGMENTS; i++) {
      const frac  = i / SEGMENTS;
      const theta = frac * TURNS * Math.PI * 2;
      const y     = frac * HEIGHT - HEIGHT / 2;
      pts1.push(new THREE.Vector3(Math.cos(theta) * RADIUS, y, Math.sin(theta) * RADIUS));
      pts2.push(new THREE.Vector3(Math.cos(theta + Math.PI) * RADIUS, y, Math.sin(theta + Math.PI) * RADIUS));
    }

    const curve1 = new THREE.CatmullRomCurve3(pts1);
    const curve2 = new THREE.CatmullRomCurve3(pts2);
    group.add(new THREE.Mesh(new THREE.TubeGeometry(curve1, SEGMENTS, 0.052, 12, false), matCyan));
    group.add(new THREE.Mesh(new THREE.TubeGeometry(curve2, SEGMENTS, 0.052, 12, false), matPurple));

    const sphereGeo = new THREE.SphereGeometry(0.10, 20, 20);
    const yAxis     = new THREE.Vector3(0, 1, 0);

    for (let i = 0; i < N_PAIRS; i++) {
      const idx = Math.round((i / N_PAIRS) * SEGMENTS);
      const p1  = pts1[idx].clone();
      const p2  = pts2[idx].clone();
      const dir = new THREE.Vector3().subVectors(p2, p1);
      const len = dir.length();
      const mid = new THREE.Vector3().addVectors(p1, p2).multiplyScalar(0.5);

      const cylGeo = new THREE.CylinderGeometry(0.026, 0.026, len, 8);
      const conn   = new THREE.Mesh(cylGeo, matAmber);
      conn.position.copy(mid);
      conn.quaternion.setFromUnitVectors(yAxis, dir.normalize());
      group.add(conn);

      const s1 = new THREE.Mesh(sphereGeo, matCyan.clone());
      s1.position.copy(p1);
      const s2 = new THREE.Mesh(sphereGeo, matPurple.clone());
      s2.position.copy(p2);
      group.add(s1, s2);
    }

    scene.add(group);

    const P_COUNT = 320;
    const pPositions = new Float32Array(P_COUNT * 3);
    const pColors    = new Float32Array(P_COUNT * 3);
    const cCyan   = new THREE.Color('#00F5D4');
    const cPurple = new THREE.Color('#8B5CF6');

    for (let i = 0; i < P_COUNT; i++) {
      pPositions[i * 3]     = (Math.random() - 0.5) * 24;
      pPositions[i * 3 + 1] = (Math.random() - 0.5) * 18;
      pPositions[i * 3 + 2] = (Math.random() - 0.5) * 12 - 4;
      const c = Math.random() > 0.55 ? cCyan : cPurple;
      pColors[i * 3]     = c.r;
      pColors[i * 3 + 1] = c.g;
      pColors[i * 3 + 2] = c.b;
    }

    const pGeo = new THREE.BufferGeometry();
    pGeo.setAttribute('position', new THREE.BufferAttribute(pPositions, 3));
    pGeo.setAttribute('color', new THREE.BufferAttribute(pColors, 3));
    const pMat = new THREE.PointsMaterial({
      size: 0.04,
      vertexColors: true,
      transparent: true,
      opacity: 0.20,
      sizeAttenuation: true,
    });
    const particles = new THREE.Points(pGeo, pMat);
    scene.add(particles);

    scene.add(new THREE.AmbientLight(0xffffff, 0.2));

    const l1 = new THREE.PointLight('#00F5D4', 1.2, 25);
    l1.position.set(4, 4, 5);
    scene.add(l1);

    const l2 = new THREE.PointLight('#8B5CF6', 1.2, 25);
    l2.position.set(-4, -4, 5);
    scene.add(l2);

    const l3 = new THREE.PointLight('#F59E0B', 0.6, 18);
    l3.position.set(0, 0, 7);
    scene.add(l3);

    let targetMX = 0;
    let targetMY = 0;
    let currentMX = 0;
    let currentMY = 0;

    const onMouseMove = (e: MouseEvent) => {
      targetMX = (e.clientX / window.innerWidth - 0.5) * 2;
      targetMY = (e.clientY / window.innerHeight - 0.5) * 2;
    };
    window.addEventListener('mousemove', onMouseMove);

    const clock = new THREE.Clock();
    let rafId: number;

    const animate = () => {
      rafId = requestAnimationFrame(animate);
      const elapsed = clock.getElapsedTime();

      currentMX += (targetMX - currentMX) * 0.04;
      currentMY += (targetMY - currentMY) * 0.04;

      group.rotation.y = elapsed * 0.22 + currentMX * 0.35;
      group.rotation.x = currentMY * 0.08;
      group.position.y = Math.sin(elapsed * 0.38) * 0.14;

      const pos = pGeo.attributes.position.array as Float32Array;
      for (let i = 0; i < P_COUNT; i++) {
        pos[i * 3 + 1] += 0.006;
        if (pos[i * 3 + 1] > 9) pos[i * 3 + 1] = -9;
      }
      pGeo.attributes.position.needsUpdate = true;
      particles.rotation.y = elapsed * 0.03;

      renderer.render(scene, camera);
    };
    animate();

    const onResize = () => {
      const nw = container.clientWidth;
      const nh = container.clientHeight;
      camera.aspect = nw / nh;
      camera.updateProjectionMatrix();
      renderer.setSize(nw, nh);
    };
    window.addEventListener('resize', onResize);

    return () => {
      cancelAnimationFrame(rafId);
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('resize', onResize);
      renderer.dispose();
      if (container.contains(renderer.domElement)) {
        container.removeChild(renderer.domElement);
      }
    };
  }, []);

  return <div ref={containerRef} className={className ?? 'w-full h-full'} />;
}