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, #1D0A69 0%, #2563EB 100%);
        color: white;
        padding: 32px;
        box-shadow: 0 4px 20px rgba(29, 10, 105, 0.15);
        position: relative;
        overflow: hidden;
        border-radius: 0 0 16px 16px;
      }

      .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 !important;
        width: 32px !important;
        height: 32px !important;
        color: white !important;
      }

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

      .header-text .subtitle {
        margin: 4px 0 0;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 14px;
        font-weight: 400;
      }

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

      .tabs-card {
        margin-top: 24px;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible;
      }

      :host ::ng-deep .tabs-card .mat-mdc-card {
        box-shadow: none !important;
        background: transparent !important;
      }

      :host ::ng-deep .mat-mdc-tab-header {
        background: white;
        border-radius: 12px 12px 0 0;
        padding: 8px 8px 0 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }

      :host ::ng-deep .mat-mdc-tab {
        min-width: 120px;
        padding: 0 24px;
        height: 48px;
        opacity: 0.7;
      }

      :host ::ng-deep .mat-mdc-tab.mdc-tab--active {
        opacity: 1;
      }

      :host ::ng-deep .mat-mdc-tab-labels {
        gap: 4px;
      }

      :host ::ng-deep .mdc-tab__text-label {
        color: #1D0A69 !important;
        font-weight: 500;
      }

      :host ::ng-deep .mdc-tab-indicator__content--underline {
        border-color: #1D0A69 !important;
        border-width: 3px !important;
        border-radius: 3px 3px 0 0;
      }

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

      .tab-content {
        padding: 24px;
        background: white;
        border-radius: 0 0 12px 12px;
        min-height: 400px;
      }

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

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

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

      .dashboard-sidebar {
        min-width: 0;
      }
    `,
  ],
})
export class AdminComponent implements OnInit {
  ngOnInit(): void {
    // Initialize admin dashboard
  }
}