<template>
  <div class="create-fotografia-form" data-service-type="fotografia">
    <form @submit.prevent="handleSubmit">
      <!-- Información básica -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-info-circle"></i> Información Básica</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="fotografia_type">
              <i class="bi bi-camera"></i> Tipo de Servicio*
            </label>
            <select id="fotografia_type" v-model="formData.fotografia_type" required class="select-granate">
              <option disabled value="">Selecciona un tipo</option>
              <option value="fotografia">Fotografía</option>
              <option value="video">Video</option>
              <option value="servicio_especial">Servicio Especial</option>
            </select>
          </div>
          <div class="form-group" v-if="formData.fotografia_type === 'servicio_especial'">
            <label for="servicio_especial_type">
              <i class="bi bi-tag"></i> Tipo de Servicio Especial*
            </label>
            <select id="servicio_especial_type" v-model="formData.servicio_especial_type" required class="select-granate">
              <option disabled value="">Selecciona un tipo</option>
              <option value="impresion_instantanea">Impresión Instantánea</option>
              <option value="fotomaton">Fotomatón</option>
              <option value="cabina">Cabina</option>
              <option value="espejo_magico">Espejo Mágico</option>
              <option value="video_360">Video 360</option>
              <option value="gift_box">Gift Box</option>
              <option value="virtual">Virtual</option>
              <option value="camara_oculta">Cámara Oculta</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="duracion">
              <i class="bi bi-clock"></i> Duración (horas)*
            </label>
            <input type="number" id="duracion" v-model="formData.duracion" required min="0.5" step="0.5" class="cantidad-input select-granate" @change="onDuracionChange" />
          </div>
        </div>
      </div>

      <!-- Características -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-stars"></i> Características</h3>
        <div class="caracteristicas-btns-grid">
          <div v-for="carac in caracteristicasPredefinidas" :key="carac.value" class="carac-btn-outer">
            <button type="button" :class="['carac-icon-btn', { selected: formData.caracteristicas.includes(carac.value) }]" @click="toggleCaracteristica(carac.value)">
              <i :class="carac.icon"></i>
            </button>
            <span :class="['carac-label', { selected: formData.caracteristicas.includes(carac.value) }]">{{ carac.label }}</span>
          </div>
        </div>
      </div>

      <!-- Servicios Incluidos -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-clipboard-check"></i> Servicios Incluidos</h3>
        <div class="servicios-incluidos-grid">
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-camera"></i> Entrega del material</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosFotograficos" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-tools"></i> Equipamiento y técnicos</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosTecnicos" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-shield-check"></i> Seguridad y cumplimiento</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosSeguridad" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Raider -->
      <div class="form-section raider-form">
        <h3 class="raider-title"><i class="bi bi-gear"></i>Raider Técnico</h3>
        <div v-if="fotografiaObligatoriaCompleta">
          <RaiderFormFotografia
            @input="onRaiderSaved"
            :value="formData.raider"
          />
        </div>
        <div v-else class="raider-warning">
          <i class="bi bi-exclamation-triangle"></i>
          Rellena primero los campos obligatorios de fotografía para poder seleccionar un Raider técnico.
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import RaiderFormFotografia from '../raider/RaiderFormFotografia.vue'

