<template>
  <div class="raiders-container">
    <div class="raider-type-selector">
      <div class="radio-group">
        <input
          type="radio"
          id="musica"
          v-model="selectedType"
          value="musica"
        >
        <label for="musica">Raiders de Música</label>
      </div>
      <div class="radio-group">
        <input
          type="radio"
          id="fotografia"
          v-model="selectedType"
          value="fotografia"
        >
        <label for="fotografia">Raiders de Fotografía</label>
      </div>
      <button class="add-raider-btn" @click="createRaider">
        <i class="bi bi-plus-circle"></i> {{ selectedType === 'musica' ? 'Crear raider música' : 'Crear raider fotografía' }}
      </button>
    </div>

    <div v-if="showCreateModal" class="modal-overlay" @click.self="closeCreateModal">
      <div class="modal-content">
        <button class="close-modal-btn" @click="closeCreateModal"><i class="bi bi-x-lg"></i></button>
        <CreateRaiderMusica v-if="selectedType === 'musica'" @close="closeCreateModal" />
        <CreateRaiderFotografia v-else @close="closeCreateModal" />
      </div>
    </div>

    <div v-if="loading" class="loading">
      <i class="bi bi-arrow-repeat"></i> Cargando raiders...
    </div>

    <div v-else-if="error" class="error">
      <i class="bi bi-exclamation-triangle"></i> {{ error }}
    </div>

    <div v-else-if="raiders.length === 0" class="no-raiders">
      <div class="alert alert-info">
        <i class="bi bi-info-circle"></i>
        No tienes raiders de {{ selectedType === 'musica' ? 'música' : 'fotografía' }} creados.
      </div>
    </div>

    <div v-else class="raiders-list">
      <div v-for="raider in raiders" :key="raider.id" class="raider-card">
        <div class="raider-header">
          <h3>Raider #{{ raider.id.slice(0, 6) }}</h3>
          <div class="raider-actions">
            <button @click="editRaider(raider)" class="edit-btn" title="Editar raider">
              <i class="bi bi-pencil"></i>
            </button>
            <button @click="deleteRaider(raider.id)" class="delete-btn" title="Eliminar raider">
              <i class="bi bi-trash"></i>
            </button>
          </div>
        </div>

        <div class="raider-content">
          <div class="raider-info">
            <div class="info-group">
              <i class="bi bi-people"></i>
              <span>{{ raider.num_integrantes }} integrantes</span>
            </div>

            <div v-if="selectedType === 'musica'" class="info-group">
              <i class="bi bi-music-note-list"></i>
              <span>Solicitar canción nueva: {{ raider.solicitar_cancion_nueva ? 'Sí' : 'No' }}</span>
            </div>

            <div v-if="selectedType === 'musica'" class="info-group">
              <i class="bi bi-tools"></i>
              <span>Equipo propio: {{ raider.equipo_propio ? 'Sí' : 'No' }}</span>
            </div>
          </div>

          <div class="equipo-section">
            <h4><i class="bi bi-person-plus"></i> Equipo</h4>
            <table class="equipo-table">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Rol</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(miembro, index) in raider.equipo" :key="index">
                  <td>{{ miembro.nombre }}</td>
                  <td>{{ miembro.rol }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="dimensions-section">
            <h4><i class="bi bi-rulers"></i> Dimensiones del espacio</h4>
            <div class="dimensions-info">
              <span v-if="raider.dimensiones_escenario.ancho">Ancho: {{ raider.dimensiones_escenario.ancho }}m</span>
              <span v-if="raider.dimensiones_escenario.alto">Alto: {{ raider.dimensiones_escenario.alto }}m</span>
              <span v-if="raider.dimensiones_escenario.profundidad">Profundidad: {{ raider.dimensiones_escenario.profundidad }}m</span>
            </div>
          </div>

          <div class="conditions-section">
            <h4><i class="bi bi-list-stars"></i> Condiciones</h4>
            <div class="tags-list">
              <span v-for="(condicion, index) in raider.condiciones" :key="index" class="tag">
                {{ condicion }}
              </span>
            </div>
          </div>

          <div class="services-section">
            <h4><i class="bi bi-link"></i> Servicios vinculados</h4>
            <div v-if="raider.servicios.length > 0" class="services-list">
              <ul>
                <li v-for="(servicio) in raider.servicios" :key="servicio.id" class="service-item">
                  <img v-if="servicio.images && servicio.images.length > 0" :src="servicio.images[0]" alt="Imagen servicio" class="service-img" />
                  <div class="service-info">
                    <div class="service-header-row">
                      <div class="service-title-type">
                        <strong>{{ servicio.name }}</strong>
                        <span class="service-type">({{ servicio.type }})</span>
                      </div>
                    </div>
                    <div v-if="servicio.type === 'musica'" class="service-details">
                      <div><b>Tipo de música:</b> {{ servicio.musica && servicio.musica.musica_type ? servicio.musica.musica_type : '-' }}</div>
                      <div><b>Tipo de canciones:</b> {{ servicio.musica && servicio.musica.canciones ? servicio.musica.canciones : '-' }}</div>
                      <div><b>Géneros:</b> {{ servicio.musica && servicio.musica.generos && servicio.musica.generos.length > 0 ? servicio.musica.generos.join(', ') : '-' }}</div>
                    </div>
                    <div v-else-if="servicio.type === 'fotografia'" class="service-details">
                      <div><b>Tipo de servicio:</b> {{ servicio.fotografia && servicio.fotografia.tipo_servicio ? servicio.fotografia.tipo_servicio : '-' }}</div>
                      <div v-if="servicio.fotografia && servicio.fotografia.servicioespecial"><b>Servicio especial:</b> {{ servicio.fotografia.servicioespecial }}</div>
                    </div>
                  </div>
                  <button class="view-service-btn" @click="$router.push('/mydetallesService/' + servicio.id)" title="Ver detalles">
                    <i class="bi bi-eye"></i>
                  </button>
                </li>
              </ul>
            </div>
            <div v-else class="no-services">
              Este raider no está vinculado a ningún servicio
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RaiderService from '@/services/RaiderServices'
import Swal from 'sweetalert2'
import CreateRaiderMusica from './CreateRaiderMusica.vue'
import CreateRaiderFotografia from './CreateRaiderFotografia.vue'
import ServiceServices from '@/services/ServiceServices'
import DetallesFotografia from '../my_services_details/DetallesFotografia.vue'
import DetallesMusica from '../my_services_details/DetallesMusica.vue'
export default {
  name: 'MyRaiders',
  components: {
    CreateRaiderMusica,
    CreateRaiderFotografia,
    DetallesFotografia,
    DetallesMusica
  },
  data () {
    return {
      selectedType: 'musica',
      raiders: [],
      loading: false,
      error: null,
      accountId: localStorage.getItem('user') || '',
      showCreateModal: false
    }
  },
  async created () {
    await this.loadRaiders()
  },
  methods: {
    createRaider () {
      this.showCreateModal = true
    },
    closeCreateModal () {
      this.showCreateModal = false
      this.loadRaiders()
    },
    async loadServiciosDeRaider (raiderId) {
      try {
        const response = await ServiceServices.getServicesByRaider(raiderId)
        console.log('Servicios vinculados al raider', raiderId, ':', response.data)
        return response.data
      } catch (error) {
        console.error('Error al cargar servicios del raider', raiderId, error)
        return []
      }
    },
    async loadRaiders () {
      this.loading = true
      this.error = null
      try {
        const response = await RaiderService.getRaiders(this.accountId)
        let allRaiders = response.data
        console.log('Todos los raiders recibidos:', allRaiders)
        this.raiders = allRaiders.filter(raider => {
          if (this.selectedType === 'musica') {
            return (
              (raider.solicitar_cancion_nueva === true || raider.solicitar_cancion_nueva === false) &&
              (raider.equipo_propio === true || raider.equipo_propio === false)
            )
          } else if (this.selectedType === 'fotografia') {
            return (
              raider.solicitar_cancion_nueva === null &&
              raider.equipo_propio === null
            )
          }
        })
        // Log para detectar raiders con datos inesperados
        allRaiders.forEach(raider => {
          const isMusica = (raider.solicitar_cancion_nueva === true || raider.solicitar_cancion_nueva === false) && (raider.equipo_propio === true || raider.equipo_propio === false)
          const isFoto = raider.solicitar_cancion_nueva === null && raider.equipo_propio === null
          if (!isMusica && !isFoto) {
            console.warn('Raider con datos inesperados:', raider)
          }
        })
        console.log('Raider filtrados para', this.selectedType, ':', this.raiders)
        // Cargar servicios vinculados para cada raider
        for (const raider of this.raiders) {
          raider.servicios = await this.loadServiciosDeRaider(raider.id)
          console.log('Servicios vinculados al raider', raider.id, ':', raider.servicios)
        }
        // Ahora raider.servicios tendrá el array de servicios vinculados
      } catch (error) {
        console.error('Error loading raiders:', error)
        this.error = 'No se pudieron cargar los raiders'
      } finally {
        this.loading = false
      }
    },
    editRaider (raider) {
      // Redirigir al formulario de edición según el tipo seleccionado
      if (this.selectedType === 'musica') {
        this.$router.push(`/editRaiderMusica/${raider.id}`)
      } else {
        this.$router.push(`/editRaiderFotografia/${raider.id}`)
      }
    },
    async deleteRaider (id) {
      const result = await Swal.fire({
        title: '¿Estás seguro?',
        text: 'Esta acción no se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#800020',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
      })

      if (result.isConfirmed) {
        try {
          await RaiderService.deleteRaider(id)
          await this.loadRaiders()
          Swal.fire({
            title: '¡Eliminado!',
            text: 'El raider ha sido eliminado correctamente',
            icon: 'success',
            confirmButtonColor: '#800020'
          })
        } catch (error) {
          console.error('Error deleting raider:', error)
          Swal.fire({
            title: 'Error',
            text: 'No se pudo eliminar el raider',
            icon: 'error',
            confirmButtonColor: '#800020'
          })
        }
      }
    }
  },
  watch: {
    selectedType () {
      this.loadRaiders()
    }
  }
}
</script>

<style scoped>
.raiders-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.raider-type-selector {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

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

.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #800020;
}

.radio-group label {
  font-size: 1.1rem;
  font-weight: 500;
  color: #2C3E50;
}

.add-raider-btn {
  background: #800020;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.2s;
}

.add-raider-btn:hover {
  background: #a8324a;
}

.raider-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  overflow: hidden;
}

