import { Component, OnInit, OnDestroy, inject, signal, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTabsModule } from '@angular/material/tabs';
import { MatChipsModule } from '@angular/material/chips';
import { RouterModule } from '@angular/router';
import { Clipboard } from '@angular/cdk/clipboard';
import { interval, Subscription } from 'rxjs';
import { ApiService } from '../../../core/services/api.service';
import { BlockDto, BlockchainTransactionDto } from '../../../api/models';

@Component({
  selector: 'app-blockchain-explorer-mini',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    MatIconModule,
    MatButtonModule,
    MatTooltipModule,
    MatProgressSpinnerModule,
    MatTabsModule,
    MatChipsModule,
    RouterModule,
  ],
  template: `
    <mat-card class="explorer-card">
      <!-- Header -->
      <div class="card-header">
        <div class="header-left">
          <div class="header-icon">
            <mat-icon>link</mat-icon>
          </div>
          <div class="header-text">
            <h3>Blockchain Explorer</h3>
            <p class="subtitle">Real-time network activity</p>
          </div>
        </div>
        <div class="header-right">
          <div class="live-indicator" [class.active]="isLive()">
            <span class="pulse"></span>
            <span class="label">{{ isLive() ? 'Live' : 'Paused' }}</span>
          </div>
          <button
            mat-icon-button
            (click)="toggleLive()"
            [matTooltip]="isLive() ? 'Pause updates' : 'Resume updates'"
          >
            <mat-icon>{{ isLive() ? 'pause' : 'play_arrow' }}</mat-icon>
          </button>
          <button mat-icon-button (click)="refresh()" [disabled]="loading()" matTooltip="Refresh">
            <mat-icon>refresh</mat-icon>
          </button>
        </div>
      </div>

      <!-- Stats Row -->
      <div class="stats-row">
        <div class="stat-item">
          <div class="stat-value">{{ latestBlock() | number }}</div>
          <div class="stat-label">Latest Block</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-value">{{ totalTransactions() | number }}</div>
          <div class="stat-label">Total Txns</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-value">{{ pendingTransactions() }}</div>
          <div class="stat-label">Pending</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-value status" [class]="networkStatus().toLowerCase()">
            <mat-icon>{{ getNetworkIcon() }}</mat-icon>
            {{ networkStatus() }}
          </div>
          <div class="stat-label">Network</div>
        </div>
      </div>

      <!-- Tabs -->
      <mat-tab-group class="explorer-tabs" animationDuration="200ms">
        <!-- Blocks Tab -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>view_module</mat-icon>
            Blocks
          </ng-template>
          <div class="tab-content">
            @if (loading()) {
              <div class="loading-state">
                <mat-spinner diameter="32"></mat-spinner>
              </div>
            } @else if (blocks().length === 0) {
              <div class="empty-state">
                <mat-icon>view_module</mat-icon>
                <p>No blocks yet</p>
              </div>
            } @else {
              <div class="list-container">
                @for (block of blocks(); track block.blockNumber) {
                  <div class="list-item block-item" (click)="viewBlock(block)">
                    <div class="item-icon block-icon">
                      <mat-icon>view_module</mat-icon>
                    </div>
                    <div class="item-content">
                      <div class="item-header">
                        <span class="block-number">#{{ block.blockNumber | number }}</span>
                        <span class="item-time">{{ getRelativeTime(block.timestamp) }}</span>
                      </div>
                      <div class="item-details">
                        <span class="tx-count">
                          <mat-icon>receipt_long</mat-icon>
                          {{ block.transactionCount }} txns
                        </span>
                        <span class="hash" (click)="copyHash(block.hash, $event)">
                          {{ truncateHash(block.hash) }}
                          <mat-icon class="copy-icon">content_copy</mat-icon>
                        </span>
                      </div>
                    </div>
                  </div>
                }
              </div>
            }
          </div>
        </mat-tab>

        <!-- Transactions Tab -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>receipt_long</mat-icon>
            Transactions
          </ng-template>
          <div class="tab-content">
            @if (loading()) {
              <div class="loading-state">
                <mat-spinner diameter="32"></mat-spinner>
              </div>
            } @else if (transactions().length === 0) {
              <div class="empty-state">
                <mat-icon>receipt_long</mat-icon>
                <p>No transactions yet</p>
              </div>
            } @else {
              <div class="list-container">
                @for (tx of transactions(); track tx.id) {
                  <div class="list-item tx-item" (click)="viewTransaction(tx)">
                    <div class="item-icon" [class]="'status-' + tx.status.toLowerCase()">
                      @switch (tx.status) {
                        @case ('CONFIRMED') {
                          <mat-icon>check_circle</mat-icon>
                        }
                        @case ('PENDING') {
                          <mat-icon>schedule</mat-icon>
                        }
                        @case ('FAILED') {
                          <mat-icon>error</mat-icon>
                        }
                      }
                    </div>
                    <div class="item-content">
                      <div class="item-header">
                        <span class="tx-hash" (click)="copyHash(tx.txHash, $event)">
                          {{ truncateHash(tx.txHash) }}
                          <mat-icon class="copy-icon">content_copy</mat-icon>
                        </span>
                        <mat-chip class="status-chip" [class]="tx.status.toLowerCase()">
                          {{ tx.status }}
                        </mat-chip>
                      </div>
                      <div class="item-details">
                        <span class="tx-type">
                          <mat-icon>{{ getTxTypeIcon(tx.type) }}</mat-icon>
                          {{ formatTxType(tx.type) }}
                        </span>
                        <span class="item-time">{{ getRelativeTime(tx.timestamp) }}</span>
                      </div>
                    </div>
                  </div>
                }
              </div>
            }
          </div>
        </mat-tab>
      </mat-tab-group>

      <!-- Footer -->
      @if (showViewAll) {
        <div class="card-footer">
          <a mat-button color="primary" routerLink="/admin/transactions">
            View All Transactions
            <mat-icon>arrow_forward</mat-icon>
          </a>
        </div>
      }
    </mat-card>
  `,
  styles: [`
    .explorer-card {
      border-radius: 16px !important;
      overflow: hidden;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--dbim-blue-mid, #2563EB) 100%);
      color: white;
    }

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

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

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

    .header-text {
      h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
      }

      .subtitle {
        margin: 4px 0 0;
        font-size: 0.8rem;
        opacity: 0.8;
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;

      button {
        color: white;
      }
    }

    .live-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 500;

      .pulse {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.5;
      }

      &.active .pulse {
        background: #4ade80;
        opacity: 1;
        animation: pulse 1.5s ease-in-out infinite;
      }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: 0.5; }
    }

    .stats-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      background: var(--dbim-linen, #EBEAEA);
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .stat-item {
      text-align: center;
      flex: 1;
    }

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

      &.status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 0.85rem;

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

        &.healthy {
          color: var(--dbim-success, #198754);
        }
        &.degraded {
          color: var(--dbim-warning, #FFC107);
        }
        &.down {
          color: var(--dbim-error, #DC3545);
        }
      }
    }

    .stat-label {
      font-size: 0.7rem;
      color: var(--dbim-grey-2, #8E8E8E);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 4px;
    }

    .stat-divider {
      width: 1px;
      height: 32px;
      background: rgba(0, 0, 0, 0.12);
    }

    .explorer-tabs {
      ::ng-deep {
        .mat-mdc-tab-labels {
          background: #fafafa;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }

        .mat-mdc-tab {
          min-width: 120px;

          .mdc-tab__content {
            gap: 8px;
          }

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

    .tab-content {
      min-height: 240px;
      max-height: 320px;
      overflow-y: auto;
    }

    .loading-state,
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      color: var(--dbim-grey-2, #8E8E8E);

      mat-icon {
        font-size: 48px;
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
      }

      p {
        margin: 0;
        font-size: 0.9rem;
      }
    }

    .list-container {
      padding: 8px 0;
    }

    .list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      cursor: pointer;
      transition: background-color 0.2s;

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

      &:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }
    }

    .item-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

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

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

      &.status-confirmed {
        background: rgba(25, 135, 84, 0.1);
        color: var(--dbim-success, #198754);
      }

      &.status-pending {
        background: rgba(37, 99, 235, 0.1);
        color: var(--dbim-blue-mid, #2563EB);
      }

      &.status-failed {
        background: rgba(220, 53, 69, 0.1);
        color: var(--dbim-error, #DC3545);
      }
    }

    .item-content {
      flex: 1;
      min-width: 0;
    }

    .item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }

    .block-number {
      font-weight: 600;
      color: var(--dbim-blue-mid, #2563EB);
      font-size: 0.95rem;
    }

    .tx-hash {
      font-family: 'Monaco', 'Consolas', monospace;
      font-size: 0.8rem;
      color: var(--dbim-blue-dark, #1D0A69);
      display: flex;
      align-items: center;
      gap: 4px;

      .copy-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
        opacity: 0;
        transition: opacity 0.2s;
      }

      &:hover .copy-icon {
        opacity: 0.6;
      }
    }

    .item-time {
      font-size: 0.75rem;
      color: var(--dbim-grey-2, #8E8E8E);
      white-space: nowrap;
    }

    .item-details {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 0.8rem;
      color: var(--dbim-grey-2, #8E8E8E);
    }

    .tx-count,
    .tx-type {
      display: flex;
      align-items: center;
      gap: 4px;

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

    .hash {
      font-family: 'Monaco', 'Consolas', monospace;
      font-size: 0.7rem;
      padding: 2px 6px;
      background: rgba(0, 0, 0, 0.04);
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;

      .copy-icon {
        font-size: 12px;
        width: 12px;
        height: 12px;
        opacity: 0;
        transition: opacity 0.2s;
      }

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

        .copy-icon {
          opacity: 0.6;
        }
      }
    }

    .status-chip {
      font-size: 0.65rem;
      min-height: 20px;
      padding: 0 8px;

      &.confirmed {
        background: rgba(25, 135, 84, 0.1) !important;
        color: var(--dbim-success, #198754) !important;
      }

      &.pending {
        background: rgba(37, 99, 235, 0.1) !important;
        color: var(--dbim-blue-mid, #2563EB) !important;
      }

      &.failed {
        background: rgba(220, 53, 69, 0.1) !important;
        color: var(--dbim-error, #DC3545) !important;
      }
    }

    .card-footer {
      display: flex;
      justify-content: center;
      padding: 12px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      background: #fafafa;

      a {
        mat-icon {
          margin-left: 4px;
          font-size: 18px;
          width: 18px;
          height: 18px;
        }
      }
    }
  `],
})
export class BlockchainExplorerMiniComponent implements OnInit, OnDestroy {
  private readonly api = inject(ApiService);
  private readonly clipboard = inject(Clipboard);
  private refreshSubscription?: Subscription;

