<template>
  <div class="page-container" @mousemove="handleMouseMove">
    <!-- Navbar -->
    <nav class="navbar" :class="{ 'navbar-hidden': isNavbarHidden }">
      <div class="navbar-left">
        <img :src="logo" alt="EventAI Logo" class="logo" @click="$router.push('/mainPageVendor')" />
      </div>
      <div class="navbar-center">
        <h1>Editar espacio propio</h1>
      </div>
      <div class="navbar-right">
        <button class="nav-button back" @click="$router.back()">
          <i class="bi bi-arrow-left"></i>
          Volver
        </button>
      </div>
    </nav>
    <div class="form-container">
      <form @submit.prevent="handleSubmit" class="espai-form">
        <!-- Fila principal -->
        <div class="main-row">
          <div class="form-group">
            <label for="tipus">Tipo de Espacio</label>
            <select id="tipus" v-model="espai.tipo_espacio" required>
              <option value="">Selecciona un tipo</option>
              <option value="sala_privada">Sala Privada</option>
              <option value="finca">Finca</option>
              <option value="terraza">Terraza</option>
              <option value="salon">Salón</option>
              <option value="casa_particular">Casa Particular</option>
              <option value="jardin_privado">Jardín Privado</option>
              <option value="azotea">Azotea</option>
              <option value="piso">Piso</option>
              <option value="casa_rural">Casa Rural</option>
              <option value="nave_industrial">Nave Industrial</option>
              <option value="parcela">Parcela</option>
              <option value="local_propio">Local Propio</option>
              <option value="masia">Masía</option>
              <option value="otro">Otro</option>
            </select>
          </div>
          <div class="form-group">
            <label for="nombre">Nombre del Espacio</label>
            <input
              id="nombre"
              v-model="espai.nombre"
              type="text"
              required
              placeholder="Ej: Mi sala de eventos"
            />
          </div>
          <div class="form-group">
            <label for="capacidad">Capacidad Aproximada</label>
            <input
              id="capacidad"
              v-model.number="espai.capacidad_aproximada"
              type="number"
              required
              min="1"
              placeholder="Ej: 50"
            />
          </div>
        </div>
        <!-- Dirección -->
        <div class="form-block">
          <div class="block-title"><b>Dirección</b></div>
          <div class="address-grid">
            <input
              v-model="espai.direccion"
              type="text"
              required
              placeholder="Calle y número"
            />
            <input
              v-model="espai.ciudad"
              type="text"
              required
              placeholder="Ciudad"
            />
            <input
              v-model="espai.codigo_postal"
              type="text"
              required
              placeholder="Código Postal"
            />
            <input
              v-model="espai.provincia"
              type="text"
              required
              placeholder="Provincia"
            />
          </div>
        </div>
        <!-- Descripción -->
        <div class="form-block">
          <div class="block-title"><b>Descripción</b></div>
          <textarea
            v-model="espai.descripcion"
            required
            rows="4"
            placeholder="Describe las características principales del espacio"
          ></textarea>
        </div>
        <!-- Características -->
        <div class="form-block">
          <div class="block-title"><b>Características</b></div>
          <div class="caracteristicas-grid">
            <label class="checkbox-label" v-for="car in caracteristicasDisponibles" :key="car.value">
              <input
                type="checkbox"
                v-model="espai.caracteristicas"
                :value="car.value"
              />
              <span v-if="car.icon" :class="car.icon" style="color:#800020"></span>
              <span style="color:#333">{{ car.label }}</span>
            </label>
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="submit-btn" :disabled="loading">
            <i class="bi bi-save"></i>
            {{ loading ? 'Guardando...' : 'Guardar cambios' }}
          </button>
          <button type="button" class="cancel-btn" @click="$router.back()">
            Cancelar
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import Swal from 'sweetalert2'

