<template>
  <div class="eventos-servicio-modal">
    <h2 class="titulo-modal"><i class="bi bi-calendar-event"></i> Eventos con este servicio</h2>
    <div v-if="!events || events.length === 0" class="no-eventos">
      <i class="bi bi-emoji-frown"></i>
      <p>Este servicio no está contratado por ningún evento en este momento.</p>
    </div>
    <div v-else class="eventos-lista">
      <div v-for="event in events" :key="event.id" class="evento-card-wrapper">
        <!-- Cabecera con info del usuario -->
        <div class="evento-user-header">
          <img :src="userDetails[event.account_id] && userDetails[event.account_id].photo ? userDetails[event.account_id].photo : defaultAvatar" :alt="userDetails[event.account_id] && userDetails[event.account_id].username ? userDetails[event.account_id].username : ''" class="user-photo" />
          <span
            v-if="userDetails[event.account_id]"
            class="user-link"
            style="cursor:pointer"
            @click="goToProfile(event.account_id)"
          >
            {{ getUsername(event.account_id) }}
          </span>
          <span v-else class="user-link loading-user">Cargando usuario...</span>
        </div>
        <!-- Card única: info general + detalles de la reserva -->
        <div class="evento-info-general">
          <div class="evento-titulo">
            <span class="evento-nombre"><i class="bi bi-calendar-event"></i> {{ event.name }}</span>
            <span class="evento-tipo"><i class="bi bi-star-fill"></i> {{ getEventTypeLabel(event.tipus) }}</span>
          </div>
          <div class="evento-detalles">
            <div><i class="bi bi-calendar-check"></i> <b>Inicio:</b> {{ formatDateTime(event.data_inici) }}</div>
            <div><i class="bi bi-calendar-check"></i> <b>Fin:</b> {{ formatDateTime(event.data_fi) }}</div>
            <div><i class="bi bi-people"></i> <b>Invitados:</b> {{ event.num_invitats }}</div>
            <div><i class="bi bi-cash-coin"></i> <b>Presupuesto total:</b> {{ event.pressupost }} €</div>
            <div><i class="bi bi-house"></i> <b>Espacio propio:</b> {{ event.espai_propi ? 'Sí' : 'No' }}</div>
            <div><span class="evento-status" :class="getStatusClass(event.estat)">{{ getStatusLabel(event.estat) }}</span></div>
          </div>
          <div class="detalle-servicio-evento">
            <h4>Tu servicio en este evento</h4>
            <div v-if="serviceDetails[event.id]">
              <div class="mini-card-servicio-3col">
                <!-- Columna 1: Imagen -->
                <div class="mini-servicio-img-col">
                  <img v-if="serviceDetails[event.id] && serviceDetails[event.id].service && serviceDetails[event.id].service.images && serviceDetails[event.id].service.images.length > 0"
                    :src="serviceDetails[event.id].service.images[0]"
                    alt="Imagen servicio"
                    class="mini-servicio-img"
                  />
                </div>
                <!-- Columna 2: Info del servicio -->
                <div class="mini-servicio-info-col">
                  <div class="mini-servicio-nombre">
                    {{ serviceDetails[event.id].service.name || 'Servicio' }}
                  </div>
                  <div class="mini-servicio-tipo">
                    <i class="bi bi-tag"></i> <b>Tipo:</b> {{ getServiceTypeLabel(serviceDetails[event.id].service.type) }}
                  </div>
                  <div v-for="(item, idx) in getServiceExtraInfo(serviceDetails[event.id].service)" :key="idx" class="mini-servicio-extra">
                    <i class="bi bi-info-circle"></i> <b>{{ item.label }}:</b> {{ item.value }}
                  </div>
                </div>
                <!-- Columna 3: Info de la reserva -->
                <div class="mini-servicio-reserva-col">
                  <div class="mini-servicio-dato"><i class="bi bi-clock"></i> <b>Hora inicio:</b> {{ formatDateTime(serviceDetails[event.id].data_inicio) }}</div>
                  <div class="mini-servicio-dato"><i class="bi bi-clock"></i> <b>Hora fin:</b> {{ formatDateTime(serviceDetails[event.id].data_fin) }}</div>
                  <div class="mini-servicio-dato"><i class="bi bi-hash"></i> <b>Cantidad:</b> {{ serviceDetails[event.id].cantidad }}</div>
                  <div class="mini-servicio-dato"><i class="bi bi-cash"></i> <b>Precio total:</b> {{ serviceDetails[event.id].price_total }} €</div>
                </div>
              </div>
            </div>
            <div v-else>
              <span>Cargando detalles del servicio...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventServiceServices from '@/services/EventServiceServices'