  @Input() showViewAll = true;
  @Input() refreshInterval = 10000; // 10 seconds

  readonly loading = signal(true);
  readonly isLive = signal(true);
  readonly latestBlock = signal(0);
  readonly totalTransactions = signal(0);
  readonly pendingTransactions = signal(0);
  readonly networkStatus = signal<'HEALTHY' | 'DEGRADED' | 'DOWN'>('HEALTHY');
  readonly blocks = signal<BlockDto[]>([]);
  readonly transactions = signal<BlockchainTransactionDto[]>([]);

  ngOnInit(): void {
    this.loadData();
    this.startAutoRefresh();
  }

  ngOnDestroy(): void {
    this.stopAutoRefresh();
  }

  private startAutoRefresh(): void {
    if (this.refreshSubscription) return;
    this.refreshSubscription = interval(this.refreshInterval).subscribe(() => {
      if (this.isLive()) {
        this.loadData(false);
      }
    });
  }

  private stopAutoRefresh(): void {
    this.refreshSubscription?.unsubscribe();
    this.refreshSubscription = undefined;
  }

  toggleLive(): void {
    this.isLive.update(v => !v);
  }

  refresh(): void {
    this.loadData();
  }

  async loadData(showLoading = true): Promise<void> {
    if (showLoading) {
      this.loading.set(true);
    }

    try {
      // Fetch blocks
      const blocksResponse = await this.api.get<{ data: BlockDto[] }>(
        '/admin/blockchain/blocks',
        { limit: 5 }
      ).toPromise();

      if (blocksResponse?.data) {
        this.blocks.set(blocksResponse.data);
        if (blocksResponse.data.length > 0) {
          this.latestBlock.set(blocksResponse.data[0].blockNumber);
        }
      }

      // Fetch transactions
      const txResponse = await this.api.get<{
        data: BlockchainTransactionDto[];
        total: number;
      }>('/admin/blockchain/transactions', { limit: 5 }).toPromise();

      if (txResponse) {
        this.transactions.set(txResponse.data);
        this.totalTransactions.set(txResponse.total);
        this.pendingTransactions.set(
          txResponse.data.filter(tx => tx.status === 'PENDING').length
        );
      }

      this.networkStatus.set('HEALTHY');
    } catch (error) {
      console.error('Failed to load blockchain data:', error);
      this.networkStatus.set('DOWN');
      // Use mock data for demo
      this.loadMockData();
    } finally {
      this.loading.set(false);
    }
  }

