import { useEffect, useRef, useState } from 'react'

// 生成一个固定的随机种子（在模块加载时生成一次）
const NOISE_SEED = (() => {
  // 使用时间戳的一部分作为种子，但在开发环境中使用固定值以保持一致性
  if (import.meta.env.DEV) {
    return 42 // 开发环境使用固定种子
  }
  return Date.now() % 1000000
})()

// Perlin Noise implementation
class Noise {
  private grad3: number[][]
  private p: number[]
  private perm: number[]

  constructor(seed = 0) {
    // Use seed to ensure deterministic noise (seed is used implicitly in shuffle)
    void seed
    this.grad3 = [
      [1, 1, 0],
      [-1, 1, 0],
      [1, -1, 0],
      [-1, -1, 0],
      [1, 0, 1],
      [-1, 0, 1],
      [1, 0, -1],
      [-1, 0, -1],
      [0, 1, 1],
      [0, -1, 1],
      [0, 1, -1],
      [0, -1, -1],
    ]
    this.p = []
    for (let i = 0; i < 256; i++) {
      this.p[i] = Math.floor(Math.random() * 256)
    }
    this.perm = []
    for (let i = 0; i < 512; i++) {
      this.perm[i] = this.p[i & 255]
    }
  }

  dot(g: number[], x: number, y: number) {
    return g[0] * x + g[1] * y
  }

  mix(a: number, b: number, t: number) {
    return (1 - t) * a + t * b
  }

  fade(t: number) {
    return t * t * t * (t * (t * 6 - 15) + 10)
  }

  perlin2(x: number, y: number) {
    const X = Math.floor(x) & 255
    const Y = Math.floor(y) & 255
    x -= Math.floor(x)
    y -= Math.floor(y)
    const u = this.fade(x)
    const v = this.fade(y)
    const A = this.perm[X] + Y
    const AA = this.perm[A]
    const AB = this.perm[A + 1]
    const B = this.perm[X + 1] + Y
    const BA = this.perm[B]
    const BB = this.perm[B + 1]

    return this.mix(
      this.mix(
        this.dot(this.grad3[AA % 12], x, y),
        this.dot(this.grad3[BA % 12], x - 1, y),
        u
      ),
      this.mix(
        this.dot(this.grad3[AB % 12], x, y - 1),
        this.dot(this.grad3[BB % 12], x - 1, y - 1),
        u
      ),
      v
    )
  }
}

interface Point {
  x: number
  y: number
  wave: { x: number; y: number }
  cursor: { x: number; y: number; vx: number; vy: number }
}

