import { CommonModule } from '@angular/common';
import { Component, Input, inject } from '@angular/core';
import { CutoverI18nService } from '../core/cutover-i18n.service';

type SessionSummaryLike = {
  displayName: string;
  username: string;
  workspace: string;
  clientType: string;
  roleCodes: string[];
};

@Component({
  selector: 'app-journey-support-column',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="support-column">
      <article class="support-card surface-card" *ngIf="session">
        <div class="surface-card__header">
          <div>
            <h4>{{ session.displayName }}</h4>
          </div>
        </div>
        <div class="surface-card__body">
          <div class="support-metrics">
            <div class="detail-chip">{{ session.username }}</div>
            <div class="detail-chip">{{ session.workspace }}</div>
          </div>
        </div>
      </article>
    </div>
  `
})
export class JourneySupportColumnComponent {
  private readonly i18n = inject(CutoverI18nService);

  @Input() loading = false;
  @Input() session: SessionSummaryLike | null = null;

  protected t(value: string): string {
    return this.i18n.text(value);
  }
}