  private loadMockData(): void {
    // Mock blocks
    const mockBlocks: BlockDto[] = Array.from({ length: 5 }, (_, i) => ({
      blockNumber: 12345 - i,
      hash: `0x${this.generateRandomHash()}`,
      parentHash: `0x${this.generateRandomHash()}`,
      timestamp: new Date(Date.now() - i * 15000).toISOString(),
      transactionCount: Math.floor(Math.random() * 20) + 1,
      gasUsed: Math.floor(Math.random() * 8000000),
      gasLimit: 15000000,
      size: Math.floor(Math.random() * 50000) + 10000,
    }));

    const mockTx: BlockchainTransactionDto[] = [
      {
        id: '1',
        txHash: `0x${this.generateRandomHash()}`,
        type: 'LICENSE_MINT',
        status: 'CONFIRMED',
        blockNumber: 12345,
        timestamp: new Date(Date.now() - 30000).toISOString(),
        data: {},
      },
      {
        id: '2',
        txHash: `0x${this.generateRandomHash()}`,
        type: 'DOCUMENT_HASH',
        status: 'CONFIRMED',
        blockNumber: 12344,
        timestamp: new Date(Date.now() - 60000).toISOString(),
        data: {},
      },
      {
        id: '3',
        txHash: `0x${this.generateRandomHash()}`,
        type: 'APPROVAL_RECORD',
        status: 'PENDING',
        timestamp: new Date(Date.now() - 90000).toISOString(),
        data: {},
      },
      {
        id: '4',
        txHash: `0x${this.generateRandomHash()}`,
        type: 'LICENSE_TRANSFER',
        status: 'CONFIRMED',
        blockNumber: 12343,
        timestamp: new Date(Date.now() - 120000).toISOString(),
        data: {},
      },
      {
        id: '5',
        txHash: `0x${this.generateRandomHash()}`,
        type: 'REVOCATION',
        status: 'FAILED',
        timestamp: new Date(Date.now() - 180000).toISOString(),
        data: {},
      },
    ];

    this.blocks.set(mockBlocks);
    this.transactions.set(mockTx);
    this.latestBlock.set(mockBlocks[0].blockNumber);
    this.totalTransactions.set(1234);
    this.pendingTransactions.set(3);
    this.networkStatus.set('HEALTHY');
  }

