<template>
  <div class="raider-form">
    <!-- Selección de raider existente -->
    <div class="form-section">
      <div v-if="raiders.length > 0 && !editando && !editandoNuevo">
        <div class="form-row">
          <div class="form-group">
            <label>Selecciona un Raider existente:</label>
            <select v-model="selectedRaiderId" class="select-granate" :disabled="disabled">
              <option disabled value="">Selecciona un raider</option>
              <option v-for="r in raiders" :key="r.id" :value="r.id">
                Raider #{{ r.id.slice(0, 6) }} - {{ r.num_integrantes }} integrantes
              </option>
            </select>
          </div>
        </div>
        <div v-if="selectedRaider" class="raider-details">
          <div class="form-row">
            <div class="form-group">
              <b>Integrantes:</b> {{ selectedRaider.num_integrantes }}
            </div>
          </div>
          <div class="form-row">
            <div class="form-group full-width">
              <table class="equipo-table">
                <thead>
                  <tr>
                    <th>Nombre completo</th>
                    <th>Rol</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(m, i) in selectedRaider.equipo" :key="i">
                    <td>{{ m.nombre }}</td>
                    <td>{{ m.rol }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <b>Solicitar canción nueva:</b> {{ selectedRaider.solicitar_cancion_nueva ? 'Sí' : 'No' }}
            </div>
            <div class="form-group">
              <b>Equipo propio:</b> {{ selectedRaider.equipo_propio ? 'Sí' : 'No' }}
            </div>
          </div>
          <div class="form-row">
            <div class="form-group full-width">
              <b>Dimensiones escenario:</b>
              <div class="dimensions-group">
                <span v-if="selectedRaider.dimensiones_escenario">
                  <span v-if="selectedRaider.dimensiones_escenario.ancho">Ancho: {{ selectedRaider.dimensiones_escenario.ancho }}</span>
                  <span v-if="selectedRaider.dimensiones_escenario.alto"> | Alto: {{ selectedRaider.dimensiones_escenario.alto }}</span>
                  <span v-if="selectedRaider.dimensiones_escenario.profundidad"> | Profundidad: {{ selectedRaider.dimensiones_escenario.profundidad }}</span>
                </span>
                <span v-else>-</span>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group full-width">
              <b>Condiciones:</b>
              <div class="tags-list conditions-list">
                <span v-for="(cond, idx) in selectedRaider.condiciones" :key="cond + idx" class="tag special">{{ cond }}</span>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <b>Servicios linkeados:</b>
              <div v-if="selectedRaider.servicios && selectedRaider.servicios.length > 0">
                <ul>
                  <li v-for="(srv, i) in selectedRaider.servicios" :key="i">{{ srv.nombre }} ({{ srv.tipo }})</li>
                </ul>
              </div>
              <div v-else class="no-services-message">
                Este raider no se está usando en ningún servicio actualmente.
              </div>
            </div>
          </div>
          <div class="form-actions">
            <button @click="onEditarRaider" class="btn-add" :disabled="disabled"><i class="bi bi-pencil"></i> Editar</button>
            <button @click="borrarRaider(selectedRaider.id)" class="cancel-btn" :disabled="disabled"><i class="bi bi-trash"></i> Borrar</button>
          </div>
        </div>
        <button @click="nuevoRaider" class="btn-add" :disabled="disabled"><i class="bi bi-plus"></i> Crear nuevo Raider</button>
      </div>
      <div v-else-if="!editando && !editandoNuevo">
        <div class="alert alert-info">No tienes raiders creados. Crea uno nuevo.</div>
        <button @click="nuevoRaider" class="btn-add" :disabled="disabled"><i class="bi bi-plus"></i> Crear nuevo Raider</button>
      </div>
      <div v-if="editando || editandoNuevo" class="form-section">
        <h3><i class="bi bi-pencil"></i> {{ editandoNuevo ? 'Nuevo Raider' : 'Editar Raider' }}</h3>
        <div class="form-row">
          <div class="form-group">
            <label><i class="bi bi-people"></i> Nº de integrantes*</label>
            <input type="number" v-model.number="raiderForm.num_integrantes" min="1" required :disabled="disabled" ref="numIntegrantesInput" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label><i class="bi bi-person-plus"></i> Equipo (nombre y rol)</label>
            <div v-for="(m, idx) in raiderForm.equipo" :key="idx" class="input-group">
              <input v-model="m.nombre" placeholder="Nombre" class="tag-input" :disabled="disabled" />
              <input v-model="m.rol" placeholder="Rol" class="tag-input" :disabled="disabled" />
              <button @click="eliminarMiembro(idx)" class="remove-tag" :disabled="disabled"><i class="bi bi-x"></i></button>
            </div>
            <div class="input-group">
              <input v-model="nuevoMiembro.nombre" placeholder="Nombre" class="tag-input" :disabled="disabled" />
              <input v-model="nuevoMiembro.rol" placeholder="Rol" class="tag-input" :disabled="disabled" />
              <button @click="agregarMiembro" class="btn-add" :disabled="disabled"><i class="bi bi-plus"></i></button>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label><i class="bi bi-music-note-list"></i> ¿Permitir solicitar canción nueva?</label>
            <input type="checkbox" v-model="raiderForm.solicitar_cancion_nueva" :disabled="disabled" />
          </div>
          <div class="form-group">
            <label><i class="bi bi-tools"></i> ¿Equipo propio?</label>
            <input type="checkbox" v-model="raiderForm.equipo_propio" :disabled="disabled" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label><i class="bi bi-rulers"></i> Dimensiones escenario mínimas (m)</label>
            <div class="dimensions-group">
              <input v-model.number="raiderForm.dimensiones_escenario.ancho" type="number" placeholder="Ancho" class="dimension-input" :disabled="disabled" step="0.1" />
              <input v-model.number="raiderForm.dimensiones_escenario.alto" type="number" placeholder="Alto" class="dimension-input" :disabled="disabled" step="0.1" />
              <input v-model.number="raiderForm.dimensiones_escenario.profundidad" type="number" placeholder="Profundidad" class="dimension-input" :disabled="disabled" step="0.1" />
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group full-width">
            <label><i class="bi bi-list-stars"></i> Condiciones</label>
            <div class="input-group">
              <input v-model="nuevaCondicion" type="text" placeholder="Añade una condición y pulsa +" class="tag-input" :disabled="disabled" />
              <button @click="agregarCondicion" class="btn-add" type="button" :disabled="disabled"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list conditions-list">
              <span v-for="(cond, idx) in raiderForm.condiciones" :key="cond + idx" class="tag special">
                {{ cond }}
                <button type="button" @click="eliminarCondicion(idx)" class="remove-tag" :disabled="disabled"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
        </div>
        <div class="form-actions">
          <button @click="guardarRaider" class="submit-btn" :disabled="disabled"><i class="bi bi-check2"></i> Guardar</button>
          <button @click="cancelarEdicion" class="cancel-btn" :disabled="disabled"><i class="bi bi-x"></i> Cancelar</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RaiderService from '@/services/RaiderServices'
import Swal from 'sweetalert2'

export default {
  name: 'RaiderForm',
  props: {
    value: Object,
    accountId: { type: String, required: true },
    disabled: { type: Boolean, default: false }
  },
  data () {
    return {
      raiders: [],
      selectedRaiderId: '',
      editando: false,
      editandoNuevo: false,
      raiderForm: this.value ? { ...this.value } : this.nuevoRaiderObj(),
      nuevoMiembro: { nombre: '', rol: '' },
      nuevaCondicion: ''
    }
  },
  computed: {
    selectedRaider () {
      return this.raiders.find(r => r.id === this.selectedRaiderId) || null
    }
  },
  watch: {
    selectedRaiderId (val) {
      console.log('[RaiderFormMusica] selectedRaiderId cambió a:', val)
      if (val) {
        const raiderToEmit = { ...this.selectedRaider }
        this.raiderForm = JSON.parse(JSON.stringify(raiderToEmit))
        console.log('[RaiderFormMusica] Emitiendo input con:', raiderToEmit)
        this.$emit('input', raiderToEmit)
      }
    }
  },
  async mounted () {
    await this.fetchRaiders()
  },
  methods: {
    async fetchRaiders () {
      try {
        console.log('Fetching raiders for account:', this.accountId)
        if (!this.accountId) {
          console.error('accountId es undefined en RaiderForm')
          return
        }
        const response = await RaiderService.getRaiders(this.accountId)
        let allRaiders = response.data
        for (const raider of allRaiders) {
          if (raider.solicitar_cancion_nueva !== null && raider.equipo_propio !== null) {
            this.raiders.push(raider)
          }
        }
      } catch (error) {
        console.error('Error fetching raiders:', error)
      }
    },
    nuevoRaider () {
      this.editandoNuevo = true
      this.editando = false
      this.raiderForm = this.nuevoRaiderObj()
      // Hacer scroll suave al título 'Raider Técnico' al crear
      this.$nextTick(() => {
        const heading = document.querySelector('.raider-form h3, h3.bi.bi-gear')
        if (heading && heading.scrollIntoView) {
          heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      })
    },
    nuevoRaiderObj () {
      return {
        num_integrantes: 1,
        equipo: [],
        solicitar_cancion_nueva: false,
        equipo_propio: false,
        dimensiones_escenario: { ancho: null, alto: null, profundidad: null },
        condiciones: [],
        servicios: []
      }
    },
    agregarMiembro () {
      if (this.nuevoMiembro.nombre && this.nuevoMiembro.rol) {
        this.raiderForm.equipo.push({ ...this.nuevoMiembro })
        this.nuevoMiembro = { nombre: '', rol: '' }
      }
    },
    eliminarMiembro (idx) {
      this.raiderForm.equipo.splice(idx, 1)
    },
    agregarCondicion () {
      if (this.nuevaCondicion && !this.raiderForm.condiciones.includes(this.nuevaCondicion)) {
        this.raiderForm.condiciones.push(this.nuevaCondicion)
        this.nuevaCondicion = ''
      }
    },
    eliminarCondicion (idx) {
      this.raiderForm.condiciones.splice(idx, 1)
    },
    async guardarRaider () {
      // Validación de campos obligatorios
      if (!this.raiderForm.num_integrantes || this.raiderForm.num_integrantes <= 0) {
        await Swal.fire({
          title: 'Error',
          text: 'Debes indicar el número de integrantes.',
          icon: 'error',
          confirmButtonText: 'OK'
        })
        return
      }
      if (!Array.isArray(this.raiderForm.equipo) || this.raiderForm.equipo.length === 0) {
        await Swal.fire({
          title: 'Error',
          text: 'Debes añadir al menos un miembro al equipo.',
          icon: 'error',
          confirmButtonText: 'OK'
        })
        return
      }
      if (!this.raiderForm.dimensiones_escenario || !this.raiderForm.dimensiones_escenario.ancho || !this.raiderForm.dimensiones_escenario.alto || !this.raiderForm.dimensiones_escenario.profundidad) {
        await Swal.fire({
          title: 'Error',
          text: 'Debes rellenar todas las dimensiones del escenario.',
          icon: 'error',
          confirmButtonText: 'OK'
        })
        return
      }
      try {
        let response
        // Limpiar el objeto para que solo tenga los campos de RaiderCreate
        // Asegurarse de que equipo se envía correctamente
        const equipoLimpio = Array.isArray(this.raiderForm.equipo)
          ? this.raiderForm.equipo.filter(m => m.nombre && m.rol)
          : []
        const raiderPayload = {
          num_integrantes: this.raiderForm.num_integrantes,
          equipo: equipoLimpio,
          solicitar_cancion_nueva: !!this.raiderForm.solicitar_cancion_nueva,
          equipo_propio: !!this.raiderForm.equipo_propio,
          dimensiones_escenario: this.raiderForm.dimensiones_escenario,
          condiciones: Array.isArray(this.raiderForm.condiciones) ? this.raiderForm.condiciones : []
        }
        if (this.editandoNuevo) {
          response = await RaiderService.createRaider(raiderPayload)
          this.raiders.push(response)
          this.selectedRaiderId = response.id
        } else if (this.editando) {
          response = await RaiderService.updateRaider(this.selectedRaiderId, raiderPayload)
          const idx = this.raiders.findIndex(r => r.id === this.selectedRaiderId)
          if (idx !== -1) this.raiders[idx] = response
          this.raiders = [...this.raiders]
          this.selectedRaiderId = response.id
        }
        // Refrescar la visualización tras guardar
        this.raiderForm = { ...response }
        this.editando = false
        this.editandoNuevo = false

        // Emitir el raider actualizado
        this.$emit('input', response)

        // Hacer scroll suave al título 'Raider Técnico' tras guardar
        this.$nextTick(() => {
          const heading = document.querySelector('.raider-form h3, h3.bi.bi-gear')
          if (heading && heading.scrollIntoView) {
            heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
          }
        })
      } catch (error) {
        console.error('Error saving raider:', error)
        // Aquí podrías mostrar un mensaje de error al usuario
      }
    },
    cancelarEdicion () {
      this.editando = false
      this.editandoNuevo = false
      if (this.selectedRaiderId) {
        this.raiderForm = { ...this.selectedRaider }
      } else {
        this.raiderForm = this.nuevoRaiderObj()
      }
      // Hacer scroll suave al título 'Raider Técnico' (h3 con bi-gear), alineado arriba
      this.$nextTick(() => {
        const heading = document.querySelector('.raider-form h3, h3.bi.bi-gear')
        if (heading && heading.scrollIntoView) {
          heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      })
    },
    async borrarRaider (id) {
      const result = await Swal.fire({
        title: '¿Seguro que quieres borrar este Raider?',
        text: 'Esta acción no se puede deshacer.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, borrar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
      })
      if (!result.isConfirmed) return
      try {
        await RaiderService.deleteRaider(id)
        this.raiders = this.raiders.filter(r => r.id !== id)
        this.selectedRaiderId = ''
        this.editando = false
        this.editandoNuevo = false
        this.raiderForm = this.nuevoRaiderObj()
        // Hacer scroll suave al título 'Raider Técnico' tras borrar
        this.$nextTick(() => {
          const heading = document.querySelector('.raider-form h3, h3.bi.bi-gear')
          if (heading && heading.scrollIntoView) {
            heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
          }
        })
      } catch (error) {
        console.error('Error deleting raider:', error)
        // Aquí podrías mostrar un mensaje de error al usuario
      }
    },
    onEditarRaider () {
      this.editando = true
      this.$nextTick(() => {
        const heading = document.querySelector('.raider-form h3, h3.bi.bi-gear')
        if (heading && heading.scrollIntoView) {
          heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      })
    }
  }
}
</script>
<style scoped>
.raider-form {
  max-width: 95%;
  margin: 0 auto;
}

.form-section {
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.form-group {
  flex: 1;
}

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

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

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

.select-granate {
  border: 1.5px solid #ccc;
  color: #2C3E50;
  background: #fff;
  border-radius: 8px;
  padding: 0.3rem;
  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);
}

.input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tag-input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1rem;
}

.btn-add {
  background-color: #800020;
  color: white;
  border: none;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-add:hover {
  background-color: #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;
}

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

.dimension-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8rem;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1rem;
}

.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-details {
  background:rgb(247, 247, 247);
  padding: 2.5rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.raider-details ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0.5rem 0;
}

.alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.alert-info {
  background-color: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #bbdefb;
}

.full-width {
  width: 100%;
}

.conditions-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.no-services-message {
  color: #666;
  font-style: italic;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
  border: 2px dashed #ddd;
}

.equipo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  background:rgb(247, 247, 247);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.equipo-table th, .equipo-table td {
  padding: 0.6rem 1rem;
  text-align: left;
}
.equipo-table th {
  background: #e6d1d7;
  color: #800020;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}
.equipo-table tr:not(:last-child) td {
  border-bottom: 2px solid #ddd;
}
.equipo-table td {
  color: #2C3E50;
}
</style>
