<template>
  <div class="create-mobiliari-form">
    <form @submit.prevent="handleSubmit">
      <!-- Información básica -->
      <div class="form-section">
        <div class="form-row">
          <div class="form-group">
            <label for="tipologia">
              <i class="bi bi-tag"></i> Tipología*
            </label>
            <select id="tipologia" v-model="formData.tipologia" required class="select-granate" :class="{ 'error': errors.tipologia }">
              <option disabled value="">Selecciona una tipología</option>
              <option value="MESAS">Mesas</option>
              <option value="SILLAS_TABURETES">Sillas y Taburetes</option>
              <option value="TRONAS">Tronas</option>
              <option value="BARRILES_TONELADAS_CHILL_OUT">Barras, Barriles, Toneles, Chill-out</option>
              <option value="ESCALERAS_VIGAS">Escaleras y Vigas</option>
              <option value="PALES">Pales</option>
              <option value="CATENARIAS">Catenarias</option>
              <option value="COLGADORES_GUARDARROPAS">Colgadores y Guardarropas</option>
              <option value="CUBIERTA">Cubierta</option>
              <option value="CRISTALERA">Cristalera</option>
              <option value="CARPAS">Carpas</option>
              <option value="TOLDOS_PARASOLES">Toldos y Parasoles</option>
              <option value="PAREDES">Paredes</option>
              <option value="SUELOS">Suelos</option>
              <option value="EDIFICACIONES_TEMPORALES">Edificaciones Temporales</option>
              <option value="STANDS">Stands</option>
              <option value="TOCADOR_MAQUILLAJE">Tocador Maquillaje</option>
              <option value="ESPEJOS">Espejos</option>
              <option value="VITRINAS">Vitrinas</option>
              <option value="MOSTRADORES_BARRAS">Mostradores y Barras</option>
              <option value="IGLOO">Iglú</option>
              <option value="ESTUFAS_CALEFACTORES">Estufas y Calefactores</option>
              <option value="VENTILADORES_AIRE">Ventiladores y Aire Acondicionado</option>
              <option value="PIZARRAS">Pizarras</option>
              <option value="PANTALLAS">Pantallas</option>
              <option value="PROYECTORES">Proyectores</option>
              <option value="ALTAVOCES">Altavoces</option>
              <option value="MICROFONOS">Micrófonos</option>
              <option value="FOCO">Focos</option>
              <option value="BOLA_DISCO">Bola de Discoteca</option>
              <option value="TABLA_DJ">Tabla DJ</option>
              <option value="ELECTRICIDAD_ENCHUFES">Electricidad y Enchufes</option>
              <option value="AIRES_FAROLILLOS">Aires y Farolillos</option>
              <option value="GRADAS_TRIBUNAS">Gradas y Tribunas</option>
              <option value="JUEGOS">Juegos</option>
              <option value="ATRACCIONES">Atracciones</option>
              <option value="MANIQUIS">Maniquíes</option>
              <option value="MAQUINAS_COMIDA">Máquinas de Comida</option>
              <option value="WC">WC</option>
              <option value="CONTENEDORES_PAPELERAS">Contenedores y Papeleras</option>
            </select>
            <span v-if="errors.tipologia" class="error-message">{{ errors.tipologia }}</span>
          </div>
          <div class="form-group">
            <label>
              <i class="bi bi-box-seam"></i> Tipo de Disponibilidad*
            </label>
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" v-model="formData.is_rental" :value="true" /> Alquiler
              </label>
              <label class="radio-label">
                <input type="radio" v-model="formData.is_rental" :value="false" /> Venta
              </label>
            </div>
          </div>
        </div>
        <div class="form-row cantidad-row">
          <div class="form-group cantidad-group">
            <label for="cantidad_min">
              <i class="bi bi-boxes"></i> Cantidad Mínima*
            </label>
            <input type="number" id="cantidad_min" v-model="formData.cantidad_min" required min="1" placeholder="Ej: 10" class="cantidad-input" :class="{ 'error': errors.cantidad_min }" />
            <span v-if="errors.cantidad_min" class="error-message">{{ errors.cantidad_min }}</span>
          </div>
          <div class="form-group cantidad-group">
            <label for="cantidad_max">
              <i class="bi bi-boxes"></i> Cantidad Máxima*
            </label>
            <input type="number" id="cantidad_max" v-model="formData.cantidad_max" required min="1" placeholder="Ej: 100" class="cantidad-input" :class="{ 'error': errors.cantidad_max }" />
            <span v-if="errors.cantidad_max" class="error-message">{{ errors.cantidad_max }}</span>
          </div>
        </div>
      </div>

      <!-- Detalles del Mobiliario -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-check"></i> Detalles del Mobiliario</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="subtipologia">
              <i class="bi bi-tags"></i> Subtipología
            </label>
            <input type="text" id="subtipologia" :value="formData.subtipologia" @input="updateSubtipologia" placeholder="Ej: Mesa plegable" />
          </div>
          <div class="form-group">
            <label for="forma">
              <i class="bi bi-pentagon"></i> Forma
            </label>
            <input type="text" id="forma" :value="formData.forma" @input="updateForma" placeholder="Ej: Redonda" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="modality">
              <i class="bi bi-gear"></i> Modalidad
            </label>
            <input type="text" id="modality" :value="formData.modality" @input="updateModality" placeholder="Ej: Interior/Exterior" />
          </div>
          <div class="form-group">
            <label for="style">
              <i class="bi bi-brush"></i> Estilo
            </label>
            <input type="text" id="style" :value="formData.style" @input="updateStyle" placeholder="Ej: Moderno, Clásico, Rústico" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="size">
              <i class="bi bi-arrows-angle-expand"></i> Tamaño
            </label>
            <select id="size" :value="formData.size" @change="updateSize" class="select-granate">
              <option disabled value="">Selecciona un tamaño</option>
              <option value="Muy pequeño">Muy pequeño</option>
              <option value="Pequeño">Pequeño</option>
              <option value="Mediano">Mediano</option>
              <option value="Grande">Grande</option>
              <option value="Muy grande">Muy grande</option>
              <option value="Extra grande">Extra grande</option>
              <option value="Otro">Otro</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="colores">
              <i class="bi bi-palette"></i> Colores
            </label>
            <div class="input-group">
              <input id="colores" v-model="nuevoColor" type="text" placeholder="Añade un color y pulsa +" class="tag-input" />
              <button @click="agregarColor" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(color, idx) in formData.color" :key="color + idx" class="tag special">
                {{ color }}
                <button type="button" @click="eliminarColor(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="materiales">
              <i class="bi bi-tools"></i> Materiales
            </label>
            <div class="input-group">
              <input id="materiales" v-model="nuevoMaterial" type="text" placeholder="Añade un material y pulsa +" class="tag-input" />
              <button @click="agregarMaterial" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(material, idx) in formData.material" :key="material + idx" class="tag special">
                {{ material }}
                <button type="button" @click="eliminarMaterial(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="bi bi-rulers"></i> Dimensiones (cm)
            </label>
            <div class="dimensions-group">
              <div class="dimension-input">
                <label class="dimension-label" for="width">Ancho</label>
                <input type="number" id="width" class="dimension-input" :value="formData.dimensions.width" @input="updateDimension('width', $event)" min="0" step="0.1" placeholder="Ej: 120" :class="{ 'error': errors.dimensions.width }" />
                <span v-if="errors.dimensions.width" class="error-message">{{ errors.dimensions.width }}</span>
              </div>
              <div class="dimension-input">
                <label class="dimension-label" for="height">Alto</label>
                <input type="number" id="height" class="dimension-input" :value="formData.dimensions.height" @input="updateDimension('height', $event)" min="0" step="0.1" placeholder="Ej: 75" :class="{ 'error': errors.dimensions.height }" />
                <span v-if="errors.dimensions.height" class="error-message">{{ errors.dimensions.height }}</span>
              </div>
              <div class="dimension-input">
                <label class="dimension-label" for="depth">Profundidad</label>
                <input type="number" id="depth" class="dimension-input" :value="formData.dimensions.depth" @input="updateDimension('depth', $event)" min="0" step="0.1" placeholder="Ej: 60" :class="{ 'error': errors.dimensions.depth }" />
                <span v-if="errors.dimensions.depth" class="error-message">{{ errors.dimensions.depth }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="complement">
              <i class="bi bi-plus-circle"></i> Complementos
            </label>
            <div class="input-group">
              <input id="complement" v-model="nuevoComplemento" type="text" placeholder="Añade un complemento y pulsa +" class="tag-input" />
              <button @click="agregarComplemento" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(complement, idx) in formData.complement" :key="complement + idx" class="tag special">
                {{ complement }}
                <button type="button" @click="eliminarComplemento(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </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-truck"></i> Aspectos logísticos</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosLogisticos" :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> Aspectos 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>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EditMobiliari',
  props: {
    serviceData: {
      type: Object,
      required: true,
      validator: function (value) {
        console.log('EditMobiliari - Validando prop serviceData:', JSON.parse(JSON.stringify(value)))
        return value !== null
      }
    }
  },
  data () {
    return {
      formData: {
        service_type: 'mobiliario',
        tipologia: '',
        is_rental: true,
        cantidad_min: 1,
        cantidad_max: 1,
        subtipologia: '',
        forma: '',
        modality: '',
        style: '',
        color: [],
        material: [],
        size: '',
        dimensions: { width: 0, height: 0, depth: 0 },
        caracteristicas: [],
        complement: [],
        servicios_incluidos: []
      },
      errors: {
        tipologia: '',
        cantidad_min: '',
        cantidad_max: '',
        dimensions: {
          width: '',
          height: '',
          depth: ''
        }
      },
      nuevoColor: '',
      nuevoMaterial: '',
      nuevoComplemento: '',
      caracteristicasPredefinidas: [
        { value: 'individual', label: 'Individual', icon: 'bi bi-person' },
        { value: 'pack', label: 'Pack', icon: 'bi bi-box-seam' },
        { value: 'plegable', label: 'Plegable', icon: 'bi bi-arrows-collapse' },
        { value: 'apilable', label: 'Apilable', icon: 'bi bi-stack' },
        { value: 'exterior', label: 'Exterior', icon: 'bi bi-sun' },
        { value: 'interior', label: 'Interior', icon: 'bi bi-house' },
        { value: 'resistente_agua', label: 'Resistente al agua', icon: 'bi bi-droplet' },
        { value: 'ligero', label: 'Ligero', icon: 'bi bi-wind' },
        { value: 'ruedas', label: 'Con ruedas', icon: 'bi bi-truck' },
        { value: 'ajustable', label: 'Ajustable', icon: 'bi bi-sliders' },
        { value: 'personalizacion', label: 'Personalización', icon: 'bi bi-brush' },
        { value: 'seguridad', label: 'Seguridad y garantías', icon: 'bi bi-shield-check' },
        { value: 'accesibilidad', label: 'Accesibilidad', icon: 'bi person-wheelchair' },
        { value: 'mesa_adaptada', label: 'Mesas adaptadas', icon: 'bi bi-table' },
        { value: 'silla_reforzada', label: 'Sillas reforzadas', icon: 'bi bi-chair' },
        { value: 'espacio_movil', label: 'Espacios despejados', icon: 'bi bi-arrows-move' },
        { value: 'facil_limpieza', label: 'Fácil limpieza', icon: 'bi bi-droplet-half' },
        { value: 'reciclado', label: 'Material reciclado', icon: 'bi bi-recycle' },
        { value: 'antideslizante', label: 'Antideslizante', icon: 'bi bi-grip-horizontal' },
        { value: 'uso_mixto', label: 'Exterior/interior', icon: 'bi bi-house-door' }
      ],
      serviciosLogisticos: [
        { value: 'transporte', label: 'Transporte', icon: 'bi bi-truck' },
        { value: 'montaje', label: 'Montaje', icon: 'bi bi-hammer' },
        { value: 'desmontaje', label: 'Desmontaje', icon: 'bi bi-wrench' },
        { value: 'recolocacion', label: 'Recolocación', icon: 'bi bi-arrow-repeat' },
        { value: 'recogida', label: 'Recogida', icon: 'bi bi-truck-flatbed' }
      ],
      serviciosTecnicos: [
        { value: 'supervision', label: 'Supervisión', icon: 'bi bi-eye' },
        { value: 'asistencia', label: 'Asistencia', icon: 'bi bi-person-badge' },
        { value: 'reemplazo', label: 'Reemplazo exprés', icon: 'bi bi-lightning-charge' }
      ],
      tipologiaMap: {
        'Mesas': 'MESAS',
        'Sillas y Taburetes': 'SILLAS_TABURETES',
        'Tronas': 'TRONAS',
        'Barras, Barriles, Toneles, Chill-out': 'BARRILES_TONELADAS_CHILL_OUT',
        'Escaleras y Vigas': 'ESCALERAS_VIGAS',
        'Pales': 'PALES',
        'Catenarias': 'CATENARIAS',
        'Colgadores y Guardarropas': 'COLGADORES_GUARDARROPAS',
        'Cubierta': 'CUBIERTA',
        'Cristalera': 'CRISTALERA',
        'Carpas': 'CARPAS',
        'Toldos y Parasoles': 'TOLDOS_PARASOLES',
        'Paredes': 'PAREDES',
        'Suelos': 'SUELOS',
        'Edificaciones Temporales': 'EDIFICACIONES_TEMPORALES',
        'Stands': 'STANDS',
        'Tocador Maquillaje': 'TOCADOR_MAQUILLAJE',
        'Espejos': 'ESPEJOS',
        'Vitrinas': 'VITRINAS',
        'Mostradores y Barras': 'MOSTRADORES_BARRAS',
        'Iglú': 'IGLOO',
        'Estufas y Calefactores': 'ESTUFAS_CALEFACTORES',
        'Ventiladores y Aire Acondicionado': 'VENTILADORES_AIRE',
        'Pizarras': 'PIZARRAS',
        'Pantallas': 'PANTALLAS',
        'Proyectores': 'PROYECTORES',
        'Altavoces': 'ALTAVOCES',
        'Micrófonos': 'MICROFONOS',
        'Focos': 'FOCO',
        'Bola de Discoteca': 'BOLA_DISCO',
        'Tabla DJ': 'TABLA_DJ',
        'Electricidad y Enchufes': 'ELECTRICIDAD_ENCHUFES',
        'Aires y Farolillos': 'AIRES_FAROLILLOS',
        'Gradas y Tribunas': 'GRADAS_TRIBUNAS',
        'Juegos': 'JUEGOS',
        'Atracciones': 'ATRACCIONES',
        'Maniquíes': 'MANIQUIS',
        'Máquinas de Comida': 'MAQUINAS_COMIDA',
        'WC': 'WC',
        'Contenedores y Papeleras': 'CONTENEDORES_PAPELERAS'
      }
    }
  },
  watch: {
    serviceData: {
      immediate: true,
      handler (newVal) {
        console.log('EditMobiliari - serviceData cambiado:', JSON.parse(JSON.stringify(newVal)))
        if (newVal) {
          this.loadServiceData(newVal)
        }
      }
    },
    formData: {
      handler (newVal, oldVal) {
        // Solo emitir si los datos son diferentes
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          console.log('EditMobiliari - formData cambiado:', {
            nuevo: JSON.parse(JSON.stringify(newVal)),
            anterior: JSON.parse(JSON.stringify(oldVal))
          })
          this.emitData()
        }
      },
      deep: true
    }
  },
  created () {
    console.log('EditMobiliari - Componente creado')
    console.log('EditMobiliari - serviceData inicial:', JSON.parse(JSON.stringify(this.serviceData)))
  },
  mounted () {
    console.log('EditMobiliari - Componente montado')
    if (this.serviceData) {
      console.log('EditMobiliari - Cargando datos iniciales')
      this.loadServiceData(this.serviceData)
    }
  },
  methods: {
    loadServiceData (serviceData) {
      console.log('EditMobiliari - loadServiceData llamado con:', JSON.parse(JSON.stringify(serviceData)))

      // Asegurarse de que serviceData es un objeto válido
      if (!serviceData || typeof serviceData !== 'object') {
        console.error('EditMobiliari - Datos inválidos recibidos:', serviceData)
        return
      }

      try {
        // Extraer servicios incluidos del objeto service_include
        const serviciosIncluidos = []
        if (serviceData.service_include) {
          if (serviceData.service_include['Aspectos logísticos']) {
            serviciosIncluidos.push(...serviceData.service_include['Aspectos logísticos'])
          }
          if (serviceData.service_include['Aspectos técnicos']) {
            serviciosIncluidos.push(...serviceData.service_include['Aspectos técnicos'])
          }
        }
        const tipologia = serviceData.tipologia.toUpperCase()
        // Los datos ya vienen procesados del componente padre
        this.formData = {
          service_type: 'mobiliario',
          tipologia: tipologia || '',
          is_rental: serviceData.is_rental !== undefined ? serviceData.is_rental : true,
          cantidad_min: serviceData.cantidad_min || 1,
          cantidad_max: serviceData.cantidad_max || 1,
          subtipologia: serviceData.subtipologia || '',
          forma: serviceData.forma || '',
          modality: serviceData.modality || '',
          style: serviceData.style || '',
          color: Array.isArray(serviceData.color) ? [...serviceData.color] : [],
          material: Array.isArray(serviceData.material) ? [...serviceData.material] : [],
          size: serviceData.size || '',
          dimensions: {
            width: serviceData.dimensions?.width || 0,
            height: serviceData.dimensions?.height || 0,
            depth: serviceData.dimensions?.depth || 0
          },
          caracteristicas: Array.isArray(serviceData.caracteristicas) ? [...serviceData.caracteristicas] : [],
          complement: Array.isArray(serviceData.complement) ? [...serviceData.complement]
            : (typeof serviceData.complement === 'string' ? serviceData.complement.split(',').map(item => item.trim()) : []),
          service_include: serviceData.service_include || {},
          servicios_incluidos: serviciosIncluidos
        }

        console.log('EditMobiliari - Formulario actualizado:', JSON.parse(JSON.stringify(this.formData)))
      } catch (error) {
        console.error('EditMobiliari - Error al cargar datos:', error)
      }
    },
    agregarColor () {
      if (this.nuevoColor && !this.formData.color.includes(this.nuevoColor)) {
        this.formData = {
          ...this.formData,
          color: [...this.formData.color, this.nuevoColor]
        }
        this.nuevoColor = ''
      }
    },
    eliminarColor (idx) {
      const newColors = [...this.formData.color]
      newColors.splice(idx, 1)
      this.formData = {
        ...this.formData,
        color: newColors
      }
    },
    agregarMaterial () {
      if (this.nuevoMaterial && !this.formData.material.includes(this.nuevoMaterial)) {
        this.formData = {
          ...this.formData,
          material: [...this.formData.material, this.nuevoMaterial]
        }
        this.nuevoMaterial = ''
      }
    },
    eliminarMaterial (idx) {
      const newMaterials = [...this.formData.material]
      newMaterials.splice(idx, 1)
      this.formData = {
        ...this.formData,
        material: newMaterials
      }
    },
    agregarComplemento () {
      if (this.nuevoComplemento && !this.formData.complement.includes(this.nuevoComplemento)) {
        this.formData = {
          ...this.formData,
          complement: [...this.formData.complement, this.nuevoComplemento]
        }
        this.nuevoComplemento = ''
      }
    },
    eliminarComplemento (idx) {
      const newComplementos = [...this.formData.complement]
      newComplementos.splice(idx, 1)
      this.formData = {
        ...this.formData,
        complement: newComplementos
      }
    },
    toggleCaracteristica (valor) {
      const idx = this.formData.caracteristicas.indexOf(valor)
      const newCaracteristicas = [...this.formData.caracteristicas]
      if (idx === -1) {
        newCaracteristicas.push(valor)
      } else {
        newCaracteristicas.splice(idx, 1)
      }
      this.formData = {
        ...this.formData,
        caracteristicas: newCaracteristicas
      }
    },
    toggleServicioIncluido (valor) {
      const idx = this.formData.servicios_incluidos.indexOf(valor)
      const newServicios = [...this.formData.servicios_incluidos]
      if (idx === -1) {
        newServicios.push(valor)
      } else {
        newServicios.splice(idx, 1)
      }
      this.formData = {
        ...this.formData,
        servicios_incluidos: newServicios
      }
    },
    validateForm () {
      let isValid = true
      console.log('Iniciando validación del formulario')
      this.errors = {
        tipologia: '',
        cantidad_min: '',
        cantidad_max: '',
        dimensions: {
          width: '',
          height: '',
          depth: ''
        }
      }

      // Validar tipología
      if (!this.formData.tipologia) {
        console.log('Error: Tipología vacía')
        this.errors.tipologia = 'La tipología es obligatoria'
        isValid = false
      }

      // Validar cantidades
      if (!this.formData.cantidad_min || this.formData.cantidad_min < 1) {
        console.log('Error: Cantidad mínima inválida', this.formData.cantidad_min)
        this.errors.cantidad_min = 'La cantidad mínima debe ser mayor a 0'
        isValid = false
      }

      if (!this.formData.cantidad_max || this.formData.cantidad_max < 1) {
        console.log('Error: Cantidad máxima inválida', this.formData.cantidad_max)
        this.errors.cantidad_max = 'La cantidad máxima debe ser mayor a 0'
        isValid = false
      }

      if (parseInt(this.formData.cantidad_max) < parseInt(this.formData.cantidad_min)) {
        console.log('Error: Cantidad máxima menor que mínima', {
          min: this.formData.cantidad_min,
          max: this.formData.cantidad_max
        })
        this.errors.cantidad_max = 'La cantidad máxima debe ser mayor o igual a la mínima'
        isValid = false
      }

      // Validar dimensiones si se han introducido
      const dims = this.formData.dimensions
      console.log('Validando dimensiones:', dims)
      if (dims.width || dims.height || dims.depth) {
        if (dims.width && (isNaN(dims.width) || dims.width < 0)) {
          console.log('Error: Ancho inválido', dims.width)
          this.errors.dimensions.width = 'El ancho debe ser un número positivo'
          isValid = false
        }
        if (dims.height && (isNaN(dims.height) || dims.height < 0)) {
          console.log('Error: Alto inválido', dims.height)
          this.errors.dimensions.height = 'El alto debe ser un número positivo'
          isValid = false
        }
        if (dims.depth && (isNaN(dims.depth) || dims.depth < 0)) {
          console.log('Error: Profundidad inválida', dims.depth)
          this.errors.dimensions.depth = 'La profundidad debe ser un número positivo'
          isValid = false
        }
      }

      console.log('Resultado de la validación:', isValid)
      console.log('Errores encontrados:', this.errors)
      return isValid
    },
    emitData () {
      console.log('EditMobiliari - Intentando emitir datos del formulario')
      if (!this.validateForm()) {
        console.log('EditMobiliari - Validación fallida, no se emiten datos')
        return
      }

      console.log('EditMobiliari - Formulario válido, preparando datos para emitir')
      // Validaciones mínimas (puedes personalizar si quieres)
      const dims = this.formData.dimensions
      const hasDims = Object.values(dims).some(val => val && !isNaN(val) && parseFloat(val) > 0)
      const dimensions = hasDims
        ? {
          width: dims.width ? parseFloat(dims.width) : 0,
          height: dims.height ? parseFloat(dims.height) : 0,
          depth: dims.depth ? parseFloat(dims.depth) : 0
        }
        : null

      // Organizar servicios incluidos por categoría
      const serviciosLogisticos = this.formData.servicios_incluidos.filter(servicio =>
        this.serviciosLogisticos.some(s => s.value === servicio)
      )
      const serviciosTecnicos = this.formData.servicios_incluidos.filter(servicio =>
        this.serviciosTecnicos.some(s => s.value === servicio)
      )
      const tipologia = this.convertTipologiaToEnum(this.formData.tipologia)
      console.log('EditMobiliari - Tipologia convertida:', tipologia)
      const serviceData = {
        tipologia: tipologia,
        service_type: 'mobiliario',
        cantidad_min: parseInt(this.formData.cantidad_min) || 1,
        cantidad_max: parseInt(this.formData.cantidad_max) || 1,
        is_rental: this.formData.is_rental,
        subtipologia: this.formData.subtipologia || null,
        forma: this.formData.forma || null,
        modality: this.formData.modality || null,
        style: this.formData.style || null,
        color: Array.isArray(this.formData.color) ? this.formData.color : [],
        material: Array.isArray(this.formData.material) ? this.formData.material : [],
        size: this.formData.size || null,
        dimensions: dimensions,
        caracteristicas: Array.isArray(this.formData.caracteristicas) ? this.formData.caracteristicas : [],
        complement: Array.isArray(this.formData.complement) ? this.formData.complement.join(', ') : (this.formData.complement || null),
        service_include: {
          'Aspectos logísticos': serviciosLogisticos,
          'Aspectos técnicos': serviciosTecnicos
        }
      }

      console.log('EditMobiliari - Datos a emitir:', JSON.stringify(serviceData, null, 2))
      this.$emit('service-data', serviceData)
    },
    updateSubtipologia (event) {
      const newValue = event.target.value
      this.$set(this.formData, 'subtipologia', newValue)
      console.log('Subtipologia actualizada:', newValue)
      this.emitData()
    },
    updateForma (event) {
      const newValue = event.target.value
      this.$set(this.formData, 'forma', newValue)
      console.log('Forma actualizada:', newValue)
      this.emitData()
    },
    updateModality (event) {
      const newValue = event.target.value
      this.$set(this.formData, 'modality', newValue)
      console.log('Modalidad actualizada:', newValue)
      this.emitData()
    },
    updateStyle (event) {
      const newValue = event.target.value
      this.$set(this.formData, 'style', newValue)
      console.log('Estilo actualizado:', newValue)
      this.emitData()
    },
    updateSize (event) {
      const newValue = event.target.value
      this.$set(this.formData, 'size', newValue)
      console.log('Tamaño actualizado:', newValue)
      this.emitData()
    },
    updateDimension (dimension, event) {
      const value = parseFloat(event.target.value) || 0
      this.$set(this.formData.dimensions, dimension, value)
      console.log('Dimensión actualizada:', dimension, value)
      this.emitData()
    },
    convertTipologiaToEnum (tipologiaText) {
      return this.tipologiaMap[tipologiaText] || tipologiaText
    }
  }
}
</script>

