<template>
  <div class="service-list-container">
    <div v-if="loading" class="loading">Cargando servicios...</div>
    <div v-else-if="services.length === 0" class="no-services">No tiene servicios añadidos.</div>
    <div v-else>
      <div v-for="service in orderedServices" :key="service.id" class="service-item">
        <div class="service-info">
          <span class="service-type-icon">
            <i :class="getServiceIcon(service.type)"></i>
          </span>
          <span class="service-type">{{ getServiceTypeLabel(service.type) }}</span>
          <span class="service-name">{{ service.name }}</span>
        </div>
        <div class="service-actions">
          <button @click="editService(service)" class="edit-btn"><i class="fas fa-edit"></i> Modificar</button>
          <button @click="deleteService(service)" class="delete-btn"><i class="fas fa-trash"></i> Eliminar</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventServiceServices from '@/services/EventServiceServices'

export default {
  name: 'ServiceList',
  props: {
    eventId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      services: [],
      loading: true
    }
  },
  computed: {
    orderedServices () {
      const order = ['espai', 'catering', 'mobiliari', 'decoracio', 'musica', 'fotografia']
      return [...this.services].sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
    }
  },
  methods: {
    async fetchServices () {
      this.loading = true
      try {
        const res = await EventServiceServices.getEventServices(this.eventId)
        this.services = res || []
      } catch (e) {
        this.services = []
      }
      this.loading = false
    },
    getServiceIcon (type) {
      switch (type) {
        case 'espai': return 'fas fa-warehouse'
        case 'catering': return 'fas fa-utensils'
        case 'mobiliari': return 'fas fa-couch'
        case 'decoracio': return 'fas fa-paint-brush'
        case 'musica': return 'fas fa-music'
        case 'fotografia': return 'fas fa-camera'
        default: return 'fas fa-box'
      }
    },
    getServiceTypeLabel (type) {
      const map = {
        espai: 'Espacio',
        catering: 'Catering',
        mobiliari: 'Mobiliario',
        decoracio: 'Decoración',
        musica: 'Música',
        fotografia: 'Fotografía'
      }
      return map[type] || type
    },
    editService (service) {
      this.$emit('edit-service', service)
      // Aquí puedes abrir un modal o redirigir a la edición
    },
    async deleteService (service) {
      if (confirm('¿Seguro que quieres eliminar este servicio?')) {
        await EventServiceServices.deleteEventService(service.id)
        this.fetchServices()
      }
    }
  },
  mounted () {
    this.fetchServices()
  }
}
</script>

<style scoped>
.service-list-container {
  margin-top: 2rem;
}
.loading {
  color: #800020;
  font-weight: 500;
}
.no-services {
  color: #888;
  font-style: italic;
  margin: 1rem 0;
}
.service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.service-info {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.service-type-icon i {
  font-size: 1.4rem;
  color: #800020;
}
.service-type {
  font-weight: 600;
  color: #800020;
  font-size: 1.1rem;
}
.service-name {
  font-size: 1rem;
  color: #333;
}
.service-actions {
  display: flex;
  gap: 0.7rem;
}
.edit-btn {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}
.edit-btn:hover {
  background: #388e3c;
}
.delete-btn {
  background: #b91c1c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}
.delete-btn:hover {
  background: #991b1b;
}
</style>
