"use client";

import { Canvas, useFrame } 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 = 100;
        const radius = 2;
        const height = 15;

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

            // Strand 1
            p.push(new THREE.Vector3(x, y, z));
            // Strand 2 (180 deg offset)
            p.push(new THREE.Vector3(-x, y, -z));

            // Connecting rungs
            if (i % 5 === 0) {
                const rungPoints = 5;
                for (let j = 1; j < rungPoints; j++) {
                    const t = j / rungPoints;
                    p.push(new THREE.Vector3(
                        x * (1 - 2 * t),
                        y,
                        z * (1 - 2 * t)
                    ));
                }
            }
        }
        return p;
    }, []);

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

    useFrame((state) => {
        if (groupRef.current) {
            groupRef.current.rotation.y += 0.005;
            groupRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
        }
    });

    return (
        <group ref={groupRef}>
            {points.map((pos, i) => (
                <mesh key={i} position={pos}>
                    <sphereGeometry args={[0.04, 8, 8]} />
                    <meshStandardMaterial
                        color={i % 2 === 0 ? "#3b82f6" : "#8b5cf6"}
                        emissive={i % 2 === 0 ? "#1e40af" : "#5b21b6"}
                        emissiveIntensity={2}
                    />
                </mesh>
            ))}
        </group>
    );
}

export default function DNAHeroBackground() {
    return (
        <div className="fixed inset-0 -z-10 bg-background">
            <Canvas shadows dpr={[1, 2]}>
                <PerspectiveCamera makeDefault position={[0, 0, 10]} fov={50} />
                <ambientLight intensity={0.5} />
                <pointLight position={[10, 10, 10]} intensity={1} color="#3b82f6" />
                <pointLight position={[-10, -10, -10]} intensity={1} color="#8b5cf6" />
                <spotLight position={[0, 5, 0]} angle={0.3} penumbra={1} intensity={2} castShadow />

                <Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
                    <DNAParticles />
                </Float>
            </Canvas>
            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
        </div>
    );
}