<template>
  <div class="signup-container" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <div class="signup-box">
      <div class="signup-form">
        <h1>REGISTRO DE USUARIO</h1>
        <form @submit.prevent="handleSignUp">
          <!-- Selector de tipo de usuario (primer campo, más bonito) -->
          <div class="input-group role-group">
            <label for="role" class="role-label">Tipo de usuario:</label>
            <select v-model="role" id="role" required @blur="roleTouched = true" class="role-select">
              <option disabled value="">Selecciona un tipo de usuario</option>
              <option value="client_particular">Cliente Particular</option>
              <option value="client_business">Cliente Empresa</option>
              <option value="vendor_business">Proveedor Empresa</option>
              <option value="vendor_particular">Proveedor Particular</option>
            </select>
            <div v-if="(roleTouched || triedSubmit) && roleError" class="error-message">Selecciona un tipo de usuario.</div>
          </div>

          <!-- Campo de Nombre completo -->
          <div class="input-group">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="accountIcon" alt="Account icon" />
              </span>
              <input
                v-model="full_name"
                type="text"
                placeholder="Nombre completo"
                required
                autocomplete="off"
                :class="{'input-error': (fullNameError && (fullNameTouched || triedSubmit))}"
                @blur="fullNameTouched = true; validateFullName()"
              />
            </div>
            <div v-if="(fullNameTouched || triedSubmit) && fullNameError" class="error-message">Introduce un nombre válido.</div>
          </div>

          <!-- Campo de Email -->
          <div class="input-group">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="mailIcon" alt="Mail icon" />
              </span>
              <input
                v-model="email"
                type="email"
                placeholder="Email"
                required
                autocomplete="off"
                :class="{'input-error': (emailError && (emailTouched || triedSubmit))}"
                @blur="emailTouched = true; validateEmail()"
              />
            </div>
            <div v-if="(emailTouched || triedSubmit) && emailError" class="error-message">Introduce un email válido.</div>
          </div>

          <!-- Campo de Nombre de usuario -->
          <div class="input-group">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="accountIcon" alt="Account icon" />
              </span>
              <input
                v-model="username"
                type="text"
                placeholder="Nombre de usuario"
                required
                autocomplete="off"
                :class="{'input-error': (usernameError && (usernameTouched || triedSubmit))}"
                @blur="usernameTouched = true; validateUsername()"
              />
            </div>
            <div v-if="(usernameTouched || triedSubmit) && usernameError" class="error-message">Introduce un nombre de usuario válido.</div>
          </div>

          <!-- Campo CIF para client_business y vendor_business -->
          <div class="input-group" v-if="role === 'client_business' || role === 'vendor_business'">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="id_icon" alt="Id icon" class="id-icon" />
              </span>
              <input
                v-model="cif"
                type="text"
                placeholder="CIF (solo empresas)"
                maxlength="20"
                required
                autocomplete="off"
                :class="{'input-error': (cifError && (cifTouched || triedSubmit))}"
                @blur="cifTouched = true; validateCif()"
              />
            </div>
            <div v-if="(cifTouched || triedSubmit) && cifError" class="error-message">Introduce un CIF válido.</div>
          </div>

          <!-- Campo DNI para client_particular y vendor_particular -->
          <div class="input-group" v-if="role === 'client_particular' || role === 'vendor_particular'">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="id_icon" alt="Id icon" class="id-icon" />
              </span>
              <input
                v-model="dni"
                type="text"
                placeholder="DNI (solo particulares)"
                maxlength="20"
                required
                autocomplete="off"
                :class="{'input-error': (dniError && (dniTouched || triedSubmit))}"
                @blur="dniTouched = true; validateDni()"
              />
            </div>
            <div v-if="(dniTouched || triedSubmit) && dniError" class="error-message">Introduce un DNI válido.</div>
          </div>

          <!-- Campo de Contraseña -->
          <div class="input-group">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="lockIcon" alt="Lock icon" />
              </span>
              <input
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="Contraseña"
                required
                autocomplete="new-password"
                :class="{'input-error': (passwordError && (passwordTouched || triedSubmit))}"
                @blur="passwordTouched = true; validatePassword()"
              />
              <span class="toggle-password" @click="toggleShowPassword">
                <i :class="showPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
              </span>
            </div>
            <div v-if="(passwordTouched || triedSubmit) && passwordError" class="error-message">La contraseña debe tener al menos 8 caracteres, una mayúscula, una minúscula y un símbolo.</div>
          </div>

          <!-- Campo de Confirmar Contraseña -->
          <div class="input-group">
            <div class="input-wrapper">
              <span class="input-icon">
                <img :src="keyIcon" alt="Key icon" />
              </span>
              <input
                v-model="confirmPassword"
                :type="showConfirmPassword ? 'text' : 'password'"
                placeholder="Confirmar contraseña"
                required
                autocomplete="new-password"
                :class="{'input-error': (confirmPasswordError && (confirmPasswordTouched || triedSubmit))}"
                @blur="confirmPasswordTouched = true; validateConfirmPassword()"
              />
              <span class="toggle-confirm-password" @click="toggleShowConfirmPassword">
                <i :class="showConfirmPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
              </span>
            </div>
            <div v-if="(confirmPasswordTouched || triedSubmit) && confirmPasswordError" class="error-message">Las contraseñas no coinciden.</div>
          </div>

          <!-- Términos y Condiciones -->
          <div class="terms-conditions">
            <input type="checkbox" v-model="agreedToTerms" required />
            <label>Acepto los <span class="terms-link" @click="showTermsAndConditions">términos y condiciones</span></label>
          </div>
          <button type="submit" class="signup-button">Registrarse</button>
        </form>

        <!-- Enlace para Iniciar Sesión -->
        <p class="login-link">
          Ya tienes una cuenta?
          <router-link to="/login" class="login-link-text">Iniciar sesión</router-link>
        </p>
      </div>
      <div class="signup-image">
        <img :src="boxImage" alt="Signup illustration" />
      </div>
    </div>
  </div>
