<template>
  <div class="event-preview-card">
    <div class="event-header">
      <h2><i class="bi bi-calendar-event"></i> {{ event.name }}</h2>
      <span class="event-type">{{ event.tipus }}</span>
      <div class="event-meta">
        <span><i class="bi bi-cash-coin"></i> Presupuesto: <b>{{ event.pressupost }} €</b></span>
        <span><i class="bi bi-people"></i> {{ event.num_invitats }} invitados</span>
        <span><i class="bi bi-clock"></i> {{ formatDate(event.data_inici) }} - {{ formatDate(event.data_fi) }}</span>
      </div>
    </div>
    <div class="event-services">
      <h3>Servicios recomendados</h3>
      <div v-for="(group, category) in groupedServices" :key="category" class="service-group">
        <h4>{{ capitalize(category) }}</h4>
        <div v-for="service in group" :key="service.id" class="service-card-redesign">
          <div class="service-img-col">
            <img v-if="service.images && service.images.length > 0" :src="service.images[0]" class="service-img" alt="Imagen servicio" />
          </div>
          <div class="service-main-info">
            <h5>{{ service.name }}</h5>
            <p class="service-type"><i class="bi bi-tag"></i> Tipo: <span>{{ getServiceTypeLabel(service.category) }}</span></p>
            <div v-for="(item, idx) in getServiceExtraInfo(service)" :key="idx" class="service-extra-info">
              <i class="bi bi-info-circle"></i> <b>{{ item.label }}:</b> {{ item.value }}
            </div>
          </div>
          <div class="service-event-info">
            <p><i class="bi bi-clock"></i> <b>Hora inicio:</b> {{ formatDateHour(service.dataInicio) }}</p>
            <p><i class="bi bi-clock"></i> <b>Hora fin:</b> {{ formatDateHour(service.dataFin) }}</p>
            <p><i class="bi bi-hash"></i> <b>Cantidad:</b> {{ service.cantidad }}</p>
            <p><i class="bi bi-cash-coin"></i> <b>Precio total:</b> {{ formatPrice(service.precioTotal) }} €</p>
            <p v-if="!service.disponible" class="not-available">No disponible en las fechas seleccionadas</p>
          </div>
        </div>
      </div>
      <div class="total-price">
        <h4>Precio total del evento: {{ formatPrice(precioTotalEvento) }} €</h4>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EventPreviewCard',
  props: {
    event: { type: Object, required: true },
    selectedServices: { type: Array, required: true },
    servicesInfo: { type: Array, required: true },
    precioTotalEvento: { type: Number, required: true },
    getServiceTypeLabel: { type: Function, required: true },
    getServiceExtraInfo: { type: Function, required: true }
  },
  computed: {
    groupedServices () {
      // Agrupa los servicios por categoría
      const groups = {}
      this.servicesInfo.forEach(s => {
        if (!groups[s.category]) groups[s.category] = []
        groups[s.category].push(s)
      })
      return groups
    }
  },
  methods: {
    formatDate (dateStr) {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      return d.toLocaleString('es-ES', { dateStyle: 'medium', timeStyle: 'short' })
    },
    formatDateHour (dateStr) {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      return d.toLocaleString('es-ES', { dateStyle: 'short', timeStyle: 'short' })
    },
    capitalize (str) {
      if (!str) return ''
      return str.charAt(0).toUpperCase() + str.slice(1)
    },
    formatPrice (value) {
      if (typeof value !== 'number') return value
      return value.toLocaleString('es-ES', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
    }
  }
}
</script>

<style scoped>
.event-preview-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  max-width: 1500px;
  margin: 0 auto;
}
.event-header {
  border-bottom: 2px solid #eee;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}
.event-header h2 {
  color: #800020;
  margin-bottom: 0.5rem;
}
.event-type {
  background: #f8f9fa;
  color: #800020;
  border-radius: 8px;
  padding: 0.2rem 0.8rem;
  font-weight: 600;
  margin-left: 1rem;
}
.event-meta {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  justify-content: center;
}
.event-services {
  margin-top: 2rem;
}
.service-group {
  margin-bottom: 2rem;
}
.service-card-redesign {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background:rgb(245, 245, 245);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(128,0,32,0.04);
}
.service-img-col {
  flex: 0 0 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  background: #eee;
  box-shadow: 0 1px 4px rgba(128,0,32,0.08);
}
.service-main-info {
  flex: 2;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-main-info h5 {
  margin: 0 0 0.5rem 0;
  color: #800020;
  font-size: 1.3rem;
}
.service-type {
  color: #b3003c;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.service-extra-info {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.service-event-info {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-left: 2px solid #e0e0e0;
  padding-left: 1.5rem;
  min-width: 220px;
}
.service-event-info p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}
.not-available {
  color: #dc3545;
  font-weight: 600;
  margin-top: 0.5rem;
}
.total-price {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 2px solid #eee;
  text-align: right;
}
.total-price h4 {
  color: #800020;
  font-size: 1.2rem;
}

/* Botones del modal mejorados y adaptados */
:deep(.modal-footer) {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
  background: transparent;
}
:deep(.modal-footer .button) {
  border-radius: 10px;
  font-size: 1.12rem;
  font-weight: 700;
  padding: 0.85rem 2.2rem;
  border: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(128,0,32,0.10);
  letter-spacing: 0.5px;
}
:deep(.modal-footer .button.primary) {
  background: linear-gradient(90deg, #800020 60%, #a8324a 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(128,0,32,0.10);
}
:deep(.modal-footer .button.primary:hover) {
  background: linear-gradient(90deg, #a8324a 60%, #800020 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(128,0,32,0.13);
}
:deep(.modal-footer .button.secondary) {
  background: #fff;
  color: #800020;
  border: 2px solid #800020;
  box-shadow: 0 2px 8px rgba(128,0,32,0.06);
}
:deep(.modal-footer .button.secondary:hover) {
  background: #ffeaea;
  color: #a8324a;
  border-color: #a8324a;
  box-shadow: 0 4px 16px rgba(168,50,74,0.10);
}
</style>
