// unauthorized.component.ts
import { Component } from '@angular/core'
import { Router } from '@angular/router'
import { credits, currentYear } from '@/app/constants'

@Component({
  selector: 'app-unauthorized',
  imports: [],
  template: `
    <div class="auth-box overflow-hidden align-items-center d-flex">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xxl-4 col-md-6 col-sm-8">
            <div class="card">
              <div class="card-body">
                <div class="p-4 text-center">
                  <!-- Icône d'alerte -->
                  <div class="mb-4">
                    <div class="avatar-lg mx-auto bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                      <div class="text-error fw-bold fs-60">403</div>
                    </div>
                  </div>

                  <!-- Titre et message -->
                  <h1 class="text-danger fw-bold mb-3">Accès Refusé</h1>
                  <h4 class="fw-semibold mb-3">403 - Non Autorisé</h4>
                  <p class="text-muted mb-4">
                    Vous n'avez pas les permissions nécessaires pour accéder à cette page.
                    Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
                  </p>

                  <!-- Actions -->
                  <div class="d-grid gap-2 d-md-flex justify-content-center">
                    <button
                      class="btn btn-primary px-4"
                      (click)="goHome()"
                    >
                      <i class="fas fa-home me-2"></i>
                      Retour à l'accueil
                    </button>
                    <button
                      class="btn btn-outline-secondary px-4"
                      (click)="goBack()"
                    >
                      <i class="fas fa-arrow-left me-2"></i>
                      Page précédente
                    </button>
                  </div>

                  <!-- Informations supplémentaires -->
                  <div class="mt-4 p-3 bg-light rounded">
                    <small class="text-muted">
                      <i class="fas fa-info-circle me-1"></i>
                      Rôles requis : Administrateur, Gestionnaire ou Support
                    </small>
                  </div>
                </div>
              </div>
            </div>

            <!-- Footer -->
            <p class="text-center text-muted mt-4 mb-0">
              © {{ currentYear }} Simple — by
              <span class="fw-semibold">{{ credits.name }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .auth-box {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
  `]
})
export class Unauthorized {
  protected readonly currentYear = currentYear
  protected readonly credits = credits

  constructor(private router: Router) {}

  goHome() {
    this.router.navigate(['/dcb-dashboard'])
  }

  goBack() {
    window.history.back()
  }
}