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

const STATUS_ICON: Record<AdminDashboardHealthStatus, string> = {
  healthy: 'pi-check-circle',
  attention: 'pi-exclamation-triangle',
  unhealthy: 'pi-times-circle',
  unknown: 'pi-question-circle',
  loading: 'pi-spin pi-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],
  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()]);
}
