'use client'

import React from 'react'

interface Particle {
  x: number
  y: number
  radius: number
  opacity: number
  color: string
  vx: number
  vy: number
}

const COLORS = [
  { r: 0, g: 212, b: 170 },  // #00d4aa teal
  { r: 0, g: 180, b: 216 },  // #00b4d8 cyan
  { r: 255, g: 255, b: 255 }, // #ffffff white
]

const CONNECTION_DISTANCE = 120
const PARTICLE_COUNT = 90

export default function Particles() {
  const canvasRef = React.useRef<HTMLCanvasElement>(null)
  const animationFrameRef = React.useRef<number>(0)

  React.useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    let width = 0
    let height = 0

    const particles: Particle[] = []

    const resize = () => {
      const parent = canvas.parentElement
      if (!parent) return
      width = parent.clientWidth
      height = parent.clientHeight
      canvas.width = width
      canvas.height = height
    }

    const createParticle = (): Particle => {
      const colorIndex = Math.random() < 0.4 ? 0 : Math.random() < 0.65 ? 1 : 2
      const color = COLORS[colorIndex]
      const isWhite = colorIndex === 2
      const opacity = isWhite
        ? Math.random() * 0.15 + 0.05
        : Math.random() * 0.4 + 0.1

      return {
        x: Math.random() * (width || 1),
        y: Math.random() * (height || 1),
        radius: Math.random() * 2 + 1,
        opacity,
        color: `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`,
        vx: (Math.random() - 0.5) * 0.3,
        vy: -(Math.random() * 0.4 + 0.1),
      }
    }

    const initParticles = () => {
      particles.length = 0
      for (let i = 0; i < PARTICLE_COUNT; i++) {
        particles.push(createParticle())
      }
    }

    const drawConnections = () => {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x
          const dy = particles[i].y - particles[j].y
          const dist = Math.sqrt(dx * dx + dy * dy)

          if (dist < CONNECTION_DISTANCE) {
            const alpha = 0.06 * (1 - dist / CONNECTION_DISTANCE)
            ctx!.beginPath()
            ctx!.strokeStyle = `rgba(0, 212, 170, ${alpha})`
            ctx!.lineWidth = 0.5
            ctx!.moveTo(particles[i].x, particles[i].y)
            ctx!.lineTo(particles[j].x, particles[j].y)
            ctx!.stroke()
          }
        }
      }
    }

    const update = () => {
      for (const p of particles) {
        p.x += p.vx
        p.y += p.vy

        // Wrap around when particle goes off screen
        if (p.y + p.radius < 0) {
          p.y = height + p.radius
          p.x = Math.random() * width
        }
        if (p.x + p.radius < 0) {
          p.x = width + p.radius
        }
        if (p.x - p.radius > width) {
          p.x = -p.radius
        }
      }
    }

    const draw = () => {
      ctx.clearRect(0, 0, width, height)

      // Draw connections first (behind particles)
      drawConnections()

      // Draw particles
      for (const p of particles) {
        ctx.beginPath()
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2)
        ctx.fillStyle = p.color
        ctx.fill()
      }
    }

    const animate = () => {
      update()
      draw()
      animationFrameRef.current = requestAnimationFrame(animate)
    }

    resize()
    initParticles()
    animate()

    const handleResize = () => {
      resize()
    }

    window.addEventListener('resize', handleResize)

    return () => {
      cancelAnimationFrame(animationFrameRef.current)
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
      }}
    />
  )
}