export default {
  name: 'EditFotografia',
  components: { RaiderFormFotografia },
  props: {
    serviceData: { type: Object, required: true }
  },
  emits: ['service-data', 'clear-data'],
  data () {
    return {
      formData: {
        fotografia_type: '',
        servicio_especial_type: '',
        duracion: 1,
        caracteristicas: [],
        servicios_incluidos: [],
        raider: null
      },
      caracteristicasPredefinidas: [
        { value: 'formato_personalizado', label: 'Formato personalizado', icon: 'bi bi-aspect-ratio' },
        { value: 'edicion_profesional', label: 'Edición profesional', icon: 'bi bi-sliders' },
        { value: 'retoque_avanzado', label: 'Retoque avanzado', icon: 'bi bi-magic' },
        { value: 'filtros_especiales', label: 'Filtros especiales', icon: 'bi bi-palette' },
        { value: 'fotografia_nocturna', label: 'Fotografía nocturna', icon: 'bi bi-moon-stars' },
        { value: 'fotografia_submarina', label: 'Fotografía submarina', icon: 'bi bi-water' },
        { value: 'fotografia_macro', label: 'Fotografía macro', icon: 'bi bi-zoom-in' },
        { value: 'fotografia_panoramica', label: 'Fotografía panorámica', icon: 'bi bi-arrows-angle-expand' },
        { value: 'fotografia_timelapse', label: 'Timelapse', icon: 'bi bi-clock-history' },
        { value: 'fotografia_hdr', label: 'Fotografía HDR', icon: 'bi bi-brightness-high' },
        { value: 'fotografia_bn', label: 'Fotografía B/N', icon: 'bi bi-circle-half' },
        { value: 'fotografia_vintage', label: 'Fotografía vintage', icon: 'bi bi-camera' },
        { value: 'fotografia_conceptual', label: 'Fotografía conceptual', icon: 'bi bi-lightbulb' },
        { value: 'fotografia_artistica', label: 'Fotografía artística', icon: 'bi bi-palette' },
        { value: 'fotografia_documental', label: 'Fotografía documental', icon: 'bi bi-journal-text' },
        { value: 'sesion_fotografica', label: 'Sesión fotográfica', icon: 'bi bi-camera' },
        { value: 'reportaje_evento', label: 'Reportaje de evento', icon: 'bi bi-journal-text' },
        { value: 'fotografia_producto', label: 'Fotografía de producto', icon: 'bi bi-box' },
        { value: 'fotografia_arquitectura', label: 'Fotografía de arquitectura', icon: 'bi bi-building' },
        { value: 'fotografia_moda', label: 'Fotografía de moda', icon: 'bi bi-person-video3' },
        { value: 'fotografia_deportiva', label: 'Fotografía deportiva', icon: 'bi bi-trophy' },
        { value: 'fotografia_naturaleza', label: 'Fotografía de naturaleza', icon: 'bi bi-tree' },
        { value: 'fotografia_callejera', label: 'Fotografía callejera', icon: 'bi bi-geo-alt' },
        { value: 'fotografia_retrato', label: 'Fotografía de retrato', icon: 'bi bi-person' },
        { value: 'economico', label: 'Económico', icon: 'bi bi-currency-euro' },
        { value: 'sesion_extra', label: 'Posible sesión extra', icon: 'bi bi-plus-circle' },
        { value: 'maquillaje_incluido', label: 'Maquillaje incluido', icon: 'bi bi-palette' },
        { value: 'grandes_eventos', label: 'Grandes eventos', icon: 'bi bi-calendar-event' }
      ],
      serviciosFotograficos: [
        { value: 'entrega_digital', label: 'Entrega digital', icon: 'bi bi-cloud-arrow-down' },
        { value: 'entrega_fisica', label: 'Entrega física', icon: 'bi bi-box-seam' },
        { value: 'album_digital', label: 'Álbum digital', icon: 'bi bi-book' },
        { value: 'album_fisico', label: 'Álbum físico', icon: 'bi bi-journal-album' },
        { value: 'marco_regalo', label: 'Marco de regalo', icon: 'bi bi-border' },
        { value: 'tarjetas_agradecimiento', label: 'Tarjetas de agradecimiento', icon: 'bi bi-card-text' },
        { value: 'video_montaje', label: 'Video montaje', icon: 'bi bi-film' },
        { value: 'fotos_adicionales', label: 'Fotos adicionales', icon: 'bi bi-images' }
      ],
      serviciosTecnicos: [
        { value: 'equipo_profesional', label: 'Equipo profesional', icon: 'bi bi-camera' },
        { value: 'maquillador', label: 'Maquillador', icon: 'bi bi-palette' },
        { value: 'iluminacion_estudio', label: 'Iluminación de estudio', icon: 'bi bi-lightbulb' },
        { value: 'fondo_croma', label: 'Fondo croma', icon: 'bi bi-square' },
        { value: 'drone', label: 'Drone', icon: 'bi bi-airplane' },
        { value: 'estabilizador', label: 'Estabilizador', icon: 'bi bi-arrows-move' },
        { value: 'monitor_calibrado', label: 'Monitor calibrado', icon: 'bi bi-display' },
        { value: 'impresora_profesional', label: 'Impresora profesional', icon: 'bi bi-printer' },
        { value: 'escanner_alta_resolucion', label: 'Escáner alta resolución', icon: 'bi bi-scanner' }
      ],
      serviciosSeguridad: [
        { value: 'seguro_equipo', label: 'Seguro de equipo', icon: 'bi bi-shield-check' },
        { value: 'backup_archivos', label: 'Backup de archivos', icon: 'bi bi-cloud-arrow-up' },
        { value: 'certificacion_profesional', label: 'Certificación profesional', icon: 'bi bi-award' },
        { value: 'derechos_imagen', label: 'Derechos de imagen', icon: 'bi bi-file-earmark-lock' }
      ]
    }
  },
  computed: {
    fotografiaObligatoriaCompleta () {
      const tieneTipoServicio = this.formData.fotografia_type !== ''
      const tieneDuracion = this.formData.duracion > 0
      const tieneServicioEspecial = this.formData.fotografia_type !== 'servicio_especial' ||
                                   (this.formData.fotografia_type === 'servicio_especial' && this.formData.servicio_especial_type !== '')
      return tieneTipoServicio && tieneDuracion && tieneServicioEspecial
    }
  },
  methods: {
    loadServiceData () {
      try {
        console.log('[EditFotografia] Datos del servicio recibidos:', this.serviceData)

        // Actualizar el formData con los datos del servicio
        this.formData = {
          fotografia_type: this.serviceData.fotografia_type || '',
          servicio_especial_type: this.serviceData.servicio_especial_type || '',
          duracion: this.serviceData.duracion || 1,
          caracteristicas: this.serviceData.caracteristicas || [],
          servicios_incluidos: this.serviceData.servicios_incluidos || [],
          raider: this.serviceData.raider || null
        }
      } catch (error) {
        console.error('Error al cargar los datos del servicio:', error)
      }
    },
    toggleCaracteristica (valor) {
      const idx = this.formData.caracteristicas.indexOf(valor)
      if (idx === -1) {
        this.formData.caracteristicas.push(valor)
      } else {
        this.formData.caracteristicas.splice(idx, 1)
      }
      this.$emit('service-data', { ...this.formData })
    },
    toggleServicioIncluido (valor) {
      const idx = this.formData.servicios_incluidos.indexOf(valor)
      if (idx === -1) {
        this.formData.servicios_incluidos.push(valor)
      } else {
        this.formData.servicios_incluidos.splice(idx, 1)
      }

      // Construir service_include directamente aquí
      const serviceInclude = {
        'Entrega del material': this.formData.servicios_incluidos.filter(serv =>
          this.serviciosFotograficos.map(s => s.value).includes(serv)
        ),
        'Equipamiento y técnicos': this.formData.servicios_incluidos.filter(serv =>
          this.serviciosTecnicos.map(s => s.value).includes(serv)
        ),
        'Seguridad y cumplimiento': this.formData.servicios_incluidos.filter(serv =>
          this.serviciosSeguridad.map(s => s.value).includes(serv)
        )
      }

      // Emitir los datos actualizados con service_include
      this.$emit('service-data', {
        ...this.formData,
        service_include: serviceInclude
      })
    },
    handleSubmit () {
      console.log('Datos update 1:', this.formData)
      console.log('ServiceData completo:', this.serviceData)

      // Crear una copia del formData para no modificar el original
      const formDataToSend = { ...this.formData }
      console.log('Datos update 2:', formDataToSend)

      // Convertir string vacío a null para servicio_especial_type
      if (formDataToSend.servicio_especial_type === '') {
        delete formDataToSend.servicio_especial_type
      }
      console.log('Datos update 3:', formDataToSend)

      // Convertir duracion a número
      if (typeof formDataToSend.duracion === 'string') {
        formDataToSend.duracion = parseFloat(formDataToSend.duracion)
      }
      console.log('Datos update 4:', formDataToSend)

      // Si hay raider, asegurarse de que no incluya account_id y que los horarios estén en el formato correcto
      if (formDataToSend.raider) {
        delete formDataToSend.raider.account_id
        // Asegurarse de que los horarios estén en el formato correcto
        if (formDataToSend.raider.availability_rules) {
          formDataToSend.raider.availability_rules = formDataToSend.raider.availability_rules.map(rule => ({
            ...rule,
            hora_inicio: rule.hora_inicio ? rule.hora_inicio + ':00' : null,
            hora_fin: rule.hora_fin ? rule.hora_fin + ':00' : null
          }))
        }
      }
      console.log('Datos update 5:', formDataToSend)

      // Construir service_include como diccionario
      const serviceInclude = {
        'Entrega del material': formDataToSend.servicios_incluidos.filter(serv =>
          this.serviciosFotograficos.map(s => s.value).includes(serv)
        ),
        'Equipamiento y técnicos': formDataToSend.servicios_incluidos.filter(serv =>
          this.serviciosTecnicos.map(s => s.value).includes(serv)
        ),
        'Seguridad y cumplimiento': formDataToSend.servicios_incluidos.filter(serv =>
          this.serviciosSeguridad.map(s => s.value).includes(serv)
        )
      }

      // Añadir service_include y eliminar servicios_incluidos
      formDataToSend.service_include = serviceInclude
      delete formDataToSend.servicios_incluidos

      console.log('Datos update 6:', {
        id: this.serviceData.id,
        formData: formDataToSend
      })

      this.$emit('service-data', formDataToSend)
    },
    onRaiderSaved (raider) {
      console.log('[EditFotografia] Raider recibido en onRaiderSaved:', raider)
      this.formData.raider = raider
      // Emitir los datos actualizados con el raider
      this.$emit('service-data', { ...this.formData })
    },
    onDuracionChange () {
      this.$emit('service-data', { ...this.formData })
    },
    // Función para limpiar los datos
    clearData () {
      this.formData = {
        fotografia_type: '',
        servicio_especial_type: '',
        duracion: 1,
        caracteristicas: [],
        servicios_incluidos: [],
        raider: null
      }
    }
  },
  mounted () {
    // Escuchar el evento clear-data
    const element = document.querySelector('.create-fotografia-form')
    if (element) {
      element.addEventListener('clear-data', this.clearData)
    }
    // Cargar los datos del servicio cuando el componente se monte si ya tenemos serviceData
    if (this.serviceData) {
      this.loadServiceData()
    }
  },
  watch: {
    serviceData: {
      immediate: true,
      handler (newValue) {
        if (newValue) {
          console.log('[EditFotografia] serviceData actualizado:', newValue)
          this.loadServiceData()
        }
      }
    }
  },
  beforeUnmount () {
    // Limpiar el event listener cuando el componente se desmonte
    const element = document.querySelector('.create-fotografia-form')
    if (element) {
      element.removeEventListener('clear-data', this.clearData)
    }
  }
}
</script>