import AccountServices from '@/services/AccountServices'
import defaultAvatar from '@/assets/account_icon.png'

export default {
  name: 'EventosDeMiServicio',
  props: {
    events: {
      type: Array,
      required: true
    },
    serviceId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      serviceDetails: {},
      userDetails: {},
      defaultAvatar
    }
  },
  created () {
    console.log('Componente creado con events:', this.events)
    console.log('ServiceId recibido:', this.serviceId)
  },
  async mounted () {
    // Cargar los detalles para cada evento y usuario
    for (const event of this.events) {
      await this.getServiceDetails(event)
      this.getUserDetails(event.account_id)
    }
  },
  methods: {
    async getServiceDetails (event) {
      try {
        console.log('Buscando detalles para evento:', event.id)
        console.log('Estado actual de serviceDetails:', this.serviceDetails)

        if (!this.serviceDetails[event.id]) {
          console.log('No hay detalles en caché, llamando al API...')
          const details = await EventServiceServices.getEventServiceById(event.id, this.serviceId)
          console.log('Respuesta del API:', details)

          this.$set(this.serviceDetails, event.id, details)
          console.log('Después de guardar, serviceDetails:', this.serviceDetails)
        } else {
          console.log('Usando detalles en caché:', this.serviceDetails[event.id])
        }

        return this.serviceDetails[event.id]
      } catch (error) {
        console.error('Error al obtener detalles del servicio:', error)
        return null
      }
    },
    async getUserDetails (accountId) {
      if (!accountId || this.userDetails[accountId]) return
      try {
        const user = await AccountServices.getAccountById(accountId)
        this.$set(this.userDetails, accountId, user)
        console.log('Detalles usuario:', this.userDetails[accountId])
      } catch (error) {
        console.error('Error al obtener datos del usuario:', error)
      }
    },
    formatKey (key) {
      return key.replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())
    },
    formatDateTime (dateTime) {
      if (!dateTime) return '-'
      return new Date(dateTime).toLocaleString('es-ES', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    getEventTypeLabel (type) {
      const types = {
        'boda': 'Boda',
        'graduacio': 'Graduación',
        'festa': 'Fiesta',
        'celebracio': 'Celebración',
        'menjar_grup': 'Comida de Grupo',
        'altres': 'Otros'
      }
      return types[type] || type
    },
    getStatusLabel (status) {
      const statuses = {
        'en_curso': 'En Curso',
        'guardado': 'Guardado',
        'pagado': 'Pagado',
        'expirado': 'Expirado',
        'cancelado': 'Cancelado',
        'finalizado': 'Finalizado'
      }
      return statuses[status] || status
    },
    getStatusClass (status) {
      const classes = {
        'en_curso': 'status-en_curso',
        'guardado': 'status-guardado',
        'pagado': 'status-pagado',
        'expirado': 'status-expirado',
        'cancelado': 'status-cancelado',
        'finalizado': 'status-finalizado'
      }
      return classes[status] || ''
    },
    getUsername (accountId) {
      console.log('Render username para', accountId, this.userDetails[accountId])
      console.log('username', this.userDetails[accountId].username)
      return this.userDetails[accountId] && this.userDetails[accountId].username
        ? this.userDetails[accountId].username
        : 'Sin nombre'
    },
    goToProfile (accountId) {
      if (this.$router) {
        this.$router.push(`/profile/${accountId}`)
      } else if (this.$root && this.$root.$router) {
        this.$root.$router.push(`/profile/${accountId}`)
      } else {
        window.location.href = `/profile/${accountId}`
      }
    },
    getServiceTypeLabel (type) {
      const types = {
        musica: 'Música',
        fotografia: 'Fotografía',
        espai: 'Espacio',
        catering: 'Catering',
        mobiliario: 'Mobiliario',
        decoracio: 'Decoración'
        // ...otros tipos si tienes
      }
      console.log('type', type)
      return types[type] || type
    },
    getServiceExtraInfo (service) {
      if (!service) return []
      const info = []
      // Espai
      if (service.type === 'espai') {
        if (service.espai.espai_type) info.push({ label: 'Tipología', value: service.espai.espai_type })
      } else if (service.type === 'catering') {
        if (service.catering) {
          if (service.catering.tipo_entrega) info.push({ label: 'Tipo de entrega', value: service.catering.tipo_entrega })
          if (service.catering.tipo_catering) info.push({ label: 'Tipo de servicio', value: service.catering.tipo_catering })
          if (service.catering.menu.type_menu) info.push({ label: 'Tipo menú', value: service.catering.menu.type_menu })
          else info.push({ label: 'Tipo Articulo', value: service.catering.articulo.type_articulo })
        }
      } else if (service.type === 'mobiliari-decoracio') {
        if (service.mobiliari_decoracio.tipologia) info.push({ label: 'Tipología', value: service.mobiliari_decoracio.tipologia })
        if (service.mobiliari_decoracio.subtipologia) info.push({ label: 'Subtipología', value: service.mobiliari_decoracio.subtipologia })
      } else if (service.type === 'musica') {
        if (service.musica) {
          if (service.musica.musica_type) info.push({ label: 'Tipo de música', value: service.musica.musica_type })
          if (service.musica.canciones) info.push({ label: 'Tipo de canciones', value: service.musica.canciones })
        }
      } else if (service.type === 'fotografia') {
        if (service.fotografia) {
          if (service.fotografia.fotografia_type) info.push({ label: 'Tipo de servicio', value: service.fotografia.fotografia_type })
          if (service.fotografia.servicio_especial_type && service.fotografia.fotografia_type === 'servicio_especial') {
            info.push({ label: 'Tipo servicio especial', value: service.fotografia.servicio_especial_type })
          }
        }
      }
      return info
    }
  }
}
</script>

