import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { ApiService } from '../../../core/services/api.service';

interface PlatformStats {
  totalRequests: number;
  totalApplicants: number;
  activeApplicants: number;
  totalDepartments: number;
  activeDepartments: number;
  totalDocuments: number;
  totalBlockchainTransactions: number;
}

@Component({
  selector: 'app-admin-stats',
  standalone: true,
  imports: [CommonModule, MatCardModule, MatIconModule, MatProgressSpinnerModule],
  template: `
    <div class="stats-grid" *ngIf="!loading; else loadingTemplate">
      <mat-card class="stat-card primary">
        <div class="stat-icon-wrapper">
          <mat-icon class="stat-icon">description</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats?.totalRequests || 0 }}</div>
          <div class="stat-label">Total Requests</div>
        </div>
      </mat-card>

      <mat-card class="stat-card success">
        <div class="stat-icon-wrapper">
          <mat-icon class="stat-icon">business</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats?.activeDepartments || 0 }} / {{ stats?.totalDepartments || 0 }}</div>
          <div class="stat-label">Active Departments</div>
        </div>
      </mat-card>

      <mat-card class="stat-card info">
        <div class="stat-icon-wrapper">
          <mat-icon class="stat-icon">people</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats?.activeApplicants || 0 }} / {{ stats?.totalApplicants || 0 }}</div>
          <div class="stat-label">Active Applicants</div>
        </div>
      </mat-card>

      <mat-card class="stat-card warning">
        <div class="stat-icon-wrapper">
          <mat-icon class="stat-icon">receipt_long</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats?.totalBlockchainTransactions || 0 }}</div>
          <div class="stat-label">Blockchain Transactions</div>
        </div>
      </mat-card>

      <mat-card class="stat-card secondary">
        <div class="stat-icon-wrapper">
          <mat-icon class="stat-icon">folder</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats?.totalDocuments || 0 }}</div>
          <div class="stat-label">Total Documents</div>
        </div>
      </mat-card>
    </div>

    <ng-template #loadingTemplate>
      <div class="loading-container">
        <mat-spinner diameter="40"></mat-spinner>
        <p>Loading statistics...</p>
      </div>
    </ng-template>
  `,
  styles: [
    `
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        margin-bottom: 24px;
      }

      .stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px;
        border-radius: 16px !important;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          transform: translate(30%, -30%);
        }

        &:hover {
          transform: translateY(-4px);
          box-shadow: var(--shadow-elevated);
        }

        &.primary {
          background: linear-gradient(135deg, var(--dbim-blue-dark) 0%, var(--dbim-blue-mid) 100%);
          color: white;
        }
        &.success {
          background: linear-gradient(135deg, #059669 0%, #10b981 100%);
          color: white;
        }
        &.info {
          background: linear-gradient(135deg, var(--dbim-info) 0%, #60a5fa 100%);
          color: white;
        }
        &.warning {
          background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
          color: white;
        }
        &.secondary {
          background: linear-gradient(135deg, var(--crypto-purple) 0%, var(--crypto-indigo) 100%);
          color: white;
        }
      }

      .stat-icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
      }

      .stat-icon {
        font-size: 28px;
        width: 28px;
        height: 28px;
      }

      .stat-content {
        flex: 1;
        position: relative;
        z-index: 1;
      }

      .stat-value {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 4px;
        letter-spacing: -0.02em;
      }

      .stat-label {
        font-size: 13px;
        opacity: 0.9;
        font-weight: 500;
      }

      .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px;
        gap: 16px;

        p {
          color: var(--dbim-grey-2);
          font-size: 14px;
        }
      }
    `,
  ],
})
export class AdminStatsComponent implements OnInit {
  stats: PlatformStats | null = null;
  loading = true;

  constructor(private api: ApiService) {}

  async ngOnInit() {
    try {
      const result = await this.api.get<PlatformStats>('/admin/stats').toPromise();
      this.stats = result || null;
    } catch (error) {
      console.error('Failed to load stats:', error);
    } finally {
      this.loading = false;
    }
  }
}