export default {
  name: 'EditEspaiPropi',
  data () {
    return {
      logo: require('@/assets/LogoEventAiTransGran.png'),
      isNavbarHidden: false,
      loading: false,
      espai: {
        nombre: '',
        tipo_espacio: '',
        capacidad_aproximada: null,
        caracteristicas: [],
        descripcion: '',
        direccion: '',
        ciudad: '',
        codigo_postal: '',
        provincia: ''
      },
      caracteristicasDisponibles: [
        { value: 'interior', label: 'Interior', icon: 'bi bi-door-open' },
        { value: 'exterior', label: 'Exterior', icon: 'bi bi-tree' },
        { value: 'interior_exterior', label: 'Interior y Exterior', icon: 'bi bi-columns-gap' },
        { value: 'natural_light', label: 'Luz Natural', icon: 'bi bi-brightness-high' },
        { value: 'acceso_coche', label: 'Acceso en Coche', icon: 'bi bi-car-front' },
        { value: 'acceso_autocares', label: 'Acceso para Autocares', icon: 'bi bi-bus-front' },
        { value: 'acceso_moto', label: 'Acceso en Moto', icon: 'bi bi-bicycle' },
        { value: 'accesible_ruedas', label: 'Accesible en Silla de Ruedas', icon: 'bi bi-person-wheelchair' },
        { value: 'zona_carga', label: 'Zona de Carga y Descarga', icon: 'bi bi-truck' },
        { value: 'parking_disponible', label: 'Parking Disponible', icon: 'bi bi-parking' },
        { value: 'parking_gratis', label: 'Parking Gratuito', icon: 'bi bi-cash-coin' },
        { value: 'ascensor', label: 'Ascensor Disponible', icon: 'bi bi-arrow-up-square' },
        { value: 'heating', label: 'Calefacción', icon: 'bi bi-thermometer-half' },
        { value: 'air_conditioning', label: 'Aire Acondicionado', icon: 'bi bi-snow' },
        { value: 'zona_fumar', label: 'Zona para Fumar', icon: 'bi bi-wind' },
        { value: 'piscina', label: 'Piscina', icon: 'bi bi-droplet-half' },
        { value: 'wifi', label: 'WiFi Disponible', icon: 'bi bi-wifi' },
        { value: 'almacen', label: 'Espacio de Almacenaje', icon: 'bi bi-box-seam' },
        { value: 'banos_adaptados', label: 'Baños Adaptados', icon: 'bi bi-universal-access' },
        { value: 'seguridad', label: 'Seguridad / Vigilancia', icon: 'bi bi-shield-lock' },
        { value: 'guardarropa', label: 'Guardarropa / Ropero', icon: 'bi bi-bag' },
        { value: 'limpieza', label: 'Servicio de Limpieza', icon: 'bi bi-broom' },
        { value: 'funcional', label: 'Funcional', icon: 'bi bi-check2-square' },
        { value: 'moderno', label: 'Moderno', icon: 'bi bi-lightning' },
        { value: 'futurista', label: 'Futurista', icon: 'bi bi-cpu' },
        { value: 'historico', label: 'Histórico', icon: 'bi bi-bank' },
        { value: 'vintage', label: 'Vintage', icon: 'bi bi-vinyl' },
        { value: 'capacidad_pie', label: 'Capacidad en Pie', icon: 'bi bi-person-standing' },
        { value: 'capacidad_sentados', label: 'Capacidad Sentados', icon: 'bi bi-person-lines-fill' },
        { value: 'espacio_modular', label: 'Espacio Modular', icon: 'bi bi-grid-1x2' },
        { value: 'privado', label: 'Espacio Privado / Exclusivo', icon: 'bi bi-lock' },
        { value: 'ninos', label: 'Espacio para Niños', icon: 'bi bi-emoji-smile' },
        { value: 'baile', label: 'Pista de Baile', icon: 'bi bi-music-note-beamed' },
        { value: 'juegos', label: 'Zona para Juegos', icon: 'bi bi-controller' },
        { value: 'fotos', label: 'Zona para Fotos', icon: 'bi bi-camera' },
        { value: 'mascotas', label: 'Se Admiten Mascotas', icon: 'bi bi-paw' }
      ]
    }
  },
  async created () {
    await this.loadEspaiPropi()
  },
  methods: {
    handleMouseMove (event) {
      this.mouseY = event.clientY
      this.isNavbarHidden = this.mouseY > 110
    },
    async loadEspaiPropi () {
      try {
        const id = this.$route.params.id
        const token = localStorage.getItem('token')
        const response = await fetch(`http://localhost:8000/api/v1/espai-propi/espai-propi/${id}`, {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        })
        if (!response.ok) throw new Error('No se pudo cargar el espacio propio')
        const data = await response.json()
        this.espai = {
          nombre: data.nombre,
          tipo_espacio: data.tipus,
          capacidad_aproximada: data.capacitat_aproximada,
          caracteristicas: data.caracteristicas || [],
          descripcion: data.descripcion,
          direccion: data.address?.direccion || '',
          ciudad: data.address?.ciudad || '',
          // eslint-disable-next-line
          codigo_postal: data.address?.codigo_postal || '',
          provincia: data.address?.provincia || ''
        }
      } catch (error) {
        console.error('Error al cargar el espacio propio:', error)
        Swal.fire({
          title: 'Error',
          text: 'No se pudo cargar el espacio propio',
          icon: 'error',
          confirmButtonColor: '#800020'
        })
      }
    },
    async handleSubmit () {
      this.loading = true
      try {
        const id = this.$route.params.id
        const payload = {
          nombre: this.espai.nombre,
          tipus: this.espai.tipo_espacio,
          capacitat_aproximada: this.espai.capacidad_aproximada,
          caracteristicas: this.espai.caracteristicas,
          descripcion: this.espai.descripcion,
          address: {
            direccion: this.espai.direccion,
            ciudad: this.espai.ciudad,
            codigo_postal: this.espai.codigo_postal,
            provincia: this.espai.provincia
          }
        }
        const token = localStorage.getItem('token')
        const response = await fetch(`http://localhost:8000/api/v1/espai-propi/espai-propi/${id}`, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify(payload)
        })
        if (!response.ok) throw new Error('No se pudo guardar los cambios')
        await Swal.fire({
          title: '¡Guardado!',
          text: 'El espacio propio ha sido actualizado correctamente',
          icon: 'success',
          confirmButtonColor: '#800020'
        })
        this.$router.push('/myProfile')
      } catch (error) {
        console.error('Error al guardar los cambios:', error)
        Swal.fire({
          title: 'Error',
          text: 'No se pudo guardar los cambios',
          icon: 'error',
          confirmButtonColor: '#800020'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* Copiar los estilos de CreateEspaiPropi.vue aquí para mantener la coherencia visual */
.page-container {
  padding-top: 140px;
  min-height: 100vh;
  background: #f8f9fa;
  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;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: auto;
  margin-bottom: 2rem;
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease-in-out;
}

.navbar-hidden {
  transform: translateY(-100%);
}

.navbar-left .logo {
  height: 80px;
  width: auto;
  cursor: pointer;
}

.navbar-center h1 {
  color: #800020;
  font-size: 2rem;
  margin: 0;
  flex-grow: 1;
  text-align: center;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.back {
  background-color: #2C3E50;
  color: white;
}

.back:hover {
  background-color: #1a252f;
  transform: translateY(-2px);
}

.form-container {
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  max-width: 900px;
  margin: 0 auto;
  margin-top: 120px;
}

.espai-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.main-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-group label {
  font-weight: 500;
  color: #800020;
  margin-bottom: 0.3rem;
}

.form-group input,
.form-group select,
.address-grid input,
textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.8rem;
  border: 1.5px solid #80002033;
  border-radius: 7px;
  font-size: 1rem;
  background: #faf6f8;
  color: #333;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 0.1rem;
}

.form-group input:focus,
.form-group select:focus,
.address-grid input:focus,
textarea:focus {
  border-color: #800020;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px #80002022;
}

.form-block {
  border: 2px solid #80002033;
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 0.5rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(128,0,32,0.03);
}

.block-title {
  color: #800020;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.address-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

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

.caracteristicas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem 1.2rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(246, 245, 246);
  border: 1.5px solid #80002022;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.98rem;
  color: #333;
  font-weight: 500;
  transition: background 0.2s, border 0.2s;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  accent-color: #800020;
  width: 1.1em;
  height: 1.1em;
}

.checkbox-label:hover {
  background: #f8e6ec;
  border-color: #80002099;
}

.checkbox-label .bi {
  font-size: 1.2em;
  margin-right: 0.3em;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

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

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

.submit-btn:hover:not(:disabled) {
  background: #a8324a;
  transform: translateY(-1px);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.cancel-btn {
  background: #f3f3f3;
  color: #800020;
  border: none;
}

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

@media (max-width: 1100px) {
  .main-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .main-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .address-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .form-block {
    padding: 1rem 0.7rem;
  }
}

@media (max-width: 600px) {
  .form-container {
    padding: 1rem;
  }
  .espai-form {
    gap: 1rem;
  }
}
</style>