<style scoped>
.icon_i {
  font-size: 1.2rem;
  color: #800020;
}
.icon_y {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}
.create-fotografia-form {
  max-width: 100%;
  margin: 0;
}

h2 {
  color: #800020;
  text-align: center;
  margin-bottom: 2rem;
}

.form-section {
  background: white;
  border-radius: 8px;
  padding: 0rem;
  margin-bottom: 1.5rem;
}

h3 {
  color: #2C3E50;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

h5 {
  color: #2C3E50;
  font-size: 1.1rem;
  margin-left: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2C3E50;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #800020;
}

.select-granate {
  border: 1.5px solid #ccc;
  color: #2C3E50;
  background: #fff;
  border-radius: 8px;
  padding: 0.8rem;
  font-size: 1rem;
  transition: border-color 0.2s;
  height: 50px;
}

.select-granate:focus {
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tag-input {
  flex: 1;
  padding: 0.7rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
}

.btn-add {
  background: #800020;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-add:hover {
  background: #600018;
}

.tags-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag.special {
  background: #e6d1d7;
  color: #800020;
  border-radius: 16px;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
}

.remove-tag {
  background: none;
  border: none;
  color: #800020;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 1.1rem;
}

.caracteristicas-btns-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.1rem 0.5rem;
  justify-items: center;
  margin-bottom: 0.5rem;
}

.carac-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.carac-icon-btn {
  background: #e9ecef;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
}

.carac-icon-btn.selected {
  background: #800020;
  color: #fff;
}

.carac-label {
  color: #6c757d;
  font-size: 0.93rem;
  text-align: center;
  font-weight: 500;
  max-width: 90px;
  line-height: 1.1;
}

.servicios-incluidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  margin-top: 1rem;
}