  private generateRandomHash(): string {
    return Array.from({ length: 64 }, () =>
      Math.floor(Math.random() * 16).toString(16)
    ).join('');
  }

  truncateHash(hash: string): string {
    if (!hash || hash.length <= 18) return hash;
    return `${hash.substring(0, 10)}...${hash.substring(hash.length - 6)}`;
  }

  getRelativeTime(timestamp: string): string {
    const now = new Date();
    const time = new Date(timestamp);
    const diffSeconds = Math.floor((now.getTime() - time.getTime()) / 1000);

    if (diffSeconds < 60) return `${diffSeconds}s ago`;
    if (diffSeconds < 3600) return `${Math.floor(diffSeconds / 60)}m ago`;
    if (diffSeconds < 86400) return `${Math.floor(diffSeconds / 3600)}h ago`;
    return `${Math.floor(diffSeconds / 86400)}d ago`;
  }

  getNetworkIcon(): string {
    switch (this.networkStatus()) {
      case 'HEALTHY': return 'check_circle';
      case 'DEGRADED': return 'warning';
      case 'DOWN': return 'error';
    }
  }

  getTxTypeIcon(type: string): string {
    const icons: Record<string, string> = {
      LICENSE_MINT: 'verified',
      DOCUMENT_HASH: 'fingerprint',
      APPROVAL_RECORD: 'approval',
      LICENSE_TRANSFER: 'swap_horiz',
      REVOCATION: 'block',
    };
    return icons[type] || 'receipt_long';
  }

  formatTxType(type: string): string {
    return type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  }

  copyHash(hash: string, event: Event): void {
    event.stopPropagation();
    this.clipboard.copy(hash);
  }

  viewBlock(block: BlockDto): void {
    // Could open a dialog or navigate
    console.log('View block:', block);
  }

  viewTransaction(tx: BlockchainTransactionDto): void {
    // Could open a dialog or navigate
    console.log('View transaction:', tx);
  }
}