<style scoped>
.eventos-servicio-modal {
  min-width: 350px;
  max-width: 700px;
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(128,0,32,0.10);
}
.titulo-modal {
  color: #800020;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: center;
}
.no-eventos {
  text-align: center;
  color: #800020;
  font-size: 1.1rem;
  padding: 2rem 0;
}
.no-eventos i {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.eventos-lista {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.evento-card-wrapper {
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(128,0,32,0.04);
  border: 1px solid #800020;
}
.evento-info-general {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.2rem 1.2rem 1.2rem;
  box-shadow: 0 1px 4px rgba(128,0,32,0.06);
  margin-bottom: 0;
}
.evento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
.evento-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #800020;
}
.evento-nombre {
  font-size: 1.25rem;
  font-weight: 700;
  color: #800020;
}
.evento-tipo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #a8324a;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.evento-detalles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  font-size: 1rem;
  color: #333;
}
.evento-status {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-left: 0.5rem;
}
.status-en_curso { background: #fff7e6; color: #d97706; border: 1px solid #fbbf24; }
.status-guardado { background: #e0e7ff; color: #2563eb; border: 1px solid #60a5fa; }
.status-pagado { background: #e6fbe6; color: #059669; border: 1px solid #34d399; }
.status-expirado { background: #e5e7eb; color: #374151; border: 1px solid #9ca3af; }
.status-cancelado { background: #ffeaea; color: #b91c1c; border: 1px solid #fca5a5; }
.status-finalizado { background: #ede9fe; color: #7c3aed; border: 1px solid #a78bfa; }
.separador-reserva {
  border: none;
  border-top: 1.5px solid #e9ecef;
  margin: 1.1rem 0 1.1rem 0;
}
.detalle-servicio-evento {
  margin-top: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.detalle-servicio-evento h4 {
  color: #800020;
  font-size: 1.1rem;
  margin-bottom: -0.5rem;
}
.reserva-row {
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.evento-user-header {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  gap: 1rem;
  margin-left: 0.75rem;
  background: #f8f9fa;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #e9ecef;
}
.user-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #800020;
}
.user-link {
  color: #800020;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.user-link:hover {
  color: #a8324a;
  text-decoration: underline;
}
.user-link.loading-user {
  color: #aaa;
  font-style: italic;
  pointer-events: none;
}
.mini-card-servicio-3col {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.2rem;
  background: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(128,0,32,0.06);
  padding: 1rem 1.2rem;
  margin-top: 0.5rem;
  min-height: 80px;
}
.mini-servicio-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  max-width: 90px;
}
.mini-servicio-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  min-width: 120px;
}
.mini-servicio-reserva-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  align-items: flex-start;
  min-width: 120px;
}
.mini-servicio-dato {
  font-size: 0.93rem;
  color: #444;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border-radius: 0;
  padding: 0;
}
.mini-servicio-img {
  width: 120px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #800020;
  background: #fff;
  flex-shrink: 0;
}
.mini-servicio-nombre {
  font-size: 1.1rem;
  font-weight: 700;
  color: #800020;
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
}
.mini-servicio-tipo {
  margin-left: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #a8324a;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mini-servicio-extra {
  margin-left: 1rem;
  font-size: 0.95rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
</style>
