import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivationService } from '../services/activation.service';

@Component({
  selector: 'app-activation',
  template: `
    <div class="loading" *ngIf="!activationComplete">
      <p>Verifying your account...</p>
      <div class="spinner"></div>
    </div>
  `,
  styles: [`
    .loading {
      text-align: center;
      padding: 50px;
    }
    .spinner {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      margin: 20px auto;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `]
})
export class ActivationComponent implements OnInit {
  activationComplete = false;

  constructor(
    private route: ActivatedRoute,
    private activationService: ActivationService,
    private router:Router
  ) { }

  ngOnInit() {
    const token = this.route.snapshot.queryParamMap.get('token');
    if (token) {
      this.activationService.verifyAccount(token);
    } else {
      this.router.navigate(['/activation-error']);
    }
  }
}