// src/app/pages/product-detail/product-detail.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { PantryService } from '../../core/services/pantry.service';
import { Product, getExpiryStatus, EXPIRY_BADGE } from '../../core/models/product.model';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [RouterLink],
  template: `
    @if (product) {
      <div class="card shadow-sm max-w-2xl mx-auto">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
          <h3 class="mb-0">{{ product.name }}</h3>
          <span class="badge bg-{{ getBadge(product.expiry).bg }} fs-6">
            {{ getBadge(product.expiry).text }}
          </span>
        </div>
        <div class="card-body">
          <div class="row mb-4">
            <div class="col-sm-4 text-muted">Kategoria:</div>
            <div class="col-sm-8 fw-medium">{{ product.category }}</div>
          </div>
          <div class="row mb-4">
            <div class="col-sm-4 text-muted">Ilość:</div>
            <div class="col-sm-8 fw-medium">{{ product.amount }} {{ product.unit }}</div>
          </div>
          <div class="row mb-4">
            <div class="col-sm-4 text-muted">Data ważności:</div>
            <div class="col-sm-8 fw-medium">{{ product.expiry }}</div>
          </div>
          <div class="row mb-4">
            <div class="col-sm-4 text-muted">Stan:</div>
            <div class="col-sm-8 fw-medium">
              {{ product.opened ? 'Otwarty' : 'Zamknięty' }}
            </div>
          </div>
          @if (product.notes) {
            <div class="row mb-4">
              <div class="col-sm-4 text-muted">Notatki:</div>
              <div class="col-sm-8">{{ product.notes }}</div>
            </div>
          }
        </div>
        <div class="card-footer bg-white d-flex justify-content-between py-3">
          <a routerLink="/pantry" class="btn btn-outline-secondary">Wróć do listy</a>
          <button class="btn btn-danger" (click)="deleteProduct()">Usuń produkt</button>
        </div>
      </div>
    } @else {
      <div class="alert alert-danger">Produkt nie został znaleziony.</div>
      <a routerLink="/pantry" class="btn btn-primary">Wróć do spiżarni</a>
    }
  `
})
export class ProductDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private pantryService = inject(PantryService);

  product: Product | undefined;

  ngOnInit() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.product = this.pantryService.getById(id);
  }

  getBadge(expiry: string) {
    return EXPIRY_BADGE[getExpiryStatus(expiry)];
  }

  deleteProduct() {
    if (this.product) {
      this.pantryService.removeProduct(this.product.id);
      this.router.navigate(['/pantry']);
    }
  }
}