<template>
  <div class="register-container">
    <div class="auth-bg">
      <div class="brand-logo">
        <span class="logo-letter">R</span>
        <span class="logo-letter">E</span>
        <span class="logo-letter">F</span>
        <span class="logo-letter">L</span>
        <span class="logo-letter">E</span>
        <span class="logo-letter">X</span>
      </div>
      
      <div class="register-card">
        <div class="register-header">
          <h2>Создать аккаунт</h2>
          <p>Начните свой путь к новым знакомствам</p>
        </div>
        
        <form @submit.prevent="handleRegister" class="register-form">
          <div class="form-group">
            <label for="name">
              <i class="bi-person"></i>
              Имя
            </label>
            <input 
              type="text" 
              id="name" 
              v-model="name" 
              placeholder="Введите ваше имя" 
              required 
              :disabled="loading" 
            />
          </div>

          <div class="form-group">
            <label for="email">
              <i class="bi-envelope"></i>
              Email
            </label>
            <input 
              type="email" 
              id="email" 
              v-model="email" 
              placeholder="Введите ваш email" 
              required 
              :disabled="loading" 
            />
          </div>

          <div class="form-group">
            <label for="password">
              <i class="bi-shield-lock"></i>
              Пароль
            </label>
            <input 
              type="password" 
              id="password" 
              v-model="password" 
              placeholder="Создайте надежный пароль" 
              required 
              :disabled="loading" 
            />
          </div>

          <div class="form-group">
            <label for="confirmPassword">
              <i class="bi-shield-check"></i>
              Подтверждение пароля
            </label>
            <input 
              type="password" 
              id="confirmPassword" 
              v-model="confirmPassword" 
              placeholder="Повторите пароль" 
              required 
              :disabled="loading" 
            />
          </div>

          <div v-if="errorMessage" class="error-message">
            <i class="bi-exclamation-circle"></i>
            {{ errorMessage }}
          </div>

          <button type="submit" class="action-button" :disabled="loading">
            <span v-if="loading" class="spinner"></span>
            <span v-else class="btn-text">Зарегистрироваться</span>
          </button>
          
          <div class="auth-footer">
            <p>
              Уже есть аккаунт? 
              <router-link to="/login" class="auth-link">Войти</router-link>
            </p>
          </div>
        </form>
      </div>
      
      <router-link to="/" class="back-link">
        <i class="bi-arrow-left"></i>
        Вернуться на главную
      </router-link>
      
      <div class="wave-container">
        <div class="wave"></div>
        <div class="wave"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuth } from '@/auth';

const name = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const errorMessage = ref('');
const loading = ref(false);

const { register } = useAuth();

