import {AfterViewInit, Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {RouterLink} from '@angular/router';
import {SeoService} from '../../../_services/seo.service';
import {Particle} from '../../../_models/particule';

@Component({
  selector: 'app-home',
  imports: [
    RouterLink
  ],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {

  @ViewChild('particleContainer') particleContainer!: ElementRef;

  private particles: Particle[] = [];
  private particleCount = 20;
  private animationFrameId: number | null = null;

  constructor(private seoService: SeoService, private ngZone: NgZone) { }

  ngOnInit(): void {
    this.seoService.updateSEOMetaTags({
      title: 'Johan Leroy - Portfolio',
      description: 'Découvrez mon portfolio',
      keywords: 'johanleroy, johan, leroy, développeur, portfolio, johan leroy développeur, johan leroy portfolio, johan leroy dev web, johan leroy angular, johan leroy express, développeur web, développeur Angular, développeur Express.js, développeur fullstack, développeur JavaScript, développeur TypeScript, développeur Node.js, développeur REST API, développeur tailwind css, développeur MariaDB, développeur SQL, créer un site web, développeur freelance, portfolio développeur web, expert Angular, développeur application web, intégrateur tailwind, développeur web, freelance développeur\n',
      ogImage: 'https://johanleroy.fr/favicon.ico'
    });
    this.seoService.createCanonicalLink();
  }

  ngAfterViewInit(): void {
    this.ngZone.runOutsideAngular(() => {
      this.createParticles();
      this.startAnimationLoop();
    });
  }

  ngOnDestroy(): void {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
  }

  private createParticles(): void {
    const container = this.particleContainer.nativeElement as HTMLElement;
    container.innerHTML = '';

    for (let i = 0; i < this.particleCount; i++) {
      const size = Math.random() * 60 + 20; // Entre 20px et 80px
      const x = Math.random() * 100; // Position en %
      const y = Math.random() * 100 + 50; // Position en %
      const opacity = Math.random() * 0.3 + 0.1; // Opacité entre 0.1 et 0.4
      const speed = Math.random() * 0.15 + 0.05; // Vitesse variable

      const particleEl = document.createElement('div');
      particleEl.style.position = 'absolute';
      particleEl.style.width = `${size}px`;
      particleEl.style.height = `${size}px`;
      particleEl.style.borderRadius = '50%';
      particleEl.style.background = `rgba(62, 146, 204, ${opacity})`;
      particleEl.style.left = `${x}%`;
      particleEl.style.top = `${y}%`;
      particleEl.style.transition = 'transform 0.3s ease-out';
      particleEl.style.pointerEvents = 'none';
      particleEl.style.backdropFilter = 'blur(1px)'; // Effet de flou léger

      container.appendChild(particleEl);

      this.particles.push({
        id: i,
        size,
        x,
        y,
        opacity,
        rotation: Math.random() * 360,
        speed,
        element: particleEl
      });
    }
  }

  private startAnimationLoop(): void {
    let lastTimestamp = 0;

    const animate = (timestamp: number): void => {
      const deltaTime = lastTimestamp ? timestamp - lastTimestamp : 16;
      lastTimestamp = timestamp;

      // Animer les particules
      this.particles.forEach(particle => {
        // Mouvement montant avec léger déplacement latéral
        particle.y -= particle.speed * (deltaTime / 16);
        particle.x += Math.sin(timestamp / 2000 + particle.id) * 0.03 * (deltaTime / 16);
        particle.rotation += 0.1 * (deltaTime / 16);

        // Réinitialiser les particules qui sortent de l'écran
        if (particle.y < -10) {
          particle.y = 110;
          particle.x = Math.random() * 100;
          particle.opacity = Math.random() * 0.3 + 0.1;
        }

        // Appliquer les transformations
        particle.element.style.top = `${particle.y}%`;
        particle.element.style.left = `${particle.x}%`;
      });

      this.animationFrameId = requestAnimationFrame(animate);
    };

    this.animationFrameId = requestAnimationFrame(animate);
  }

}
