<template>
  <service-card
    :service="service"
    type="musica"
    @view-details="viewDetails"
    @contact-provider="contactProvider"
  >
    <template #additional-info>
      <div class="musica-details">
        <div class="detail-item">
          <i class="bi bi-music-note"></i>
          <span>{{ formatMusicaType(service.musica.musica_type) }} - {{ formatCanciones(service.musica.canciones) }}</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-clock"></i>
          <span>{{ service.musica.duracion }} horas</span>
        </div>
        <div class="detail-item" v-if="service.musica.generos && service.musica.generos.length > 0">
          <i class="bi bi-music-note-beamed"></i>
          <div class="caracteristicas">
            <span v-for="(genero, index) in service.musica.generos"
                  :key="'genero-'+index"
                  class="caracteristica-tag">
              {{ formatGenero(genero) }}
            </span>
          </div>
        </div>
        <div class="detail-item" v-if="service.musica.instrumentos && service.musica.instrumentos.length > 0">
          <img :src="iconInstrumento" alt="Instrument" class="icon-img" />
          <div class="caracteristicas">
            <span v-for="(instrumento, index) in service.musica.instrumentos"
                  :key="'instrumento-'+index"
                  class="caracteristica-tag">
              {{ formatInstrumento(instrumento) }}
            </span>
          </div>
        </div>
        <div class="detail-item" v-if="service.musica.caracteristicas && service.musica.caracteristicas.length > 0">
          <i class="bi bi-check-circle"></i>
          <div class="caracteristicas">
            <span v-for="(caracteristica, index) in service.musica.caracteristicas"
                  :key="'caracteristica-'+index"
                  class="caracteristica-tag">
              {{ caracteristica }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </service-card>
</template>

<script>
import ServiceCard from './myServiceCard.vue'
import iconInstrumento from '@/assets/icono_instrument.png'
export default {
  name: 'MusicaService',
  components: {
    ServiceCard
  },
  props: {
    service: {
      type: Object,
      required: true,
      validator: (obj) => {
        return obj.type === 'musica' && obj.musica
      }
    }
  },
  data () {
    return {
      iconInstrumento
    }
  },
  methods: {
    viewDetails () {
      this.$emit('view-details', this.service)
    },
    contactProvider () {
      this.$emit('contact-provider', this.service)
    },
    formatMusicaType (type) {
      const labels = {
        'dj': 'DJ',
        'musico': 'Músico'
      }
      return labels[type] || type
    },
    formatCanciones (type) {
      const labels = {
        'propias': 'Canciones propias',
        'versiones': 'Versiones'
      }
      return labels[type] || type
    },
    formatGenero (genero) {
      const labels = {
        'pop': 'Pop',
        'rock': 'Rock',
        'jazz': 'Jazz',
        'blues': 'Blues',
        'soul': 'Soul',
        'funk': 'Funk',
        'r&b': 'R&B',
        'hip-hop': 'Hip Hop',
        'electronic': 'Electrónica',
        'house': 'House',
        'techno': 'Techno',
        'reggaeton': 'Reggaeton',
        'salsa': 'Salsa',
        'bachata': 'Bachata',
        'merengue': 'Merengue',
        'flamenco': 'Flamenco',
        'clasica': 'Clásica',
        'indie': 'Indie',
        'metal': 'Metal',
        'punk': 'Punk',
        'country': 'Country',
        'folk': 'Folk',
        'latin': 'Latino',
        'disco': 'Disco',
        'reggae': 'Reggae',
        'gospel': 'Gospel',
        'bossa-nova': 'Bossa Nova',
        'samba': 'Samba',
        'tango': 'Tango',
        'ballroom': 'Ballroom'
      }
      return labels[genero] || genero
    },
    formatInstrumento (instrumento) {
      return instrumento
        .replace(/_/g, ' ')
        .replace(/([A-Z])/g, ' $1')
        .replace(/^./, str => str.toUpperCase())
    }
  }
}
</script>

<style scoped>
.musica-details {
  padding-top: 1rem;
}
.icon-img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  margin-right: -0.4rem;
}
.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  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.3rem;
}

.caracteristicas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  flex: 1;
  font-size: 0.9rem;
}

.caracteristica-tag {
  background: rgb(213, 213, 213);
  color: #2C3E50;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: -0.2rem;
}
</style>
