"use client";

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

export default function Hero3D() {
  const containerRef = useRef<HTMLDivElement>(null);

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

    const container = containerRef.current;
    const width = container.clientWidth;
    const height = container.clientHeight;

    // Scene setup
    const scene = new THREE.Scene();

    // Camera setup
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
    camera.position.z = 8;

    // Renderer setup
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.appendChild(renderer.domElement);

    // Lights
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambientLight);

    const keyLight = new THREE.DirectionalLight(0xffffff, 1.5);
    keyLight.position.set(5, 5, 5);
    scene.add(keyLight);

    const pinkLight = new THREE.PointLight(0xff2e88, 5, 15);
    pinkLight.position.set(-4, -2, 2);
    scene.add(pinkLight);

    const goldLight = new THREE.PointLight(0xffc72c, 8, 15);
    goldLight.position.set(4, 3, 2);
    scene.add(goldLight);

    // Creating the LYT Coin (an Octahedron + Cylinder compound shape for a stylized look)
    const coinGroup = new THREE.Group();

    // Core Crystal (Diamond/Octahedron)
    const crystalGeom = new THREE.OctahedronGeometry(1.6, 0);
    const crystalMat = new THREE.MeshStandardMaterial({
      color: 0xffc72c,
      roughness: 0.1,
      metalness: 0.9,
      emissive: 0xffa500,
      emissiveIntensity: 0.3,
      flatShading: true,
    });
    const crystal = new THREE.Mesh(crystalGeom, crystalMat);
    coinGroup.add(crystal);

    // Outer Ring
    const ringGeom = new THREE.TorusGeometry(2.3, 0.12, 16, 100);
    const ringMat = new THREE.MeshStandardMaterial({
      color: 0xff2e88,
      roughness: 0.2,
      metalness: 0.8,
      emissive: 0x8b3dff,
      emissiveIntensity: 0.2,
    });
    const ring = new THREE.Mesh(ringGeom, ringMat);
    ring.rotation.x = Math.PI / 2;
    coinGroup.add(ring);

    // Floating minor energy crystals
    const smallCrystals: THREE.Mesh[] = [];
    const smallCrystalGeom = new THREE.OctahedronGeometry(0.3, 0);
    const smallCrystalMat = new THREE.MeshStandardMaterial({
      color: 0xc8ff37,
      roughness: 0.1,
      metalness: 0.8,
      flatShading: true,
    });

    for (let i = 0; i < 4; i++) {
      const smallCrys = new THREE.Mesh(smallCrystalGeom, smallCrystalMat);
      const angle = (i / 4) * Math.PI * 2;
      smallCrys.position.set(Math.cos(angle) * 3.2, Math.sin(angle) * 3.2, 0);
      coinGroup.add(smallCrys);
      smallCrystals.push(smallCrys);
    }

    scene.add(coinGroup);

    // Floating particles (energy dust)
    const particleCount = 120;
    const particleGeometry = new THREE.BufferGeometry();
    const particlePositions = new Float32Array(particleCount * 3);

    for (let i = 0; i < particleCount * 3; i += 3) {
      // Circle layout with random spreads
      const radius = 2 + Math.random() * 8;
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.acos(2 * Math.random() - 1);

      particlePositions[i] = radius * Math.sin(phi) * Math.cos(theta);
      particlePositions[i + 1] = radius * Math.sin(phi) * Math.sin(theta);
      particlePositions[i + 2] = radius * Math.cos(phi);
    }

    particleGeometry.setAttribute(
      "position",
      new THREE.BufferAttribute(particlePositions, 3)
    );

    // Dynamic glowing points
    const pMaterial = new THREE.PointsMaterial({
      color: 0xffffff,
      size: 0.05,
      transparent: true,
      opacity: 0.8,
      blending: THREE.AdditiveBlending,
    });

    const particleSystem = new THREE.Points(particleGeometry, pMaterial);
    scene.add(particleSystem);

    // Mouse interaction states
    let mouseX = 0;
    let mouseY = 0;
    let targetX = 0;
    let targetY = 0;

    const handleMouseMove = (event: MouseEvent) => {
      const rect = container.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      mouseX = (x / width) * 2 - 1;
      mouseY = -(y / height) * 2 + 1;
    };

    window.addEventListener("mousemove", handleMouseMove);

    // Animation Loop
    let animationFrameId: number;
    let clock = new THREE.Clock();

    const animate = () => {
      const elapsedTime = clock.getElapsedTime();

      // Slow passive rotation
      coinGroup.rotation.y = elapsedTime * 0.4;
      coinGroup.rotation.x = Math.sin(elapsedTime * 0.5) * 0.2;

      // Outer ring counter-rotation
      ring.rotation.z = -elapsedTime * 0.6;

      // Small crystals float around
      smallCrystals.forEach((crys, idx) => {
        const offset = idx * (Math.PI / 2);
        crys.position.y = Math.sin(elapsedTime * 1.5 + offset) * 3.4;
        crys.position.x = Math.cos(elapsedTime * 1.5 + offset) * 3.4;
        crys.rotation.x += 0.01;
        crys.rotation.y += 0.02;
      });

      // Drifting particles
      particleSystem.rotation.y = elapsedTime * 0.05;
      particleSystem.rotation.x = Math.sin(elapsedTime * 0.02) * 0.1;

      // Smooth mouse follow (LERP)
      targetX += (mouseX - targetX) * 0.05;
      targetY += (mouseY - targetY) * 0.05;

      coinGroup.position.x = targetX * 1.5;
      coinGroup.position.y = targetY * 1.5;
      
      // Dynamic lighting follow
      goldLight.position.x = 4 + targetX * 2;
      goldLight.position.y = 3 + targetY * 2;

      renderer.render(scene, camera);
      animationFrameId = requestAnimationFrame(animate);
    };

    animate();

    // Resize Handler
    const handleResize = () => {
      if (!container) return;
      const newWidth = container.clientWidth;
      const newHeight = container.clientHeight;

      camera.aspect = newWidth / newHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(newWidth, newHeight);
    };

    window.addEventListener("resize", handleResize);

    // Cleanup
    return () => {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("resize", handleResize);
      container.removeChild(renderer.domElement);
      
      // Dispose materials/geometries to prevent memory leaks
      crystalGeom.dispose();
      crystalMat.dispose();
      ringGeom.dispose();
      ringMat.dispose();
      smallCrystalGeom.dispose();
      smallCrystalMat.dispose();
      particleGeometry.dispose();
      pMaterial.dispose();
      renderer.dispose();
    };
  }, []);

  return (
    <div ref={containerRef} className="w-full h-full relative">
      <div className="absolute inset-0 bg-radial-[circle_at_center,_transparent_60%,_var(--color-dark)_100%] pointer-events-none" />
    </div>
  );
}