.raider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.raider-header h3 {
  margin: 0;
  color: #800020;
  font-size: 1.3rem;
}

.raider-actions {
  display: flex;
  gap: 1rem;
}

.edit-btn, .delete-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.edit-btn {
  color: #800020;
}

.edit-btn:hover {
  background: #f8d7da;
}

.delete-btn {
  color: #dc3545;
}

.delete-btn:hover {
  background: #f8d7da;
}

.raider-content {
  padding: 1.5rem;
}

.raider-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.info-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2C3E50;
}

.info-group i {
  color: #800020;
}

.equipo-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.equipo-table th, .equipo-table td {
  padding: 0.8rem 1rem;
  text-align: left;
}

.equipo-table th {
  background: #e6d1d7;
  color: #800020;
  font-weight: 600;
}

.equipo-table tr:not(:last-child) td {
  border-bottom: 1px solid #eee;
}

.dimensions-info {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
  color: #2C3E50;
}

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

.tag {
  background: #e6d1d7;
  color: #800020;
  padding: 0.4rem 1rem;
  border-radius: 16px;
  font-size: 0.9rem;
}

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

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1.5px solid #800020;
  margin-bottom: 1.1rem;
  padding: 0.8rem 1.2rem 0.8rem 0.8rem;
  box-shadow: 0 2px 8px rgba(128,0,32,0.04);
}

.service-img {
  width: auto;
  max-width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(128,0,32,0.08);
  flex-shrink: 0;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.2rem;
}

.service-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.2rem;
}

.service-title-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-type {
  color: #800020;
  font-size: 0.98rem;
  margin-left: 0;
}

.view-service-btn {
  background: #800020;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 1.1rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: background 0.2s;
  align-self: center;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-service-btn:hover {
  background: #a8324a;
}

.service-description {
  color: #555;
  font-size: 0.97rem;
  display: block;
  text-align: left;
  margin-top: 0.6rem;
  background: #fff;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  width: 100%;
  box-shadow: 0 1px 4px rgba(128,0,32,0.04);
}

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

.loading, .error {
  text-align: center;
  padding: 2rem;
  color: #800020;
  font-size: 1.1rem;
}

.loading i, .error i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

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

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

h4 {
  color: #800020;
  margin: 1.5rem 0 1rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

h4 i {
  font-size: 1.2rem;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  min-width: 320px;
  max-width: 95vw;
  box-shadow: 0 2px 16px rgba(128,0,32,0.12);
  position: relative;
}
.close-modal-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #800020;
  cursor: pointer;
}

.service-details {
  text-align: left;
  width: 100%;
}
</style>
