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

import { CutoverI18nService } from '../core/cutover-i18n.service';

type DetailStateCard = {
  title: string;
  summary: string;
  badge?: string;
  tone?: 'default' | 'attention' | 'finance' | 'monitoring' | 'external' | 'held';
};

type StateTimelineItem = {
  label: string;
  value: string;
  tone?: 'default' | 'attention' | 'finance' | 'monitoring' | 'external' | 'held';
};

type PaymentWorkspaceCard = {
  title: string;
  summary: string;
  tone?: 'default' | 'finance' | 'external' | 'held';
};

type MonitoringWorkspaceCard = {
  title: string;
  summary: string;
  tone?: 'default' | 'warning' | 'critical' | 'trace';
};

@Component({
  selector: 'app-journey-step-context',
  standalone: true,
  imports: [CommonModule],
  template: `
    <section class="state-detail-panel" *ngIf="showsOnboardingStatePanel">
      <div class="state-detail-panel__head">
        <div>
          <span class="meta-label">{{ t('Onboarding and KYC state') }}</span>
          <strong>{{ t('How this onboarding step should behave') }}</strong>
        </div>
      </div>
      <div class="state-detail-grid">
        <article class="state-detail-card" *ngFor="let card of onboardingStateCards" [attr.data-tone]="card.tone || 'default'">
          <span class="state-badge" *ngIf="card.badge">{{ t(card.badge) }}</span>
          <strong>{{ t(card.title) }}</strong>
          <p>{{ t(card.summary) }}</p>
        </article>
      </div>
      <div class="state-timeline-grid">
        <article class="state-timeline-card" *ngFor="let item of onboardingReadinessTimeline" [attr.data-tone]="item.tone || 'default'">
          <span class="meta-label">{{ t(item.label) }}</span>
          <strong>{{ t(item.value) }}</strong>
        </article>
      </div>
    </section>

    <section class="state-detail-panel" *ngIf="showsFinanceOutputPanel">
      <div class="state-detail-panel__head">
        <div>
          <span class="meta-label">{{ t('Finance output controls') }}</span>
          <strong>{{ t('How the finance report should be consumed') }}</strong>
        </div>
      </div>
      <div class="state-detail-grid">
        <article class="state-detail-card" *ngFor="let card of financeOutputStateCards" [attr.data-tone]="card.tone || 'default'">
          <span class="state-badge" *ngIf="card.badge">{{ t(card.badge) }}</span>
          <strong>{{ t(card.title) }}</strong>
          <p>{{ t(card.summary) }}</p>
        </article>
      </div>
      <div class="state-timeline-grid">
        <article class="state-timeline-card" *ngFor="let item of financeOutputTimeline" [attr.data-tone]="item.tone || 'default'">
          <span class="meta-label">{{ t(item.label) }}</span>
          <strong>{{ t(item.value) }}</strong>
        </article>
      </div>
    </section>

    <section class="state-detail-panel" *ngIf="showsPaymentStatePanel">
      <div class="state-detail-panel__head">
        <div>
          <span class="meta-label">{{ t('Payment transaction posture') }}</span>
          <strong>{{ t('How the payment step should read operationally') }}</strong>
        </div>
      </div>
      <div class="state-detail-grid">
        <article class="state-detail-card" *ngFor="let card of paymentStateCards" [attr.data-tone]="card.tone || 'default'">
          <span class="state-badge" *ngIf="card.badge">{{ t(card.badge) }}</span>
          <strong>{{ t(card.title) }}</strong>
          <p>{{ t(card.summary) }}</p>
        </article>
      </div>
      <div class="state-timeline-grid">
        <article class="state-timeline-card" *ngFor="let item of paymentStatusTimeline" [attr.data-tone]="item.tone || 'default'">
          <span class="meta-label">{{ t(item.label) }}</span>
          <strong>{{ t(item.value) }}</strong>
        </article>
      </div>
    </section>

    <section class="state-detail-panel" *ngIf="showsMonitoringIncidentPanel">
      <div class="state-detail-panel__head">
        <div>
          <span class="meta-label">{{ t('Monitoring incident model') }}</span>
          <strong>{{ t('How monitoring should guide intervention') }}</strong>
        </div>
      </div>
      <div class="state-detail-grid">
        <article class="state-detail-card" *ngFor="let card of monitoringIncidentCards" [attr.data-tone]="card.tone || 'default'">
          <span class="state-badge" *ngIf="card.badge">{{ t(card.badge) }}</span>
          <strong>{{ t(card.title) }}</strong>
          <p>{{ t(card.summary) }}</p>
        </article>
      </div>
      <div class="state-timeline-grid">
        <article class="state-timeline-card" *ngFor="let item of monitoringRecoveryTimeline" [attr.data-tone]="item.tone || 'default'">
          <span class="meta-label">{{ t(item.label) }}</span>
          <strong>{{ t(item.value) }}</strong>
        </article>
      </div>
    </section>

    <section class="payment-workspace-panel" *ngIf="isPaymentStep">
      <div class="payment-workspace-panel__head">
        <div>
          <span class="meta-label">{{ t(paymentEyebrow) }}</span>
          <strong>{{ t(paymentTitle) }}</strong>
        </div>
      </div>
      <div class="payment-card-grid">
        <article class="payment-card" *ngFor="let card of paymentWorkspaceCards" [attr.data-tone]="card.tone || 'default'">
          <span class="meta-label">{{ t('Payment focus') }}</span>
          <strong>{{ t(card.title) }}</strong>
          <p>{{ t(card.summary) }}</p>
        </article>
      </div>
      <div class="payment-toolbar-strip">
        <span class="toolbar-pill">{{ t(paymentToolbarPrimary) }}</span>
        <span class="toolbar-pill">{{ t(paymentToolbarSecondary) }}</span>
        <span class="toolbar-pill">{{ t(paymentToolbarTertiary) }}</span>
      </div>
    </section>

    <section class="monitoring-workspace-panel" *ngIf="isMonitoringStep">
      <div class="monitoring-workspace-panel__head">
        <div>
          <span class="meta-label">{{ t(monitoringEyebrow) }}</span>
          <strong>{{ t(monitoringTitle) }}</strong>
        </div>
      </div>
      <div class="monitoring-card-grid">
        <article class="monitoring-card" *ngFor="let card of monitoringWorkspaceCards" [attr.data-tone]="card.tone || 'default'">
          <span class="meta-label">{{ t('Monitoring focus') }}</span>
          <strong>{{ t(card.title) }}</strong>
          <p>{{ t(card.summary) }}</p>
        </article>
      </div>
      <div class="monitoring-toolbar-strip">
        <span class="toolbar-pill">{{ t(monitoringToolbarPrimary) }}</span>
        <span class="toolbar-pill">{{ t(monitoringToolbarSecondary) }}</span>
        <span class="toolbar-pill">{{ t(monitoringToolbarTertiary) }}</span>
      </div>
    </section>
  `
})
export class JourneyStepContextComponent {
  private readonly i18n = inject(CutoverI18nService);

