import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { Clipboard } from '@angular/cdk/clipboard';
import { BlockDto } from '../../../api/models';

@Component({
  selector: 'app-block-detail-dialog',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule,
  ],
  template: `
    <div class="dialog-container">
      <div class="dialog-header">
        <div class="header-icon">
          <mat-icon>view_module</mat-icon>
        </div>
        <div class="header-text">
          <h2>Block #{{ data.blockNumber | number }}</h2>
          <p class="subtitle">Block Details</p>
        </div>
        <button mat-icon-button (click)="close()" class="close-btn">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <mat-divider></mat-divider>

      <div class="dialog-content">
        <div class="detail-grid">
          <div class="detail-item">
            <div class="detail-label">Block Number</div>
            <div class="detail-value highlight">{{ data.blockNumber | number }}</div>
          </div>

          <div class="detail-item full-width">
            <div class="detail-label">Block Hash</div>
            <div class="detail-value hash" (click)="copyToClipboard(data.hash)">
              <code>{{ data.hash }}</code>
              <mat-icon class="copy-icon">content_copy</mat-icon>
            </div>
          </div>

          <div class="detail-item full-width">
            <div class="detail-label">Parent Hash</div>
            <div class="detail-value hash" (click)="copyToClipboard(data.parentHash)">
              <code>{{ data.parentHash }}</code>
              <mat-icon class="copy-icon">content_copy</mat-icon>
            </div>
          </div>

          <div class="detail-item">
            <div class="detail-label">Timestamp</div>
            <div class="detail-value">{{ data.timestamp | date:'medium' }}</div>
          </div>

          <div class="detail-item">
            <div class="detail-label">Transactions</div>
            <div class="detail-value">
              <span class="tx-count">{{ data.transactionCount }}</span>
            </div>
          </div>

          <div class="detail-item">
            <div class="detail-label">Gas Used</div>
            <div class="detail-value">{{ data.gasUsed | number }}</div>
          </div>

          <div class="detail-item">
            <div class="detail-label">Gas Limit</div>
            <div class="detail-value">{{ data.gasLimit | number }}</div>
          </div>

          <div class="detail-item">
            <div class="detail-label">Size</div>
            <div class="detail-value">{{ formatSize(data.size) }}</div>
          </div>
        </div>
      </div>

      <mat-divider></mat-divider>

      <div class="dialog-actions">
        <button mat-button (click)="close()">Close</button>
        <button mat-flat-button color="primary" (click)="copyAllDetails()">
          <mat-icon>content_copy</mat-icon>
          Copy Details
        </button>
      </div>
    </div>
  `,
  styles: [`
    .dialog-container {
      display: flex;
      flex-direction: column;
    }

    .dialog-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      background: linear-gradient(135deg, #1D0A69 0%, #2563EB 100%);
      color: white;
    }

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

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

    .header-text {
      flex: 1;

      h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
      }

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

    .close-btn {
      color: white;
    }

    .dialog-content {
      padding: 24px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .detail-item {
      &.full-width {
        grid-column: 1 / -1;
      }
    }

    .detail-label {
      font-size: 0.75rem;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      font-weight: 500;
    }

    .detail-value {
      font-size: 0.95rem;
      color: #1f2937;
      font-weight: 500;

      &.highlight {
        color: #2563EB;
        font-size: 1.25rem;
        font-weight: 700;
      }

      &.hash {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 8px 12px;
        background: #f5f5f5;
        border-radius: 8px;
        transition: background 0.2s;

        &:hover {
          background: #eee;
        }

        code {
          font-family: 'Monaco', 'Consolas', monospace;
          font-size: 0.8rem;
          word-break: break-all;
          flex: 1;
          color: #1f2937;
        }

        .copy-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
          color: #6b7280;
        }
      }

      .tx-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        padding: 4px 12px;
        background: rgba(37, 99, 235, 0.1);
        color: #2563EB;
        border-radius: 16px;
        font-weight: 600;
      }
    }

    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 24px;
      background: #fafafa;

      button mat-icon {
        margin-right: 4px;
        font-size: 18px;
        width: 18px;
        height: 18px;
      }
    }
  `],
})
export class BlockDetailDialogComponent {
  readonly data = inject<BlockDto>(MAT_DIALOG_DATA);
  private readonly dialogRef = inject(MatDialogRef<BlockDetailDialogComponent>);
  private readonly clipboard = inject(Clipboard);

  close(): void {
    this.dialogRef.close();
  }

  copyToClipboard(text: string): void {
    this.clipboard.copy(text);
  }

  copyAllDetails(): void {
    const details = `Block #${this.data.blockNumber}
Hash: ${this.data.hash}
Parent Hash: ${this.data.parentHash}
Timestamp: ${this.data.timestamp}
Transactions: ${this.data.transactionCount}
Gas Used: ${this.data.gasUsed}
Gas Limit: ${this.data.gasLimit}
Size: ${this.data.size} bytes`;

    this.clipboard.copy(details);
  }

  formatSize(bytes: number): string {
    if (!bytes) return '0 B';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
  }
}
