<template>
  <div class="login-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="login-card">
        <div class="login-header">
          <h2>Вход в аккаунт</h2>
          <p>Рады видеть вас снова!</p>
        </div>
        
        <!-- Добавляем показ информации о блокировке аккаунта -->
        <div v-if="accountBlocked" class="blocked-account-message">
          <i class="bi-shield-exclamation"></i>
          <div class="blocked-message-content">
            <h3>Аккаунт заблокирован</h3>
            <p>{{ blockedInfo.message }}</p>
            <p v-if="blockedInfo.reason" class="block-reason">
              <strong>Причина:</strong> {{ blockedInfo.reason }}
            </p>
          </div>
        </div>

        <!-- Добавляем показ информации о блокировке устройства -->
        <div v-if="deviceBlocked" class="blocked-account-message">
          <i class="bi-shield-exclamation"></i>
          <div class="blocked-message-content">
            <h3>Доступ с устройства заблокирован</h3>
            <p>{{ deviceBlockedInfo.message }}</p>
            <p v-if="deviceBlockedInfo.reason" class="block-reason">
              <strong>Причина:</strong> {{ deviceBlockedInfo.reason }}
            </p>
          </div>
        </div>
        
        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="email">
              <i class="bi-envelope"></i>
              Email
            </label>
            <input 
              type="text" 
              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 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="/register" 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, onMounted, onUnmounted, computed } from 'vue';
import { useAuth } from '@/auth';
import { useRoute } from 'vue-router';
import deviceSecurityService from '@/services/deviceSecurity';

const route = useRoute();
const email = ref('');
const password = ref('');
const errorMessage = ref('');
const loading = ref(false);
const securityLoading = ref(true);
const blockedInfo = ref({
  blocked: false,
  message: 'Ваш аккаунт был заблокирован администратором.',
  reason: 'Нарушение правил сервиса',
  timestamp: ''
});
const deviceBlockedInfo = ref({
  blocked: false,
  message: 'Доступ с данного устройства заблокирован.',
  reason: 'Подозрительная активность',
  timestamp: ''
});

const { login } = useAuth();

// Проверяем, был ли аккаунт или устройство заблокированы
const accountBlocked = computed(() => {
  return route.query.blocked === 'true' || blockedInfo.value.blocked;
});

const deviceBlocked = computed(() => {
  return route.query.type === 'device' || deviceBlockedInfo.value.blocked || deviceSecurityService.isDeviceBlocked();
});

// Функция для блокировки прокрутки страницы
const preventScroll = () => {
  document.body.style.overflow = 'hidden';
  document.body.style.position = 'fixed';
  document.body.style.height = '100%';
  document.body.style.width = '100%';
};

// Функция для восстановления прокрутки
const enableScroll = () => {
  document.body.style.overflow = '';
  document.body.style.position = '';
  document.body.style.height = '';
  document.body.style.width = '';
};

onMounted(async () => {
  preventScroll();
  
  try {
    console.log('[LoginView] Инициализация системы безопасности устройств...');
    
    // Инициализируем систему безопасности устройств
    const securityResult = await deviceSecurityService.initialize();
    
    console.log('[LoginView] Результат инициализации безопасности:', securityResult);
    
    // Проверяем, не заблокировано ли устройство
    if (securityResult.isBlocked) {
      deviceBlockedInfo.value = {
        blocked: true,
        message: 'Доступ с данного устройства заблокирован',
        reason: 'Устройство находится в черном списке',
        timestamp: new Date().toISOString()
      };
    }
    
  } catch (error) {
    console.error('[LoginView] Ошибка при инициализации системы безопасности:', error);
    
    // При критической ошибке системы безопасности показываем предупреждение
    if (error.response?.status === 403) {
      deviceBlockedInfo.value = {
        blocked: true,
        message: 'Доступ с данного устройства заблокирован',
        reason: error.response.data?.reason || 'Подозрительная активность',
        timestamp: new Date().toISOString()
      };
    }
  } finally {
    securityLoading.value = false;
  }

  // Проверяем query параметры для блокировки устройства
  if (route.query.type === 'device' && route.query.blocked === 'true') {
    deviceBlockedInfo.value = {
      blocked: true,
      message: decodeURIComponent(route.query.message || 'Доступ с данного устройства заблокирован'),
      reason: decodeURIComponent(route.query.reason || 'Подозрительная активность'),
      timestamp: route.query.blocked_at || new Date().toISOString()
    };
  }
  
  // Проверяем информацию о блокировке аккаунта из localStorage
  const storedBlockInfo = localStorage.getItem('accountBlockedInfo');
  if (storedBlockInfo) {
    try {
      const parsedInfo = JSON.parse(storedBlockInfo);
      blockedInfo.value = parsedInfo;
    } catch (e) {
      console.error('Ошибка при парсинге информации о блокировке:', e);
    }
  }
});