  @Input() showsOnboardingStatePanel = false;
  @Input() onboardingStateCards: readonly DetailStateCard[] = [];
  @Input() onboardingReadinessTimeline: readonly StateTimelineItem[] = [];
  @Input() showsFinanceOutputPanel = false;
  @Input() financeOutputStateCards: readonly DetailStateCard[] = [];
  @Input() financeOutputTimeline: readonly StateTimelineItem[] = [];
  @Input() showsPaymentStatePanel = false;
  @Input() paymentStateCards: readonly DetailStateCard[] = [];
  @Input() paymentStatusTimeline: readonly StateTimelineItem[] = [];
  @Input() showsMonitoringIncidentPanel = false;
  @Input() monitoringIncidentCards: readonly DetailStateCard[] = [];
  @Input() monitoringRecoveryTimeline: readonly StateTimelineItem[] = [];
  @Input() isPaymentStep = false;
  @Input() paymentEyebrow = '';
  @Input() paymentTitle = '';
  @Input() paymentSummary = '';
  @Input() paymentWorkspaceCards: readonly PaymentWorkspaceCard[] = [];
  @Input() paymentToolbarPrimary = '';
  @Input() paymentToolbarSecondary = '';
  @Input() paymentToolbarTertiary = '';
  @Input() isMonitoringStep = false;
  @Input() monitoringEyebrow = '';
  @Input() monitoringTitle = '';
  @Input() monitoringSummary = '';
  @Input() monitoringWorkspaceCards: readonly MonitoringWorkspaceCard[] = [];
  @Input() monitoringToolbarPrimary = '';
  @Input() monitoringToolbarSecondary = '';
  @Input() monitoringToolbarTertiary = '';

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