import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';

export type VerificationStatus = 'verified' | 'pending' | 'unverified' | 'failed';

@Component({
  selector: 'app-verification-badge',
  standalone: true,
  imports: [CommonModule, MatIconModule, MatTooltipModule],
  template: `
    <span
      class="verification-badge"
      [class]="status"
      [matTooltip]="getTooltip()"
    >
      <mat-icon>{{ getIcon() }}</mat-icon>
      @if (!iconOnly) {
        <span class="label">{{ getLabel() }}</span>
      }
    </span>
  `,
  styles: [
    `
      .verification-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;

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

      .verified {
        background-color: #e8f5e9;
        color: #2e7d32;
      }

      .pending {
        background-color: #fff3e0;
        color: #ef6c00;
      }

      .unverified {
        background-color: #eceff1;
        color: #546e7a;
      }

      .failed {
        background-color: #ffebee;
        color: #c62828;
      }
    `,
  ],
})
export class VerificationBadgeComponent {
  @Input() status: VerificationStatus = 'unverified';
  @Input() iconOnly = false;
  @Input() customTooltip?: string;

  getIcon(): string {
    switch (this.status) {
      case 'verified':
        return 'verified';
      case 'pending':
        return 'schedule';
      case 'failed':
        return 'error_outline';
      default:
        return 'help_outline';
    }
  }

  getLabel(): string {
    switch (this.status) {
      case 'verified':
        return 'Blockchain Verified';
      case 'pending':
        return 'Verification Pending';
      case 'failed':
        return 'Verification Failed';
      default:
        return 'Not Verified';
    }
  }

  getTooltip(): string {
    if (this.customTooltip) return this.customTooltip;

    switch (this.status) {
      case 'verified':
        return 'Document hash verified on blockchain';
      case 'pending':
        return 'Blockchain verification in progress';
      case 'failed':
        return 'Document hash does not match blockchain record';
      default:
        return 'Document not yet recorded on blockchain';
    }
  }
}
