
/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/

import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Float, MeshDistortMaterial, Sphere, Stars, Torus, Points, PointMaterial } from '@react-three/drei';
import * as THREE from 'three';

const FWFIInterferenceGrid = () => {
  const ref = useRef<THREE.Group>(null);
  
  useFrame((state) => {
    if (ref.current) {
      const t = state.clock.getElapsedTime();
      ref.current.children.forEach((child, i) => {
        child.rotation.y = t * 0.1 * (i + 1);
        child.rotation.z = t * 0.05 * (i + 1);
        // تمدد وانكماش لتمثيل الموجات التداخلية
        const s = 1 + Math.sin(t * 0.5 + i) * 0.05;
        child.scale.set(s, s, s);
      });
    }
  });

  return (
    <group ref={ref}>
      {[...Array(12)].map((_, i) => (
        <mesh key={i} rotation={[Math.PI / 2, i * (Math.PI / 6), 0]}>
          <torusGeometry args={[i * 1.8 + 2, 0.015, 16, 150]} />
          <meshStandardMaterial 
            color="#6366f1" 
            transparent 
            opacity={0.4 / (i + 1)} 
            emissive="#6366f1"
            emissiveIntensity={0.5}
          />
        </mesh>
      ))}
    </group>
  );
}

const UDPMCoreNode = () => {
  const meshRef = useRef<THREE.Mesh>(null);
  const [hovered, setHovered] = useState(false);
  
  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.rotation.x = Math.sin(state.clock.getElapsedTime() * 0.3) * 0.2;
      meshRef.current.rotation.y += 0.005;
      meshRef.current.position.y = Math.sin(state.clock.getElapsedTime()) * 0.5;
    }
  });

  return (
    <Sphere 
      ref={meshRef} 
      args={[1, 100, 100]} 
      scale={4.5}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <MeshDistortMaterial
        color={hovered ? "#4f46e5" : "#1e1b4b"}
        envMapIntensity={0.5}
        clearcoat={1}
        distort={0.4}
        speed={1.5}
        roughness={0.1}
        metalness={0.9}
        emissive="#6366f1"
        emissiveIntensity={0.1}
      />
    </Sphere>
  );
}

export const HeroScene: React.FC = () => {
  return (
    <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
      <Canvas 
        camera={{ position: [0, 0, 25], fov: 45 }}
        dpr={[1, 2]}
        gl={{ antialias: true, alpha: true }}
      >
        <ambientLight intensity={0.4} />
        <pointLight position={[15, 15, 15]} intensity={2.5} color="#6366f1" />
        <pointLight position={[-15, -15, -15]} intensity={1.5} color="#4f46e5" />
        <spotLight position={[0, 20, 0]} intensity={2} angle={0.5} penumbra={1} color="#ffffff" />
        
        <FWFIInterferenceGrid />
        
        <Float speed={1.5} rotationIntensity={0.8} floatIntensity={1.2}>
          <UDPMCoreNode />
        </Float>

        <Stars 
          radius={120} 
          depth={60} 
          count={4000} 
          factor={5} 
          saturation={0} 
          fade 
          speed={1.2} 
        />
      </Canvas>
    </div>
  );
};