export function WavesBackground() {
  const svgRef = useRef<SVGSVGElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const animationRef = useRef<number | undefined>(undefined)
  const [noiseInstance] = useState(() => new Noise(NOISE_SEED))
  
  const dataRef = useRef<{
    mouse: {
      x: number
      y: number
      lx: number
      ly: number
      sx: number
      sy: number
      v: number
      vs: number
      a: number
      set: boolean
    }
    lines: Point[][]
    paths: SVGPathElement[]
    noise: Noise
    bounding: DOMRect | null
  }>({
    mouse: {
      x: -10,
      y: 0,
      lx: 0,
      ly: 0,
      sx: 0,
      sy: 0,
      v: 0,
      vs: 0,
      a: 0,
      set: false,
    },
    lines: [],
    paths: [],
    noise: noiseInstance,
    bounding: null,
  })

  useEffect(() => {
    const container = containerRef.current
    const svg = svgRef.current
    if (!container || !svg) return

    const data = dataRef.current
    // 将 noiseInstance 赋值给 dataRef
    data.noise = noiseInstance

    // Set size
    const setSize = () => {
      const bounding = container.getBoundingClientRect()
      data.bounding = bounding
      svg.style.width = `${bounding.width}px`
      svg.style.height = `${bounding.height}px`
    }

    // Set lines
    const setLines = () => {
      if (!data.bounding) return

      const { width, height } = data.bounding

      data.lines = []
      data.paths.forEach((path) => path.remove())
      data.paths = []

      const xGap = 10
      const yGap = 32

      const oWidth = width + 200
      const oHeight = height + 30

      const totalLines = Math.ceil(oWidth / xGap)
      const totalPoints = Math.ceil(oHeight / yGap)

      const xStart = (width - xGap * totalLines) / 2
      const yStart = (height - yGap * totalPoints) / 2

      for (let i = 0; i <= totalLines; i++) {
        const points: Point[] = []

        for (let j = 0; j <= totalPoints; j++) {
          const point: Point = {
            x: xStart + xGap * i,
            y: yStart + yGap * j,
            wave: { x: 0, y: 0 },
            cursor: { x: 0, y: 0, vx: 0, vy: 0 },
          }
          points.push(point)
        }

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
        svg.appendChild(path)
        data.paths.push(path)
        data.lines.push(points)
      }
    }

    // Move points
    const movePoints = (time: number) => {
      const { lines, mouse, noise } = data

      lines.forEach((points) => {
        points.forEach((p) => {
          // Wave movement
          const move =
            noise.perlin2((p.x + time * 0.0125) * 0.002, (p.y + time * 0.005) * 0.0015) * 12
          p.wave.x = Math.cos(move) * 32
          p.wave.y = Math.sin(move) * 16

          // Mouse effect
          const dx = p.x - mouse.sx
          const dy = p.y - mouse.sy
          const d = Math.hypot(dx, dy)
          const l = Math.max(175, mouse.vs)

          if (d < l) {
            const s = 1 - d / l
            const f = Math.cos(d * 0.001) * s

            p.cursor.vx += Math.cos(mouse.a) * f * l * mouse.vs * 0.00065
            p.cursor.vy += Math.sin(mouse.a) * f * l * mouse.vs * 0.00065
          }

          p.cursor.vx += (0 - p.cursor.x) * 0.005
          p.cursor.vy += (0 - p.cursor.y) * 0.005

          p.cursor.vx *= 0.925
          p.cursor.vy *= 0.925

          p.cursor.x += p.cursor.vx * 2
          p.cursor.y += p.cursor.vy * 2

          p.cursor.x = Math.min(100, Math.max(-100, p.cursor.x))
          p.cursor.y = Math.min(100, Math.max(-100, p.cursor.y))
        })
      })
    }

    // Get moved point
    const moved = (point: Point, withCursorForce = true) => {
      const coords = {
        x: point.x + point.wave.x + (withCursorForce ? point.cursor.x : 0),
        y: point.y + point.wave.y + (withCursorForce ? point.cursor.y : 0),
      }
      coords.x = Math.round(coords.x * 10) / 10
      coords.y = Math.round(coords.y * 10) / 10
      return coords
    }

    // Draw lines
    const drawLines = () => {
      const { lines, paths } = data

      lines.forEach((points, lIndex) => {
        let p1 = moved(points[0], false)
        let d = `M ${p1.x} ${p1.y}`

        points.forEach((point, pIndex) => {
          const isLast = pIndex === points.length - 1
          p1 = moved(point, !isLast)
          d += `L ${p1.x} ${p1.y}`
        })

        paths[lIndex].setAttribute('d', d)
      })
    }

    // Tick
    const tick = (time: number) => {
      const { mouse } = data

      mouse.sx += (mouse.x - mouse.sx) * 0.1
      mouse.sy += (mouse.y - mouse.sy) * 0.1

      const dx = mouse.x - mouse.lx
      const dy = mouse.y - mouse.ly
      const d = Math.hypot(dx, dy)

      mouse.v = d
      mouse.vs += (d - mouse.vs) * 0.1
      mouse.vs = Math.min(100, mouse.vs)

      mouse.lx = mouse.x
      mouse.ly = mouse.y

      mouse.a = Math.atan2(dy, dx)

      if (container) {
        container.style.setProperty('--x', `${mouse.sx}px`)
        container.style.setProperty('--y', `${mouse.sy}px`)
      }

      movePoints(time)
      drawLines()

      animationRef.current = requestAnimationFrame(tick)
    }

    // Event handlers
    const handleMouseMove = (e: MouseEvent) => {
      if (!data.bounding) return
      const { mouse } = data
      mouse.x = e.pageX - data.bounding.left
      mouse.y = e.pageY - data.bounding.top + window.scrollY

      if (!mouse.set) {
        mouse.sx = mouse.x
        mouse.sy = mouse.y
        mouse.lx = mouse.x
        mouse.ly = mouse.y
        mouse.set = true
      }
    }

    const handleResize = () => {
      setSize()
      setLines()
    }

    // Init
    setSize()
    setLines()

    window.addEventListener('resize', handleResize)
    window.addEventListener('mousemove', handleMouseMove)

    animationRef.current = requestAnimationFrame(tick)

    return () => {
      window.removeEventListener('resize', handleResize)
      window.removeEventListener('mousemove', handleMouseMove)
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [noiseInstance])

  return (
    <div
      ref={containerRef}
      className="waves-background"
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        pointerEvents: 'none',
      }}
    >
      <div
        className="waves-cursor"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '0.5rem',
          height: '0.5rem',
          background: 'hsl(var(--primary) / 0.3)',
          borderRadius: '50%',
          transform: 'translate3d(calc(var(--x, -0.5rem) - 50%), calc(var(--y, 50%) - 50%), 0)',
          willChange: 'transform',
          pointerEvents: 'none',
        }}
      />
      <svg
        ref={svgRef}
        style={{
          display: 'block',
          width: '100%',
          height: '100%',
        }}
      >
        <style>{`
          path {
            fill: none;
            stroke: hsl(var(--primary) / 0.20);
            stroke-width: 1px;
          }
        `}</style>
      </svg>
    </div>
  )
}