</template>

<script>
import Swal from 'sweetalert2'
import UserService from '../services/UserServices'

export default {
  data () {
    return {
      full_name: '',
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      role: '',
      cif: '',
      dni: '',
      agreedToTerms: false,
      showPassword: false,
      showConfirmPassword: false,
      accountIcon: require('@/assets/account_icon.png'),
      mailIcon: require('@/assets/mail_icon.png'),
      lockIcon: require('@/assets/lock_icon.png'),
      keyIcon: require('@/assets/key_icon.png'),
      boxImage: require('@/assets/foto_evento_3colores.jpg'),
      backgroundImage: require('@/assets/fondo_claro.jpg'),
      id_icon: require('@/assets/icono_dni_cif.png'),
      // Errores de validación
      fullNameError: false,
      emailError: false,
      usernameError: false,
      cifError: false,
      dniError: false,
      passwordError: false,
      confirmPasswordError: false,
      // Touched
      fullNameTouched: false,
      emailTouched: false,
      usernameTouched: false,
      cifTouched: false,
      dniTouched: false,
      passwordTouched: false,
      confirmPasswordTouched: false,
      roleTouched: false,
      triedSubmit: false,
      roleError: false
    }
  },
  methods: {
    showTermsAndConditions () {
      Swal.fire({
        title: 'TÉRMINOS Y CONDICIONES',
        html: `
          <div style="text-align: left; max-height: 400px; overflow-y: auto; padding-right: 10px;">
            <p><strong>Última actualización:</strong> 7 de junio de 2025</p>

            <p>Bienvenido a EventAI. Al acceder y utilizar nuestra plataforma, aceptas los siguientes términos y condiciones, que regulan la relación entre tú, como proveedor de servicios, y EventAI, como intermediario tecnológico. Te recomendamos leer detenidamente este documento antes de continuar con el uso de nuestros servicios.</p>

            <h3>1. Aceptación de los términos</h3>
            <p>Al registrarte como proveedor en EventAI, confirmas que comprendes y aceptas estos términos. En caso de no estar de acuerdo con alguno de ellos, te rogamos que no utilices la plataforma ni nuestros servicios asociados.</p>

            <h3>2. Sobre el uso del servicio</h3>
            <p>EventAI actúa como una plataforma que conecta proveedores de servicios con clientes interesados en la organización de eventos. Al formar parte de nuestra red, te comprometes a ofrecer información veraz sobre ti y los servicios que ofreces, y a mantener tus datos actualizados. Asimismo, deberás operar conforme a la legislación vigente y mantener una conducta profesional y ética.</p>

            <h3>3. Protección de datos personales</h3>
            <p>Cumplimos con el RGPD y la LOPDGDD. Tus datos serán utilizados solo para la gestión de tu cuenta y nuestros servicios. Puedes ejercer tus derechos escribiéndonos a <a href="mailto:support@eventai.com">support@eventai.com</a>.</p>

            <h3>4. Pagos y condiciones económicas</h3>
            <p>Si utilizas nuestras funciones de pago, debes proporcionar datos válidos y actualizados, aceptar nuestros cargos y cumplir con nuestras políticas de reembolso. Nos comprometemos a proteger tus datos de pago.</p>

            <h3>5. Uso de inteligencia artificial</h3>
            <p>Utilizamos IA para personalizar tu experiencia. Aceptas que ciertos servicios o recomendaciones se generen mediante algoritmos basados en tus acciones en la plataforma.</p>

            <h3>6. Contenidos y derechos</h3>
            <p>El contenido que publiques sigue siendo tuyo, pero nos otorgas una licencia para mostrarlo en EventAI. Debes garantizar que no vulnera derechos de terceros.</p>

            <h3>7. Responsabilidad del proveedor</h3>
            <p>Eres responsable de los servicios que ofreces, su calidad y cumplimiento legal, así como del trato ético hacia tus clientes.</p>

            <h3>8. Limitación de responsabilidad de EventAI</h3>
            <p>No somos responsables de conflictos entre clientes y proveedores, ni de interrupciones técnicas ni del contenido subido por usuarios.</p>

            <h3>9. Modificaciones</h3>
            <p>Podremos modificar estos términos en cualquier momento. Las actualizaciones se publicarán en nuestra plataforma.</p>

            <h3>10. Cancelación de cuenta</h3>
            <p>Puedes cancelar tu cuenta cuando quieras. EventAI también puede suspender cuentas por incumplimiento o uso indebido del servicio.</p>

            <h3>11. Legislación aplicable</h3>
            <p>Este contrato se rige por la legislación española. En caso de conflicto, nos someteremos a los tribunales de Barcelona, salvo que la ley indique otra jurisdicción.</p>

            <p>Para cualquier consulta, escríbenos a <a href="mailto:support@eventai.com">support@eventai.com</a>.</p>
          </div>
        `,
        width: '700px',
        customClass: {
          container: 'terms-modal',
          popup: 'terms-popup',
          content: 'terms-modal-content',
          title: 'terms-title'
        },
        showCloseButton: true,
        showConfirmButton: true,
        confirmButtonText: 'Entendido',
        confirmButtonColor: '#222'
      })
    },
    validateFullName () {
      this.fullNameError = !/^([A-Za-zÁÉÍÓÚáéíóúÑñüÜ'-]+\s?)+$/.test(this.full_name.trim())
    },
    validateEmail () {
      this.emailError = !/^\S+@\S+\.\S+$/.test(this.email)
    },
    validateUsername () {
      this.usernameError = !/^\w{3,}$/.test(this.username)
    },
    validateCif () {
      this.cifError = !/^([A-Za-z0-9]{8,20})$/.test(this.cif)
    },
    validateDni () {
      this.dniError = !/^([A-Za-z0-9]{8,20})$/.test(this.dni)
    },
    validatePassword () {
      const length = this.password.length >= 8
      const hasUpper = /[A-Z]/.test(this.password)
      const hasLower = /[a-z]/.test(this.password)
      const hasSymbol = /[^A-Za-z0-9]/.test(this.password)
      this.passwordError = !(length && hasUpper && hasLower && hasSymbol)
      this.validateConfirmPassword()
    },
    validateConfirmPassword () {
      this.confirmPasswordError = this.password !== this.confirmPassword
    },
    toggleShowPassword () {
      this.showPassword = !this.showPassword
    },
    toggleShowConfirmPassword () {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    handleRoleChange () {
      if (this.role !== 'client_business' && this.role !== 'vendor_business') this.cif = ''
      if (this.role !== 'client_particular' && this.role !== 'vendor_particular') this.dni = ''
    },
    handleSignUp () {
      this.validateFullName()
      this.validateEmail()
      this.validateUsername()
      this.roleError = !this.role
      if (this.role === 'client_business' || this.role === 'vendor_business') this.validateCif()
      if (this.role === 'client_particular' || this.role === 'vendor_particular') this.validateDni()
      this.validatePassword()
      this.validateConfirmPassword()

      if (
        this.fullNameError ||
        this.emailError ||
        this.usernameError ||
        this.passwordError ||
        this.confirmPasswordError ||
        this.roleError ||
        ((this.role === 'client_business' || this.role === 'vendor_business') && this.cifError) ||
        ((this.role === 'client_particular' || this.role === 'vendor_particular') && this.dniError) ||
        !this.agreedToTerms
      ) {
        Swal.fire({
          icon: 'error',
          title: 'Error de validación',
          text: 'Por favor, revisa los campos marcados en rojo y asegúrate de que todos los datos son correctos.'
        })
        return
      }

      const payload = {
        full_name: this.full_name,
        username: this.username,
        email: this.email,
        password: this.password,
        role: this.role,
        cif: (this.role === 'client_business' || this.role === 'vendor_business') ? this.cif : undefined,
        dni: (this.role === 'client_particular' || this.role === 'vendor_particular') ? this.dni : undefined
      }

      UserService.create(payload)
        .then(() => {
          Swal.fire({
            title: '¡Cuenta creada!',
            text: 'La cuenta se ha creado correctamente. Por favor, inicia sesión.',
            icon: 'success',
            confirmButtonText: 'OK'
          }).then(() => {
            this.$router.push({ path: '/login' })
          })
        })
        .catch((error) => {
          console.error('Error al crear la cuenta:', error)
          const errorMessage = error?.response?.data?.detail || 'Hubo un error al crear la cuenta. Por favor, inténtalo de nuevo.'
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: errorMessage
          })
        })
    }
  }
}
</script>

<style scoped>
.signup-button {
  font-family: 'Roboto', sans-serif; /* Nueva fuente */
  font-weight: bold;
  font-size: 16px;
}

.input-group {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.input-group input {
  width: 100%;
  padding: 12px 40px 12px 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #777;
  z-index: 1;
}

.input-icon img {
  width: 24px;
  height: 24px;
}

.toggle-password, .toggle-confirm-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #000;
  z-index: 1;
}

.error-message {
  color: #d32f2f;
  font-size: 0.8rem;
  margin-top: 5px;
  margin-bottom: 0;
  display: block;
  width: 100%;
  text-align: left;
}

/* Fullscreen container with background */
.signup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5ece0;
  padding: 0;
  margin: 0;
}

