import { Component, OnInit, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { StatusBadgeComponent } from '../../../shared/components/status-badge/status-badge.component';
import { BlockchainExplorerMiniComponent } from '../../../shared/components/blockchain-explorer-mini/blockchain-explorer-mini.component';
import { ApiService } from '../../../core/services/api.service';
import { AdminStatsDto } from '../../../api/models';

@Component({
  selector: 'app-admin-dashboard',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatCardModule,
    MatIconModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    StatusBadgeComponent,
    BlockchainExplorerMiniComponent,
  ],
  template: `
    <div class="page-container">
      <!-- Welcome Section -->
      <section class="welcome-section">
        <div class="welcome-content">
          <div class="welcome-text">
            <span class="greeting">Admin Dashboard</span>
            <h1>Platform Overview</h1>
            <p class="subtitle">Monitor and manage the Goa GEL Blockchain Platform</p>
          </div>
          <div class="quick-actions">
            <button mat-raised-button class="action-btn primary" routerLink="/admin">
              <mat-icon>admin_panel_settings</mat-icon>
              Admin Portal
            </button>
            <button mat-stroked-button class="action-btn" routerLink="/requests">
              <mat-icon>list_alt</mat-icon>
              All Requests
            </button>
          </div>
        </div>
      </section>

      @if (loading()) {
        <div class="loading-container">
          <mat-spinner diameter="48"></mat-spinner>
          <p>Loading dashboard...</p>
        </div>
      } @else if (stats()) {
        <!-- Stats Cards -->
        <section class="stats-section">
          <div class="stats-grid">
            <mat-card class="stat-card requests" routerLink="/requests">
              <div class="stat-icon-wrapper">
                <mat-icon>description</mat-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stats()!.totalRequests }}</div>
                <div class="stat-label">Total Requests</div>
              </div>
              <div class="stat-decoration"></div>
            </mat-card>

            <mat-card class="stat-card approvals">
              <div class="stat-icon-wrapper">
                <mat-icon>check_circle</mat-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stats()!.totalApprovals }}</div>
                <div class="stat-label">Approvals</div>
              </div>
              <div class="stat-decoration"></div>
            </mat-card>

            <mat-card class="stat-card documents">
              <div class="stat-icon-wrapper">
                <mat-icon>folder_open</mat-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stats()!.totalDocuments }}</div>
                <div class="stat-label">Documents</div>
              </div>
              <div class="stat-decoration"></div>
            </mat-card>

            <mat-card class="stat-card departments" routerLink="/departments">
              <div class="stat-icon-wrapper">
                <mat-icon>business</mat-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stats()!.totalDepartments }}</div>
                <div class="stat-label">Departments</div>
              </div>
              <div class="stat-decoration"></div>
            </mat-card>

            <mat-card class="stat-card applicants">
              <div class="stat-icon-wrapper">
                <mat-icon>people</mat-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stats()!.totalApplicants }}</div>
                <div class="stat-label">Applicants</div>
              </div>
              <div class="stat-decoration"></div>
            </mat-card>

            <mat-card class="stat-card blockchain">
              <div class="stat-icon-wrapper">
                <mat-icon>link</mat-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stats()!.totalBlockchainTransactions }}</div>
                <div class="stat-label">Blockchain Tx</div>
              </div>
              <div class="stat-decoration"></div>
            </mat-card>
          </div>
        </section>

        <!-- Main Content Grid -->
        <div class="content-grid">
          <!-- Left Column -->
          <div class="content-main">
            <!-- Requests by Status -->
            <mat-card class="section-card">
              <div class="card-header">
                <div class="header-left">
                  <mat-icon>pie_chart</mat-icon>
                  <h2>Requests by Status</h2>
                </div>
                <button mat-button color="primary" routerLink="/requests">
                  View All
                  <mat-icon>arrow_forward</mat-icon>
                </button>
              </div>
              <div class="card-content">
                <div class="status-grid">
                  @for (item of stats()!.requestsByStatus; track item.status) {
                    <div class="status-item" [routerLink]="['/requests']" [queryParams]="{ status: item.status }">
                      <app-status-badge [status]="item.status" />
                      <span class="count">{{ item.count }}</span>
                    </div>
                  }
                </div>
              </div>
            </mat-card>

            <!-- Quick Actions -->
            <mat-card class="section-card">
              <div class="card-header">
                <div class="header-left">
                  <mat-icon>flash_on</mat-icon>
                  <h2>Quick Actions</h2>
                </div>
              </div>
              <div class="card-content">
                <div class="actions-grid">
                  <div class="action-item" routerLink="/departments">
                    <div class="action-icon departments">
                      <mat-icon>business</mat-icon>
                    </div>
                    <span>Manage Departments</span>
                  </div>
                  <div class="action-item" routerLink="/workflows">
                    <div class="action-icon workflows">
                      <mat-icon>account_tree</mat-icon>
                    </div>
                    <span>Manage Workflows</span>
                  </div>
                  <div class="action-item" routerLink="/audit">
                    <div class="action-icon audit">
                      <mat-icon>history</mat-icon>
                    </div>
                    <span>View Audit Logs</span>
                  </div>
                  <div class="action-item" routerLink="/webhooks">
                    <div class="action-icon webhooks">
                      <mat-icon>webhook</mat-icon>
                    </div>
                    <span>Webhooks</span>
                  </div>
                </div>
              </div>
            </mat-card>
          </div>

          <!-- Right Column: Blockchain Activity -->
          <div class="content-sidebar">
            <app-blockchain-explorer-mini [showViewAll]="true" [refreshInterval]="15000"></app-blockchain-explorer-mini>
          </div>
        </div>
      }
    </div>
  `,
  styles: [`
    .page-container {
      padding: 0;
    }

    /* Welcome Section */
    .welcome-section {
      background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--dbim-blue-mid, #2563EB) 100%);
      color: white;
      padding: 32px;
      margin: -24px -24px 24px -24px;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 50%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        pointer-events: none;
      }
    }

    .welcome-content {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      position: relative;
      z-index: 1;

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .welcome-text {
      .greeting {
        font-size: 0.9rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      h1 {
        margin: 8px 0;
        font-size: 2rem;
        font-weight: 700;
      }

      .subtitle {
        margin: 0;
        opacity: 0.85;
        font-size: 0.95rem;
      }
    }

    .quick-actions {
      display: flex;
      gap: 12px;
    }

    .action-btn {
      &.primary {
        background: white;
        color: var(--dbim-blue-dark, #1D0A69);
      }

      &:not(.primary) {
        color: white;
        border-color: rgba(255, 255, 255, 0.5);

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }

      mat-icon {
        margin-right: 8px;
      }
    }

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

      p {
        color: var(--dbim-grey-2, #8E8E8E);
      }
    }

    /* Stats Section */
    .stats-section {
      margin-bottom: 24px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

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

      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.15));
      }

      &.requests {
        background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--dbim-blue-mid, #2563EB) 100%);
      }

      &.approvals {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
      }

      &.documents {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
      }

      &.departments {
        background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
      }

      &.applicants {
        background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
      }

      &.blockchain {
        background: linear-gradient(135deg, #475569 0%, #64748b 100%);
      }
    }

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

      mat-icon {
        font-size: 26px;
        width: 26px;
        height: 26px;
      }
    }

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

    .stat-value {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .stat-label {
      font-size: 0.8rem;
      opacity: 0.9;
      margin-top: 4px;
    }

    .stat-decoration {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }

    /* Content Grid */
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 24px;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }

    .content-main {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .section-card {
      border-radius: 16px !important;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--dbim-linen, #EBEAEA);

      .header-left {
        display: flex;
        align-items: center;
        gap: 12px;

        mat-icon {
          color: var(--dbim-blue-mid, #2563EB);
        }

        h2 {
          margin: 0;
          font-size: 1.1rem;
          font-weight: 600;
          color: var(--dbim-brown, #150202);
        }
      }

      button mat-icon {
        margin-left: 4px;
        font-size: 18px;
        width: 18px;
        height: 18px;
      }
    }

    .card-content {
      padding: 20px 24px;
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
    }

    .status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      background: var(--dbim-linen, #EBEAEA);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        background: rgba(0, 0, 0, 0.08);
      }

      .count {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--dbim-brown, #150202);
      }
    }

    /* Quick Actions */
    .actions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;

      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 20px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;

      &:hover {
        background: var(--dbim-linen, #EBEAEA);
      }

      span {
        font-size: 0.85rem;
        color: var(--dbim-brown, #150202);
        font-weight: 500;
      }
    }

    .action-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      mat-icon {
        font-size: 26px;
        width: 26px;
        height: 26px;
      }

      &.departments {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
        color: white;
      }

      &.workflows {
        background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69), var(--dbim-blue-mid, #2563EB));
        color: white;
      }

      &.audit {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        color: white;
      }

      &.webhooks {
        background: linear-gradient(135deg, #059669, #10b981);
        color: white;
      }
    }

    .content-sidebar {
      @media (max-width: 1200px) {
        order: -1;
      }
    }
  `],
})
export class AdminDashboardComponent implements OnInit {
  private readonly api = inject(ApiService);