@media (min-width: 700px) {
  .servicios-incluidos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.servicio-bloque {
  background: rgb(247, 247, 247);
  border-radius: 8px;
  padding: 1.5rem 1rem 1.5rem 1rem;
  min-width: 260px;
  flex: 1;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.servicio-bloque h5 {
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.servicios-btns-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1rem;
  overflow-x: auto;
  justify-content: flex-start;
  width: 100%;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f7f7f7;
}

.servicios-btns-grid::-webkit-scrollbar {
  height: 8px;
  background: #f7f7f7;
}

.servicios-btns-grid::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.servicio-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  min-width: 90px;
  justify-self: center;
  height: 100px;
  box-sizing: border-box;
}

.servicio-icon-btn {
  background: #e9ecef;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

.servicio-icon-btn.selected {
  background: #800020;
  color: #fff;
}

.servicio-label {
  color: #6c757d;
  font-size: 0.93rem;
  text-align: center;
  font-weight: 500;
  max-width: 90px;
  line-height: 1.1;
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.submit-btn,
.cancel-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn {
  background-color: #800020;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #600018;
}

.cancel-btn {
  background-color: #e9ecef;
  color: #2C3E50;
  border: 1px solid #dee2e6;
}

.cancel-btn:hover {
  background-color: #dee2e6;
}

.raider-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff3cd;
  color: #856404;
  border: 1.5px solid #ffeeba;
  border-radius: 8px;
  padding: 2rem 1rem;
  margin: 1rem 0;
  font-size: 1.1rem;
  text-align: center;
  gap: 1rem;
}
.raider-warning i {
  font-size: 2rem;
}

h3.raider-title {
  padding-bottom: -1.5rem;
  margin-bottom: 1.5rem;
}
</style>
