import { Component, Input, computed, input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-status-badge',
  standalone: true,
  imports: [CommonModule],
  template: `
    <span [class]="badgeClass()">
      {{ displayText() }}
    </span>
  `,
  styles: [
    `
      span {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 16px;
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        white-space: nowrap;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .status-draft {
        background-color: #e0e0e0;
        color: #616161;
      }

      .status-submitted {
        background-color: #bbdefb;
        color: #1565c0;
      }

      .status-in_review,
      .status-in-review,
      .status-pending {
        background-color: #fff3e0;
        color: #e65100;
      }

      .status-approved {
        background-color: #c8e6c9;
        color: #2e7d32;
      }

      .status-rejected {
        background-color: #ffcdd2;
        color: #c62828;
      }

      .status-cancelled,
      .status-revoked {
        background-color: #f5f5f5;
        color: #9e9e9e;
      }

      .status-changes_requested,
      .status-pending_resubmission {
        background-color: #ffe0b2;
        color: #ef6c00;
      }

      .status-active,
      .status-healthy,
      .status-up {
        background-color: #c8e6c9;
        color: #2e7d32;
      }

      .status-inactive,
      .status-down {
        background-color: #ffcdd2;
        color: #c62828;
      }

      .status-degraded {
        background-color: #fff3e0;
        color: #e65100;
      }
    `,
  ],
})
export class StatusBadgeComponent {
  status = input.required<string>();
  label = input<string>();

  readonly displayText = computed(() => {
    return this.label() || this.status().replace(/_/g, ' ');
  });

  readonly badgeClass = computed(() => {
    const normalizedStatus = this.status().toLowerCase().replace(/_/g, '_');
    return `status-${normalizedStatus}`;
  });
}
