import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { ButtonComponent } from '../../../../shared/ui/button/button.component';
import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
import { CardComponent } from '../../../../shared/ui/card/card.component';
import { ContentPage } from '../../models/content-page.model';

export type PageSeoStatus = 'good' | 'partial' | 'missing' | 'warning';

@Component({
  selector: 'app-page-card',
  standalone: true,
  imports: [TranslatePipe, ButtonComponent, BadgeComponent, CardComponent],
  templateUrl: './page-card.component.html',
  styleUrl: './page-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageCardComponent {
  readonly page = input.required<ContentPage>();
  readonly legalLabelKey = input<string | null>(null);
  readonly seoStatus = input.required<PageSeoStatus>();
  readonly hasIssue = input(false);
  readonly updatedAtLabel = input<string | null>(null);

  @Output() open = new EventEmitter<void>();
  @Output() duplicate = new EventEmitter<void>();
  @Output() preview = new EventEmitter<void>();
  @Output() remove = new EventEmitter<void>();

  readonly visibilitySummary = computed(() => {
    const visibility = this.page().visibility;
    const devices = [
      visibility?.desktop !== false ? 'D' : null,
      visibility?.tablet !== false ? 'T' : null,
      visibility?.mobile !== false ? 'M' : null,
    ].filter((value): value is string => !!value);
    return devices.join(' · ');
  });

  readonly seoStatusVariant = computed<'success' | 'warning' | 'danger' | 'neutral'>(() => {
    switch (this.seoStatus()) {
      case 'good': return 'success';
      case 'partial': return 'neutral';
      case 'warning': return 'danger';
      default: return 'warning';
    }
  });

  readonly seoStatusLabelKey = computed(() => {
    switch (this.seoStatus()) {
      case 'good': return 'contentManagement.seoStatusGood';
      case 'partial': return 'contentManagement.seoStatusPartial';
      case 'warning': return 'contentManagement.seoStatusWarning';
      default: return 'contentManagement.seoStatusMissing';
    }
  });
}