const handleRegister = async () => {
  errorMessage.value = '';
  loading.value = true;

  // Простая валидация на клиенте
  if (!name.value || !email.value || !password.value || !confirmPassword.value) {
    errorMessage.value = 'Пожалуйста, заполните все обязательные поля.';
    loading.value = false;
    return;
  }
  if (password.value !== confirmPassword.value) {
    errorMessage.value = 'Пароли не совпадают.';
    loading.value = false;
    return;
  }
  if (password.value.length < 6) {
    errorMessage.value = 'Пароль должен быть не менее 6 символов.';
    loading.value = false;
    return;
  }

  try {
    const userData = {
      name: name.value,
      email: email.value,
      password: password.value
    };
    await register(userData);
  } catch (error) {
    errorMessage.value = error.message || 'Произошла неизвестная ошибка при регистрации.';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.auth-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
}

.brand-logo {
  display: flex;
  align-items: center;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 2.5rem;
}

.logo-letter {
  display: inline-block;
  animation: gradientShift 8s infinite;
  background: linear-gradient(45deg, #ffffff, #64b5f6, #7e57c2, #ff6e40);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-letter:nth-child(1) { animation-delay: 0s; }
.logo-letter:nth-child(2) { animation-delay: 0.25s; }
.logo-letter:nth-child(3) { animation-delay: 0.5s; }
.logo-letter:nth-child(4) { animation-delay: 0.75s; }
.logo-letter:nth-child(5) { animation-delay: 1s; }
.logo-letter:nth-child(6) { animation-delay: 1.25s; }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.register-card {
  width: 100%;
  max-width: 500px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeUp 0.8s ease;
  text-align: center;
  position: relative;
  z-index: 10;
  margin: 1rem 0 3rem;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.register-header {
  margin-bottom: 2.5rem;
  color: white;
}

.register-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.register-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.register-form {
  text-align: left;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group label i {
  font-size: 1.1rem;
}

.form-group input {
  width: 100%;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-group input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.action-button {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  background: linear-gradient(45deg, #FFD700, #FFA500);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.action-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease;
}

.action-button:hover:before {
  left: 100%;
}

.action-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 15px rgba(255, 215, 0, 0.3);
}

.action-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.spinner {
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.auth-footer {
  margin-top: 2rem;
  color: white;
  font-size: 0.95rem;
}

.auth-link {
  color: #FFD700;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.auth-link:hover {
  color: white;
  text-decoration: underline;
}

.error-message {
  background: rgba(255, 92, 92, 0.2);
  color: white;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.error-message i {
  font-size: 1.1rem;
  color: #ffcccc;
}

.back-link {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  z-index: 10;
}

.back-link:hover {
  transform: translateX(-5px);
}

.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 150px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25" fill="white"/><path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5" fill="white"/><path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" fill="white"/></svg>') repeat-x;
  background-size: 1200px 150px;
  transform: rotate(180deg);
  animation: wave 10s linear infinite;
  opacity: 0.6;
}

.wave:nth-child(2) {
  bottom: 10px;
  animation: wave 16s linear reverse infinite;
  opacity: 0.3;
}

@keyframes wave {
  0% { transform: translateX(0) rotate(180deg); }
  100% { transform: translateX(-50%) rotate(180deg); }
}

/* Адаптивность */
@media (max-width: 768px) {
  .register-card {
    padding: 2.5rem 1.5rem;
  }
  
  .register-header h2 {
    font-size: 1.8rem;
  }
  
  .brand-logo {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  
  .back-link {
    top: 1.5rem;
    left: 1.5rem;
    font-size: 0.9rem;
  }
  
  .wave-container {
    height: 120px;
  }
  
  .wave {
    height: 120px;
    background-size: 1200px 120px;
    transform: rotate(180deg);
  }
}

@media (max-width: 576px) {
  .auth-bg {
    padding: 1.5rem 1rem 3rem;
  }
  
  .register-card {
    padding: 2rem 1.5rem;
    margin: 3rem 0 2rem;
  }
  
  .form-group {
    margin-bottom: 1.2rem;
  }
  
  .form-group label {
    font-size: 0.95rem;
  }
  
  .brand-logo {
    margin-top: 2.5rem;
  }
}

@media (max-width: 480px) {
  .register-card {
    padding: 1.8rem 1.2rem;
    margin: 2rem 0 1.5rem;
  }
  
  .register-header h2 {
    font-size: 1.5rem;
  }
  
  .register-header p {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
  }
  
  .brand-logo {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
  
  .form-group input {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
  }
  
  .action-button {
    padding: 0.9rem;
    font-size: 1rem;
  }
  
  .auth-footer {
    margin-top: 1.5rem;
    font-size: 0.9rem;
  }
  
  .back-link {
    font-size: 0.85rem;
  }
  
  .wave-container {
    height: 80px;
  }
  
  .wave {
    height: 80px;
    background-size: 1200px 80px;
    transform: rotate(180deg);
  }
}

@media (max-width: 370px) {
  .register-card {
    padding: 1.5rem 1rem;
    margin: 1.5rem 0 1rem;
  }
  
  .register-header h2 {
    font-size: 1.4rem;
  }
  
  .register-header p {
    font-size: 0.9rem;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }
  
  .form-group input {
    padding: 0.7rem 0.9rem;
  }
  
  .brand-logo {
    font-size: 1.6rem;
  }
  
  .action-button {
    padding: 0.8rem;
  }
}

/* Стили для поддержки ориентации экрана */
@media (max-height: 800px) and (min-width: 500px) {
  .brand-logo {
    margin-bottom: 1.5rem;
    margin-top: 1rem;
  }
  
  .register-card {
    padding: 1.8rem;
    margin: 0.5rem 0 1.5rem;
  }
  
  .register-header {
    margin-bottom: 1.8rem;
  }
  
  .form-group {
    margin-bottom: 0.8rem;
  }
  
  .auth-footer {
    margin-top: 1.2rem;
  }
}

/* Для очень коротких экранов */
@media (max-height: 650px) {
  .auth-bg {
    height: auto;
    min-height: 100vh;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .register-card {
    margin: 0 0 1rem;
  }
  
  .brand-logo {
    margin: 3rem 0 1rem;
  }
  
  .form-group {
    margin-bottom: 0.7rem;
  }
  
  .form-group label {
    margin-bottom: 0.3rem;
  }
  
  .wave-container {
    display: none;
  }
}

/* Исправления Safari */
@supports (-webkit-touch-callout: none) {
  .logo-letter {
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>