/* Increased Signup box width */
.signup-box {
  display: flex;
  width: 1000px; /* Adjusted width to fit all fields */
  padding: 30px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  position: relative;
  justify-content: space-between;
}

/* Signup form styling (left side) */
.signup-form {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-right: 30px;
}

/* Sign Up title */
h1 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

/* Terms and Conditions */
.terms-conditions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.terms-link {
  color: #800020;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.3s;
}

.terms-link:hover {
  color: #600018;
}

/* Signup button */
.signup-button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px;
}

/* Login link under the signup form */
.login-link {
  text-align: center;
  margin-top: 10px;
}

.login-link-text {
  color: #007bff;
  text-decoration: none;
}

.login-link-text:hover {
  text-decoration: underline;
}

/* Image styling (right side) */
.signup-image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.signup-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.role-group {
  margin-bottom: 18px;
}
.role-label {
  font-weight: 600;
  margin-right: 10px;
  color:rgb(93, 92, 92);
  font-size: 1.1rem;
}
.role-select {
  padding: 10px 16px;
  border-radius: 6px;
  border: 1.5px solid rgb(93, 92, 92);
  font-size: 1.1rem;
  color: rgb(93, 92, 92);
  background: #fff7f7;
  font-weight: 500;
  outline: none;
  transition: border 0.2s;
}
.role-select:focus {
  border: 2px solid rgb(93, 92, 92);
}

