"use client";

import { useEffect, useRef } from "react";

type LightParticle = {
  x: number;
  y: number;
  radius: number;
  speedX: number;
  speedY: number;
  opacity: number;
};

export default function HeroBackgroundCanvas() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;

    if (!canvas) return;

    const context = canvas.getContext("2d");

    if (!context) return;

    let frame = 0;
    let width = 0;
    let height = 0;
    let particles: LightParticle[] = [];

    const createParticles = () => {
      const count = Math.min(52, Math.max(24, Math.floor(width / 32)));

      particles = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        radius: 0.8 + Math.random() * 2.8,
        speedX: -0.08 + Math.random() * 0.16,
        speedY: -0.12 - Math.random() * 0.22,
        opacity: 0.08 + Math.random() * 0.24,
      }));
    };

    const resize = () => {
      const ratio = Math.min(window.devicePixelRatio || 1, 2);
      const rect = canvas.getBoundingClientRect();

      width = rect.width;
      height = rect.height;

      canvas.width = width * ratio;
      canvas.height = height * ratio;

      context.setTransform(ratio, 0, 0, ratio, 0, 0);

      createParticles();
    };

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

      const glowOne = context.createRadialGradient(
        width * 0.78,
        height * 0.24,
        0,
        width * 0.78,
        height * 0.24,
        width * 0.58,
      );

      glowOne.addColorStop(0, "rgba(94, 202, 255, 0.20)");
      glowOne.addColorStop(0.46, "rgba(126, 218, 255, 0.08)");
      glowOne.addColorStop(1, "rgba(126, 218, 255, 0)");

      context.fillStyle = glowOne;
      context.fillRect(0, 0, width, height);

      const glowTwo = context.createRadialGradient(
        width * 0.18,
        height * 0.72,
        0,
        width * 0.18,
        height * 0.72,
        width * 0.48,
      );

      glowTwo.addColorStop(0, "rgba(255, 255, 255, 0.68)");
      glowTwo.addColorStop(1, "rgba(255, 255, 255, 0)");

      context.fillStyle = glowTwo;
      context.fillRect(0, 0, width, height);

      particles.forEach((particle) => {
        particle.x += particle.speedX;
        particle.y += particle.speedY;

        if (particle.y < -10) {
          particle.y = height + 10;
          particle.x = Math.random() * width;
        }

        if (particle.x < -10) particle.x = width + 10;
        if (particle.x > width + 10) particle.x = -10;

        context.beginPath();
        context.arc(
          particle.x,
          particle.y,
          particle.radius,
          0,
          Math.PI * 2,
        );

        context.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
        context.fill();
      });

      frame = requestAnimationFrame(draw);
    };

    resize();
    draw();

    window.addEventListener("resize", resize);

    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("resize", resize);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      aria-hidden="true"
      className="absolute inset-0 h-full w-full"
    />
  );
}