<style scoped>
.icon_i {
  font-size: 1.2rem;
  color: #800020;
}
.icon_y {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}
.create-mobiliari-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;  /* <-- Añade esta línea */
  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;
}

.radio-group {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.cantidad-row {
  display: flex;
  gap: 3rem;
  align-items: flex-end;
}
.cantidad-group {
  flex: 1;
}
.cantidad-input {
  width: 100%;
  height: auto;
  font-size: 1rem;
  border-radius: 8px;
  border: 1.5px solid #ccc;
  padding: 0.8rem;
}

.dimensions-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.dimension-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: -0.3rem;
}

.dimension-input label {
  font-size: 0.9rem;
  color: #666;
}

.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;
}

.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: 44px;
}
.select-granate:focus {
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}
.select-granate option:checked {
  background: #800020;
  color: #fff;
}
.select-granate option:hover {
  background: #e5b3c6;
  color: #800020;
}

.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;
}

.carac-icon-btn.selected .icon {
  color: #800020;
  font-weight: 600;
}
.servicios-incluidos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 1rem;
}
.servicio-bloque {
  background: rgb(247, 247, 247);
  border-radius: 8px;
  padding: 0.5rem 0.5rem 0.7rem 0.5rem;
  min-width: 260px;
  flex: 1;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.servicio-bloque h4 {
  color: #800020;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.servicios-btns-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1rem;
  overflow-x: auto;
  justify-content: center;
  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: flex-start;
  width: 90px;
  min-width: 90px;
  justify-self: center;
}
.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;
}
.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;
}
@media (max-width: 700px) {
  .servicio-btn-outer {
    width: 80px;
    min-width: 80px;
  }
  .servicio-label {
    max-width: 80px;
    font-size: 0.88rem;
  }
}

.error {
  border-color: #dc3545 !important;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

input.error,
select.error {
  background-color: #fff8f8;
}
</style>