onUnmounted(() => {
  enableScroll();
});

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

  if (!email.value || !password.value) {
    errorMessage.value = 'Пожалуйста, введите email и пароль.';
    loading.value = false;
    return;
  }

  try {
    // Проверяем, инициализирована ли система безопасности
    if (!deviceSecurityService.isInitialized()) {
      errorMessage.value = 'Система безопасности не инициализирована. Обновите страницу.';
      loading.value = false;
      return;
    }

    // Проверяем блокировку устройства перед попыткой входа
    if (deviceSecurityService.isDeviceBlocked()) {
      errorMessage.value = 'Доступ с данного устройства заблокирован.';
      loading.value = false;
      return;
    }

    // Получаем отпечаток устройства для отправки на сервер
    const deviceFingerprint = deviceSecurityService.getCurrentFingerprint();
    
    if (!deviceFingerprint) {
      errorMessage.value = 'Не удалось создать отпечаток устройства. Обновите страницу.';
      loading.value = false;
      return;
    }

    // Выполняем вход с информацией о устройстве
    const loginResult = await login({ 
      email: email.value, 
      password: password.value,
      deviceFingerprint: deviceFingerprint,
      deviceInfo: {
        userAgent: navigator.userAgent,
        platform: navigator.platform,
        language: navigator.language,
        screenResolution: `${screen.width}x${screen.height}`,
        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        timestamp: Date.now()
      }
    });

    // Записываем успешную попытку входа
    deviceSecurityService.recordLoginAttempt(true);

    console.log('[LoginView] Успешный вход:', loginResult);

  } catch (error) {
    console.error('[LoginView] Ошибка при входе:', error);

    // Записываем неудачную попытку входа
    deviceSecurityService.recordLoginAttempt(false);

    // Проверяем, не связана ли ошибка с блокировкой устройства
    if (error.response?.status === 403) {
      const responseData = error.response.data;
      
      if (responseData?.code === 'DEVICE_BLOCKED') {
        deviceBlockedInfo.value = {
          blocked: true,
          message: responseData.message || 'Доступ с данного устройства заблокирован',
          reason: responseData.reason || 'Подозрительная активность',
          timestamp: responseData.blockedAt || new Date().toISOString()
        };
        
        // Обновляем состояние в сервисе безопасности
        deviceSecurityService.handleDeviceBlocked(responseData);
        
      } else if (responseData?.code === 'ACCOUNT_BLOCKED') {
        blockedInfo.value = {
          blocked: true,
          message: responseData.message || 'Ваш аккаунт был заблокирован',
          reason: responseData.reason || 'Нарушение правил сервиса',
          timestamp: responseData.blockedAt || new Date().toISOString()
        };
      } else {
        errorMessage.value = responseData?.message || 'Доступ запрещен.';
      }
    } else if (error.response?.status === 429) {
      // Слишком много попыток входа
      errorMessage.value = 'Слишком много попыток входа. Попробуйте позже.';
      
      // Записываем подозрительную активность
      deviceSecurityService.recordSuspiciousActivity({
        type: 'rate_limit_exceeded',
        endpoint: '/auth/login',
        timestamp: Date.now()
      });
      
    } else if (error.response?.status === 401) {
      errorMessage.value = 'Неверный email или пароль.';
    } else {
      errorMessage.value = error.message || 'Произошла неизвестная ошибка при входе.';
    }
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  touch-action: none;
  color: white; /* Явно задаем белый цвет текста для всего контейнера */
}

.auth-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

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

.logo-letter {
  display: inline-block;
  animation: gradientShift 8s infinite;
  background: linear-gradient(45deg, #ffffff, #00bfff, #9932cc, #ff4500);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
    -1px -1px 0 rgba(255, 255, 255, 0.3),
    1px -1px 0 rgba(255, 255, 255, 0.3),
    -1px 1px 0 rgba(255, 255, 255, 0.3),
    1px 1px 0 rgba(255, 255, 255, 0.3),
    0 0 8px rgba(255, 255, 255, 0.5);
}

.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%; }
}

.login-card {
  width: 90%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  position: relative;
  z-index: 10;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: white; /* Явно задаем белый цвет текста */
}