  readonly loading = signal(true);
  readonly stats = signal<AdminStatsDto | null>(null);

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

  private loadStats(): void {
    this.api.get<AdminStatsDto>('/admin/stats').subscribe({
      next: (data) => {
        this.stats.set(data);
        this.loading.set(false);
      },
      error: () => {
        // Use mock data for demo when API is unavailable
        this.loadMockStats();
        this.loading.set(false);
      },
    });
  }

  private loadMockStats(): void {
    const mockStats: AdminStatsDto = {
      totalRequests: 156,
      totalApprovals: 89,
      totalDocuments: 423,
      totalDepartments: 12,
      totalApplicants: 67,
      totalBlockchainTransactions: 234,
      averageProcessingTime: 4.5,
      requestsByStatus: [
        { status: 'DRAFT', count: 12 },
        { status: 'SUBMITTED', count: 23 },
        { status: 'IN_REVIEW', count: 18 },
        { status: 'APPROVED', count: 89 },
        { status: 'REJECTED', count: 8 },
        { status: 'COMPLETED', count: 6 },
      ],
      requestsByType: [
        { type: 'NEW_LICENSE', count: 98 },
        { type: 'RENEWAL', count: 42 },
        { type: 'AMENDMENT', count: 16 },
      ],
      departmentStats: [],
      lastUpdated: new Date().toISOString(),
    };
    this.stats.set(mockStats);
  }
}