<template>
  <div class="page-background">
    <div class="raider-container">
      <h2 class="raider-title"><i class="bi bi-music-note-list"></i> Crear raider música</h2>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label>Nº de integrantes*</label>
          <input type="number" v-model.number="form.num_integrantes" min="1" required />
        </div>
        <div class="form-group">
          <label>Equipo (nombre y rol)*</label>
          <div v-for="(m, idx) in form.equipo" :key="idx" class="input-group">
            <input v-model="m.nombre" placeholder="Nombre" required />
            <input v-model="m.rol" placeholder="Rol" required />
            <button type="button" class="remove-btn" @click="removeMiembro(idx)"><i class="bi bi-x"></i></button>
          </div>
          <div class="input-group">
            <input v-model="nuevoMiembro.nombre" placeholder="Nombre" />
            <input v-model="nuevoMiembro.rol" placeholder="Rol" />
            <button type="button" class="add-btn" @click="addMiembro"><i class="bi bi-plus"></i></button>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>¿Permitir solicitar canción nueva?</label>
            <input type="checkbox" v-model="form.solicitar_cancion_nueva" />
          </div>
          <div class="form-group">
            <label>¿Equipo propio?</label>
            <input type="checkbox" v-model="form.equipo_propio" />
          </div>
        </div>
        <div class="form-group">
          <label>Dimensiones escenario mínimas (m)*</label>
          <div class="dimensions-group">
            <input v-model.number="form.dimensiones_escenario.ancho" type="number" placeholder="Ancho" min="0" step="0.1" required />
            <input v-model.number="form.dimensiones_escenario.alto" type="number" placeholder="Alto" min="0" step="0.1" required />
            <input v-model.number="form.dimensiones_escenario.profundidad" type="number" placeholder="Profundidad" min="0" step="0.1" required />
          </div>
        </div>
        <div class="form-group">
          <label>Condiciones</label>
          <div class="input-group">
            <input v-model="nuevaCondicion" type="text" placeholder="Añade una condición y pulsa +" />
            <button type="button" class="add-btn" @click="addCondicion"><i class="bi bi-plus"></i></button>
          </div>
          <div class="tags-list">
            <span v-for="(cond, idx) in form.condiciones" :key="cond + idx" class="tag">
              {{ cond }}
              <button type="button" class="remove-btn" @click="removeCondicion(idx)"><i class="bi bi-x"></i></button>
            </span>
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="save-btn">Guardar</button>
          <button type="button" class="cancel-btn" @click="cancelar">Cancelar</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import RaiderService from '@/services/RaiderServices'
import Swal from 'sweetalert2'

export default {
  name: 'CreateRaiderMusica',
  data () {
    return {
      form: {
        num_integrantes: 1,
        equipo: [],
        solicitar_cancion_nueva: false,
        equipo_propio: false,
        dimensiones_escenario: { ancho: null, alto: null, profundidad: null },
        condiciones: []
      },
      nuevoMiembro: { nombre: '', rol: '' },
      nuevaCondicion: ''
    }
  },
  methods: {
    addMiembro () {
      if (this.nuevoMiembro.nombre && this.nuevoMiembro.rol) {
        this.form.equipo.push({ ...this.nuevoMiembro })
        this.nuevoMiembro = { nombre: '', rol: '' }
      }
    },
    removeMiembro (idx) {
      this.form.equipo.splice(idx, 1)
    },
    addCondicion () {
      if (this.nuevaCondicion && !this.form.condiciones.includes(this.nuevaCondicion)) {
        this.form.condiciones.push(this.nuevaCondicion)
        this.nuevaCondicion = ''
      }
    },
    removeCondicion (idx) {
      this.form.condiciones.splice(idx, 1)
    },
    async handleSubmit () {
      // Validaciones básicas
      if (!this.form.num_integrantes || this.form.num_integrantes <= 0) {
        return Swal.fire('Error', 'Debes indicar el número de integrantes.', 'error')
      }
      if (!Array.isArray(this.form.equipo) || this.form.equipo.length === 0) {
        return Swal.fire('Error', 'Debes añadir al menos un miembro al equipo.', 'error')
      }
      const d = this.form.dimensiones_escenario
      if (!d.ancho || !d.alto || !d.profundidad) {
        return Swal.fire('Error', 'Debes rellenar todas las dimensiones del escenario.', 'error')
      }
      try {
        await RaiderService.createRaider({
          num_integrantes: this.form.num_integrantes,
          equipo: this.form.equipo,
          solicitar_cancion_nueva: !!this.form.solicitar_cancion_nueva,
          equipo_propio: !!this.form.equipo_propio,
          dimensiones_escenario: this.form.dimensiones_escenario,
          condiciones: this.form.condiciones
        })
        await Swal.fire('¡Guardado!', 'El raider se ha creado correctamente', 'success')
        this.$router.push('/myProfile')
      } catch (error) {
        console.error('Error al crear raider:', error)
        Swal.fire('Error', 'No se pudo crear el raider', 'error')
      }
    },
    cancelar () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.page-background {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('../../assets/fondoPage7.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.raider-container {
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(128,0,32,0.08);
  padding: 2.5rem 2rem 1.5rem 2rem;
  max-width: 600px;
  width: 100%;
  margin: 3rem auto;
}
.raider-title {
  color: #800020;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
.form-group {
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.form-group label {
  font-weight: 600;
  color: #800020;
  margin-bottom: 0.3rem;
}
.input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.input-group input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1rem;
}
.add-btn, .remove-btn {
  background: #800020;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s;
}
.add-btn:hover, .remove-btn:hover {
  background: #a8324a;
}
.form-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}
.dimensions-group {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  margin-top: 2rem;
}
.save-btn {
  background: #800020;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.save-btn:hover {
  background: #a8324a;
}
.cancel-btn {
  background: #f3f3f3;
  color: #800020;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.cancel-btn:hover {
  background: #f8d7da;
}
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.tag {
  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;
  margin-bottom: 0.3rem;
}
</style>
