<template>
  <service-card
    :service="service"
    type="catering"
    @view-details="viewDetails"
    @contact-provider="contactProvider"
  >
    <template #additional-info>
      <div class="catering-details">
        <div class="detail-item">
          <img :src="iconCatering" class="icon-catering" alt="Icono catering">
          <span>{{ service.catering.menu ? 'Menú' : 'Artículo' }} - {{ service.catering.menu ? getTipoMenuLabel(service.catering.menu.type_menu) : getTipoArticuloLabel(service.catering.articulo.type_articulo) }}</span>
        </div>
        <div class="detail-item" v-if="service.catering.tipo_catering">
          <i class="bi bi-truck"></i>
          <span>{{ getTipoEntregaLabel(service.catering.tipo_entrega) }} - {{ getTipoCateringLabel(service.catering.tipo_catering) }}</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-people"></i>
          <span>{{ service.catering.min_comensales }} - {{ service.catering.max_comensales }} comensales</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-clock"></i>
          <span>{{ service.catering.duracion }} horas</span>
        </div>
        <div class="detail-item" v-if="service.catering.alergenos && service.catering.alergenos.length > 0">
          <i class="bi bi-exclamation-triangle"></i>
          <div class="caracteristicas">
            <span v-for="(alergeno, index) in service.catering.alergenos"
                  :key="'alergeno-'+index"
                  class="caracteristica-tag alergeno">
              {{ formatAlergeno(alergeno) }}
            </span>
          </div>
        </div>
        <div class="detail-item" v-if="service.catering.caracteristicas && service.catering.caracteristicas.length > 0">
          <i class="bi bi-list-check"></i>
          <div class="caracteristicas">
            <span v-for="(caracteristica, index) in service.catering.caracteristicas"
                  :key="'caracteristica-'+index"
                  class="caracteristica-tag">
              {{ caracteristica }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </service-card>
</template>

<script>
import ServiceCard from './ServiceCard.vue'
import iconCatering from '@/assets/icon_catering.png'

export default {
  name: 'CateringService',
  components: {
    ServiceCard
  },
  props: {
    service: {
      type: Object,
      required: true,
      validator: (obj) => {
        return obj.type === 'catering' && obj.catering
      }
    }
  },
  data () {
    return {
      iconCatering
    }
  },
  methods: {
    viewDetails () {
      this.$emit('view-details', this.service)
    },
    contactProvider () {
      this.$emit('contact-provider', this.service)
    },
    getTipoEntregaLabel (tipo) {
      const labels = {
        'establecimiento': 'En establecimiento',
        'entrega': 'Entrega',
        'servicio_domicilio': 'Servicio a domicilio'
      }
      return labels[tipo] || tipo
    },
    getTipoCateringLabel (tipo) {
      const labels = {
        'mesa_servido': 'Servicio en mesa',
        'mesa_compartido': 'Mesa compartida',
        'mesa_redonda': 'Mesa redonda',
        'banquete_imperial': 'Banquete imperial',
        'gueridon': 'Gueridón',
        'buffet': 'Buffet',
        'estaciones': 'Estaciones',
        'coctel': 'Cóctel',
        'finger_food': 'Finger food',
        'mixto_coctel_mesa': 'Mixto cóctel + mesa',
        'mixto_coctel_buffet': 'Mixto cóctel + buffet',
        'show_cooking': 'Show cooking',
        'food_truck': 'Food truck'
      }
      return labels[tipo] || tipo
    },
    getTipoMenuLabel (type) {
      const labels = {
        'tapas': 'Tapas',
        'pizza': 'Pizza',
        'mediterraneo': 'Mediterráneo',
        'asiatico': 'Asiático',
        'mexicano': 'Mexicano',
        'italiano': 'Italiano',
        'vegetariano': 'Vegetariano',
        'vegano': 'Vegano',
        'sin_gluten': 'Sin Gluten',
        'infantil': 'Infantil',
        'gourmet': 'Gourmet',
        'fusion': 'Fusión',
        'marisco': 'Marisco',
        'carnes': 'Carnes',
        'postres': 'Postres',
        'bodegas': 'Bodegas',
        'brunch': 'Brunch',
        'coffee_break': 'Coffee Break',
        'picnic': 'Picnic',
        'barbacoa': 'Barbacoa',
        'paella': 'Paella',
        'sushi': 'Sushi',
        'variado': 'Variado',
        'otro': 'Otro'
      }
      return labels[type] || type
    },
    getTipoArticuloLabel (type) {
      const labels = {
        'agua': 'Agua',
        'refrescos': 'Refrescos',
        'zumos': 'Zumos',
        'cerveza': 'Cerveza',
        'vino': 'Vino',
        'cava': 'Cava',
        'champagne': 'Champagne',
        'cocteles': 'Cócteles',
        'cafe': 'Café',
        'te': 'Té',
        'infusiones': 'Infusiones',
        'aceitunas': 'Aceitunas',
        'frutos_secos': 'Frutos Secos',
        'patatas': 'Patatas',
        'tapas': 'Tapas',
        'canapes': 'Canapés',
        'quesos': 'Quesos',
        'embutidos': 'Embutidos',
        'tartas': 'Tartas',
        'pasteles': 'Pasteles',
        'helados': 'Helados',
        'fruta': 'Fruta',
        'chocolates': 'Chocolates',
        'galletas': 'Galletas',
        'dulces': 'Dulces',
        'variado': 'Variado',
        'otro': 'Otro'
      }
      return labels[type] || type
    },
    formatAlergeno (alergeno) {
      const labels = {
        'gluten': 'Gluten',
        'crustaceos': 'Crustáceos',
        'pescado': 'Pescado',
        'huevos': 'Huevos',
        'cacahuetes': 'Cacahuetes',
        'soja': 'Soja',
        'lacteos': 'Lácteos',
        'frutos_de_cascara': 'Frutos de cáscara',
        'apio': 'Apio',
        'mostaza': 'Mostaza',
        'sesamo': 'Sésamo',
        'di_azufre': 'Dióxido de azufre',
        'altramuces': 'Altramuces',
        'moluscos': 'Moluscos'
      }
      return labels[alergeno] || alergeno
    }
  }
}
</script>

<style scoped>
.icon-catering {
  width: 17px;
  height: 17px;
  object-fit: contain;
}
.catering-details {
  padding-top: 1rem;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  color: #333;
  font-size: 1rem;
}

.detail-item i {
  color: #333;
  font-size: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.detail-item span {
  line-height: 1;
  padding-top: 0.1rem;
}

.caracteristicas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  margin-bottom: 0.3rem;
  flex: 1;
}

.caracteristica-tag {
  background: rgb(213, 213, 213);
  color: #2C3E50;
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  font-size: 0.9rem;
  display: inline-block;
  margin-top: -0.2rem;
}

.caracteristica-tag.alergeno {
  background: rgb(255, 236, 204);
  color: #e65100;
}
</style>
