import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
import { IconComponent } from '../../../../shared/ui/icon/icon.component';
import { AppIconName } from '../../../../shared/ui/icon/icon-registry';
import { AdminDashboardHealthStatus } from '../models/admin-dashboard.model';

const STATUS_ICON: Record<AdminDashboardHealthStatus, AppIconName> = {
  healthy: 'checkCircle',
  attention: 'warning',
  unhealthy: 'xCircle',
  unknown: 'help',
  loading: 'spinner',
};

const STATUS_TEXT_KEY: Record<AdminDashboardHealthStatus, string> = {
  healthy: 'dashboard.statusHealthy',
  attention: 'dashboard.statusAttention',
  unhealthy: 'dashboard.statusUnhealthy',
  unknown: 'dashboard.statusUnknown',
  loading: 'dashboard.stateLoading',
};

@Component({
  selector: 'app-dashboard-status-row',
  standalone: true,
  imports: [TranslatePipe, SkeletonComponent, IconComponent],
  templateUrl: './dashboard-status-row.component.html',
  styleUrl: './dashboard-status-row.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'dashboard-status-row-host' },
})
export class DashboardStatusRowComponent {
  readonly labelKey = input.required<string>();
  readonly status = input.required<AdminDashboardHealthStatus>();
  readonly displayValue = input<string | null>(null);

  readonly icon = computed(() => STATUS_ICON[this.status()]);
  readonly statusTextKey = computed(() => STATUS_TEXT_KEY[this.status()]);
}
