import { Component, inject, signal, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { Apollo, gql } from 'apollo-angular';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { AuthService } from '@core/services/auth.service';

const GET_ADMIN_STATS = gql`
  query GetAdminStats {
    adminStats {
      totalStudents
      totalEnrollments
      averageCreditsPerStudent
      mostPopularSubject {
        subjectId
        subjectName
        professorName
        enrollmentCount
      }
      subjectStats {
        subjectId
        subjectName
        professorName
        enrollmentCount
      }
    }
  }
`;

interface SubjectStats {
  subjectId: number;
  subjectName: string;
  professorName: string;
  enrollmentCount: number;
}

interface AdminStats {
  totalStudents: number;
  totalEnrollments: number;
  averageCreditsPerStudent: number;
  mostPopularSubject: SubjectStats | null;
  subjectStats: SubjectStats[];
}

@Component({
  selector: 'app-admin-dashboard',
  standalone: true,
  imports: [RouterLink, MatIconModule, MatButtonModule, MatProgressSpinnerModule],
  template: `
    <div class="admin-dashboard">
      @if (loading()) {
        <div class="loading-container">
          <mat-spinner diameter="48"></mat-spinner>
          <p>Cargando estadisticas...</p>
        </div>
      } @else if (error()) {
        <div class="error-container">
          <mat-icon>error_outline</mat-icon>
          <h2>Error al cargar datos</h2>
          <p>{{ error() }}</p>
          <button class="btn btn-primary" (click)="loadStats()">
            <mat-icon>refresh</mat-icon>
            Reintentar
          </button>
        </div>
      } @else if (stats()) {
        <header class="admin-header">
          <div class="welcome">
            <h1>Panel de Administracion</h1>
            <p>Bienvenido, {{ authService.user()?.username }}</p>
          </div>
        </header>

        <div class="stats-grid">
          <div class="stat-card primary">
            <mat-icon>people</mat-icon>
            <div class="stat-content">
              <span class="stat-value">{{ stats()!.totalStudents }}</span>
              <span class="stat-label">Estudiantes</span>
            </div>
          </div>

          <div class="stat-card success">
            <mat-icon>school</mat-icon>
            <div class="stat-content">
              <span class="stat-value">{{ stats()!.totalEnrollments }}</span>
              <span class="stat-label">Inscripciones</span>
            </div>
          </div>

          <div class="stat-card info">
            <mat-icon>trending_up</mat-icon>
            <div class="stat-content">
              <span class="stat-value">{{ stats()!.averageCreditsPerStudent }}</span>
              <span class="stat-label">Creditos Promedio</span>
            </div>
          </div>

          @if (stats()!.mostPopularSubject) {
            <div class="stat-card warning">
              <mat-icon>star</mat-icon>
              <div class="stat-content">
                <span class="stat-value">{{ stats()!.mostPopularSubject!.subjectName }}</span>
                <span class="stat-label">Materia mas popular ({{ stats()!.mostPopularSubject!.enrollmentCount }} inscritos)</span>
              </div>
            </div>
          }
        </div>

        <div class="dashboard-grid">
          <section class="card actions-card">
            <div class="card-header">
              <h2>
                <mat-icon>flash_on</mat-icon>
                Acciones Rapidas
              </h2>
            </div>
            <div class="actions-list">
              <a routerLink="/students" class="action-btn">
                <mat-icon>group</mat-icon>
                <div>
                  <span>Gestionar Estudiantes</span>
                  <small>Ver, crear, editar y eliminar estudiantes</small>
                </div>
              </a>
              <a routerLink="/students/new" class="action-btn">
                <mat-icon>person_add</mat-icon>
                <div>
                  <span>Nuevo Estudiante</span>
                  <small>Registrar un nuevo estudiante</small>
                </div>
              </a>
            </div>
          </section>

          <section class="card subjects-card">
            <div class="card-header">
              <h2>
                <mat-icon>bar_chart</mat-icon>
                Inscripciones por Materia
              </h2>
            </div>
            <div class="subjects-list">
              @for (subject of stats()!.subjectStats; track subject.subjectId) {
                <div class="subject-item">
                  <div class="subject-info">
                    <span class="subject-name">{{ subject.subjectName }}</span>
                    <span class="professor">Prof. {{ subject.professorName }}</span>
                  </div>
                  <div class="enrollment-bar">
                    <div
                      class="bar-fill"
                      [style.width.%]="getBarWidth(subject.enrollmentCount)">
                    </div>
                    <span class="enrollment-count">{{ subject.enrollmentCount }}</span>
                  </div>
                </div>
              }
            </div>
          </section>
        </div>
      }
    </div>
  `,
  styles: [`
    .admin-dashboard {
      max-width: 1200px;
      margin: 0 auto;
    }

    .loading-container, .error-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 400px;
      gap: 1rem;
      text-align: center;
    }

    .error-container mat-icon {
      font-size: 64px;
      width: 64px;
      height: 64px;
      color: var(--error);
    }

    .admin-header {
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
      border-radius: 1rem;
      color: white;
    }

    .admin-header h1 {
      margin: 0 0 0.25rem;
      font-size: 1.75rem;
      font-weight: 600;
    }

    .admin-header p {
      margin: 0;
      opacity: 0.9;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .stat-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .stat-card mat-icon {
      font-size: 40px;
      width: 40px;
      height: 40px;
      padding: 0.75rem;
      border-radius: 0.75rem;
    }

    .stat-card.primary mat-icon {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
    }

    .stat-card.success mat-icon {
      background: rgba(34, 197, 94, 0.1);
      color: #22c55e;
    }

    .stat-card.info mat-icon {
      background: rgba(99, 102, 241, 0.1);
      color: #6366f1;
    }

    .stat-card.warning mat-icon {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
    }

    .stat-content {
      display: flex;
      flex-direction: column;
    }

    .stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .stat-label {
      font-size: 0.8125rem;
      color: var(--text-secondary);
    }

    .dashboard-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
      .dashboard-grid {
        grid-template-columns: 1fr 2fr;
      }
    }

    .card {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .card-header h2 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0;
      font-size: 1.125rem;
      font-weight: 600;
    }

    .card-header mat-icon {
      color: var(--accent);
    }

    .actions-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .action-btn {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-secondary);
      border-radius: 0.75rem;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s;
    }

    .action-btn:hover {
      background: var(--border-light);
      transform: translateX(4px);
    }

    .action-btn mat-icon {
      color: var(--accent);
    }

    .action-btn div {
      display: flex;
      flex-direction: column;
    }

    .action-btn span {
      font-weight: 500;
    }

    .action-btn small {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .subjects-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .subject-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border-radius: 0.5rem;
    }

    .subject-info {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }

    .subject-name {
      font-weight: 500;
      font-size: 0.9375rem;
    }

    .professor {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .enrollment-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 100px;
    }

    .bar-fill {
      height: 8px;
      background: linear-gradient(90deg, #3b82f6, #6366f1);
      border-radius: 4px;
      min-width: 4px;
      transition: width 0.3s ease;
    }

    .enrollment-count {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-secondary);
      min-width: 20px;
      text-align: right;
    }
  `]
})
export class AdminDashboardComponent implements OnInit {
  private apollo = inject(Apollo);
  authService = inject(AuthService);

  stats = signal<AdminStats | null>(null);
  loading = signal(true);
  error = signal<string | null>(null);

  private maxEnrollments = 0;

  ngOnInit(): void {
    this.loadStats();
  }

  loadStats(): void {
    this.loading.set(true);
    this.error.set(null);

    this.apollo
      .query<{ adminStats: AdminStats }>({
        query: GET_ADMIN_STATS,
        fetchPolicy: 'network-only',
      })
      .subscribe({
        next: (result) => {
          if (result.data?.adminStats) {
            this.stats.set(result.data.adminStats);
            this.maxEnrollments = Math.max(
              ...result.data.adminStats.subjectStats.map(s => s.enrollmentCount),
              1
            );
          }
          this.loading.set(false);
        },
        error: (err) => {
          this.error.set(err.message || 'Error al cargar estadisticas');
          this.loading.set(false);
        },
      });
  }

  getBarWidth(count: number): number {
    return (count / this.maxEnrollments) * 100;
  }
}
