import {afterNextRender, AfterViewInit, Component, ElementRef, NgZone, OnDestroy, ViewChild} from '@angular/core';
import {Dot} from '../../models/dot';

@Component({
  selector: 'app-dot-background',
  imports: [],
  templateUrl: './dot-background.html',
  styleUrl: './dot-background.scss',
})
export class DotBackground implements OnDestroy {
  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;

  private ctx!: CanvasRenderingContext2D;
  private dots: Dot[] = [];
  private mouse = { x: -1000, y: -1000 };
  private animationId = 0;
  private initialized = false;

  private readonly DOT_COUNT = 12;
  private readonly COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#3b82f6'];
  private readonly MOUSE_RADIUS = 150;

  constructor(private ngZone: NgZone) {
    afterNextRender(() => {
      this.init();
    });
  }

  ngOnDestroy() {
    if (!this.initialized) return;

    cancelAnimationFrame(this.animationId);
    window.removeEventListener('resize', this.resize);
    window.removeEventListener('mousemove', this.onMouseMove);
  }

  private init() {
    const canvas = this.canvasRef.nativeElement;
    this.ctx = canvas.getContext('2d')!;
    this.resize();
    this.initDots();

    window.addEventListener('resize', this.resize);
    window.addEventListener('mousemove', this.onMouseMove);

    this.initialized = true;
    this.ngZone.runOutsideAngular(() => this.animate());
  }

  private resize = () => {
    const canvas = this.canvasRef.nativeElement;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Clamp dots to new bounds
    for (const dot of this.dots) {
      dot.x = Math.min(dot.x, canvas.width - dot.radius);
      dot.y = Math.min(dot.y, canvas.height - dot.radius);
      dot.x = Math.max(dot.x, dot.radius);
      dot.y = Math.max(dot.y, dot.radius);
    }
  };

  private onMouseMove = (e: MouseEvent) => {
    this.mouse.x = e.clientX;
    this.mouse.y = e.clientY;
  };

  private initDots() {
    const { width, height } = this.canvasRef.nativeElement;
    for (let i = 0; i < this.DOT_COUNT; i++) {
      this.dots.push({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.5,
        vy: (Math.random() - 0.5) * 0.5,
        radius: Math.random() * 60 + 40,
        color: this.COLORS[i % this.COLORS.length],
      });
    }
  }

  private animate = () => {
    const canvas = this.canvasRef.nativeElement;
    const { width, height } = canvas;
    this.ctx.clearRect(0, 0, width, height);

    for (const dot of this.dots) {
      const dx = dot.x - this.mouse.x;
      const dy = dot.y - this.mouse.y;
      const dist = Math.sqrt(dx * dx + dy * dy);

      if (dist < this.MOUSE_RADIUS) {
        const force = (this.MOUSE_RADIUS - dist) / this.MOUSE_RADIUS;
        dot.vx += (dx / dist) * force * 0.5;
        dot.vy += (dy / dist) * force * 0.5;
      }

      dot.x += dot.vx;
      dot.y += dot.vy;

      const speed = Math.sqrt(dot.vx * dot.vx + dot.vy * dot.vy);
      if (speed > 0.3) {
        dot.vx *= 0.98;
        dot.vy *= 0.98;
      }

      // Bounce off edges (accounting for radius)
      if (dot.x < dot.radius || dot.x > width - dot.radius) dot.vx *= -1;
      if (dot.y < dot.radius || dot.y > height - dot.radius) dot.vy *= -1;

      // Clamp to bounds
      dot.x = Math.max(dot.radius, Math.min(width - dot.radius, dot.x));
      dot.y = Math.max(dot.radius, Math.min(height - dot.radius, dot.y));

      const gradient = this.ctx.createRadialGradient(
        dot.x, dot.y, 0,
        dot.x, dot.y, dot.radius
      );
      gradient.addColorStop(0, dot.color + '40');
      gradient.addColorStop(1, 'transparent');

      this.ctx.beginPath();
      this.ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
      this.ctx.fillStyle = gradient;
      this.ctx.fill();
    }

    this.animationId = requestAnimationFrame(this.animate);
  };
}