.input-error {
  border: 2px solid #d32f2f !important;
  background: #fff0f0 !important;
}

.id-icon {
  opacity: 0.6;
  filter: grayscale(100%);
}

:deep(.terms-modal) {
  z-index: 9999;
}

:deep(.terms-popup) {
  border-radius: 8px;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

:deep(.terms-modal-content) {
  text-align: left;
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
  font-family: 'Times New Roman', Times, serif;
}

:deep(.terms-content) {
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  color: #333;
}

:deep(.terms-header) {
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

:deep(.terms-date) {
  font-style: italic;
  color: #666;
  font-size: 0.8rem;
}

:deep(.terms-section) {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

:deep(.terms-section:last-of-type) {
  border-bottom: none;
}

:deep(.terms-content h3) {
  color: #800020;
  margin: 1.2rem 0 0.8rem;
  font-size: 1rem;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
}

:deep(.terms-content p) {
  margin-bottom: 0.8rem;
  text-align: left;
  text-align: justify;
}

:deep(.terms-content ul) {
  margin: 0.4rem 0 0.8rem 1.2rem;
  padding-left: 0.8rem;
  list-style-type: disc;
}

:deep(.terms-content li) {
  margin-bottom: 0.4rem;
  text-align: justify;
}

:deep(.terms-footer) {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
  font-style: italic;
  color: #666;
  text-align: center;
}

:deep(.swal2-close) {
  color: #800020;
}

:deep(.swal2-confirm) {
  background-color: #800020 !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 2rem !important;
}

:deep(.swal2-confirm:hover) {
  background-color: #600018 !important;
}

:deep(.terms-title) {
  font-size: 1.2rem !important;
  color: #800020 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  margin-bottom: 1rem !important;
}

:deep(.legal-doc) {
  font-family: 'Times New Roman', Times, serif;
  background: #fff;
  color: #222;
  padding: 2.5rem 2.5rem 1.5rem 2.5rem;
  border-radius: 8px;
  box-shadow: 0 0 0.5rem #0001;
  margin: 0 auto;
  max-width: 650px;
}
:deep(.legal-title) {
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}
:deep(.legal-subtitle) {
  text-align: center;
  font-size: 1.05rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  letter-spacing: 0.2px;
}
:deep(.legal-divider) {
  border: none;
  border-top: 1px solid #bbb;
  margin: 1.2rem 0;
}
:deep(.legal-intro) {
  text-align: justify;
  font-size: 0.97rem;
  margin-bottom: 1.2rem;
}
:deep(.legal-list) {
  margin-left: 1.2rem;
  font-size: 0.97rem;
  text-align: justify;
}
:deep(.legal-list > li) {
  margin-bottom: 0.4rem;
}
:deep(.legal-list b) {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.93rem;
}
:deep(.legal-list), :deep(.legal-list > li), :deep(.legal-list ol), :deep(.legal-list ol > li) {
  font-size: 0.89rem;
}
:deep(.legal-footer) {
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  margin-top: 1.5rem;
  font-style: italic;
}
</style>
