import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { DepartmentOnboardingComponent } from './department-onboarding/department-onboarding.component';
import { DepartmentListComponent } from './department-list/department-list.component';
import { UserListComponent } from './user-list/user-list.component';
import { TransactionDashboardComponent } from './transaction-dashboard/transaction-dashboard.component';
import { EventDashboardComponent } from './event-dashboard/event-dashboard.component';
import { LogsViewerComponent } from './logs-viewer/logs-viewer.component';
import { AdminStatsComponent } from './admin-stats/admin-stats.component';
import { BlockchainExplorerMiniComponent } from '../../shared/components';

@Component({
  selector: 'app-admin',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatTabsModule,
    MatCardModule,
    MatIconModule,
    MatButtonModule,
    MatDividerModule,
    DepartmentOnboardingComponent,
    DepartmentListComponent,
    UserListComponent,
    TransactionDashboardComponent,
    EventDashboardComponent,
    LogsViewerComponent,
    AdminStatsComponent,
    BlockchainExplorerMiniComponent,
  ],
  template: `
    <div class="admin-container">
      <header class="admin-header">
        <div class="header-content">
          <div class="header-icon-container">
            <mat-icon class="header-icon">admin_panel_settings</mat-icon>
          </div>
          <div class="header-text">
            <h1>Admin Portal</h1>
            <p class="subtitle">Manage the Goa GEL Blockchain Platform</p>
          </div>
        </div>
      </header>

      <div class="admin-content">
        <!-- Platform Statistics -->
        <app-admin-stats></app-admin-stats>

        <!-- Main Tabs -->
        <mat-card class="tabs-card">
          <mat-tab-group animationDuration="300ms">
            <!-- Dashboard Tab -->
            <mat-tab>
              <ng-template mat-tab-label>
                <mat-icon class="tab-icon">dashboard</mat-icon>
                Dashboard
              </ng-template>
              <div class="tab-content">
                <div class="dashboard-grid">
                  <div class="dashboard-main">
                    <app-transaction-dashboard></app-transaction-dashboard>
                  </div>
                  <div class="dashboard-sidebar">
                    <app-blockchain-explorer-mini [showViewAll]="false"></app-blockchain-explorer-mini>
                  </div>
                </div>
              </div>
            </mat-tab>

            <!-- Departments Tab -->
            <mat-tab>
              <ng-template mat-tab-label>
                <mat-icon class="tab-icon">business</mat-icon>
                Departments
              </ng-template>
              <div class="tab-content">
                <app-department-onboarding></app-department-onboarding>
                <mat-divider class="section-divider"></mat-divider>
                <app-department-list></app-department-list>
              </div>
            </mat-tab>

            <!-- Users Tab -->
            <mat-tab>
              <ng-template mat-tab-label>
                <mat-icon class="tab-icon">people</mat-icon>
                Users
              </ng-template>
              <div class="tab-content">
                <app-user-list></app-user-list>
              </div>
            </mat-tab>

            <!-- Transactions Tab -->
            <mat-tab>
              <ng-template mat-tab-label>
                <mat-icon class="tab-icon">receipt_long</mat-icon>
                Transactions
              </ng-template>
              <div class="tab-content">
                <app-transaction-dashboard></app-transaction-dashboard>
              </div>
            </mat-tab>

            <!-- Events Tab -->
            <mat-tab>
              <ng-template mat-tab-label>
                <mat-icon class="tab-icon">event_note</mat-icon>
                Events
              </ng-template>
              <div class="tab-content">
                <app-event-dashboard></app-event-dashboard>
              </div>
            </mat-tab>

            <!-- Logs Tab -->
            <mat-tab>
              <ng-template mat-tab-label>
                <mat-icon class="tab-icon">description</mat-icon>
                Logs
              </ng-template>
              <div class="tab-content">
                <app-logs-viewer></app-logs-viewer>
              </div>
            </mat-tab>
          </mat-tab-group>
        </mat-card>
      </div>
    </div>
  `,
  styles: [
    `
      .admin-container {
        min-height: 100vh;
        background-color: var(--dbim-linen);
      }

      .admin-header {
        background: linear-gradient(135deg, var(--dbim-blue-dark) 0%, var(--dbim-blue-mid) 100%);
        color: white;
        padding: 32px;
        box-shadow: var(--shadow-elevated);
        position: relative;
        overflow: hidden;

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

        &::after {
          content: '';
          position: absolute;
          bottom: -50%;
          left: -10%;
          width: 40%;
          height: 150%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
          pointer-events: none;
        }
      }

      .header-content {
        display: flex;
        align-items: center;
        gap: 20px;
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }

      .header-icon-container {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);

        .header-icon {
          font-size: 32px;
          width: 32px;
          height: 32px;
        }
      }

      .header-text {
        h1 {
          margin: 0;
          font-size: 28px;
          font-weight: 700;
          letter-spacing: -0.02em;
        }

        .subtitle {
          margin: 4px 0 0;
          opacity: 0.9;
          font-size: 14px;
          font-weight: 400;
        }
      }

      .admin-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 24px;
      }

      .tabs-card {
        margin-top: 24px;
        border-radius: 16px !important;
        overflow: hidden;
      }

      .tab-icon {
        margin-right: 8px;
        font-size: 20px;
        width: 20px;
        height: 20px;
      }

      .tab-content {
        padding: 24px;
        background: var(--dbim-white);
      }

      .section-divider {
        margin: 32px 0;
      }

      .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 24px;

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

      .dashboard-main {
        min-width: 0;
      }

      .dashboard-sidebar {
        min-width: 0;
      }

      :host ::ng-deep {
        .mat-mdc-tab-label {
          min-width: 120px;
        }

        .mat-mdc-tab-header {
          background: var(--dbim-linen);
          border-bottom: 1px solid rgba(29, 10, 105, 0.08);
        }

        .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {
          color: var(--dbim-blue-dark);
        }

        .mat-mdc-tab-body-wrapper {
          background: var(--dbim-white);
        }
      }
    `,
  ],
})
export class AdminComponent implements OnInit {
  ngOnInit(): void {
    // Initialize admin dashboard
  }
}