"use client";

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

function DNAParticles() {
    const points = useMemo(() => {
        const p = [];
        const count = 120; // Reduced density for simplicity
        const radius = 2.5;
        const height = 20;

        for (let i = 0; i < count; i++) {
            const angle = (i / count) * Math.PI * 6;
            const x = Math.cos(angle) * radius;
            const y = (i / count) * height - height / 2;
            const z = Math.sin(angle) * radius;

            // Simple Monochromatic Strands
            p.push({ pos: new THREE.Vector3(x, y, z), color: "#ffffff" });
            p.push({ pos: new THREE.Vector3(-x, y, -z), color: "#71717a" }); // Zinc-400 equivalent

            // Minimalist Rungs
            if (i % 6 === 0) {
                const rungPoints = 6;
                for (let j = 1; j < rungPoints; j++) {
                    const t = j / rungPoints;
                    p.push({
                        pos: new THREE.Vector3(x * (1 - 2 * t), y, z * (1 - 2 * t)),
                        color: "#3f3f46" // Zinc-600 equivalent
                    });
                }
            }
        }
        return p;
    }, []);

    const groupRef = useRef<THREE.Group>(null);
    const { mouse } = useThree();

    useFrame(() => {
        if (groupRef.current) {
            groupRef.current.rotation.y += 0.0015; // Slower, more professional rotation
            groupRef.current.rotation.x = THREE.MathUtils.lerp(groupRef.current.rotation.x, mouse.y * 0.1, 0.05);
            groupRef.current.rotation.z = THREE.MathUtils.lerp(groupRef.current.rotation.z, -mouse.x * 0.05, 0.05);
        }
    });

    return (
        <group ref={groupRef}>
            {points.map((p, i) => (
                <mesh key={i} position={p.pos}>
                    <sphereGeometry args={[p.color === "#ffffff" ? 0.03 : 0.015, 8, 8]} />
                    <meshStandardMaterial
                        color={p.color}
                        emissive={p.color}
                        emissiveIntensity={p.color === "#ffffff" ? 0.8 : 0.2}
                        transparent
                        opacity={0.6}
                    />
                </mesh>
            ))}
        </group>
    );
}

function GridOverlay() {
    return (
        <gridHelper
            args={[100, 40, "#ffffff", "#18181b"]}
            position={[0, -12, 0]}
            rotation={[0, 0, 0]}
        >
            <meshBasicMaterial attach="material" transparent opacity={0.03} />
        </gridHelper>
    );
}

export default function DNAHeroBackground() {
    return (
        <div className="fixed inset-0 -z-10 bg-black overflow-hidden">
            <div className="noise-overlay" />
            <Canvas dpr={[1, 2]}>
                <PerspectiveCamera makeDefault position={[0, 0, 15]} fov={45} />

                <ambientLight intensity={0.4} />
                <pointLight position={[10, 10, 10]} intensity={0.5} color="#ffffff" />
                <pointLight position={[-10, -10, -10]} intensity={0.3} color="#ffffff" />

                <GridOverlay />

                <Float speed={0.8} rotationIntensity={0.05} floatIntensity={0.2}>
                    <DNAParticles />
                </Float>
            </Canvas>
            <div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black pointer-events-none" />
        </div>
    );
}