import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { TranslateService } from '../../../../i18n/translate.service';
import { ButtonComponent } from '../../../../shared/ui/button/button.component';
import { CardComponent } from '../../../../shared/ui/card/card.component';
import { DashboardMetricComponent } from '../../../admin/dashboard/components/dashboard-metric.component';
import { ContentHealthWidgetComponent, ContentHealthItem } from '../content-health-widget/content-health-widget.component';
import { ContentHealth } from '../../facade/content-management.facade';
import { inject } from '@angular/core';

@Component({
  selector: 'app-content-dashboard',
  standalone: true,
  imports: [TranslatePipe, ButtonComponent, CardComponent, DashboardMetricComponent, ContentHealthWidgetComponent],
  templateUrl: './content-dashboard.component.html',
  styleUrl: './content-dashboard.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ContentDashboardComponent {
  private readonly translate = inject(TranslateService);

  readonly health = input.required<ContentHealth>();

  @Output() createPage = new EventEmitter<void>();
  @Output() goToPage = new EventEmitter<string>();

  readonly seoHealthValue = computed(() => `${this.health().seoHealthPercent}%`);
  readonly lastEditedValue = computed(() => {
    const iso = this.health().lastEditedAt;
    if (!iso) {
      return this.translate.t('contentManagement.lastEditedNever');
    }
    return new Date(iso).toLocaleDateString();
  });

  readonly legalItems = computed<ContentHealthItem[]>(() =>
    this.health().legalStatus.map(status => ({ labelKey: status.def.labelKey, done: !!status.page })),
  );

  goRecommended(): void {
    const target = this.health().recommendation.pageId;
    if (target) {
      this.goToPage.emit(target);
    }
  }
}