.login-header {
  margin-bottom: 1rem;
  color: white; /* Явно задаем белый цвет текста для заголовка */
}

.login-header h2 {
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
  color: white; /* Явно задаем белый цвет текста для h2 */
  font-weight: 600;
}

.login-header p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый для подзаголовка */
  margin-bottom: 1.5rem;
}

.login-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 0.8rem;
  position: relative;
  text-align: left; /* Выравниваем текст полей формы по левому краю */
}

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

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

.form-group input {
  width: 100%;
  padding: 0.9rem 1rem;
  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.6);
}

.action-button {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  background: #00BFFF;
  border: none;
  border-radius: 50px; /* Более закругленная кнопка как на скриншоте */
  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(0, 191, 255, 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: #20B2AA;
  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: 10px;
  left: 10px;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  z-index: 10;
  font-size: 0.9rem;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  backdrop-filter: blur(5px);
}

.back-link:hover {
  transform: translateX(-5px);
  background-color: rgba(255, 255, 255, 0.2);
}

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

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300%; /* Увеличиваем ширину для сглаживания краёв */
  height: 150px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" preserveAspectRatio="none" 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: translateX(0) rotate(180deg); /* Начинаем с нулевого положения */
  animation: login-wave 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* Плавная бесконечная анимация */
  opacity: 0.6;
}

.wave:nth-child(2) {
  bottom: 10px;
  animation: login-wave 36s cubic-bezier(0.36, 0.45, 0.63, 0.53) reverse infinite;
  opacity: 0.3;
}

@keyframes login-wave {
  0% { transform: translateX(0) rotate(180deg); }
  100% { transform: translateX(-66.66%) rotate(180deg); } /* Анимируем точно на 2/3 ширины для плавного цикла */
}

/* Адаптивность */
@media (max-width: 768px) {
  .login-card {
    padding: 2.5rem 1.5rem;
  }
  
  .login-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) {
  .brand-logo {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
  }

  .login-card {
    width: 94%;
    padding: 1.5rem 1.2rem;
    margin-top: 0;
  }
  
  .login-header h2 {
    font-size: 1.6rem;
  }
  
  .login-header p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
  }
  
  .login-card {
    padding: 1.4rem 1.1rem;
    width: 95%;
  }
  
  .login-header h2 {
    font-size: 1.4rem;
  }
  
  .form-group input {
    padding: 0.7rem 0.9rem;
  }
  
  .action-button {
    padding: 0.8rem;
    font-size: 0.95rem;
  }
}

@media (max-height: 700px) {
  .brand-logo {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }
  
  .login-header {
    margin-bottom: 0.8rem;
  }
  
  .login-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
  }
  
  .login-header p {
    margin-bottom: 0.8rem;
  }
  
  .form-group {
    margin-bottom: 0.6rem;
  }
  
  .form-group label {
    margin-bottom: 0.2rem;
  }
  
  .form-group input {
    padding: 0.6rem 0.8rem;
  }
  
  .action-button {
    padding: 0.7rem;
    margin-top: 0.7rem;
  }
  
  .auth-footer {
    margin-top: 1rem;
  }
}

@media (max-height: 600px) {
  .brand-logo {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
  }
  
  .login-card {
    padding: 1.2rem 1rem;
  }
  
  .login-header h2 {
    font-size: 1.3rem;
  }
  
  .login-header p {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  
  .form-group {
    margin-bottom: 0.5rem;
  }
  
  .form-group label {
    font-size: 0.85rem;
  }
  
  .form-group input {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
  }
  
  .action-button {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  
  .auth-footer {
    margin-top: 0.7rem;
    font-size: 0.85rem;
  }
}

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

.blocked-account-message {
  background-color: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  animation: fadeInDown 0.5s ease;
  border-left: 4px solid rgba(220, 53, 69, 0.7);
}

.blocked-account-message i {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.1rem;
}

.blocked-message-content {
  flex: 1;
}

.blocked-message-content h3 {
  margin: 0 0 0.5rem 0;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
}

.blocked-message-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.4;
}

.block-reason {
  margin-top: 0.5rem !important;
  font-style: italic;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Адаптивность для блока с информацией о блокировке */
@media (max-width: 576px) {
  .blocked-account-message {
    padding: 1rem 0.8rem;
    gap: 0.75rem;
  }
  
  .blocked-account-message i {
    font-size: 1.3rem;
  }
  
  .blocked-message-content h3 {
    font-size: 1rem;
  }
  
  .blocked-message-content p {
    font-size: 0.85rem;
  }
}
</style>