import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { TranslatePipe } from '@ngx-translate/core';
import { RecipeListItem } from '../../core/models/recipe.models';
import { CategoryBadgeComponent } from '../../shared/components/category-badge.component';

@Component({
  selector: 'app-recipe-card',
  standalone: true,
  imports: [RouterLink, TranslatePipe, CategoryBadgeComponent],
  template: `
    <div class="card group relative flex flex-col p-5 hover:shadow-md">
      @if (selectable) {
        <label class="absolute right-4 top-4 z-10 flex cursor-pointer items-center">
          <input
            type="checkbox"
            [checked]="selected"
            (change)="onToggle()"
            class="h-5 w-5 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
            [attr.aria-label]="'recipes.selectRecipe' | translate: { name: recipe.name }"
          />
        </label>
      }

      <a [routerLink]="['/recipes', recipe.id]" class="flex flex-1 flex-col">
        @if (showCategory) {
          <div class="mb-2 pr-8">
            <app-category-badge [category]="recipe.mealCategory" />
          </div>
        }
        <h3 class="pr-8 text-base font-semibold leading-snug group-hover:text-brand-600">
          {{ recipe.name }}
        </h3>

        <div class="mt-auto flex flex-wrap items-center gap-2 pt-5 text-sm text-slate-500 dark:text-slate-400">
          <span class="inline-flex items-center gap-1.5 rounded-lg bg-slate-100 px-2.5 py-1 dark:bg-slate-800">
            <span class="text-orange-500" aria-hidden="true">🔥</span>
            @if (recipe.calories != null) {
              {{ 'recipes.kcal' | translate: { count: recipe.calories } }}
            } @else {
              —
            }
          </span>
          <span class="inline-flex items-center gap-1.5 rounded-lg bg-slate-100 px-2.5 py-1 dark:bg-slate-800">
            <span class="text-sky-500" aria-hidden="true">⏱</span>
            @if (recipe.prepTimeMinutes != null) {
              {{ 'recipes.minutes' | translate: { count: recipe.prepTimeMinutes } }}
            } @else {
              —
            }
          </span>
        </div>
      </a>
    </div>
  `,
})
export class RecipeCardComponent {
  @Input({ required: true }) recipe!: RecipeListItem;
  @Input() selectable = false;
  @Input() selected = false;
  @Input() showCategory = false;
  @Output() toggleSelected = new EventEmitter<number>();

  onToggle(): void {
    this.toggleSelected.emit(this.recipe.id);
  }
}
