'use client'

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Mesh } from 'three'
import * as THREE from 'three'

export default function PhoenixSankofaModel() {
  const phoenixRef = useRef<Mesh>(null)
  const sankofaRef = useRef<Mesh>(null)

  // Animate the Phoenix (fire sphere)
  useFrame((state) => {
    if (phoenixRef.current) {
      phoenixRef.current.rotation.y += 0.01
      phoenixRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.2
    }
    if (sankofaRef.current) {
      sankofaRef.current.rotation.y -= 0.01
      sankofaRef.current.position.y = Math.sin(state.clock.elapsedTime + Math.PI) * 0.2
    }
  })

  return (
    <group>
      {/* Phoenix Fire - Red/Orange sphere */}
      <mesh ref={phoenixRef} position={[-1, 0, 0]}>
        <sphereGeometry args={[0.8, 32, 32]} />
        <meshStandardMaterial
          color="#FF4500"
          emissive="#FF4500"
          emissiveIntensity={0.5}
          metalness={0.3}
          roughness={0.2}
        />
      </mesh>

      {/* Sankofa Gold - Gold sphere */}
      <mesh ref={sankofaRef} position={[1, 0, 0]}>
        <sphereGeometry args={[0.8, 32, 32]} />
        <meshStandardMaterial
          color="#FFD700"
          emissive="#FFD700"
          emissiveIntensity={0.3}
          metalness={0.5}
          roughness={0.2}
        />
      </mesh>

      {/* Connection line between Phoenix and Sankofa */}
      <line>
        <bufferGeometry>
          <bufferAttribute
            attach="attributes-position"
            count={2}
            array={new Float32Array([-1, 0, 0, 1, 0, 0])}
            itemSize={3}
          />
        </bufferGeometry>
        <lineBasicMaterial color="#00FFD1" linewidth={2} />
      </line>

      {/* Central node representing the integration */}
      <mesh position={[0, 0, 0]}>
        <torusGeometry args={[0.3, 0.1, 16, 32]} />
        <meshStandardMaterial
          color="#6A0DAD"
          emissive="#6A0DAD"
          emissiveIntensity={0.4}
          metalness={0.6}
          roughness={0.1}
        />
      </mesh>

      {/* Particle effects around the model */}
      <points>
        <bufferGeometry>
          <bufferAttribute
            attach="attributes-position"
            count={100}
            array={new Float32Array(
              Array.from({ length: 300 }, () => (Math.random() - 0.5) * 4)
            )}
            itemSize={3}
          />
        </bufferGeometry>
        <pointsMaterial size={0.05} color="#00FFFF" />
      </points>
    </group>
  )
}

